• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigations-Listenelemente zentrieren

Status
Für weitere Antworten geschlossen.
J

joha

Neues Mitglied
Hallo

da hier oben im Forum steht für Anfänger und.....

trau ich mich mal, mit simplen Fragen hier aufzutauchen ;-)

Ich bastele gerade an einer Vorlage mit verschiedenen Menüs

Ich möchte gerne das obere Menü zentrieren, geht das nur, icn dem ich die Abstände zwischen den einzelnen Listenpunkten vergrößere, oder geht das auch anders?
Momentan hängt alles zu weit links, die Breite der Elemente möchte ich nicht verändern.

Hier mal der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="" />
<meta name="description" content="">
<meta name="keywords" content="" >
<style type="text/css">
<!--
body
{
font-family:Arial;
font-size:12px;
background-color:#A8C038;
text-align:center;
margin:10px;
}

code {font-size:14px;color:#0000ff;}
pre
{
font-size:14px;
color:#0000ff;
padding:5px;
}
a:link, a:visited, a:active, a:hover
{
text-decoration:underline;
font-weight:normal;
color:#ff0000;
font-size:12px;
}
a:active, a:hover
{
color:#009999;
}
a.menu {
display:block;
padding:3px;
border-top:1px solid #000;
background-color:#737994;
text-align:center;
color:#eeeeee;
text-decoration:none;
}
a.menu:link, a.menu:visited
{
color:#eeeeee;
background-color:#737994;
text-decoration:none; font-weight:bold;
}
a.menu:active, a.menu:hover
{
color:#737994; font-weight:bold;
background-color:#eeeeee;
}

#kopf {
height:114px;
padding:0px;
background-image:url(bilder/higrund.gif);
border-bottom:1px solid #000;

}

#menuoben {
margin:0px auto;
height:22px;
padding:1px;
background-color:#C04040;
border-bottom:1px solid #000;

}



ul#navigation {

margin:0px auto;
padding: 0.2em;
padding: 1px;
text-align: center;
list-style-type: none;
border: 1px solid black;
float:right;
width:800px;

}


ul#navigation li {
padding: 5px;
margin: 0px;
display: inline;
}


ul#navigation a, ul#Navigation {
float: left; width: 1em;
margin: 0.4em;
padding: 0.2em 0,8em;
text-decoration: none;
font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
font-family:arial;
font-size:11px;
color:#007F00;
width:110px;
background-color: #DFDFDF;
}



ul#navigation li a:hover {
border: 1px solid #000;
background-color: #0020FF;
padding: 0px 0px 0px 0px;
color: #0080FF;
}

ul#Navigation div {
clear: left;
}

#left {
background-color:#FFBF00;
width:125px;
float:left;
margin:0px;
clear: left;
}


#content {
border:1px solid #efeff7;
background-color:#efeff7;
width:500px;
float:left;
padding:0px 10px;

}

#content2 {
color:#001060;
float:left;
padding:0px 0px;
clear: right;

}

#bild{
border:1px solid #FF00FF;
float:left;
padding:0px 0px;
}



#right {
background-color:#FFBF00;
width:125px;
float:right;
margin:0px;
}

#fuss{
font-weight:bold;
text-align:center;
margin:0px;
height:25px;
background-color:#00FF00;
width:800px;
clear: both;
}
.menutitle{
font-weight:bold;
text-align:center;
margin:2px;
background-color:#00FF00;
}
.menucontainer {
border:1px solid #000;
background-color:#7b7d8e;
width:125px;
margin:5px;
}

//-->
</style>
<title>Test</title>
</head>
<body>
<div style="width:800px;margin:0px auto;text-align:left;background-color:#bdbec6;border:1px solid #DF00FF">
<div id="kopf">
Kopf
</div>


<div align="center" id="menuoben">

<ul id="navigation" >
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>


<div id="left">
<div class="menucontainer">
<p class="menutitle">MENU 1</p>
<a class="menu" href="#">Link</a>
<a class="menu" href="#">Link</a>
<a class="menu" href="#">Link</a>
<a class="menu" href="#">Link</a>
<a class="menu" href="#">Link</a>
</div>
</div>
<div id="content">
<div id="bild"><img src="bilder/ka.jpg" width="207" height="150" border="0" alt=""></div>
<div id="content2">Bildbeschreibung <br>
<br>
<br>
Bildbeschreibung<br>
<br>
<br>
Bildbeschreibung
</div>
<div style="clear: both;"></div>
<div id="bild"><img src="bilder/ka.jpg" width="207" height="150" border="0" alt=""></div>
<div id="content2">Bildbeschreibung <br>
<br>
<br>
Bildbeschreibung<br>
<br>
<br>
Bildbeschreibung
</div>
</div>

<div id="right">
<div class="menucontainer">
<p class="menutitle">MENU 2</p>
<a class="menu" href="#">Link</a></a>
<a class="menu" href="#">Link</a></a>
<a class="menu" href="#">Link</a></a>
<a class="menu" href="#">Link</a></a>
<a class="menu" href="#">Link</a></a>
</div>
</div>

<div id="fuss">
Fuss
</div>

</div>
</body>
</html>

Vielen Dank

Johanna
 
Ich habe mir nicht alles so genau angesehen.
Aber wenn du li a nach links floatest kannst du es nicht gleichzeitig zentrieren.
Code: 
ul#navigation a, ul#Navigation {
/*float: left; entfernen*/
width: 1em;
margin: 0.4em;
....
<a> kann so allerdings nicht mehr als Block-Element behandelt werden.
padding-top und padding-bottom sind damit nicht mehr zu gebrauchen.

Hier hast du ein Komma anstelle eines Punktest geschrieben:
Code: 
ul#navigation a, ul#Navigation {
....
padding: 0.2em 0[COLOR=Red],[/COLOR]8em;
.....
Alternativ zu padding-top bzw. bottom könntest du eventuell line-height verwenden
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben