DIVs im DIV Problem... "wie floatet man korrekt?"

dshock · 1. Dezember 2004

Hollerö zusammen!

Hmpf... wieder einmal drückt des CSS-Schuh, und ich denke, dass es ein float Problem ist... ich möchte in einer HEADCELL [DIV mit fester Breite und Höhe] mehrere DIVs einbinden, was wie folgt aussehen soll:

nur wie bekomme ich sowas hin? Als ich es versuchte, war alles vollkommen zerissen...
>> wie floatet man richtig , sodass alles so ist, wie es soll?

Gruß und Dank

Quaese · 1. Dezember 2004

Hi,

wie richtig gefloatet wird, solltest Du einem entsprechenden Handbuch entnehmen, da eine
Erklärung wohl den Rahmen eines Hilfeforums sprengen würde.

Die Headzelle in Deinem Fall würde ich in zwei Grund-Container aufteilen, die ich mit "float: left"
nebeneinander positioniere. Die linke Zelle nimmt das Logo auf, die rechte den Rest.

headDiv erstellen (feste Breite, feste Höhe)
linke Zelle erstellen (float: left, feste Breite, feste Höhe)
Logo zentriert einfügen
rechte Zelle erstellen (float: left, feste Breite, feste Höhe)
Navigations-Container erstellen (ohne float)
linke Grafikzelle erstellen (float: left, feste Breite, feste Höhe)
rechte Grafikzelle erstellen (float: right, feste Breite, feste Höhe)
Sloganzelle erstellen (mit margin-right und margin-left zwischen Grafikzellen platzieren)

Ich habe Dir ein Beispiel in den Anhang gepackt. Da es in den unterschiedlichen Browsern
unterschiedliche Interpretationen der Breiten gibt, wurden einige CSS-Filter notwendig. Ich
habe versucht, diese zu kommentieren oder zumindest die unterschiedliche Interpretation
anzudeuten.

Solltest Du das Dokument in einem anderen Modus (z.B. Quirksmode, durch DOCTYPE
eingestellt) laufen lassen, kann es passieren, dass sich die Anzeige im IE 6.x verzieht. In
diesem Fall musst Du die Breite in der Klasse #headRight anpassen (Tantek-Hack ersetzen).

Aus

Code:

#headRight{ float: left;
            border-left: 1px solid #808080;
            border-bottom: 1px solid #808080;
            background-color: #F7F7F1;
            height: 110px;
            width: 528px;  /* Breite im IE 5 und 5.5: width-headDiv - width-headLeft - 2px-border */
            /* Tantek-Hack: alles Folgende wird von Browsern der Version IE 5.x nicht interpretiert */
            voice-family: "\"}\"";
            voice-family:inherit;
            width: 529px;  /* Breite für alle anderen Browser: width-headDiv - width-headLeft - 1px-border-left */}

wird

Code:

#headRight{ float: left;
            border-left: 1px solid #808080;
            border-bottom: 1px solid #808080;
            background-color: #F7F7F1;
            height: 110px;
            width: 529px !important;  /* Nicht-IEs: Breite der rechten Zelle */
            width: 528px;  /* IEs: Breite der rechten Zelle */}

Den Rest findest Du sicherlich durch Probieren heraus - viel Spass dabei.

Ciao
Quaese

dshock · 1. Dezember 2004

WOW

Was für eine Antwort! Dafür vielen lieben Dank!

Ich werde mich mal versuchen da durch zu wurteln.

Gruß und Dank

Budman · 1. Dezember 2004

Quaese hat gesagt.:
Hi,

wie richtig gefloatet wird, solltest Du einem entsprechenden
[...]
Ciao
Quaese

Das ist allerdings echt mal ne ausführliche Antwort!

Respekt und Komliment an Quaese!

Gruss

hela · 1. Dezember 2004

Hallo,

siehe Step by step CSS float tutorial.

dshock · 1. Dezember 2004

Hollerö nochmals

Und dank für das float-tut! Super!

Nur habe ich -oh Wunder- wieder ein kleines Problem:

