Zeilenumbruch nach <div> verhindern?

ljungi · 18.08.2006, 22:45

Hallo,

da ich derzeit an einem neuen Projekt arbeite und das möglichst valide machen will, hab ich mich für eine fast reine CSS-Lösung entschieden. (Datenfelder werden in einer Tabelle bleiben)...

Doch die eigentliche Frage ist nun, wie ich nach einem <div> einen Zeilenumbruch verhindern kann.

HTML-Code:

<div id="left" style="clear:right;">
  <img src="images/design/style/button_startseite.jpg" alt="Startseite" />
    <div id="leftinleft">
    <img src="images/design/style/mainsite_38.jpg" alt="Linke Bar" />
  </div>
</div>

Code:

#left {
    float:left;
}
#leftinleft {
    width: 53px;
    margin: 0px;
    position: absolute;
}

Doch leider wird zwischen den beiden Div-layern ein Zeilenumbruch geschoben.

divbreak.png

Könnt ihr mir helfen?

Ist mir noch zu helfen?

WarrenFaith · 18.08.2006, 22:56

mein hardcoretestquellcode offenbart: das problem liegt woanders:

Code:

<html>
<body>
<div style="background-color: gold;">1</div>
<div style="background-color: blue;">2</div>
<div><div style="background-color: green;">3</div></div>
</body>
</html>

wie man sieht gibt es keinen zeilenumbruch. vielleicht solltest du mal schauen, ob du irgendwo ein umbruch direkt im html einbaust?
am besten zu testen wenn du einfach die <div>....</div> mal in eine zeile schreibst....
also:

Code:

 <div id="left" style="clear:right;"><img src="images/design/style/button_startseite.jpg" alt="Startseite" /><div id="leftinleft"><img src="images/design/style/mainsite_38.jpg" alt="Linke Bar" /></div></div>

ljungi · 18.08.2006, 23:02

Das dachte ich mir auch schon, aber Fehlanzeige. Der Umbruch bleibt drin.

pichfl · 18.08.2006, 23:05

der Umbruch könnte auch vom Image kommen.

scheib mal in die CSS

Code:

img{ vertical-align:bottom; }

und was spräche dagegen, das image mit einer id auszustatten und dann mit display:block in ein blockelement zu verwandeln und so anstelle (des damit überflüssigen) divs zu positionieren?

WarrenFaith · 18.08.2006, 23:05

Fakt ist aber, irgendwo muss das bei dir herkommen... es liegt nicht am div.. mal geschaut ob woanders der margin-wert überschrieben wird oder ne position festgelegt oder oder oder?
notfalls erstmal nur ein total grobes grundgerüst bauen

am besten CSS live editieren mit dem firefox und der web developers extension dort kannst du dann auch alle container optisch hervorheben über die deine maus sich bewegt. damit sieht man ne menge ungenauigkeiten in den divs. nur zu empfehlen....

ljungi · 18.08.2006, 23:08

Zitat:

Zitat von pichfl

der Umbruch könnte auch vom Image kommen.

scheib mal in die CSS

Code:

img{ vertical-align:bottom; }

und was spräche dagegen, das image mit einer id auszustatten und dann mit display:block in ein blockelement zu verwandeln und so anstelle (des damit überflüssigen) divs zu positionieren?

Danke, das klappt wunderbar!

Was dagegen spräche wäre die Anzahl der Bilder, oder hab ich da was missverstanden?

Warren, was ist denn das für eine Extension?
Und das Grundgerüst ist total primitiv ^^
Kein anderes Bild wird mit einer absoluten Position belegt.

Und wie kann ich in Linux die Site im IE testen? ^^

WarrenFaith · 18.08.2006, 23:56

https://addons.mozilla.org/firefox/60/ das is die extension die ich eigentlich jedem entwickler empfehle... sehr gute tools enthalten...

ljungi · 19.08.2006, 00:48

Danke, das ist wirklich nützlich...

Im Opera und im Firefox sieht das Design nun perfekt aus.
Habe einen kumpl gefragt - im IE solls immer für ne Sekunde perfekt aussehen und wird dann zerstört...

Muss ich mich morgen wohl noch mal in XP reinsetzen und dem IE seine Extrawurst braten -.-

pichfl · 19.08.2006, 21:18

zu meiner lösung: hatte wenig zeit, daher jetzt ausführlich. Browser behandeln Bilder quasi wie ein Wort. daher hat es oberlänge und unterlänge, was einen kleinen Abstand nach unten bzw oben vom Bild aus erzwingt. Wenn ich das Bild aber auf der Textachse am unteren Rand ausrichte, verschwinden diese abstände.

zu meinem Tip mit der ID: wenns mehr Bilder sind kann man natürlich nicht anders.

ljungi · 19.08.2006, 21:31

Alles klar. Danke

Hab das nun auch mit nur 2 kleinen Extrawünschen für den IE hinbekommen... Mich hats gewundert, dass es so schnell ging...

Bin dann mal wieder 007 schauen .

