Hi,
wie die Überschrift es schon sagt habe ich heir Probleme damit meine Navi zu zentrieren bzw. sie überhaupt zu verschieben, hab den Code jetzt zig mal durchgegangen hier und da Sachen verändert wie z.B. die Margins im CSS dann das Align in der index.html aber es hilft nichts.
Ich bitte euch um eure Hilfe.
Code:
<!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>test</title>
<link href="css/template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="header2"></div>
<div id="navi">
<div class="pro_line3">
<ul class="select">
<li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">Fishermen at Sea</a></li>
<li><a href="#nogo">The Shipwreck</a></li>
<li><a href="#nogo">The Vale of Ashburnham</a></li>
<li><a href="#nogo">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">The Hay Wain</a></li>
<li><a href="#nogo">Brighton Beach</a></li>
<li><a href="#nogo">Malvern Hall</a></li>
<li><a href="#nogo">Salisbury Cathedral</a></li>
<li><a href="#nogo">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">The Girl with Green Eyes</a></li>
<li><a href="#nogo">The Dream</a></li>
<li><a href="#nogo">Woman in Blue</a></li>
<li><a href="#nogo">The Yellow Dress</a></li>
<li><a href="#nogo">The Piano Lesson</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
Code:
/* CSS Document */
body {
background-color: #FFFFFF;
font-size: 12px; /* -------hier veränder ich komischerweise die größe der schrift der linken spalte----- */
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
padding:0px;
margin: 0px;
text-align:center
}
/* -------- divs ---------- */
#wrapper {
width: auto;
height: auto;
background-color: #FFFFFF;
border: 1px dotted black;
}
#header {
width: 850px;
height: 73px;
margin-left: auto;
margin-right: auto;
background-image:url(../Bilder/header.jpg)
}
#navi {
margin-left: auto;
margin-right: auto;
}
#header2 {
width: 850px;
height: 279px;
margin-left: auto;
margin-right: auto;
background-image:url(../Bilder/header2.jpg)
}
#main {
width: 850px;
height: 398px;
margin-left: auto;
margin-right: auto;
background-image: url(../Bilder/main.jpg);
}
#footer {
width: 850px;
height: 49px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
/* --------- navi ------- */
.pro_line3 {
height:36px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:500;
}
.pro_line3 .select {
margin:0;
padding:0 0 0 20px;
list-style:none;
white-space:nowrap;
}
.pro_line3 li {
float:left;
background:url(../line/blank_over_bw.gif);
}
.pro_line3 .select a {
display:block;
height:36px;
float:left;
background: url(../line/blank_bw.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:25px;
white-space:nowrap;
color:#ddd;
}
.pro_line3 .select a b {
display:block;
padding:0 30px 10px 15px;
background:url(../line/blank_bw.gif) right top;
}
.pro_line3 .select a:hover,
.pro_line3 .select li:hover a {
background: url(../line/blank_over_bw.gif);
padding:0 0 0 15px;
line-height:27px;
cursor:pointer;
color:#fff;
}
.pro_line3 .select a:hover b,
.pro_line3 .select li:hover a b {
display:block;
padding:0 30px 9px 15px;
background:url(../line/blank_over_w.gif) right top;
cursor:pointer;
}
.pro_line3 .sub {
display:none;
}
/* IE6 only */
.pro_line3 table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.pro_line3 .sub {
margin:0;
padding:0 0 0 60px;
list-style:none;
}
.pro_line3 .sub li {background-image:url(../line/blank_over_w.jpg);}
.pro_line3 .select :hover .sub {
height:18px;
display:block;
position:absolute;
float:left;
width:750px;
top:28px;
left:0;
text-align:center;
}
.pro_line3 .select :hover .sub li a
{display:block;height:18px; line-height:16px; float:left; background:transparent url(.//line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;}
.pro_line3 .select :hover .sub li a:hover
{color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;}
27.02.2009, 11:03
Probleme mit dem zentrieren
Ähnliche Themen
Linear-Darstellung