Ich habe meine HEADCELL jetzt so formatiert, wie es später sein soll, nur habe ich das Prob, dass sowohl die linke, als auch die rechte Grafik im IE einen Pixel zuweit nach innen gehen und finde leider keine Lösung...

Hier die Code:

HTML

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dshock</title>
<link rel="stylesheet" type="text/css" media="screen" href="global.css">
</head>
<body>
    <div id="headcell">
      <!--ANFG HEAD. Logo und Navi-->

<div id="headcell">
	<div id="headLeft">
		<div id="headlogo">
			Logo
		</div>
		<div id="welcome">Welcome</div>
	</div>
	<div id="headRight">
		<div id="headRightNav">
			Navigation
		</div>
		<div id="headRightL">
			Grafik
		</div>
		<div id="headRightR">
			Grafik
		</div>
		<div id="headRightSlogan">
			Slogan
		</div>
	</div>
</div>
        <!--ENDE HEAD-->
    </div>

    <div id="includecell">
      <!--ANFG INCLUDE. Inhalt der Navi wird hier hineingeladen-->
        Text<br>
        Text
      <!--ENDE INCLUDE-->
	</div>
	
    <div id="footercell">
      <!--ANFG FOOTERCELL-->
        <div id="adresse" class="frame">
          <!--ANFG ADRESSE-->
            <span class="footer">
              Adresse
            </span>
          <!--ENDE ADRESSE-->
        </div>
        <div id="copyright" class="frame">
          <!--ANFG COPYRIGHT-->
            <span class="footer">
			  Copyright
            </span>
          <!--ENDE COPYRIGHT-->
        </div>
      <!--ENDE FOOTERCELL-->
	</div>
</body>
</html>

CSS

Code:

*{
	margin:0;
	padding:0;
	}

html, body{										/*allgemeine Einstellungen fuer den Body-Bereich. Zentriert Inhalt*/
	background:#32C21F;
	font-size:11px;
	font-family:verdana, Arial, sans-serif;
	color:#666666;
	width:992px;
	height:100%;
	margin:auto;
	}

.frame{											/*DIV-style für Button-look-a-like*/
	border:1px solid #999999;
	background-color:#E6E6E6;
	text-align:center;
	}

.white{
	color:#FFFFFF;
	}


/************************************************/
/* Zellen (DIVs)								*/
/************************************************/


#headcell{										/*Logo, Head-Grafiken und Navi*/
	background:#FFA0DC;
	text-align:left;
	width:992px;
	height:205px;
	}

#includecell{									/*Inhalt wird hier hinein geladen*/
	background:#15FFFC;
	text-align:left;
	width:992px;
	}

#footercell{									/*Adresse, Copyright und ScrollTop*/
	background:#FFC35B;
	width:992px;
	height:86px;
	}


/************************************************/
/* HEADER										*/
/************************************************/


#headLeft{
	float:left;
	width:186px;
	height:205px;
	background:#99cc00;
	text-align:center;
	}

#headlogo{
	width:126px;
	height:60px;
	margin:30px auto 20px auto;
	text-align:left;
	border:1px solid #FFFFFF;
	background-color:#99cc00;
	}

#welcome{
	border: 1px solid #FFFFFF;
	background-color: 99cc00;
	height: 63px;
	width:126px;
	margin:20px auto 20px auto;
	text-align:right;
	}


#headRight{
	float:left;
	border-left:1px solid #009C38;
	border-bottom:1px solid #009C38;
	background-color:#99cc00;
	height:200px;
	width:804px;								/* Breite im IE 5 und 5.5: width-headDiv - width-headLeft - 2px-border */
												/* Tantek-Hack: alles Folgende wird von Browsern der Version IE 5.x nicht interpretiert */
	voice-family:"\"}\"";
	voice-family:inherit;
	width:805px;								/* Breite für alle anderen Browser: width-headDiv - width-headLeft - 1px-border-left */
	}

.tantekClass{
	}											/* Aus Tantek-Hack entstandene Vewirrung des IE5.x aufheben (Dummy-Klasse) */

#headRightNav{
	margin:30px 5px 25px 5px;
	height:13px;
	border:1px solid #FFFFFF;
	background-color:#99cc00;
	}

