Filter Vergewalitger >)
Ich hab schon wiiiieder ein Problem
Ich hab grad mit nem neuen project angefangen, und bin grade noch mit dem layout beschäftigt!
Dieses Layout schaut wie folgt aus:
------------------------------
|| header ||
------------------------------
|| login | Navi | Registrieren ||
------------------------------
|| navi2 | Content ||
------------------------------
Also zuerst ein div Tag mit dem header, danach einen div Tag in dem noch 3 Div tags mit float left sind (login, navi, registrieren) und danach noch einen div Tag mit wieder 2 divs darin (navi2, content)!
es funktioniert eigentlich alles, nur im FF ist mein erster navi Tag, also der mittlere div tag der 3er Reihe, total verschoben!
Im IE6 sowie 7 funktioniert es einwandfrei!
Hier hab ich mal die CSS datei, und die html Datei, und zum Schluss noch der Link damit ihr euch das selbst ansehen könnt!
HTML DATEI:
CSS DATEI:
http://www.http.com//tombeat.to.funpic.de/turnierfotos/index2.html <<- Hier gehts zur HP
Hoffe mal das ich nur ne kleinigkeit übersehe!
Leider hab ich jedesmal wenn ich eine HP beginne zu anfangs probleme mit der positionierung der Divs! Vor allem wenn es sich um 3 divs handelt!
MfG
Tom
Ich hab grad mit nem neuen project angefangen, und bin grade noch mit dem layout beschäftigt!
Dieses Layout schaut wie folgt aus:
------------------------------
|| header ||
------------------------------
|| login | Navi | Registrieren ||
------------------------------
|| navi2 | Content ||
------------------------------
Also zuerst ein div Tag mit dem header, danach einen div Tag in dem noch 3 Div tags mit float left sind (login, navi, registrieren) und danach noch einen div Tag mit wieder 2 divs darin (navi2, content)!
es funktioniert eigentlich alles, nur im FF ist mein erster navi Tag, also der mittlere div tag der 3er Reihe, total verschoben!
Im IE6 sowie 7 funktioniert es einwandfrei!
Hier hab ich mal die CSS datei, und die html Datei, und zum Schluss noch der Link damit ihr euch das selbst ansehen könnt!
HTML DATEI:
HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Turnierfotos</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root">
<a class="header" href="#"><div id="header"> </div></a>
<div id="Teil1">
<div id="navi-links">
Login
</div>
<div id="navi-mitte">
<ul class="navi">
<li><a href="#" class="startseite">Startseite</a></li>
<li><a href="#" class="bilder">Bilder</a></li>
<li><a href="#" class="preise">Preise</a></li>
<li><a href="#" class="ueber-uns">Über uns</a></li>
</ul>
</div>
<div id="navi-rechts">
Registrieren
</div>
</div>
<div id="Teil2">
<div id="navi2">
<ul class="navi2">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
<div id="content">
<h1>Willkommen</h1>
</div>
</div>
</div>
</body>
</html>
Code:
#root {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; }
#header {
width: 950px;
height: 150px;
background: url(Bilder/header.jpg); }
#Teil1 {
width: 950px;
height: 130px;
float: left; }
#navi-links {
position: relative;
float: left;
width: 150px;
height: 130px;
background: #c1c1c1;
font-size: 18px;
color: #990000; }
#navi-mitte {
width: 650px;
height: 130px;
float: left;
position: relative;}
#navi-rechts {
width: 150px;
height: 130px;
float: left;
position: relative;
background: #c1c1c1;
font-size: 18px;
color: #990000; }
#Teil2 {
width: 950px;
clear: both; }
#navi2 {
float: left;
width: 150px;
height: 520px;
background: #c1c1c1; }
#content {
float: left;
width: 800px;
height: 520px;
background: url(Bilder/content.jpg); }
.navi {
list-style: none;
margin: 0px; }
.navi li {
float: left; }
.startseite {
text-decoration: none;
border: 0;
padding: 0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size: 0;
width: 165px;
height: 130px;
background: url(Bilder/startseite.jpg); }
.bilder {
text-decoration: none;
border: 0;
padding: 0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size: 0;
width: 160px;
height: 130px;
background: url(Bilder/bilder.jpg); }
.preise {
text-decoration: none;
border: 0;
padding: 0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size: 0;
width: 160px;
height: 130px;
background: url(Bilder/preise.jpg); }
.ueber-uns {
text-decoration: none;
border: 0;
padding: 0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size: 0;
width: 165px;
height: 130px;
background: url(Bilder/ueber_uns.jpg); }
.startseite:hover {
background-position: -165px; }
.bilder:hover {
background-position: -160px; }
.preise:hover {
background-position: -160px; }
.ueber-uns:hover {
background-position: -165px; }
Hoffe mal das ich nur ne kleinigkeit übersehe!
Leider hab ich jedesmal wenn ich eine HP beginne zu anfangs probleme mit der positionierung der Divs! Vor allem wenn es sich um 3 divs handelt!
MfG
Tom
Zuletzt bearbeitet: