Umbruch von Objekten innerhalb DIV-Container verhindern

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

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

DNS

Beiträge gesamt: 227

23. Feb 2007, 16:47
Beitrag # 1 von 8
Bewertung:
(6727 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.

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:
(6717 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:
(6711 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:
(6699 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:
(6682 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:
(6678 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:
(6670 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:
(6634 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]

Aktuell

PDF / Print

callas software veranstaltet Webinar rund um den Etikettendruck

| 14.12.2023

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.

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

Veranstaltungen

17.04.2024

Und es geht doch: Automatisierung im Großformatdruck!

Online
Mittwoch, 17. Apr. 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!

Weitere Events

Neuste Foreneinträge

Lizenzfrage – Windows-Schriften in Linux einsetzen

Eizo Monitorkalibrierung auf Windows

Fußnoten zu Endnoten konvertieren

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Platzierte Vektorgrafiken skalieren

SMS ab Server senden? Wie geht das?

WebShare Verzeichnisse im SharePoint erstellen

Buchsrabensteuerung

Klickbare Links zu Seiten in einem Buch aus extern erzeugtem Index erstellen

Gleiche Ebene mit untersch. Fonts in Text + autom. IHVZ: Probleme mit Kursivierung

Weitere Stellenangebote