DIVs im DIV Problem... "wie floatet man korrekt?"
- Themenstarter dshock
- Beginndatum
- Status
Netscape DIV Prob beim includen....
Sorry, dass ich wieder "nerve"... aber ich habe ein Problem (endlich mal was Neues
)
Ersteinmal zur Erklärung:
Eigentlich ist alles gut.. eigentlich: denn wenn ich über die Navi nur Texte in die includecell lade, passt alles (in jedem Browser), nur sobald ich in der zu includenen Datei weitere DIVs benutze, machen's alle ausser der NS mit
Die zu includenen Dateien bestehen alle aus mehreren DIVs:
Ersteinmal zwei obere nebeneinander, wovon der linke ein weitere Navigationspunkt ist und das rechte eine Art "SubNavi".
Darunter sind wieder zwei DIVs, wovon der linke Zertifikate enthält (wird via
geladen, da sich diese je nach Menüpunkt ändern) und der rechte den eigentlichen Inhalt.
IE und Opera machen soweit alles richtig, nur der NS muckt:
Es schein, als würde die FOOTERCELL wieder unter der HEADCELL kleben, anstatt under der INCLUDECELL
Nun zwei Beispiele:
01__so ist in jedem Browser alles richtig. Es handelt sich aber auch hier nur um Text und um keine DIVs: ->click<-
02__hier ist die "Problemseite" mit mehreren DIVs (nur NS. IE und Opera machen's richtig): ->click<-
und hier die Codes:
index.php
die zu includenene Datei mit DIVs:
und der StyleSheet:
Ich weiß, dass es komplex aussieht, bin mir aber fast sicher, dass es ein eher weniger komplexer Fehler ist
Leider bin ich aber im CSS-Bereich noch recht frisch...
Vielen lieben Dank für eure Hilfe!
Gruß
Sorry, dass ich wieder "nerve"... aber ich habe ein Problem (endlich mal was Neues
)Ersteinmal zur Erklärung:
Eigentlich ist alles gut.. eigentlich: denn wenn ich über die Navi nur Texte in die includecell lade, passt alles (in jedem Browser), nur sobald ich in der zu includenen Datei weitere DIVs benutze, machen's alle ausser der NS mit
Die zu includenen Dateien bestehen alle aus mehreren DIVs:
Ersteinmal zwei obere nebeneinander, wovon der linke ein weitere Navigationspunkt ist und das rechte eine Art "SubNavi".
Darunter sind wieder zwei DIVs, wovon der linke Zertifikate enthält (wird via
PHP:
<?php include('all_zerts.inc.php'); ?>IE und Opera machen soweit alles richtig, nur der NS muckt:
Es schein, als würde die FOOTERCELL wieder unter der HEADCELL kleben, anstatt under der INCLUDECELL
Nun zwei Beispiele:
01__so ist in jedem Browser alles richtig. Es handelt sich aber auch hier nur um Text und um keine DIVs: ->click<-
02__hier ist die "Problemseite" mit mehreren DIVs (nur NS. IE und Opera machen's richtig): ->click<-
und hier die Codes:
index.php
PHP:
<!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>
<?php
include('scripts/config.inc.php');
?>
<div id="headcell">
<div id="headLeft">
<div id="headlogo">
<a href="index.php?section=startseite"><img src="images/logo.gif" alt="0" width="126" height="60" border="0"></a></div>
<div id="welcome">
<span class="lilgreen">Welcome<br>
Welcome</span><br>
<span class="lightgrey">Welcome<br>
Welcome<br>
Welcome</span>
</div>
</div>
<div id="headRight">
<div id="headRightNav">
<a href="index.php?section=01" class="navigreen">Link 01</a>
<a href="index.php?section=02" class="navired">Link 02</a>
<a href="index.php?section=03" class="naviblue">Link 03</a>
<a href="index.php?section=04" class="naviyellow">Link 04</a>
<a href="index.php?section=05" class="navigreen">Link 05</a>
<a href="index.php?section=06" class="navigreen">Link 06</a>
|
<a href="index.php?section=07" class="navigreen">Link 07</a>
<a href="index.php?section=08" class="navigreen">Link 08</a>
<a href="index.php?section=09" class="navigreen">Link 09</a>
<a href="index.php?section=10" class="navigreen">Link 10</a>
|
<a href="index.php?section=11" class="navigreen">Link 11</a>
</div>
<div id="positionLSR">
<div id="headRightL">
<img src="images/header_left.gif" alt="" width="106" height="123">
</div>
<div id="headRightR">
<img src="images/header_right.gif" alt="" width="106" height="123">
</div>
<div id="headRightSlogan">
<span class="slogan">
Slogan<br>
</span>
<span class="slogan">
Slogan
</span>
</div>
</div>
</div>
</div>
<div id="includecell">
<?php
include('scripts/config.inc.php');
if(isset($_GET['section']) AND isset($content[$_GET['section']]))
{
if(!file_exists($content[$_GET['section']])) echo "Die Datei ist nicht vorhanden.";
include $content[$_GET['section']];
}
else
{
include $content['error'];
}
?>
</div>
<div id="footercell">
<div id="adresse" class="frame center">
Adresse bli bla blubb blabb blebb blibb usw usf
</div>
<div id="copyright" class="frame center">
Copyright © 2004 by dshock bli bla blubb
</div>
</div>
</body>
</html>die zu includenene Datei mit DIVs:
PHP:
<div id="subnavicell">
<div id="zdf" class="frame center">
<span class="footer"><img src="images/arrow.gif" alt="" width="18" height="9">
<a href="index.php?section=12">Link 12</a>
</span>
</div>
<div id="subnavi" class="frame">
<span class="subnavi subgreen"><img src="images/spacer.gif" alt="" width="9" height="8">Firmenprofil</span>
</div>
</div>
<div id="contentcell">
<div id="leftcell" class="center">
<?php
include('all_zerts.inc.php');
?>
</div>
<div id="rightcell">
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sed ligula. Nam non ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam convallis metus non enim. Sed non massa eget lectus tempor venenatis. Nam bibendum. In hac habitasse platea dictumst. Curabitur tristique urna sit amet turpis. Maecenas vitae massa. Etiam leo quam, commodo nec, viverra sit amet, mollis et, diam. Nulla mattis tristique nulla. Nullam pharetra magna at massa. Nullam lobortis neque et lacus. Nunc volutpat ornare neque. Integer turpis velit, venenatis in, aliquam quis, pulvinar ut, nunc. Praesent sed nibh eu urna euismod ultrices. Fusce pretium tincidunt erat.
</div>
</div>
</div>und der StyleSheet:
Code:
/************************************************/
/************************************************/
/* ALLES IM HEADER UND FOOTER UND ALLGEMEINES */
/************************************************/
*{
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;
}
img{
border:0px;
}
.frame{ /*DIV-style für Button-look-a-like*/
border:1px solid #999999;
background-color:#E6E6E6;
font-size:10px;
}
.center{
text-align:center;
}
.green{
color:#009C38;
}
.white{
font-size:7px;
color:#FFFFFF;
}
.ninepx{
font-size:9px;
}
.bold{
font-weight:bold;
}
/************************************************/
/* 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:199px;
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 28px 5px;
height:13px;
background-color:#FFFFFF;
text-align:center;
}
#positionLSR{
margin-left:0px !important;
margin-left:-1px;
border-color:#000000;
border-style:solid;
border-width:0px;
border-right-width:0px;
margin-right:0px !important;
margin-right:-1px;}
#headRightL, #headRightR{
width:106px;
height:123px;
background-color:#ffcc00;
}
#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) */
}
.slogan{
font-size:48px;
font-family:Times New Roman, Times;
color:#009C38;
padding:0px 0px 0px 47px;
}
.lilgreen{
font-size:10px;
font-weight:bold;
color:#009C38;
}
.lightgrey{
color:#999999;
}
/************************************************/
/* 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 */
/************************************************/
#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;
}
/************************************************/
/************************************************/
/* ALLES IM CONTENT BEREICH */
/************************************************/
/************************************************/
/* Zellen */
/************************************************/
#contentcell{
width:992px;
background:#3CFFFD;
}
#leftcell{
float:left;
width:181px;
background:#9CFF9C;
}
#rightcell{
float:right;
width:806px;
background:#FD37FF;
}
/************************************************/
/* SubNavi */
#subnavicell{
position:relative;
bottom:0px;
width:992px;
height:35px;
background:#F4FF42;
}
#zdf{
float:left;
width:179px;
height:13px;
}
#subnavi{
float:right;
height:13px;
width:804px;
}
.subnavi{
text-align:left;
}
.subgreen{
font-size:10px;
font-weight:bold;
color:#009C38;
}
/************************************************/
/* Content */
.content{
font-size:12px;
margin:0px 100px 0px 100px;
text-align:justify;
}Ich weiß, dass es komplex aussieht, bin mir aber fast sicher, dass es ein eher weniger komplexer Fehler ist
Leider bin ich aber im CSS-Bereich noch recht frisch...Vielen lieben Dank für eure Hilfe!
Gruß
Hi,
nur mal ein Tipp ins Blaue hinein - ohne Test.
Setze mal vor den Div mit der ID footercell (<div id="footercell">) folgenden Container.
Mit clear: both; löst Du vorher eingestellt float-Eigenschaften wieder auf und nimmst die
Elemente wieder in den normalen Textfluss auf. Damit sollten die Footer-Zellen unter dem Content
angeordnet sein.
Durch die Zuweisungen von Null an Höhe (height), Zeilenhöhe (line-height) und Zeichengrösse
(font-size) nimmt das DIV mit dem enthaltenen Leerzeichen keinerlei Einfluss auf das Layout.
So, ich hoffe, dass der Tipp ins Blau ein richtiger war.
Ciao
Quaese
nur mal ein Tipp ins Blaue hinein - ohne Test.
Setze mal vor den Div mit der ID footercell (<div id="footercell">) folgenden Container.
Code:
<div style="height: 0; font-size: 0; line-height: 0; clear: both;"> </div>Elemente wieder in den normalen Textfluss auf. Damit sollten die Footer-Zellen unter dem Content
angeordnet sein.
Durch die Zuweisungen von Null an Höhe (height), Zeilenhöhe (line-height) und Zeichengrösse
(font-size) nimmt das DIV mit dem enthaltenen Leerzeichen keinerlei Einfluss auf das Layout.
So, ich hoffe, dass der Tipp ins Blau ein richtiger war.
Ciao
Quaese
- Status
