Hallo,
bisher hab ich der Einfachheit halber die meisten Internetseiten mit Tabellen gebaut. Dieses Mal wollte ich darauf aber verzichten und zum ersten Mal alles mit DIVs bauen. Dass es unter den versch. Browsern da kompatibilitäsprobleme gibt wusste ich, deswegen hab ihc bis jetzt z.B. komplett auf border oder paddings verzichtet um garnich erst irgendwelch width-Probleme zu bekommen - dachte ich zumindest dass es so einfach wäre 
Habe also erst mein komplettes Layout mit absolute oder parent Layern angeordnet, was aber im IE immer ziemlich zerschossen ankam.
Dann hab ichs zu einem Float-Layout umgestellt. Aber auch hier passt die mittlere Zeile nie zwischen die linke und rechte.
Hatte zwei Ansätze:
1) Ich gebe dem mittleren Div die exakte größe, dann wird er allerdings im Firefox nicht mittig zwischen den beiden anderen Layern dargestellt sondern immer linksbündig - egal was ich tue.
2) Also zweiter Ansatz: den mittleren Layer genau so breit machen wie die Lücke groß ist und dann später darin einen weiteren etwas kleineren Layer positionieren der mittig ist um die kleinen abstände links und recht hin zu bekommen. Das funktioniert in FF, aber verschiebt sich nun wiederrum im IE! Hab schon alles mögliche probiert un gestern Stunden lang gegoogelt. Mittlerweile stehe ich kurz davor doch einfach wieder eine dreispaltige Tabelle anzulegen, die funktioniert immerhin innerhalb von 30sekunden :-/
Ich hänge mal drei Grafiken an: einmal so wies irgendwann aussehen soll, einen Screenshot vom aktuellen FF und einen vom (verschobenen) IE Stand. Vielelicht gibt es ja insgesamt auch eine bessere Herangehensweise, bin mir nicht sicher? Hier auch der Code...
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>QRexplorer : Fußball Edition</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="center">
<div id="content">
<!-- Logo usw. -->
<div id="head"><img src="images/head_qrexplorer.jpg" /></div>
<!-- Links -->
<div id="left">
<div id="menuetop"></div>
<div id="menue">
<p>Text</p></div>
<div id="menuebottom">
<p>Text</p>
</div>
</div>
<!-- Rechts -->
<div id="right" style="background-color:#000000">
<p>Texewgt weg</p>
<p> </p>
<p> </p>
</div>
<!-- Mitte -->
<div id="middle" style="background-color:#555555">
<p>Text erbr</p>
<p> </p>
</div>
</div>
</div>
</body>
</html>
Code:
body, html {
background-color:#f0f0f0;
background-image: url(../images/hg.gif);
background-repeat: repeat;
margin: 0px;
padding: 0px;
/*scrollbar-arrow-color:#c9c9c9;
scrollbar-face-color:#f2f2f2;
scrollbar-highlight-color:#c9c9c9;
scrollbar-shadow-color:#c9c9c9;
scrollbar-darkshadow-color:#f2f2f2;
scrollbar-3dlight-color:#f2f2f2;
scrollbar-track-color:#f2f2f2;*/
height: 100%;
text-align:center;
}
img {
border: none;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin: 0px;
line-height: 16px;
text-align: left;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
margin: 0px;
line-height: 18px;
text-align: left;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
div#center {
margin: 0px auto;
width: 798px;
min-height: 100%;
height: 100%;
background-color: #ffffff;
background-image: url(../images/hg_schatten.gif);
}
div#content {
margin:0px auto;
overflow:auto;
width:764px;
}
div#scrollbar {
display:none; /* hide from incapable */
}
div#head {
margin-top: 12px;
}
div#left {
margin-top: 0px;
width:185px;
float:left;
}
div#middle {
margin-top: 8px;
width:394px;
overflow:auto;
}
div#right {
margin-top: 8px;
width:185px;
float:right;
}
div#biggerright {
margin-top: 8px;
width:571px;
float:right;
}
div#menuetop {
background-color:#ffffff;
background-position:top;
background-image: url(../images/menue_top.gif);
width:100%;
height:17px;
}
div#menue {
background-color:#f0f0f0;
background-image: url(../images/menue_hg.gif);
width:100%;
}
div#menuebottom {
background-color:#dddddd;
background-image: url(../images/menue_bottom.gif);
width:100%;
height:36px;
}
LinkBack URL
About LinkBacks
Zitieren