#headRightL, #headRightR{
	width:106px;
	height:123px;
	background-color:#99cc00;
	border:1px solid #FFFFFF;
	}

#headRightL{
	float:left;
	margin-left:5px !important;  				/* Nicht-IEs: linker Abstand */
	margin-left:3px;  							/* IEs: linker Abstand */
	}

#headRightR{
	float:right;
	margin-right:5px !important;				/* Nicht-IEs: rechter Abstand */
	margin-right:3px;							/* IEs: rechter Abstand */}

#headRightSlogan{
	border:1px solid #FFFFFF;
	background-color:#99cc00;
	height:123px;
	margin-left:120px !important;				/* Nicht-IE: 5 + margin-left + width (von #headRightL) */
	margin-left:116px;							/* margin-left + width (von #headRightL) */
	margin-right:120px !important;				/* Nicht-IE: 5 + margin-right + width (von #headRightR) */
	margin-right:116px;						/* margin-right + width (von #headRightR) */
	}







/************************************************/
/* Navi											*/

#navi{											/*Position der Navigation im Head*/
	background:#999999;
	position:relative;
	top:30px;
	left:94px;
	height:13px;
	float:left;
	}


/************************************************/
/* Images										*/

#logo{											/*Position des Logos im Head*/
	position:relative;
	top:30px;
	left:30px;
	float:left;
	}


/************************************************/
/* FOOTER										*/
/************************************************/

.footer{										/*Größe und Ausrichtung für den Text im Footer*/
	font-size:10px;
	text-align:center;
	}

#adresse{										/*Positionierung des adresse-DIVs*/
	position:relative;
	top:44px;
	height:12px;
	padding:1px;
	}

#copyright{										/*Positionmierung des copyright-DIVs*/
	position:relative;
	top:49px;
	height:12px;
	padding:1px;
	}


/************************************************/
/* Links										*/
/************************************************/

/************************************************/
/* Standart Links								*/

a:link, a:visited{
	text-decoration:underline;
	color:#666666;
	}

a:hover{ 
	text-decoration:none;
	background:#009C38;
	color:#E6E6E6;
	}

a:active{
	text-decoration:underline;
	color:#666666;
	}




/************************************************/
/* Colored Links								*/

a.navigreen:link, a.navigreen:visited{ 
	text-decoration:none;
	}

a.navigreen:hover, a.navigreen:active{ 
	text-decoration:none;
	background:#009C38;
	color:#E6E6E6;
	}

a.navired:link, a.navired:visited{ 
	text-decoration:none;
	}

a.navired:hover, a.navired:active{ 
	text-decoration:none;
	background:#EE6046;
	color:#E6E6E6;
	}

a.naviblue:link, a.naviblue:visited{ 
	text-decoration:none;
	}

a.naviblue:hover, a.naviblue:active{ 
	text-decoration:none;
	background:#0072AE;
	color:#E6E6E6;
	}

a.naviyellow:link, a.naviyellow:visited{ 
	text-decoration:none;
	}

a.naviyellow:hover, a.naviyellow:active{ 
	text-decoration:none;
	background:#FFC20E;
	color:#E6E6E6;
	}

Und hier die Beispiel Seite: ->click<-

Nur wie bekomm ich nun den Abstand des headRightL-DIVs einen Pixel weiter nach links und den des headRightR-DIVs einen Pixel weiter nach rechts? Aber nur im IE, Gecko-Browser und Opera machen's richtig...

Und was bedeutet

Code:

!important

nach der margin eingabe?!

Nochmals vielen lieben Dank

Gruß

Budman · 1. Dezember 2004

Hallo!

Setze bei allen div's explizit den border auf 0px, dann verschwindet der seltsame Abstand.

!important setzt die Wichtigkeit der entsprechenden Formatierung nach oben und überschreibt evtl. vorhandene andere Formatierungen.

Ein Beispiel: ebay setzt seine Linkfarbe auf grün, Du hättest Sie aber gerne in grau. Durch den Zusatz !important hinter Deiner Farbe wird diese benutzt.

Gruss

Quaese · 1. Dezember 2004

