nicht angemeldet
div-container
0 
henman
0 0 henman
0
0 0 0 henman
div-container
Der Martinhallo,
ich würde gerne drei div-container nebeneinander positionieren. nunja das wäre ja auch kein problem, aber der linke und der rechte container sollen immer eine feste breite von z.b. 250px haben und der mittlere soll je nach fenstergröße dynamisch seine größe verändern, dabei aber eine breite von z.b. 500px nicht unterschreiten.
bekomme das nicht so ganz auf die reihe. kann mir das jemand zeigen?
grüße
-
hallo,
bekomme das nicht so ganz auf die reihe. kann mir das jemand zeigen?
kannst du erstmal zeigen, was du schon versucht hast?
grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
hey, danke für deine schenlle antwort.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>container test</title> </head> <body><div style="width: 100%;"> <div style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;"><h3>header</h3></div> <div style="width: 250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left; background-color: #00ff00;">div1</div> <div style="width: 50%; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left; background-color: #0000ff;">div2</div> <div style="width: 250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left; background-color: #ff0000;">div3</div> <div style="clear: left; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;" >footer</div></div> </body> </html>-die container bleiben nicht nebeneinander wenn das fenster zu klein ist
-bei der minimalbegrenzung fällt mir überhaupt nichts ein-
hallo,
hm. lass div1 nach links fließen, setze dann div 3 ein, lass den nach rechts fließen.
ohne fluss kommt dann div2 ohne width-Angabe, aber mit margins bzw. paddings.damit div3 bei sehr engem fenster nicht umklappt, empfiehlt sich min-width.
grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
danke, das funktioniert schonmal sehr gut. nur schieben sich die container immernoch untereinander, wenn das fenster zu schmal ist. und die mindestbreite des mittleren containers wird nicht eingehalten.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>container test</title> </head> <body><div style="width: 100%;"> <div style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;"><h3>header</h3></div> <div style="min-width:250px; width: 250px; man-width:250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left; background-color: #00ff00;">div1</div> <div style="min-width:250px; width: 250px; man-width:250px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: right; background-color: #ff0000;">div3</div> <div style="min-width:400px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; background-color: #0000ff;">div2</div> <div style="clear: both; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;" >footer</div></div> </body> </html>-
Hallo,
danke, das funktioniert schonmal sehr gut. nur schieben sich die container immernoch untereinander, wenn das fenster zu schmal ist.
kein Wunder, du hast ja auch keine Mindestbreite für das umgebende Element.
und die mindestbreite des mittleren containers wird nicht eingehalten.
Das glaube ich nicht.
<body>
<div style="width: 100%;">Wozu dieses allumfassende div-Element? Nutze body als Container!
<div style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px;"><h3>header</h3></div>
Wozu das h3-Element nochmal in ein div verpacken? Formatiere direkt das h3-Element.
Warum überhaupt ein h3, ohne dass h2 und h1 auftauchen?So long,
Martin--
Success should be measured not so much by the position that one has reached in life,
but by the obstacles one has overcome while trying to succeed.
-
ah vielen lieben dank. funktioniert alles einwandfei.
nun habe ich noch einen container innerhalb des mittleren eingebaut um dort eine grafik zu positionieren. diese sollte sich an der rechten seite des mittleren containers orientieren. sie hält den abstand aber zum fenster- und nicht zum container-rand des mittleren containers ein und verschiebt sich somit beim verkleiner des fensters in den linken container hinein. wie bekomme ich das hin, dass sich der container am mittleren container orientiert?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>container test</title> <link href="css/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="oben"></div> <div id="inks"></div> <div id="rechts"></div> <div id="mitte"><div id="schriftzug"><img src="schirtzug.png" alt="schirtzug" name="schirtzug" width="640" height="180"></div></div> <div id="unten"></div> </body> </html>@charset "utf-8"; /* CSS Document */ body { min-width: 900px; background-color: #FFFFFF; margin: 0; } #oben { min-width: 900px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; background-color: #CCCCCC; } #inks { min-height: 800px; min-width: 240px; width: 240px; max-width: 240px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: left; background-image:url(../links.png); background-repeat: no-repeat; } #mitte { min-height: 800px; min-width: 400px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; background-image:url(../mitte.png); background-repeat: repeat-x; overflow: hidden } #rechts { min-height: 800px; min-width: 20px; width: 20px; max-width: 20px; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; float: right; background-image:url(../rechts.png); background-repeat: no-repeat; } #unten { clear: both; padding-top: 0px; padding-bottom: 0px; padding-left: 5px; padding-right: 5px; background-color: #999999; } #schriftzug { position: absolute; top: 60px; right: 10px; min-width: 400px; }-
ah vielen lieben dank. funktioniert alles einwandfei.
nun habe ich noch einen container innerhalb des mittleren eingebaut um dort eine grafik zu positionieren. diese sollte sich an der rechten seite des mittleren containers orientieren. sie hält den abstand aber zum fenster- und nicht zum container-rand des mittleren containers ein und verschiebt sich somit beim verkleiner des fensters in den linken container hinein. wie bekomme ich das hin, dass sich der container am mittleren container orientiert?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>container test</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="oben"></div>
<div id="inks"></div>
<div id="rechts"></div>
<div id="mitte"><div id="schriftzug"><img src="schirtzug.png" alt="schirtzug" name="schirtzug" width="640" height="180"></div></div>
<div id="unten"></div>
</body>
</html>> > ~~~css @charset "utf-8"; > /* CSS Document */ > > body { > min-width: 900px; > background-color: #FFFFFF; > margin: 0; > } > > #oben { > min-width: 900px; > padding-top: 0px; > padding-bottom: 0px; > padding-left: 5px; > padding-right: 5px; > background-color: #CCCCCC; > } > > #inks { > min-height: 800px; > min-width: 240px; > width: 240px; > max-width: 240px; > padding-top: 0px; > padding-bottom: 0px; > padding-left: 5px; > padding-right: 5px; > float: left; > background-image:url(../links.png); > background-repeat: no-repeat; > } > > #mitte { > min-height: 800px; > min-width: 400px; > padding-top: 0px; > padding-bottom: 0px; > padding-left: 5px; > padding-right: 5px; > background-image:url(../mitte.png); > background-repeat: repeat-x; > overflow: hidden > } > > #rechts { > min-height: 800px; > min-width: 20px; > width: 20px; > max-width: 20px; > padding-top: 0px; > padding-bottom: 0px; > padding-left: 5px; > padding-right: 5px; > float: right; > background-image:url(../rechts.png); > background-repeat: no-repeat; > } > > #unten { > clear: both; > padding-top: 0px; > padding-bottom: 0px; > padding-left: 5px; > padding-right: 5px; > background-color: #999999; > } > > #schriftzug { > position: absolute; > top: 60px; > right: 10px; > min-width: 400px; > }hat da niemand eine lösung für?
-
مرحبا
nun habe ich noch einen container innerhalb des mittleren eingebaut um dort eine grafik zu positionieren.
Wofür die zusätzliche Box?
hat da niemand eine lösung für?
Weise allen div-Elementen einen unterschiedlichen border zu und sieh nach, ob die Boxen sich auch wirklich wie gewünscht verhalten, oder ob es nur so aussieht.
mfg
-
-
-
-
-
-
-
-
مرحبا
der linke und der rechte container sollen immer eine feste breite von z.b. 250px haben und der mittlere soll je nach fenstergröße dynamisch seine größe verändern,
Wenn du die äusseren floatest, dann gib der mittleren Box keine Breite.
dabei aber eine breite von z.b. 500px nicht unterschreiten.
Dafür könntest du body mit min-width versehen.
mfg
-
Wenn du die äusseren floatest, dann gib der mittleren Box keine Breite.
auch wenn ich keine breite angeb bleiben die container bei mehr als zb. einer zeile text nicht nebneinander.
Dafür könntest du body mit min-width versehen.
das klappt schonmal, aber der container wird ohne inhalt auch nicht breiter als die mindestbreite, egal wie breit ich das fenster ziehe.
-
hallo,
Wenn du die äusseren floatest, dann gib der mittleren Box keine Breite.
auch wenn ich keine breite angeb bleiben die container bei mehr als zb. einer zeile text nicht nebneinander.es kommt auf die reihenfolge an. erst div1, dann div3, dann div2
grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
-
-