Autor |
Nachricht |
bbcsb
Threadersteller
Dabei seit: 09.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 06.09.2009 21:44
Titel Div-Element erzeugt kein Zeilenumbruch |
|
|
Hallo zusammen,
ich habe ein kleines Problem und zwar dachte ich immer, dass Block-Elemente wie z.B. div´s einen automatischen Zeilenumbruch erzeugen... In meinem Beispiel erzeugt das div mit der Klasse "content_l" leider keinen Umrbuch und ich habe keine Ahnung wieso
Hier das HTML der Seite:
Code: |
<div class="site">
<div class="header"><span class="guildname">Deine Gilde</span></div>
<div>
<div style="width:206px;float:left">
<img src="img/nav_top.png" style="width:206px;height:38px;padding-left:18px" />
<div class="nav_element">
<div id="menu_1" class="nav_top" style="background-image:url(img/nav_open.jpg);" onclick="menu(1)">Menüpunkt</div>
<ul id="nav_1" class="nav_child1" style="display:block">
<li class="icon">Punkt 2</li>
<ul class="nav_child2">
<li>Hallo</li>
<li>Hallo</li>
</ul>
</ul>
</div>
<img src="img/nav_bottom.gif" style="width:190px;height:15px;padding-left:34px" />
</div>
<div style="margin-left:224px;width:929px">
<div class="content_top"></div>
<div style="background:url(img/conent_back.gif)">
<div class="content_l"> askjdhadjsjasdasasasadasdsdadasdwqdqadqwdwdwdqdqdyxcadsaddsasdasdasdadasdasdasdasdsadasadaaaaaaaaaaaaaaaaaaaadddddddddddd
</div>
<div class="content_r">
askjdhadjsjasd
</div>
</div>
<div class="content_footer"></div>
</div>
</div>
</div>
|
Das CSS:
Code: | body {background-color:#1b0000;padding:0;margin:0;font-family:Verdana, Arial, Helvetica, sans-serif}
div.site {padding:auto;margin:auto;width:1233px;}
div.header {background-image:url(img/header.png);background-repeat:no-repeat;width:1233px;height:369px}
div.nav_element {background-image:url(img/nav_back.png);background-repeat:repeat-y;width:190px;margin-left:34px;float:left}
div.nav_top {width:163px;height:26px;font-size:13px;font-weight:bold;color:#d09f28;margin-left:12px;background-repeat:no-repeat;padding-left:34px;padding-top:4px;cursor:pointer}
ul.nav_child1 {color:white;font-size:12px;list-style-type:none;padding-left:37px;}
ul.nav_child2 {list-style-type: square}
span.guildname {font-size:22px;text-align:center;color:#dbbc85;font-weight:bold;padding-top:94px;display:block}
div.content_top {background:url(img/conent_top.gif) no-repeat;height:43px}
div.content_footer {background:url(img/conent_footer.gif) no-repeat;height:75px}
div.content_l {padding-left:58px;border:2px solid green;float:left;width:580px;margin-right:54px; white-space:nowrap}
div.content_r {} |
Das Ganze sieht dann so aus wie auf dem Beispielbild...
Vielen Dank schonmal für eure Hilfe
Zuletzt bearbeitet von bbcsb am So 06.09.2009 21:48, insgesamt 1-mal bearbeitet
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst So 06.09.2009 21:58
Titel
|
|
|
Wenn Du damit meinst, dass das lange Wort nicht auseinandergerissen wird - das ist normal Kein Browser macht das, denn ohne Leerzeichen auch kein Umbruch. Es sei denn Du verwendest die von MS erfundene (später allerdings auch in CSS 3 aufgenommene) Eigenschaft word-wrap mit dem Wert break-word. Außer dem IE kann das inzwischen z.B. auch FX ab 3.5.
Dennoch: Das div selber erzeugt natürlich einen Zeilenumbruch, d.h. per default wird es immer in einer neuen Zeile stehen. Das hat aber nichts damit zu tun, wie es mit seinem Inhalt umgeht. Elemente, die ihren Inhalt auch ohne white-space trennen, gibt es nicht (das ist nur mit besagter CSS-Eigenschaft möglich).
Übrigens ist Dein white-space: nowrap; in diesem Zusammenhang als äußerst kontraproduktiv zu bezeichnen, denn damit gibt es einen Umbruch noch nicht einmal mehr bei Leerzeichen
Zuletzt bearbeitet von heiko_rs am So 06.09.2009 22:02, insgesamt 3-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
bbcsb
Threadersteller
Dabei seit: 09.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 06.09.2009 22:25
Titel
|
|
|
Wupsalla... ich sahs wohl heute zu lange davor, sowas dummes zu übersehen ist schon peinlich ^^ Das nowrap stammt noch aus einem anderen Versuch... Danke für die Hilfe
|
|
|
|
|
|
|
|
Ähnliche Themen |
über css ein Element nach definiertem Element ansprechen
[PHP] Kontaktformular erzeugt nur Fehlermeldung
Umlautdomain und Flash erzeugt Fehler
Wie erzeugt man solche schönen effekte?
[JavaScript] Erzeugt Fehler im Firefox
[Freehand MX] Exportieren erzeugt Fehlermeldung
|
|