✔ Div passt sich nicht an Inhalt an

ecology · 25. August 2007

Hi Leute!
Ich hab letztens ein Css Design erstellt welches auch soweit funktioniert, jedoch passen sich die jeweiligen Content-Boxen nicht dem Inhalt an. Normal löst man so etwas ja mit clear, aber leider funktioniert das bei mir nichts so wie ich es möchte

Code:

<div class="site">
  <div class="head">
    <div class="head_r"> </div>
    <div class="head_m"></div>
    <div class="head_l"> </div>
    <div class="clean"></div>
  </div>
  <div class="content">
    <div class="maincont">
      <div class="mainbox">
        <div class="mbh"></div>
        <div class="mbc">Das hier ist das erste Problem Div</div>
      </div>
    </div>
    <div class="rcont">
      <div class="rbox1">
        <div class="rbh1">
        <div class="rbc1">Das hier ist das zweite Problem Div</div>
      </div>
      <div class="rbox2">
        <div class="rbh2"></div>
        <div class="rbc2">Das hier ist das dritte Problem Div</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="foot_r"> </div>
    <div class="foot_m"> </div>
    <div class="foot_l"> </div>
  </div>
</div>

Css:

Code:

body {
	background-color:#999999;
}

.site {
	width: 800px;
	height:800px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	text-align:left;
}
.head {
	width: 800px;
	height:150px;
}
.head_r {
	width: 15px;
	height:150px;
	float:left;
	background-image:url(bilder/head_r.gif)
}
.head_m {
	width: 770px;
	height:150px;
	float:left;
	background-image:url(bilder/head_m.gif)
}
.head_l {
	width: 15px;
	height:150px;
	float:left;
	background-image:url(bilder/head_l.gif)
}
.content {
	width: 800px;
	height:595px;
	background-color:#0099FF
}
.maincont {
	width: 610px;
	height:595px;
	float:left
}
.mainbox {
	width: 600px;
	height:585px;
	margin:5px;
	border: 1px solid #666666;
	float:left
}
.mbh {
	width: 600px;
	height:50px;
	background-image:url(bilder/mbh.gif)
}
.mbc {
	width: 580px;
	height:515px;
	background:repeat-x url(bilder/mbb.gif);
	background-color:#ccc;
	padding: 10px;
	clear:both;
}
.rcont {
	width: 180px;
	height:595px;
	float:left
}
.rbox1 {
	margin-top:5px;
	width: 180px;
	height:298px;
	border: 1px solid #339900;
}
.rbh1 {
	width: 180px;
	height:50px;
	background-image:url(bilder/rbh1.gif)

}
.rbc1 {
	width: 160px;
	height:228px;
	background:repeat-x url(bilder/mbb.gif);
	background-color:#ccc;
	padding: 10px;
}

.rbox2 {
	margin-top:5px;
	width: 180px;
	height:280px;
	border: 1px solid #cc00cc;
}
.rbh2 {
	width: 180px;
	height:50px;
	background-image:url(bilder/rbh2.gif)

}
.rbc2 {
	width: 160px;
	height:210px;
	background:repeat-x url(bilder/mbb.gif);
	background-color:#ccc;
	padding: 10px;
}
.footer {
	width: 800px;
	height: 55px;
}
.foot_r {
	width: 15px;
	height: 55px;
	float:left;
	background-image:url(bilder/foot_r.gif)
}
.foot_m {
	width: 770px;
	height:55px;
	float:left;
	background-image:url(bilder/foot_m.gif)
}
.foot_l {
	width: 15px;
	height: 55px;
	float:left;
	background-image:url(bilder/foot_l.gif)
}

Das ganze kann man hier noch mal im Browser betrachten.

Ich wäre über einen kleinen Denkanstoß sehr dankbar!

Ecology

Maik · 25. August 2007

Hi,

ich vermute eher, dass es an den festen Höhenangaben für die einzelnen Boxen liegt, dass diese bei zunehmenden Inhalt in der Höhe nicht "wachsen".

ecology · 25. August 2007

Achso, dann habe ich wohl an einer falschen Stelle angefangen zu suchen.

Aber die Höhe wollte ich eigenlich auch beibeihalten, also sozusagen eine Mindesthöhe für jede Box. Wie kann man so etwas realisieren?

Maik · 25. August 2007

Hier die erforderlichen Regelerweiterungen zum Einrichten einer Mindesthöhe anhand der Box .mbc:

Code:

.mbc {
        width: 580px;
        min-height:515px; /* Mindesthöhe in modernen Browsern */
        height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
        height:515px; /* Mindesthöhe in IE (<7) */
        background:repeat-x url(bilder/mbb.gif);
        background-color:#ccc;
        padding: 10px;
        clear:both;
}

ecology · 25. August 2007

Danke, das funktioniert schon mal besser als vorher. Nur bei einer Box hat das ganze irgentwie nicht geklappt, hier mal der abgeänderte code:

HTML:

