Layout homepage

musclebreast · 4 Mai 2008

Hey,
ich habe ein Problem und verzweifel schon langsam. Ich habe ein Seitenlayout und das funktioniert in allen Browsern und Versionen nur beim IE 6 gibs Probleme. Ja jetzt habe ich schon gesehen kann man abfragen obs der IE 6 ist und gesonderte Angaben dann übergeben aber irgendwie bekomme ichs nicht hin. Und zwar ist es die rechte spalte die beim IE 6 auf einmal unter der linken ist. Warum und kann mir jemand einen Tipp geben?
html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]" xml:lang="de" lang="de"> 
<head> 
<title>Kontakt - Ralf Hardt</title> 
<meta name="author" content="Ralf Hardt">
<meta name="description" content="Dieser Beschreibungstext soll einem Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="keywords" content="HTML, Software, Hardt">
<meta name="date" content="2008-4-20T08:49:37+02:00">
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Page-Enter" content="RevealTrans (Duration=1, Transition=1)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)">
<link rel="stylesheet" type="text/css" href="page.css">
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
</head> 
<body> 
<div id="header">
<div id="header1"></div> <div id="header2"></div> <div id="header3"></div> 
</div> 
<div id="navileiste"> 
<ul> 
<li>... Kontakt</li> 
</ul> 
</div> 
<div id="navi">
 
<ul>
<li>
<div id="test1"><a href="startseite.htm"><img src="startseite1.png" width="120" height="30" border="0"></a></div>
<div id="test"><a href="startseite.htm"><img src="startseite.png" width="120" height="30" border="0"></a></div>
</li>
<li>
<div id="test1"><a href="Profil.htm"><img src="profil1.png" width="120" height="30" border="0"></a></div>
<div id="test"><a href="Profil.htm"><img src="profil.png" width="120" height="30" border="0"></a></div>
</li>
<li>
<div id="test1"><a href="Leistungen.htm"><img src="leistungen1.png" width="120" height="30" border="0"></a></div>
<div id="test"><a href="Leistungen.htm"><img src="leistungen.png" width="120" height="30" border="0"></a></div>
</li>
<li>
<div id="test1"><a href="Referenzen.htm"><img src="referenzen1.png" width="120" height="30" border="0"></a> </div>
<div id="test"><a href="Referenzen.htm"><img src="referenzen.png" width="120" height="30" border="0"></a> </div>
</li>
<li>
<div id="test1"><a href="Kontakt.htm"><img src="Kontakt1.png" width="120" height="30" border="0"></a></div>
<div id="test"><a href="Kontakt.htm"><img src="Kontakt.png" width="120" height="30" border="0"></a> </div>
</li>
</ul>
</div> 
<div id="row"><div id="bilder_kontakt"></div> 
</div> <div id="content"> 
<div id="inner"> 
<h1>Kontakt</h1> 
<h3>Fragen, Probleme, Anregungen? Sie m&ouml;chten Lob oder Kritik loswerden? 
So erreichen Sie uns! </h3>
<table width="100%" border="0">
<tr>
<td width="14%">Telefon:</td>
<td width="86%">0385</td>
</tr>
<tr>
<td>Fax:</td>
<td>035</td>
</tr>
<tr>
<td>Mail:</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp; </p>
</div> 
</div> 
<div id="footer"> 
<p>Copyright&copy;2008 Ralf Hardt - Update 1.5. 2008 - <a href="impressum.htm">Impressum 
</a>- <a href="disclaimer.htm">Disclaimer </a></p> 
</div> 
</body>
</html>
 
css:
 
@font-face {
font-family: BankGothic Md BT;
font-style: normal;
font-weight: normal;
src: url(BANKGOT1.eot);
}
@font-face {
font-family: BankGothic Md BT;
font-style: normal;
font-weight: 700;
src: url(BANKGOT0.eot);
}
@font-face {
font-family: BankGothic Md BT;
font-style: normal;
font-weight: 700;
src: url(BankGthd.ttf);
}
html { 
font-family: BankGothic Md BT, Copperplate Gothic Light, arial, helvetica, tahoma, verdana, sans-serif; 
font-size: 100.01%; height: 100%; 
color: #AD1448; 
background-color: F0F2AA;
scrollbar-face-color: #AD1448;
scrollbar-track-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
}
 
body { height: 100%;}
 
#header { 
position: fixed; 
top: 0; 
left: 0; 
z-index: 3; 
width: 100%; 
height: 70px; 
color: inherit; 
background-color: #fcf8f9; 
border: 1px solid #AD1448;
border-left-width:0px;
border-top-width:0px;
}
 
#header1 { position: relative;
margin-left:0px;
width: 302px; 
height: 70px; 
color: inherit; 
background-color: white; 
background-image:url(banner.png);
 
}
#header2 { position:absolute;
top:0px;
margin-left:302px;
width: 520px; 
height: 70px; 
color: inherit; 
background-color: white; 
background-image:url(banner2.gif);
 
}
 
#navileiste { 
position: fixed; 
top: 70px; 
left: 0; 
z-index: 2; 
width: 100%; 
height: 29px; 
color: inherit; 
background-color: #FFDFDF; 
border: 1px solid #AD1448;
background-image:url(leiste.jpg);
 
}
 
 
#navileiste ul { 
margin-left: 193px; 
list-style-type: none;
}
 
#navileiste li {
margin-left:10px;
margin-top:5px; 
color:white;
white-space:pre; 
 
}
 
#navi { 
position: fixed; 
left: 0; 
top: 0; 
z-index: 2; 
width: 189px; 
height: 100%; 
color: inherit; 
background-color: white; 
border: 1px solid #AD1448;
background-image:url(navi.jpg);
background-position:-1px 70px;
border-bottom-width:0px;
background-repeat:no-repeat;
 
}
 
#navi ul { margin-top: 140px; margin-left: 30px; list-style-type: none;}
#navi li { margin-top: 15px; list-style-type: none;}
 
 
#navigation_table {background-image:url(buttonh.jpg);background-repeat:repeat-y;background-position:15px 0px;
}
 
 
 
#navigation_table a:link {margin-left:15px;margin-TOP:5px;font-family:'BankGothic Md BT';text-decoration:none; font-weight:bold; color:#AD1448;font-size:12px; }
#navigation_table a:visited{ margin-left:15px;margin-TOP:5px;text-decoration:none; font-weight:bold; color:#AD1448;font-size:12px; }
#navigation_table a:hover{ margin-left:15px;margin-TOP:5px;color:black;font-size:12px; }
 
#row { 
position: fixed; 
top: 0; 
right: 0; 
z-index: 1; 
width: 160px; 
height: 100%; 
color: inherit; 
background-color: white;
background-image:url(navi1.jpg);
 
background-position:0px 70px;
background-repeat:no-repeat;
}
#row div { margin-top:27px;}
#content { background-color: white;
 
background-image:url(hintergrund_all.jpg);
background-position:center 70px;
background-position:-1px 70px;
background-repeat:no-repeat;
margin: 0 160px 0 193px; 
min-height: 94.5%; border-right: 0px solid #000000;
}
#inner { 
background-position:center 70px;
background-repeat:no-repeat;
background-image:url(inhalt.jpg);
height: 250px; 
padding: 136px 0 53px 0;
}
#inner h1{font-size:2.5em;
color: #AD1448;
text-align:center; 
margin-top: -15px; 
margin-bottom: 35px; 
}
 
#inner p{ 
font-size:1em;
color: black;
text-align:left; 
margin-left: 20px; 
margin-right: 10px; 
white-space:normal; 
}
#footer { 
position: absolute; 
bottom: -1; 
left: 0; 
z-index: 3; 
width: 100%; 
height: 40px; 
color: inherit; 
background-color: white; 
border-top: 1px solid #AD1448;}
 
#footer p {font-size:12px;
text-align:center; 
margin-top:12px; 
 
}
#footer a:link { font-family:'BankGothic Md BT';text-decoration:none; font-weight:bold; color:#AD1448;font-size:12px; }
#footer a:visited { text-decoration:none; font-weight:bold; color:#AD1448;font-size:12px; }
#footer a:hover { color:black;font-size:12px; }
 
 
#news h1{font-size:0.9em;
color: #AD1448;
text-align:center; 
margin-bottom:7px;
 
 
}
 
#news p{font-size:0.8em;
color: black;
margin-left:5px; 
margin-right:5px; 
 
}
 
#news1 { margin-top: 140px;}
#news1 h1{
font-size:1.1em;
color: #AD1448;
text-align:center; 
margin-bottom:7px;
 
 
}
 
#inner h3{font-size:1em;
color: #AD1448;
text-align:left; 
margin-left: 20px; 
margin-right: 10px; 
margin-bottom:10px;
margin-top:20px; 
}
 
#inner p{ 
font-size:1em;
color: black;
text-align:left; 
margin-left: 20px; 
margin-right: 10px; 
white-space:normal; 
}
 
#inner table{ margin-left: 20px;
font-size:1em;
color: black;
text-align:left; 
white-space:normal; 
}
 
#bild_leistungen { background-position:center 70px;height:100%;width:99%;
background-image:url(test.jpg);
background-repeat:no-repeat;
 
}

Es sieht viel aus aber es geht nur um das Div-Element row
ich verzweifel schon. Bitte rette mich..
lg
Lara

Maxi · 4 Mai 2008

Bitte die Forenregeln durchlesen und beim nächsten Mal, wenn du Codes im Forum postest die Code-Tags verwenden.
Danke.

neuroleptika · 4 Mai 2008

Der IE6 behandelt position: fixed; wie position: static; also den Standartwert.
Du könntest für den IE6 alle position: fixed; gegen position: absolute; tauschen.

Dann sieht es bestimmt schon etwas ordentlicher aus.
Zumindest rutschten dann die Elemente nicht mehr untereinander.

Ich würde es für alle Browser ohne position: absolute; bzw fixed umsetzten.

Der Quelltext ist ziemlich aufgebläht. Das macht die Fehlersuche nicht einfach.

Layout homepage

musclebreast

Mitglied

Maxi

Neues Mitglied

neuroleptika

Aktives Mitglied

Neueste Beiträge