Div passt sich nicht an Inhalt an @ tutorials.de: Tutorials, Forum & Hilfe

ecology · 25.08.07 17:29

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.08.07 17:35

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.08.07 17:38

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.08.07 17:41

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

Code :

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

ecology · 25.08.07 18:14

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-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;
	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.08.07 18:18

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 :

1	<div class="content [b]clearfix[/b]">...</div>

ecology · 25.08.07 18:27

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.08.07 18:32

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 [b]!important;[/b]
        [b]margin:5px 2.5px 5px 2.5px;[/b]
        border: 1px solid #666666;
        float:left;
}

ecology · 25.08.07 18:39

Zitat von Maik

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.08.07 18:48

Zitat von ecology

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

Jetzt sitzt das Layout auch im IE6 perfekt.

ecology · 25.08.07 18:53

Ok alles klar, dann bedanke ich mich nochmals für die kompetente Hilfe und für die damit verbundene Arbeit.

Schön das du bei Problemen den Usern so nett entgegen kommst

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

DIV passt sich nicht an

[CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Div passt sich im firefox nicht an Inhalt an

Main Div passt sich nicht an Inhalt Div an

Inhalt vom Iframe passt sich nicht an..

E-Mail:

Abonnieren Abbestellen