Automatische Höhe für einen div Bereich – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Automatische Höhe für einen div Bereich Sun, 29 Jun 08 19:59:08 Z https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262776#m1262776 https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262776#m1262776 <p>Hallo zusammen</p> <p>Ich habe da ein Problem mit der style.css.</p> <p>Ich möchte, dass die Website so aufgebaut ist:<br> [IMG]http://img523.imageshack.us/img523/8606/cssht9.png[/IMG]<br> Also die Mindesthöhe für den content soll gleich hoch sein wie das Menü.<br> Es macht auch nichts, wenn die Hintergrundgrafik für den content sich wiederholt (für das ist sie auch gedacht...)...</p> <p>Hier meine style.css:</p> <pre><code class="block language-sprache">* {margin:0px;padding:0px;top:0px;left:0px;} body{  text-align: center;  background-color: #31312f; } #central{  margin-right: auto;  margin-left: auto;  margin-top: 10px;  margin-bottom: 10px;  position: relative;  width: 772px;  text-align: left;  background-color: #FFFFFF; } #header{  background-image: url(images/header.PNG);  height: 152px;  width: 772px;  left: 0px;  top: 0px; } #header p{  font-size: 35px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #FFFFFF;  text-decoration: none;  margin-left: 35px;  font-family: "Arial", Courier;  margin-top: 8px; } #header h1{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #FFFFFF;  text-decoration: none;  margin-left: 50px;  font-family: "Arial", Courier;  margin-top: 0px; } #news{  background-image: url(images/newsbg.PNG);  height: 105px;  width: 772px;  left: 0px;  top: 0px; } #news p{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: normal;  color: #FFFFFF;  text-decoration: none;  margin-left: 10px;  font-family: "Arial", Courier; } #news h1{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #FFFFFF;  text-decoration: none;  margin-left: 10px;  font-family: "Arial", Courier; } #contentl{  background-image: url(images/contentlbg.PNG);  height: 509px;  width: 105px;  left: 0px;  top: 0px; } #contentl p{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: normal;  color: #31312f;  text-decoration: none;  margin-left: 10px;  font-family: "Arial", Courier; } #contentl h1{  font-size: 13px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #31312f;  text-decoration: none;  margin-left: 10px;  font-family: "Arial", Courier; } #contentl a{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #31312f;  text-decoration: yes;  margin-left: 10px;  font-family: "Arial", Courier; } #contentr{  background-image: url(images/contentrbg.PNG);  height: 509px;  width: 588px;  left: 0px;  top: 0px;  margin-left: 184px;  margin-top: -50px; } #contentr p{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: normal;  color: #31312f;  text-decoration: none;  margin-left: 0px;  font-family: "Arial", Courier; } #contentr h1{  font-size: 15px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #31312f;  text-decoration: none;  margin-left: 0px;  font-family: "Arial", Courier; } #footer{  background-image: url(images/footerbg.PNG);  height: 24px;  width: 772px;  left: 0px;  top: 0px; } #footer p{  font-size: 12px;  font-style: normal;  line-height: normal;  font-weight: bolder;  color: #31312f;  text-decoration: none;  margin-left: 15px;  font-family: "Arial", Courier; } </code></pre> <p>Und hier die dazugehörige index.htm:</p> <pre><code class="block language-sprache"><!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>..::Titel::..</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" type="image/x-icon" href="images/logo.ico"> </head> <body> <div id="central">  <div id="header">  <p><br>Titel</p>  <h1>Untertitel</h1>  </div>  <div id="news">  <h1><br>News</h1><p>29.06.08: blablabla...</p>     </div>  <div id="contentl">  <h1><br>Menü</h1><br><a href="film.htm">blabla</a>  <div id="contentr"><h1><center>Blablabla<br><br><br><br><img src="images/p2.png"></center></h1></div>  </div>  <div id="footer"><p>©2008 by Tobias Engel</p>  </div> </div> </body> </html> </code></pre> <p>Die Lösung mit dem "contentr" margin-top=-50, also mit minus zu arbeiten ist nicht wirklich das was ich will...<br> Funktionieren würde es, aber ich habe immer noch den begrenzten Platz und wenn ich im Menü ein <br> mache, dann muss ich beim contentr wieder um 15pixel nach oben verschieben...</p> <p>Ich hoffe jemand weiss hier eine Lösung...</p> <p>Falls sich die Höhe beim content ändert, sollte dies sich beim menü auch tun, denn sonst würde dort der schwarze (oder fast schwarze) Hintergrund reinkommen...</p> Automatische Höhe für einen div Bereich Sun, 29 Jun 08 20:16:34 Z https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262777#m1262777 https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262777#m1262777 <blockquote> <p>Ich hoffe jemand weiss hier eine Lösung...</p> </blockquote> <p>harte antwort: geht nicht</p> <p>man kann das problem aber umgehen - "faux columns" ist das stichwort</p> Automatische Höhe für einen div Bereich Tue, 01 Jul 08 07:18:17 Z https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262778#m1262778 https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262778#m1262778 <p>hei,</p> <p>kann man auch ohne faux method die gleiche hoehe erreichen:</p> <p><a href="http://gut.lv/beispiel/3divs.html" rel="nofollow noopener noreferrer">http://gut.lv/beispiel/3divs.html</a></p> <p>Inita</p> Automatische Höhe für einen div Bereich Tue, 01 Jul 08 16:05:51 Z https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262779#m1262779 https://forum.selfhtml.org/self/2008/jun/29/automatische-hoehe-fuer-einen-div-bereich/1262779#m1262779 <blockquote> <p>kann man auch ohne faux method die gleiche hoehe erreichen:<br> <a href="http://gut.lv/beispiel/3divs.html" rel="nofollow noopener noreferrer">http://gut.lv/beispiel/3divs.html</a></p> </blockquote> <p>ja, aber wenn dein hintergrund etwas mehr als eine farbe sind soll, klappts mit der border-methode nicht mehr so gut ;)</p>