Hi,

fangen wir mit der Beantwortung der Fragen von hinten an.

1. Problem: Was bedeutet !important?
Sinn und Zweck dieser Auszeichnung ist es, Prioritäten bei Formatierungen zu setzen. Genauere
Informationen gibt es hier .
Die !important-Regel wird jedoch nicht von IEs verstanden. Somit ist es möglich, Werte, die
nur für Nicht-IE-Browser gelten sollen, mit !important auszuzeichnen. Die Werte für IEs
werden einfach in der Folgezeile ohne den Prioritätszusatz eingefügt. Damit kann eine Trennung
zwischen den verschiedenen Browsertypen erreicht werden.

2. Problem: Die Grafiken gehen zu weit nach innen
Möglichkeit a)
Da der Slogan-Container mit margin-left und margin-right fest positioniert ist, muss die Breite
der Grafik-DIVs angepasst werden. Da diese jedoch in Nicht-IE-Browsern stimmt, ist eine
Lösung auch hier wieder mit dem !important -Filter zu erreichen.

Es werden einfach wieder für den IE und Nicht-IEs gesonderte Breitenangaben einfgefügt:

Code:

#headRightL, #headRightR{ width:106px !important;
                          width: 104px;
                          height:123px;
                          background-color:#99cc00;
                          border:1px solid #FFFFff;}

Möglichkeit b)
Sollte an der Breite der Grafik-Container keine Änderungen möglich sein, kannst Du auch
über margin-right und margin-left die Seitenabstände des Slogan-DIVs verändern.
Dazu musst Du in den Zeilen ohne !important die entsprechenden Pixelwerte erhöhen.

Code:

#headRightSlogan{ border:1px solid #FFFFFF;
                  background-color:#99cc00;
                  height:123px;
                  margin-left:120px !important;  /* Nicht-IE: 5 + margin-left + width (von #headRightL) */
                  margin-left:118px;             /* margin-left + width (von #headRightL) */
                  margin-right:120px !important; /* Nicht-IE: 5 + margin-right + width (von #headRightR) */
                  margin-right:118px;            /* margin-right + width (von #headRightR) */}

Ich habe bei beiden Lösungsmöglichkeiten jeweils eine Änderung von 2 Pixeln vorgenommen.

So, ich hoffe, dass damit die Probleme ausgeräumt sind.

Ciao
Quaese

dshock · 1. Dezember 2004

Trotz deiner umfangreichen Antworten [vielen Dank dafür nochmal

] will es nicht klappen...

Ich habe jetzt aber auch die Borders entfernt, da diese später nicht sein werden und alles wieder angepasst.

Nur irgendwie werden die beiden Bilder ( HeadRightL und HeadRightR ) nur im IE falsch angezeigt: HeadRightL soll 5px neben der senkrechten grünen Linie und HeadRightR soll sich 5px rechts neben dem "Ende" befinden.

Auch die !important-Variante benutze ich, nur sobald ich den wert für den "non-!important" margin-left/right verkleiner, kommt irgendwie nie der gewünschte Abstand dabei heraus...

Hier wieder die Codes:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dshock</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/global.css">
</head>
<body>
    <div id="headcell">
      <div id="headLeft">
        <div id="headlogo">
          Logo
        </div>
        <div id="welcome">
          Welcome
        </div>
        </div>
        <div id="headRight">
          <div id="headRightNav">
          Navigation
        </div>
        <div id="headRightL">
          Grafik
        </div>
        <div id="headRightR">
          Grafik
        </div>
        <div id="headRightSlogan">
          Slogan
        </div>
      </div>
    </div>
    <div id="includecell">
	  Text<br>
	  Text<br>
	</div>	
    <div id="footercell">
      <!--ANFG FOOTERCELL-->
        <div id="adresse" class="frame">
          <!--ANFG ADRESSE-->
            <span class="footer">
              Adresse
            </span>
          <!--ENDE ADRESSE-->
        </div>
        <div id="copyright" class="frame">
          <!--ANFG COPYRIGHT-->
            <span class="footer">
			  Copyright
            </span>
          <!--ENDE COPYRIGHT-->
        </div>
      <!--ENDE FOOTERCELL-->
    </div>
