Nebeneinander ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
bereich
bild
blocken
code
display
eigenschaft
entfernen
ergebnis
funktion
http
image
korrektur
monat
objekt
papierkorb
partner
radius
text
url
-
Ich habe versucht 2 Objekte auf meiner Seite nebeneinander zu Platzieren, habe es mit float versucht nur werden diese "Schief" angezeigt.
Meine Website www.yugato.de
Die Elemte die ich nebeneinader haben möchte sind
Partner und User des Monats
Hoffentlich habe ich mich verständlcih ausgedrückt.
Beitrag zuletzt geändert: 7.2.2010 19:02:47 von yugato -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du musst beiden "Objekten" (ich gehe mal von div-Elementen aus) float:left; geben.
Dann funktioniert das auch. -
yugato schrieb:
Ich habe versucht 2 Objekte auf meiner Seite nebeneinander zu Platzieren, habe es mit float versucht nur werden diese "Schief" angezeigt.
Meine Website www.yugato.de
Die Elemte die ich nebeneinader haben möchte sind
Partner und User des Monats
Hoffentlich habe ich mich verständlcih ausgedrückt.
Gib " User des Monats" eine andere ID und "style="float: left;"
"Partner" und "User des Monats" haben beide dieselbe ID (trow4)
so sieht das aus wenn ich die id zu "trow5" ändere & ein style="float: left;" hinzufüge.
Musst also dann noch die restlichen css-attribute einfügen.
Bzw wäre sowieso besser wenn du ein "class"-namen vergibst anstatt über die id zu arbeiten.
.headerboxen {blabla} </style> </head> <bod> <div class="headerboxen"></div>
Beitrag zuletzt geändert: 7.2.2010 19:22:32 von simuliertes -
simuliertes schrieb:
yugato schrieb:
Ich habe versucht 2 Objekte auf meiner Seite nebeneinander zu Platzieren, habe es mit float versucht nur werden diese "Schief" angezeigt.
Meine Website www.yugato.de
Die Elemte die ich nebeneinader haben möchte sind
Partner und User des Monats
Hoffentlich habe ich mich verständlcih ausgedrückt.
Gib " User des Monats" eine andere ID und "style="float: left;"
"Partner" und "User des Monats" haben beide dieselbe ID (trow4)
so sieht das aus wenn ich die id zu "trow5" ändere & ein style="float: left;" hinzufüge.
Musst also dann noch die restlichen css-attribute einfügen.
Bzw wäre sowieso besser wenn du ein "class"-namen vergibst anstatt über die id zu arbeiten.
.headerboxen {blabla} </style> </head> <bod> <div class="headerboxen"></div>
Ich will nicht das es so aussieht !
Ich will das die zwei Boxen NEBENEINANDER PLATZIERT sind.
Habe beide mit float: left; probiert kommt aber wieder dasselbe Ergebnis.
http://yugato.lima-city.de/images/screen5.png
Es ist zwar so in der Richtung, nur das die Zwei im Dunkelviolett Bereich sein sollen, dieser ist hier eingerückt. -
Also display:inline-block; in meine CSS Date an die zwei divs ranhängen ?
Funktioniert nicht...
So habe ich es gemacht
#trow4 { background: #6B4668; color: #fff; border: 1px solid #000; height: auto; padding: 10px; width: 150px; display:inline-block; } #trow5 { background: #6B4668; color: #fff; border: 1px solid #000; height: auto; padding: 10px; width: 150px; display:inline-block; }
<div id="trow4">bla bla</div>
<div id="trow5">bla bla</div>
Was ist falsch ? -
nerdinator schrieb:
Float halte ich für eine prinzipiell beschissene Lösung, da dadurch genau der beschriebene Effekt zustande kommt. Versuche es mit "display:inline".
EDIT
Korrektur: display:inline-block;
Die Korrektur kannst du wieder entfernen ;)
Außerdem ist die CSS-Eigenschaft float dazu da, div-Container auszurichten.
Die Angabe inline ist korrekt. Inline-block wird von Browsern wie z.B. Internet Explorer nicht korrekt dargestellt.
Gruß,
dex -
Du hast da ein <br>-Tag dazwischen den musst du entfernen.
-
Wenn du es so machst, werden beide nebeneinander angezeigt
:
#trow4 { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; background:#6B4668 url(http://yugato.lima-city.de/images/perfectbrush3.png) no-repeat fixed right bottom; border:1px solid #000000; color:#FFFFFF; display:inline; height:auto; padding:10px; width:150px; float:left; } -
Einfachere und bessere lösung:
ein <br style="clear:both"> vor dem ende des panels einfügen.
#trow4 { background-attachment: fixed; background: #6B4668 url(http://yugato.lima-city.de/images/perfectbrush3.png) no-repeat fixed 100% 100%; background-image: url(http://yugato.lima-city.de/images/perfectbrush3.png); background-position: 100% 100%; background-repeat: no-repeat; border: 1px solid black; color: white; display: inline-block; height: auto; padding: 10px; width: 150px; float: left; }
und das wars. natürlich noch das <br> zwischen den divs entfernen.
edit:
Natürlich noch die ganzen firefox sachen aber die wirken bei anderen browsern ja eh nicht.
such dir dazu mal die für andere raus. webkit usw.
Beitrag zuletzt geändert: 8.2.2010 15:00:31 von karlsve -
qap2 schrieb:
Schwachsinn, Float ist für (text)umfluss, für div-positionierung gibt es die display-funktion.
nerdinator schrieb:
Float halte ich für eine prinzipiell beschissene Lösung, da dadurch genau der beschriebene Effekt zustande kommt. Versuche es mit "display:inline".
EDIT
Korrektur: display:inline-block;
Die Korrektur kannst du wieder entfernen ;)
Außerdem ist die CSS-Eigenschaft float dazu da, div-Container auszurichten.
Die Angabe inline ist korrekt. Inline-block wird von Browsern wie z.B. Internet Explorer nicht korrekt dargestellt.
Gruß,
dex
-
yugato schrieb:
Ich will nicht das es so aussieht !
Ich will das die zwei Boxen NEBENEINANDER PLATZIERT sind.
Habe beide mit float: left; probiert kommt aber wieder dasselbe Ergebnis.
http://yugato.lima-city.de/images/screen5.png
Es ist zwar so in der Richtung, nur das die Zwei im Dunkelviolett Bereich sein sollen, dieser ist hier eingerückt.
Wenn DU Dir die mühe machen würdest meinen Text auch mal zu lesen dann wüsstest Du das sie NEBENEINANDER PLAZIERT SIND!
Du willst das es so aussieht?
Steht alles in meinem Beitrag wie Du es machen musst.
Übrigens solltest Du Dir mal anschauen wie Deine Seite in anderen Browsern aussieht.
Nämlich mal so zum Beispiel.
-
simuliertes schrieb:
Wenn DU dir die Mühe machen würdest, seinen Text zu lesen, ist sein Problem, dass bei float:left; die entsprechenden Bereiche nicht mehr im div#panel stehen, bzw. das div#panel annimmt, dass kein inhalt vorhanden ist.
Wenn DU Dir die mühe machen würdest meinen Text auch mal zu lesen dann wüsstest Du das sie NEBENEINANDER PLAZIERT SIND!
Du willst das es so aussieht?
Steht alles in meinem Beitrag wie Du es machen musst.
Übrigens solltest Du Dir mal anschauen wie Deine Seite in anderen Browsern aussieht.
Nämlich mal so zum Beispiel.
Die float-Eigenschaft ist nicht zur Div-Positionierung gedacht, sondern wie der Name schon sagt für den Textumfluss zuständig. Diese Funktion zu zweckentfremden, verzerrt die Darstellung nur.
Deine Antwort war also schlicht falsch. -
nerdinator schrieb:
Wenn DU dir die Mühe machen würdest, seinen Text zu lesen, ist sein Problem, dass bei float:left; die entsprechenden Bereiche nicht mehr im div#panel stehen, bzw. das div#panel annimmt, dass kein inhalt vorhanden ist.
Die float-Eigenschaft ist nicht zur Div-Positionierung gedacht, sondern wie der Name schon sagt für den Textumfluss zuständig. Diese Funktion zu zweckentfremden, verzerrt die Darstellung nur.
Deine Antwort war also schlicht falsch.
selfHTML schrieb:
Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.
Diese Lösung von mir ist jedenfalls mit float gemacht.
Da es aber immer mehrere Wege zum Ziel gibt möchte ich mir nicht anmaßen zu sagen das es anders nicht auch geht.
EDIT:
Hier kannst Du Dir das ergebnis anschauen.
einzig geänderte Zeile:
<div id="trow4" style="float: left;">
Sollte diese Positionierung nicht dem entsprechen was Yugato wollte oder in irgendeinem Browser nicht so angezeigt werden erhelle mich.
Beitrag zuletzt geändert: 8.2.2010 15:08:49 von simuliertes -
Es bleibt noch immer eine Zweckentfremdung der Funktion.
Diese Lösung ist auf jeden Fall falsch. Zu dieser Lösung kann ich nichts sagen, da ich den Quellcode nicht sehe.
Float ist zum Umfluss da. Das hat noch immer so gut wie nichts mit der positionierung zu tun. Mehr dazu irgendwo hier. Mir ist die Diskussion jetzt gerade zu müßig. Fakt ist: Float ist an der Stelle schlicht falsch, selbst wenn es zum gewünschten Ergebnis führt. Basta. -
nerdinator schrieb:
Es bleibt noch immer eine Zweckentfremdung der Funktion.
Diese Lösung ist auf jeden Fall falsch. Zu dieser Lösung kann ich nichts sagen, da ich den Quellcode nicht sehe.
Float ist zum Umfluss da. Das hat noch immer so gut wie nichts mit der positionierung zu tun. Mehr dazu irgendwo hier. Mir ist die Diskussion jetzt gerade zu müßig. Fakt ist: Float ist an der Stelle schlicht falsch, selbst wenn es zum gewünschten Ergebnis führt. Basta.
Thema hat sich eh erledigt, will hier auch keinen Diskussionsthreat draus machen, der Threadersteller doktort anscheinend weiter fröhlich an seiner Seite herum ohne das hier zu lesen.
nerdinator kann es sein das Du die links vertauscht hast und es genau andersherum meintest ?
However , selbst mein html-beispiel (das hier ) kann nicht mehr nachvollzogen werden weil ich auf die (nun gelöschte) original css-Datei http://www.yugato.de/fstyle.css verwiesen habe...
Edit: btw Der eine link von mir (das Bild) war nur ein Screenshot vom anderen Link.
Beitrag zuletzt geändert: 8.2.2010 16:49:44 von simuliertes -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
