[GastForen Web allgemein HTML und CSS / Stylesheets Umbruch von Objekten innerhalb DIV-Container verhindern

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Umbruch von Objekten innerhalb DIV-Container verhindern

DNS
Beiträge gesamt: 227

23. Feb 2007, 16:47
Beitrag # 1 von 8
Bewertung:
(6274 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Leute!

Ich bastele eine kleine Seite mit alten Kameraprospekten. Ich möchte jeweils ein Bild (von dem Prospekt) mit einem kurzen Begleittext versehen, und zwar so, dass der Text rechts obenbündig neben dem Bild steht. Dazu - so dachte ich mir - packe ich ein Bild mit Text in einen DIV-Container, und lasse die einzelnen Container links floaten. Somit wird also eine Zeile mit Containern gefüllt, und am rechten Fensterrand wird umgebrochen, und der nächste Container rutscht in die nächste Zeile. Etwa so:
Code
.container { float:left; } 

<div class="container">
<div class="bild"><img src="..."></div>
<div class="text">text</div>
</div>

Jetzt habe ich natürlich das Problem, dass am rechten Fensterrand, bevor der ganze Container umgebrochen wird, erstmal der Inhalt umgebrochen wird. Das bedeutet, dass der Text unter das Bild rutscht - und das soll auf keinen Fall passieren.

Als Ausweg habe ich das erst mal mit einer 2-spaltigen Tabelle als Container geschrieben:
Code
<table class="container"> 
<tr>
<td class="bild"><img src="..."></td>
<td class="text">...</td>
</tr>
</table>

Das klappt auch wunderbar, aber kann ich das nicht irgendwie mit DIVs lösen?

Hier noch vorläufige Seite:
http://minolta.eazypix.de/promo/cameras/div.html
und hier die CSS-Datei:
http://minolta.eazypix.de/...eras/minolta_div.css

Vielen Dank für Tipps und Denkanstöße.
X

Umbruch von Objekten innerhalb DIV-Container verhindern

SabineP
Beiträge gesamt: 7586

23. Feb 2007, 18:18
Beitrag # 2 von 8
Beitrag ID: #278197
Bewertung:
(6264 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo DNS,

so sollte es klappen:

.container { float:left; }

<div class="container">
<img src="..." align="left">text ...
</div>


als Antwort auf: [#278181]

Umbruch von Objekten innerhalb DIV-Container verhindern

DNS
Beiträge gesamt: 227

23. Feb 2007, 18:53
Beitrag # 3 von 8
Beitrag ID: #278202
Bewertung:
(6258 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine!

Das klappt leider nicht, da der Text auch Umbrüche <br> enthält, und daher nur die erste Zeile neben dem Bild erscheint, der Rest darunter. Außerdem passiert so genau das gleiche, wenn dem Container der Platz ausgeht: Der gesamte Text wird unter das Bild gebrochen. Der Container bräuchte eine fixe Breite, aber die kann ich ihm nicht geben, da die Bilder unterschiedlich breit sind. Außerdem sollen ja alle Eigenschaften in der entsprechenden CSS-Klasse definiert sein, weswegen ich ja auch die Klassen .bild und .text definiert habe. Ich bräuchte etwas ähnliches wie "white-space: nobreak" auf "Objektebene".

Trotzdem Danke,
Gruß,
Dennis.


als Antwort auf: [#278197]

Umbruch von Objekten innerhalb DIV-Container verhindern

SabineP
Beiträge gesamt: 7586

23. Feb 2007, 20:40
Beitrag # 4 von 8
Beitrag ID: #278206
Bewertung:
(6246 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Bei mir klappt das eigentlich ganz gut.
Welcher Browser kann das denn nicht?

Codebeispiel:

Code
<html> 
<head>
<style type="text/css">
.container {float:left;}
</style>
</head>

<body>
<div class="container">
<img src="http://minolta.eazypix.de/promo/cameras/sr1blue.jpg" width="213" height="300" alt="" align="left">
<span class="bigger">MINOLTA SR-1</span><br>SINGLE LENS REFLEX SYSTEM<br><br>
10 pages<br><br>
code: <br>CAT. #SR &ndash; 104<br><br>
camera: <br>SR-1 model b
</div>

<div class="container">
<img src="http://minolta.eazypix.de/promo/cameras/sr1blue.jpg" width="213" height="300" alt="" align="left">
<span class="bigger">MINOLTA SR-1</span><br>SINGLE LENS REFLEX SYSTEM<br><br>
10 pages<br><br>
code: <br>CAT. #SR &ndash; 104<br><br>
camera: <br>SR-1 model b
</div>

<div class="container">
<img src="http://minolta.eazypix.de/promo/cameras/sr1blue.jpg" width="213" height="300" alt="" align="left">
<span class="bigger">MINOLTA SR-1</span><br>SINGLE LENS REFLEX SYSTEM<br><br>
10 pages<br><br>
code: <br>CAT. #SR &ndash; 104<br><br>
camera: <br>SR-1 model b
</div>


</body>
</html>


>> Ich bräuchte etwas ähnliches wie "white-space: nobreak"

Vielleicht hilft Dir ja auch noch
white-space: nowrap
für die Klasse .container

http://de.selfhtml.org/...tung.htm#white_space


als Antwort auf: [#278202]

Umbruch von Objekten innerhalb DIV-Container verhindern

DNS
Beiträge gesamt: 227

24. Feb 2007, 17:29
Beitrag # 5 von 8
Beitrag ID: #278247
Bewertung:
(6229 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ SabineP ] Bei mir klappt das eigentlich ganz gut.


Oops, stümmt 8-)

Der Fehler lag woanders: Ich habe den IMG-Tag mit der Klasse "bild" verdingst, und die befiehlt u.a.:

vertical-align: top;

was dann dazu führt, dass der Text nach dem ersten <br> komplett unters Bild gebrochen wird. Bei der Notation mit DIV ist das ja allerdings nicht notwendig, daher kann ich das rausschmeißen und *dieses* Problem wäre gelöst. Dafür habe ich jetzt ein anderes:
Da ja der IE großzügigerweise MIN-WIDTH ignoriert, lässt er den DIV-Container zusammenschnurren, und dabei kann es passieren, dass der Text dann unters Bild gebrochen wird. Bei FF passiert das nicht, da wird der Container ordnungsgemäß komplett umgebrochen - aber wenn der Text zu lange ist, wird er auch dort unters Bild gebrochen. Das ist wohl nicht zu verhindern?

Vielen Dank und Gruß,
Dennis.


als Antwort auf: [#278206]

Umbruch von Objekten innerhalb DIV-Container verhindern

DNS
Beiträge gesamt: 227

24. Feb 2007, 17:47
Beitrag # 6 von 8
Beitrag ID: #278250
Bewertung:
(6225 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Jetzt habe ich den Übeltäter:

Wenn ich Deinen Code komplett übernehme, dann tritt der geschilderte Fehler nicht auf.

Wenn ich aber oben explizit die HTML-Variante STRICT bestimme, oder den DTD-Url angebe, dann tritt dieser Fehler auf.

Also:

Ohne DOCTYPE und mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
tritt der Fehler nicht auf.

Aber mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
tritt der Fehler auf.

Was nun? Ich dachte, man sollte möglichst STRICT verwenden? Den DOCTYPE komplett weglassen "geht doch nicht", oder?

Dennis.


als Antwort auf: [#278247]

Umbruch von Objekten innerhalb DIV-Container verhindern

SabineP
Beiträge gesamt: 7586

24. Feb 2007, 18:56
Beitrag # 7 von 8
Beitrag ID: #278254
Bewertung:
(6217 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Denis,

nimm diesen Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

denn der paßt zu Deinem HTML-Code.


als Antwort auf: [#278250]

Umbruch von Objekten innerhalb DIV-Container verhindern

DNS
Beiträge gesamt: 227

25. Feb 2007, 19:08
Beitrag # 8 von 8
Beitrag ID: #278299
Bewertung:
(6181 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Der passt zu meinem HTML-Code?!

Ich habe mich eigentlich bemüht, STRICT zu codieren, und habe mir das auch validieren lassen. Ist es nicht vielleicht eher (wieder mal) ein Bug im IE?

Trotzdem noch mal Danke soweit.

Gruß,
Dennis.


als Antwort auf: [#278254]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/