nicht angemeldet
Hallo!
Erstmal guten Rutsch ins neue Jahr!
Mein Problem: Ich habe den folgenden CSS Code für das darunterliegende XHTML Dokument. Er ist noch nicht vollständig, aber mich wundert es, warum in dem links gefloateten Navidiv im mitteldiv, das floaten nich mehr funktioniert? so wie ich es jetzt habe, interpretieren es internet explorer 6, opera 8.5/firefox 1.5, navigator 7.1 verschieden?
ich möchte nur den balken links haben und den "contentbereich" rechts in der ganzen box.
wenn ihr eine bessere lösung habt, bzw. (sehr wahrscheinlich) was an meinem code auszusetzen habt, dann könnt ihr auch ja auch daran auslassen, aber das obere ist erstmal das hauptproblem für mich.
CSS-Code:
/* Allgemeingeltende Eigenschaften */
* {
overflow: hidden;
}
body {
background: #666666;
color: #000000;
font-family: Arial, sans-serif;
font-size: 16px;
padding: 0px;
margin: 0px;
}
div {
border: none;
margin: 0px;
padding: 0px;
}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}
/* Einschließende <div>s der Seite */
div#pageouter {
width: 804px;
margin: 20px auto 20px;
}
div#pageinner {
border: 1px solid #666666;
}
/* Header <div> */
div#header {
padding: 27px 0px 0px 567px;
width: 237px;
height: 138px;
overflow: auto;
background: #666666 url('../../pictures/gfx/header.jpg')
no-repeat left top;
font-size: 12px;
}
div#header h2 {
font-size: 15px;
font-decoration: none;
margin: 0px;
padding: 0px;
}
/* Mittleres Ausrichtungs <div> */
div#middle {
width: 804px;
background: #FF0000;
}
/* Linkes Navigations <div> */
div#leftnavi {
float: left;
width: 183px;
height: 100%;
background: #666666;
}
div#leftnavi div#leftbeam {
float: left;
width: 22px;
height: auto;
background: #666666 url('../../pictures/gfx/navi_left_beam.jpg')
repeat-y left top;
}
div#leftnavi div#leftcontent {
width: 161px;
height: auto;
/*margin-left: 22px;*/
background: #666666 url('../../pictures/gfx/navi_left_bg.jpg')
repeat-y left top;
}
div#leftnavi div#leftcontent div#leftheader {
width: 161px;
height: 7px;
background: #666666 url('../../pictures/gfx/navi_left_header.jpg')
no-repeat left top;
}
div#leftnavi div#leftcontent div#leftarea {
background: #666666 url('../../pictures/gfx/navi_left_area_bg.jpg') repeat-y;
background-position: 49px left;
height: auto;
width: 161px;
line-height: 21px;
margin-bottom: 20px;
}
div#leftnavi div#leftcontent div#leftarea h2 {
width: 143px;
height: 34px;
padding: 14px 0px 0px 18px;
background: #666666 url('../../pictures/gfx/navi_left_area_header.jpg')
no-repeat left top;
font-size: 13px;
}
div#leftnavi div#leftcontent div#leftarea p {
width: 146px;
height: 18px;
padding: 2px 0px 0px 15px;
background: #666666 url('../../pictures/gfx/navi_left_area_footer.jpg')
no-repeat left top;
font-size: 8px;
font-weight: bold;
}
XHTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "includes/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GSG9 :: Clanpage</title>
<link rel="stylesheet" type="text/css" href="includes/gfx/layout.css" />
</head>
<body>
<div id="pageouter"><div id="pageinner"><!-- Seitenausrichtung Anfang -->
<div id="header"><!-- Header Anfang -->
<h2>Shoutbox</h2><!-- HINWEIS: fünf Zeilen passen höchstens -->
1. Zeile mit Inhalt | tlahnI tim elieZ .1 <br />
2. Zeile mit Inhalt | tlahnI tim elieZ .2 <br />
3. Zeile mit Inhalt | tlahnI tim elieZ .3 <br />
4. Zeile mit Inhalt | tlahnI tim elieZ .4 <br />
5. Zeile mit Inhalt | tlahnI tim elieZ .5 <br />
</div><!-- Header Ende -->
<div id="middle"><!-- Mittlere Reihe Anfang -->
<div id="leftnavi"><!-- Linke Navigation Anfang -->
<div id="leftbeam"> <!-- Linker Navigationsbalken --></div>
<div id="leftcontent"><!-- Linker Navigationsinhalt Anfang -->
<div id="leftheader"> <!-- Linker Navigations-Header --></div>
<div id="leftarea"><!-- Linker Navigations-Area-Bereich Bereich Anfang -->
<h2>Login</h2>
Loginscripte von PHP<br />
u.s.w. hier einfügen
<p>angemeldet?<p>
</div><!-- Linker Navigations-Area-Bereich Bereich Ende -->
<ul id="leftlinklist"><!-- Linker Navigations-Link-Liste Anfang -->
<li id="leftlinklistheader">Links</li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li id="leftlinklistfooter"> </li>
</ul><!-- Linker Navigations-Link-Liste Ende -->
</div><!-- Linker Navigationsinhalt Ende -->
</div><!-- Linke Navigation Ende -->
<div id="rightnavi"><!-- Rechte Navigation Anfang -->
<div id="rightbeam"> <!-- Rechter Navigationsbalken --></div>
<div id="rightcontent"><!-- Rechter Navigationsinhalt Anfang -->
<div id="rightheader"> <!-- Rechter Navigations-Header --></div>
<div id="rightarea"><!-- Rechter Navigations-Area-Bereich Bereich Anfang -->
<h2>Umfrage</h2>
Große Umfrage<br />
Jetzt neu!
<p>unkostenlos!<p>
</div><!-- Right Navigations-Area-Bereich Bereich Ende -->
<ul id="rightlinklist"><!-- Rechter Navigations-Link-Liste Anfang -->
<li id="rightlinklistheader">Links</li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li id="rightlinklistfooter"> </li>
</ul><!-- Rechter Navigations-Link-Liste Ende -->
</div><!-- Rechter Navigationsinhalt Ende -->
</div><!-- Rechte Navigation Ende -->
<div id="content"><!-- Inhalt Anfang -->
<h1>Ich bin der Seitentitel</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ametur.
</div><!-- Inhalt Ende -->
</div><!-- Mittlere Reihe Ende -->
<div id="footer"><!-- Footer Anfang -->
<a href="disclaimer.php">Disclaimer</a>
| © 2005 by Su-Li-Son and The XMA
</div><!-- Footer Ende -->
</div></div><!-- Seitenausrichtung Ende -->
</body>
</html>
Mit freundlichen Grüßen,
Adrian