18.08.2006, 22:45	Nach oben #1
ljungi Blubb... öfz Registriert seit: 16.03.2006 Ort: Berlin Beiträge: 419	Zeilenumbruch nach <div> verhindern? Hallo, da ich derzeit an einem neuen Projekt arbeite und das möglichst valide machen will, hab ich mich für eine fast reine CSS-Lösung entschieden. (Datenfelder werden in einer Tabelle bleiben)... Doch die eigentliche Frage ist nun, wie ich nach einem <div> einen Zeilenumbruch verhindern kann. HTML-Code: <div id="left" style="clear:right;"> <img src="images/design/style/button_startseite.jpg" alt="Startseite" /> <div id="leftinleft"> <img src="images/design/style/mainsite_38.jpg" alt="Linke Bar" /> </div> </div> Code: #left { float:left; } #leftinleft { width: 53px; margin: 0px; position: absolute; } Doch leider wird zwischen den beiden Div-layern ein Zeilenumbruch geschoben. divbreak.png Könnt ihr mir helfen? Ist mir noch zu helfen? __________________ Vive la France! Welcome to Sarkoworld...

18.08.2006, 22:56	Nach oben #2
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.653	mein hardcoretestquellcode offenbart: das problem liegt woanders: Code: <html> <body> <div style="background-color: gold;">1</div> <div style="background-color: blue;">2</div> <div><div style="background-color: green;">3</div></div> </body> </html> wie man sieht gibt es keinen zeilenumbruch. vielleicht solltest du mal schauen, ob du irgendwo ein umbruch direkt im html einbaust? am besten zu testen wenn du einfach die <div>....</div> mal in eine zeile schreibst.... also: Code: <div id="left" style="clear:right;"><img src="images/design/style/button_startseite.jpg" alt="Startseite" /><div id="leftinleft"><img src="images/design/style/mainsite_38.jpg" alt="Linke Bar" /></div></div> __________________ I did it my way - Senseless-Blog Weihnachtsgeschenk? Schülern helfen - Bodypainting Kalender für 2009

18.08.2006, 23:02	Nach oben #3
ljungi Blubb... öfz Registriert seit: 16.03.2006 Ort: Berlin Beiträge: 419	Das dachte ich mir auch schon, aber Fehlanzeige. Der Umbruch bleibt drin. __________________ Vive la France! Welcome to Sarkoworld...

18.08.2006, 23:05	Nach oben #4
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	der Umbruch könnte auch vom Image kommen. scheib mal in die CSS Code: img{ vertical-align:bottom; } und was spräche dagegen, das image mit einer id auszustatten und dann mit display:block in ein blockelement zu verwandeln und so anstelle (des damit überflüssigen) divs zu positionieren?

18.08.2006, 23:05	Nach oben #5
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.653	Fakt ist aber, irgendwo muss das bei dir herkommen... es liegt nicht am div.. mal geschaut ob woanders der margin-wert überschrieben wird oder ne position festgelegt oder oder oder? notfalls erstmal nur ein total grobes grundgerüst bauen am besten CSS live editieren mit dem firefox und der web developers extension dort kannst du dann auch alle container optisch hervorheben über die deine maus sich bewegt. damit sieht man ne menge ungenauigkeiten in den divs. nur zu empfehlen.... __________________ I did it my way - Senseless-Blog Weihnachtsgeschenk? Schülern helfen - Bodypainting Kalender für 2009

18.08.2006, 23:56	Nach oben #7
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.653	https://addons.mozilla.org/firefox/60/ das is die extension die ich eigentlich jedem entwickler empfehle... sehr gute tools enthalten... __________________ I did it my way - Senseless-Blog Weihnachtsgeschenk? Schülern helfen - Bodypainting Kalender für 2009

19.08.2006, 00:48	Nach oben #8
ljungi Blubb... öfz Registriert seit: 16.03.2006 Ort: Berlin Beiträge: 419	Danke, das ist wirklich nützlich... Im Opera und im Firefox sieht das Design nun perfekt aus. Habe einen kumpl gefragt - im IE solls immer für ne Sekunde perfekt aussehen und wird dann zerstört... Muss ich mich morgen wohl noch mal in XP reinsetzen und dem IE seine Extrawurst braten -.- __________________ Vive la France! Welcome to Sarkoworld...

19.08.2006, 21:18	Nach oben #9
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	zu meiner lösung: hatte wenig zeit, daher jetzt ausführlich. Browser behandeln Bilder quasi wie ein Wort. daher hat es oberlänge und unterlänge, was einen kleinen Abstand nach unten bzw oben vom Bild aus erzwingt. Wenn ich das Bild aber auf der Textachse am unteren Rand ausrichte, verschwinden diese abstände. zu meinem Tip mit der ID: wenns mehr Bilder sind kann man natürlich nicht anders.

19.08.2006, 21:31	Nach oben #10
ljungi Blubb... öfz Registriert seit: 16.03.2006 Ort: Berlin Beiträge: 419	Alles klar. Danke Hab das nun auch mit nur 2 kleinen Extrawünschen für den IE hinbekommen... Mich hats gewundert, dass es so schnell ging... Bin dann mal wieder 007 schauen . __________________ Vive la France! Welcome to Sarkoworld...

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zeilenumbruch via \n geht nicht	felix	PHP-Programmierung	4	22.07.2007 21:18
Zeilenumbruch (und noch was) im Footer	Artemis	Fragen ans Team	1	07.07.2007 12:26
repaint verhindern	Gottzilla	Desktop-Applikationen und Grafik	4	11.08.2005 15:36
leerzeichen bei zeilenumbruch in einem string	mr.no	Allgemeine Java-Programmierung	13	09.01.2005 13:31
Zeilenumbruch bei FileWriter ?	Densi	Allgemeine Java-Programmierung	3	22.10.2004 17:47