body {
	background-color:#999999;
}
.site {
	width: 800px;
	height:800px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	text-align:left;
}
.head {
	width: 800px;
	height:150px;
}
.head_r {
	width: 15px;
	height:150px;
	float:left;
	background-image:url(bilder/head_r.gif)
}
.head_m {
	width: 770px;
	height:150px;
	float:left;
	background-image:url(bilder/head_m.gif)
}
.head_l {
	width: 15px;
	height:150px;
	float:left;
	background-image:url(bilder/head_l.gif)
}
.content {
	width: 800px;
	min-height:595px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:595px;
	background-color:#0099FF
}
.maincont {
	width: 610px;
	min-height:595px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:595px;
	float:left
}
.mainbox {
	width: 600px;
	min-height:585px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:585px;
	margin:5px;
	border: 1px solid #666666;
	float:left
}
.mbh {
	width: 600px;
	height:50px;
	background-image:url(bilder/mbh.gif)
}
.mbc {
        width: 580px;
        min-height:515px; /* Mindesthöhe in modernen Browsern */
        height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
        height:515px; /* Mindesthöhe in IE (<7) */
        background:repeat-x url(bilder/mbb.gif);
        background-color:#ccc;
        padding: 10px;
        clear:both;
}
.rcont {
	width: 180px;
	min-height:595px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:595px;
	float:left
}
.rbox1 {
	margin-top:5px;
	width: 180px;
	min-height:298px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:298px;
	border: 1px solid #339900;
}
.rbh1 {
	width: 180px;
	height:50px;
	background-image:url(bilder/rbh1.gif)

}
.rbc1 {
	width: 160px;
	min-height:228px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:228px;
	background:repeat-x url(bilder/mbb.gif);
	background-color:#ccc;
	padding: 10px;
}

.rbox2 {
	margin-top:5px;
	width: 180px;
	min-height:280px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:280px;
	border: 1px solid #cc00cc;
}
.rbh2 {
	width: 180px;
	height:50px;
	background-image:url(bilder/rbh2.gif)

}
.rbc2 {
	width: 160px;
	min-height:210px;
	height:auto !important; /* !important-Regel für moderne Browser, um die nachfolgende height-Deklaration zu ignorieren */
    height:210px;
	background:repeat-x url(bilder/mbb.gif);
	background-color:#ccc;
	padding: 10px;
}
.footer {
	width: 800px;
	height: 55px;
}
.foot_r {
	width: 15px;
	height: 55px;
	float:left;
	background-image:url(bilder/foot_r.gif)
}
.foot_m {
	width: 770px;
	height:55px;
	float:left;
	background-image:url(bilder/foot_m.gif)
}
.foot_l {
	width: 15px;
	height: 55px;
	float:left;
	background-image:url(bilder/foot_l.gif)
}

Das Ergebniss sieht so aus

Maik · 25. August 2007

Du hast noch das Elternelement .site vergessen.

Zudem solltest du http://positioniseverything.net/easyclearing.html auf die Box .content anwenden:

Code:

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Code:

<div class="content clearfix">...</div>

ecology · 25. August 2007

Perfekt! Vielen Dank für die schnelle und gute Hilfe!

Eine Frage habe ich aber noch welche ein Problem betrifft welches mir gerade erst aufgefallen ist:

Die Divs machen keine automatischen Zeilenumbrüche bei langen Wörtern wie zum Beispiel aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

Kann man überhaupt verhindern das solche rießen Wörter über das Div hinaus schießen?

Maik · 25. August 2007

Wenn die Zeichenkette kein Leerzeichen enthält, hat der Browser auch keinen Anhaltspunkt, wo er einen Zeilenumbruch vornehmen soll.

Mir ist eben im IE6 aufgefallen, dass die rechte Spalte unter der linken angezeigt wird, was an der margin-Deklaration für das DIV .mainbox liegt, die der IE in der horizontalen Ausrichtung verdoppelt, auch bekannt als "Double-Margin-Bug".

Abhilfe schafft da folgende Regelerweiterung:

Code:

.mainbox {
        width: 600px;
        min-height:585px;
        height:auto !important;
        height:585px;
        margin:5px !important;
        margin:5px 2.5px 5px 2.5px;
        border: 1px solid #666666;
        float:left;
}

ecology · 25. August 2007

Maik hat gesagt.:
Wenn die Zeichenkette kein Leerzeichen enthält, hat der Browser auch keinen Anhaltspunkt, wo er einen Zeilenumbruch vornehmen soll.

Achso, dann werde ich das Problem wohl mit Php lösen müssen.

Hab die Korrektur jetzt vorgenommen, stimmt jetzt alles? Hab unglücklicherweiße den IE7...

Maik · 25. August 2007

ecology hat gesagt.:
Hab die Korrektur jetzt vorgenommen, stimmt jetzt alles? Hab unglücklicherweiße den IE7...

Jetzt sitzt das Layout auch im IE6 perfekt.

✔ Div passt sich nicht an Inhalt an

ecology

Mitglied

Maik

ecology

Mitglied

Maik

ecology

Mitglied

Maik

ecology

Mitglied

Maik

ecology

Mitglied

Maik

Neue Beiträge