PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Shop
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Contest-Bereich - 2D, 3D & Fotografie
2D-Contests - Monatscontests, User-Battles, ...
Brauche Hilfe mit verschachtelten Divs
Beitrag
<blockquote data-quote="kyle66" data-source="post: 746232"><p>Hallo,</p><p></p><p>damit er Rahmen um die inneren Divs rumgeht brauchts du noch ein</p><p></p><p>[CODE]</p><p>.clear {</p><p> clear: both;</p><p>}</p><p>[/CODE]</p><p></p><p>bzw.</p><p></p><p>[HTML]</p><p><div id="content"></p><p><!--linker Hauptbereich--></p><p> <div id="content_left"></p><p> <img src=""></p><p> </div></p><p><!--mittlerer Hauptbereich--></p><p> <div id="content_center"></p><p> <h3>TEXTBOX MITTE</h3></p><p> <br></p><p> TEXT</p><p> </div></p><p><!--rechter Hauptbereich--></p><p> <div id="content_right"></p><p> <h3>TEXTBOX RECHTS</h3></p><p> <br></p><p> TEXT</p><p> </div></p><p> <div class="clear"></div></p><p></div></p><p>[/HTML]</p><p></p><p>Durch die Floatenden Divs merkt das Parent-Div nicht, wie hoch es eigentlich werden sollte.</p><p></p><p>Wie du dann aber noch der mittleren Box eine Dynamische Breite mitgeben kannst, weiß ich nicht. Evtl. kannst du bei der mittleren Box die Breitenangabe weglassen und links und rechts einen margin mit der Breite der anderen Boxen mitgeben. Dann musst du aber die linke und rechte Box absolut positionieren, und somit funktioniert die dynamische Höhe nicht mehr</p><p></p><p>[HTML]</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p><p></p><p><html></p><p><head></p><p><title>Unbenannt</title></p><p><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></p><p><style type="text/css"></p><p>#content {</p><p> margin-top:25px;</p><p> background-color:#eeefed;</p><p> border:2px solid;</p><p> border-color:#a4ca9b;</p><p> clear:left;</p><p> position: relative;</p><p> min-width: 400px;</p><p>}</p><p></p><p>#content_center {</p><p> margin-left: 137px;</p><p> margin-right: 137px;</p><p> padding-left:25px;</p><p> padding-right:100px;</p><p> background: #f00;</p><p>}</p><p></p><p>#content_left {</p><p> width:137px;</p><p> height:200px;</p><p> position: absolute;</p><p> top: 19px;</p><p> right: 0px;</p><p> background: #f0f;</p><p>}</p><p></p><p>#content_right {</p><p> position: absolute;</p><p> width:137px;</p><p> margin-right:0px;</p><p> margin-top:0px;</p><p> top: 19px;</p><p> left: 0px;</p><p>}</p><p>.clear {</p><p> clear: both;</p><p>}</p><p></style></p><p></head></p><p></p><p><body></p><p><div id="content"></p><p><!--mittlerer Hauptbereich--></p><p> <div id="content_center"></p><p> <h3>TEXTBOX MITTE</h3></p><p> <br></p><p> TEXT</p><p> </div></p><p><!--linker Hauptbereich--></p><p> <div id="content_left"></p><p> <h3>Links</h3></p><p> <img src=""></p><p> </div></p><p><!--rechter Hauptbereich--></p><p> <div id="content_right"></p><p> <h3>TEXTBOX RECHTS</h3></p><p> <br></p><p> TEXT</p><p> </div></p><p> <div class="clear"></div></p><p></div></p><p></p><p></p><p></body></p><p></html></p><p>[/HTML]</p><p></p><p>Hallo nochmal,</p><p></p><p>was natürlich auch geht ist, das rechte Div nach rechts floaten zu lassen:</p><p></p><p>[HTML]</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p><p></p><p><html></p><p><head></p><p><title>Unbenannt</title></p><p><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></p><p><style type="text/css"></p><p>#content {</p><p> margin-top:25px;</p><p> background-color:#eeefed;</p><p> border:2px solid;</p><p> border-color:#a4ca9b;</p><p> clear:left;</p><p> position: relative;</p><p> min-width: 400px;</p><p>}</p><p></p><p>#content_left {</p><p> width:137px;</p><p> height:200px;</p><p> float: left;</p><p> background: #f0f;</p><p>}</p><p></p><p>#content_center {</p><p> padding-left:25px;</p><p> padding-right:100px;</p><p> background: #f00;</p><p> float: left;</p><p>}</p><p></p><p>#content_right {</p><p> width:137px;</p><p> margin-right:0px;</p><p> margin-top:0px;</p><p> float: right;</p><p> background: #0f0;</p><p>}</p><p>.clear {</p><p> clear: both;</p><p>}</p><p></style></p><p></head></p><p></p><p><body></p><p><div id="content"></p><p><!--linker Hauptbereich--></p><p> <div id="content_left"></p><p> <h3>Links</h3></p><p> <img src=""></p><p> </div></p><p><!--mittlerer Hauptbereich--></p><p> <div id="content_center"></p><p> <h3>TEXTBOX MITTE</h3></p><p> <br></p><p> TEXT</p><p> </div></p><p><!--rechter Hauptbereich--></p><p> <div id="content_right"></p><p> <h3>TEXTBOX RECHTS</h3></p><p> <br></p><p> TEXT</p><p> </div></p><p> <div class="clear"></div></p><p></div></p><p></p><p></p><p></body></p><p></html></p><p>[/HTML]</p><p></p><p>Das mittlere wird dann einfach immer Breite, je mehr Text drin steht. evtl. musst du dem mittleren Div noch ein max-width mitgeben. Das kann dann aber der IE6 nicht.</p><p></p><p>Beste Grüße</p><p>Kyle</p></blockquote><p></p>
[QUOTE="kyle66, post: 746232"] Hallo, damit er Rahmen um die inneren Divs rumgeht brauchts du noch ein [CODE] .clear { clear: both; } [/CODE] bzw. [HTML] <div id="content"> <!--linker Hauptbereich--> <div id="content_left"> <img src=""> </div> <!--mittlerer Hauptbereich--> <div id="content_center"> <h3>TEXTBOX MITTE</h3> <br> TEXT </div> <!--rechter Hauptbereich--> <div id="content_right"> <h3>TEXTBOX RECHTS</h3> <br> TEXT </div> <div class="clear"></div> </div> [/HTML] Durch die Floatenden Divs merkt das Parent-Div nicht, wie hoch es eigentlich werden sollte. Wie du dann aber noch der mittleren Box eine Dynamische Breite mitgeben kannst, weiß ich nicht. Evtl. kannst du bei der mittleren Box die Breitenangabe weglassen und links und rechts einen margin mit der Breite der anderen Boxen mitgeben. Dann musst du aber die linke und rechte Box absolut positionieren, und somit funktioniert die dynamische Höhe nicht mehr [HTML] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Unbenannt</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #content { margin-top:25px; background-color:#eeefed; border:2px solid; border-color:#a4ca9b; clear:left; position: relative; min-width: 400px; } #content_center { margin-left: 137px; margin-right: 137px; padding-left:25px; padding-right:100px; background: #f00; } #content_left { width:137px; height:200px; position: absolute; top: 19px; right: 0px; background: #f0f; } #content_right { position: absolute; width:137px; margin-right:0px; margin-top:0px; top: 19px; left: 0px; } .clear { clear: both; } </style> </head> <body> <div id="content"> <!--mittlerer Hauptbereich--> <div id="content_center"> <h3>TEXTBOX MITTE</h3> <br> TEXT </div> <!--linker Hauptbereich--> <div id="content_left"> <h3>Links</h3> <img src=""> </div> <!--rechter Hauptbereich--> <div id="content_right"> <h3>TEXTBOX RECHTS</h3> <br> TEXT </div> <div class="clear"></div> </div> </body> </html> [/HTML] Hallo nochmal, was natürlich auch geht ist, das rechte Div nach rechts floaten zu lassen: [HTML] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Unbenannt</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #content { margin-top:25px; background-color:#eeefed; border:2px solid; border-color:#a4ca9b; clear:left; position: relative; min-width: 400px; } #content_left { width:137px; height:200px; float: left; background: #f0f; } #content_center { padding-left:25px; padding-right:100px; background: #f00; float: left; } #content_right { width:137px; margin-right:0px; margin-top:0px; float: right; background: #0f0; } .clear { clear: both; } </style> </head> <body> <div id="content"> <!--linker Hauptbereich--> <div id="content_left"> <h3>Links</h3> <img src=""> </div> <!--mittlerer Hauptbereich--> <div id="content_center"> <h3>TEXTBOX MITTE</h3> <br> TEXT </div> <!--rechter Hauptbereich--> <div id="content_right"> <h3>TEXTBOX RECHTS</h3> <br> TEXT </div> <div class="clear"></div> </div> </body> </html> [/HTML] Das mittlere wird dann einfach immer Breite, je mehr Text drin steht. evtl. musst du dem mittleren Div noch ein max-width mitgeben. Das kann dann aber der IE6 nicht. Beste Grüße Kyle [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Der grüne Frosch hüpft über die Hügel an den Bäumen vorbei in die Höhle. Bitte nenne das zweite Wort!
Antworten
Start
Forum
Contest-Bereich - 2D, 3D & Fotografie
2D-Contests - Monatscontests, User-Battles, ...
Brauche Hilfe mit verschachtelten Divs
Oben