</body>
</html>

CSS

Code:

*{
	margin:0;
	padding:0;
	}

html, body{										/*allgemeine Einstellungen fuer den Body-Bereich. Zentriert Inhalt*/
	background:#32C21F;
	font-size:11px;
	font-family:verdana, Arial, sans-serif;
	color:#666666;
	width:992px;
	height:100%;
	margin:auto;
	}

.frame{											/*DIV-style für Button-look-a-like*/
	border:1px solid #999999;
	background-color:#E6E6E6;
	text-align:center;
	}

.white{
	color:#FFFFFF;
	}


/************************************************/
/* Zellen (DIVs)								*/
/************************************************/


#headcell{										/*Logo, Head-Grafiken und Navi*/
	background:#FFA0DC;
	text-align:left;
	width:992px;
	height:205px;
	}

#includecell{									/*Inhalt wird hier hinein geladen*/
	background:#15FFFC;
	text-align:left;
	width:992px;
	}

#footercell{									/*Adresse, Copyright und ScrollTop*/
	background:#FFC35B;
	width:992px;
	height:86px;
	}


/************************************************/
/* HEADER										*/
/************************************************/


#headLeft{
	float:left;
	width:186px;
	height:205px;
	background:#99cc00;
	text-align:center;
	}

#headlogo{
	width:126px;
	height:60px;
	margin:30px auto 20px auto;
	text-align:left;
	background-color:#FFFFFF;
	}

#welcome{
	background-color:#FFFFFF;
	height: 63px;
	width:126px;
	margin:20px auto 20px auto;
	text-align:right;
	}


#headRight{
	float:left;
	border-left:1px solid #009C38;
	border-bottom:1px solid #009C38;
	background-color:#99cc00;
	height:200px;
	width:804px;								/* Breite im IE 5 und 5.5: width-headDiv - width-headLeft - 2px-border */
												/* Tantek-Hack: alles Folgende wird von Browsern der Version IE 5.x nicht interpretiert */
	voice-family:"\"}\"";
	voice-family:inherit;
	width:805px;								/* Breite für alle anderen Browser: width-headDiv - width-headLeft - 1px-border-left */
	}

.tantekClass{
	}											/* Aus Tantek-Hack entstandene Vewirrung des IE5.x aufheben (Dummy-Klasse) */

#headRightNav{
	margin:30px 5px 29px 5px;
	height:13px;
	background-color:#FFFFFF;
	}

#headRightL, #headRightR{
	width:108px;
	height:123px;
	background-color:#FFFFFF;
	}

#headRightL{
	float:left;
	margin-left:5px !important;  				/* Nicht-IEs: linker Abstand */
	margin-left:3px;  							/* IEs: linker Abstand */
	}

#headRightR{
	float:right;
	margin-right:5px !important;				/* Nicht-IEs: rechter Abstand */
	margin-right:3px;							/* IEs: rechter Abstand */
	}

#headRightSlogan{;
	background-color:#FFFFFF;
	height:123px;
	margin-left:118px !important;				/* Nicht-IE: 5 + margin-left + width (von #headRightL) */
	margin-left:116px;							/* margin-left + width (von #headRightL) */
	margin-right:118px !important;				/* Nicht-IE: 5 + margin-right + width (von #headRightR) */
	margin-right:116px;							/* margin-right + width (von #headRightR) */
	}







/************************************************/
/* Navi											*/

#navi{											/*Position der Navigation im Head*/
	background:#999999;
	position:relative;
	top:30px;
	left:94px;
	height:13px;
	float:left;
	}


/************************************************/
/* Text unter dem Logo							*/


.lilgreen{										/*Stil für kleinen, dicken, grünen Text*/
	font-size:10px;
	font-weight:bold;
	color:#009C38;
	}

.lightgrey{										/*Stil für hellgrauen Text*/
	color:#999999;
	}


/************************************************/
/* Images										*/

#logo{											/*Position des Logos im Head*/
	position:relative;
	top:30px;
	left:30px;
	float:left;
	}


/************************************************/
/* FOOTER										*/
/************************************************/

