CSS-Problem mit display
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absatz
angabe
beide container
beitrag
blenden
container
display
element
elemente
hilfe
inneren container
interpretiert beitrag
komische beschreibung
lsen
lsung
nebeneinander
opus
rahmen
textinhalt
vielen dank
-
Ich versuche gerade 2 div-Container nebeneinander zu platzieren, der erste hat eine width-Angabe.
Ich versuchte also zuerst die Container mit display: inline; nebeneinander zu platzieren. Dies hat zwar funktioniert, leider wird dann aber die Angabe width ignoriert (Firefox, Opera). Nur beim IE hat's funktioniert (ein Wunder).
Ich machte mich auf der Seite css4you.de etwas schlau und da fand ich folgende Angabe:
inline-block
Das Element ist eine Mischung aus einem Block- und einem Inline-Element. Es wird als Block-Element formatiert, du kannst Breite, Höhe und Außenabstand angeben, floatet aber wie Inline-Elemente in der Zeile.
Test-Ergebniss:
Firefox: der Absatz wird trozdem erzeugt, dafür wird jetzt die width-Angabe nicht mehr ingnoriert.
Opera: der Absatz wird nicht erzeugt und die width-Angabe wird nicht mehr ingnoriert. So wie ich es haben will. :)
IE: Gleich wie Firefox
Fazit: Mit dem Firefox (überigens mein lieblings Browser) funktioniert es überhaupt nicht. Mit IE und Opera funktioniert je eine Variante.
Kennt jemand eine Lösung, die von allen 3 Browsern akzeptiert wird? Vielen Dank für eure Hilfe! ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das, was du suchst, ist "float":
<div style="float:left;width:100px">linker DIV</div> <div style="width:200px">rechter DIV</div> -
Hier nochmal zum Nachschlagen auf CSS4you:
http://www.css4you.de/float.html
Wenn du CSS infos suchst wirste da schnell fündig ;) -
Nein, mit float hab ich es auch schon probiert. Das Problem mit float ist, dass nur der Text des 2. Divs nach rechts verschoben wird. Der div-Container ansich wird nicht beeinflusst -> Da beide Container einen Rahmen, sowie einen Hintergrund haben, sieht es mit float doof aus. :( Weiss jemand noch eine andere Lösung?
Edit: Juhu, die float-Methode hat doch funktioniert. Ich musste aber zusätzlich beim 2. Container noch display: inline; angeben. :D
Vielen Dank!
Beitrag geändert: 8.8.2007 22:02:55 von colon -
Neues Problem:
Da jetzt beide Container keine Block-Elemente mehr sind wird der Container, indem sich diese 2 befinden, nicht mehr um die Container herum gezogen.
Komische Beschreibung. ^^ Am Besten schaut ihr euch diesen Screenshot(http://i13.tinypic.com/62r3l9w) an. ;)
Ich dachte mir also, ich füge einfach einen dritten Container ein, der ein Block-Element ist. Hat nur teilweise funktioniert, da der Container einen Textinhalt braucht, damit er die gleiche Grösse hat wie die ersten Beiden. Ohne einen Textinhalt sieht es etwa gleich, aus wie im Screenshot.
Da dieser Textinhalt störend ist, dachte ich mir blende ich ihn mit display: none; aus. Hat aber auch nicht funktioniert, weil dann der ganze Container nicht mehr als Block-Element angeschaut wird. :(
Ich habe auch versucht, aus einem der inneren Container ein Block-Element zu machen (display: block; ). Diese Angabe wird jedoch ignoriert.
Kann mir jemand sagen wie ich das Problem lösen könnte?
Entweder muss also ein dritter Container eingefügt werden, der nicht sichtbar, aber trotzdem ein Block-Element ist. Oder aus einem der ersten beiden Containern muss ein Block-Element gemacht werden. Oder es gibt eine andere Lösung?
Beitrag geändert: 9.8.2007 22:15:10 von colon -
Wie sieht denn dein Quellcode jetzt aus? Etwa so?
<div> <div style="float:left">Autor</div> <div>Beitrag</div> </div>
Dann versuchs mal so:
<div> <div style="float:left">Autor</div> <div>Beitrag</div> <p style="clear:both;font-size:2px;margin:0;padding:0;"> </p> </div> -
sandrock-jonas schrieb:
Wie sieht denn dein Quellcode jetzt aus? Etwa so?
So:
<div> <div style='float:left'>Autor</div> <div style='float:left'>Beitrag</div> </div>
Natürlich noch mit den Angaben, wie Rahmen, Breite, Padding, etc. ;)
Ich konnte es jetzt lösen, indem ich hinter dem Beitrags-Container, einen normalen div-Container mit "& nbsp;" als Inhalt gemacht habe. Vielen Dank für deine Hilfe, sandrock-jonas. Deine Lösungsmöglichkeit hätte überigens auch funktioniert, jedoch wurde sie von allen Browsern etwas anders interpretiert. :/
Beitrag geändert: 11.8.2007 21:05:49 von colon -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