.footer{										/*Größe und Ausrichtung für den Text im Footer*/
	font-size:10px;
	text-align:center;
	}

#adresse{										/*Positionierung des adresse-DIVs*/
	position:relative;
	top:44px;
	height:12px;
	padding:1px;
	}

#copyright{										/*Positionmierung des copyright-DIVs*/
	position:relative;
	top:49px;
	height:12px;
	padding:1px;
	}


/************************************************/
/* Links										*/
/************************************************/

/************************************************/
/* Standart Links								*/

a:link, a:visited{
	text-decoration:underline;
	color:#666666;
	}

a:hover{ 
	text-decoration:none;
	background:#009C38;
	color:#E6E6E6;
	}

a:active{
	text-decoration:underline;
	color:#666666;
	}




/************************************************/
/* Colored Links								*/

a.navigreen:link, a.navigreen:visited{ 
	text-decoration:none;
	}

a.navigreen:hover, a.navigreen:active{ 
	text-decoration:none;
	background:#009C38;
	color:#E6E6E6;
	}

a.navired:link, a.navired:visited{ 
	text-decoration:none;
	}

a.navired:hover, a.navired:active{ 
	text-decoration:none;
	background:#EE6046;
	color:#E6E6E6;
	}

a.naviblue:link, a.naviblue:visited{ 
	text-decoration:none;
	}

a.naviblue:hover, a.naviblue:active{ 
	text-decoration:none;
	background:#0072AE;
	color:#E6E6E6;
	}

a.naviyellow:link, a.naviyellow:visited{ 
	text-decoration:none;
	}

a.naviyellow:hover, a.naviyellow:active{ 
	text-decoration:none;
	background:#FFC20E;
	color:#E6E6E6;
	}

und die Beispiel-Seite [click]

Gruß und Dank!

Quaese · 2. Dezember 2004

Guten Morgen,

heikles Problem!

Offensichtlich schiebt der IE statt dem gewünschten einen Pixel gleich um zwei Pixel an
den Rand. Ich habe einiges versucht, aber die einzige Lösung, die ich anbieten kann,
besteht darin ein weiteres Positionierungs-DIV einzufügen. In diesem DIV wird mit margin-left: -1px;
und margin-right: -1px; der Bereich für den IE einfach um ein Pixel nach links und rechts erweitert.
Damit sollte der 1-Pixel-Fehler links und rechts im IE behoben sein.

Dafür positionieren es Nicht-IE-Browser nun falsch. Links kann relativ einfach mit Hilfe des
!important-Filters nachreguliert werden. Auf der rechten Seite greift das margin-right
nicht (keine Ahnung warum). Deshalb wird rechts ein 1 Pixel breiter Rahmen mit Hintergrundfarbe
des BODYs eingeblendet. Da die Rahmenstärke in Nicht-IE-Browsern in die Breitenberechnung
mit einfliesst, verschiebt sich der Inhalt durch diese Massnahme um einen Pixel nach links.

Die CSS-Deklarationen für das Positionierungs-DIV:

Code:

#positionDiv{ margin-left: 0px !important;
              margin-left: -1px;
              border-color: #32c31f;
              border-style: solid;
              border-width: 0px;
              border-right-width: 1px !important;
              border-right-width: 0px;
              margin-right: 0px important;
              margin-right: -1px;}

Dieser Container muss die Grafik-Container und den Slogan umschliessen.

HTML:

<div id="positionDiv">
    <div id="headRightL">
        Grafik
    </div>
    <div id="headRightR">
        Grafik
    </div>
    <div id="headRightSlogan">
        Slogan
    </div>
</div>

Ich hoffe, dass nun alles so funktioniert, wie Du es Dir vorstellst.

Ciao
Quaese

DIVs im DIV Problem... "wie floatet man korrekt?"

dshock

Mitglied

Quaese

Moderator

Anhänge

dshock

Mitglied

Budman

Erfahrenes Mitglied

hela

dshock

Mitglied

Budman

Erfahrenes Mitglied

Quaese

Moderator

dshock

Mitglied

Quaese

Moderator

Neue Beiträge