CSS Horizontalmenü zentriert

[Donatien]

Ich hab mal wieder ein Problem, die horizontale Navigation mittig zu plazieren

Die Reichenfolge :

Header
Horizontalmenü = Navigation
aside = Linke Spalte
Content = Textbereich

/* ==================================
   1. Kalibrierung
   =============================== */

* { padding: 0; margin: 0; } 
 
h2 { 
  margin-bottom: 3em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;  
}  
p { 
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  font-size: 9pt;
  line-height: 1.5;
} 

ol ul { margin-bottom: 2em; } 

li { 
  margin-left: 2em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;  
  line-height: 1.5;  
  list-style-type:square;
  color: #245970;
}   

#container
{
  margin: 0px auto; /* Die Seite zentrieren */    
  width: 990px;
  background-color: #fff;
  color: #193F4F;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;  
}

#header
{
    width: 994px;
    height: 248px;
  background: #ccc;
     background-image: url(header.jpg);
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 994px;
    background-color: #fff;
  text-align: center;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
  list-style-type: none;

}

#navigation li a
{
    display: block;
    float: left;
    padding: 2px 15px;
    color: #3A90B4;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { 
  background: #A50010;
  color: #fff;
}

#content-container
{
    float: left;
    width: 994px;
    background-color: #fff;
  color: #1F2C33;
}

#content
{
    clear: right;
    float: left;
    width: 754px;
    padding: 3px 0;
    margin: 0 15 0 3px;
    display: inline;
  color: #2A3B45;
}

#content h2 { margin: 0; }

#aside
{
  float: left;
  width: 200px;
  height: 450px;
  margin: 0;
  background-color: white;
  background-image: url(robin.jpg);
  background-position: center bottom;
  background-repeat:no-repeat;   
  color: #1F2C33;
  padding: 3px;
  display: inline;
}

#aside h3 { margin: 0; }

#footer
{
    clear: left;
    text-align: right;
    height: 62px;
    background-image: url(footer.jpg)
}

/* Klassen und Floaten von Bildern 
   u.a.  nach links und rechts
   ***************************** */
.bildlinks {
  float: left;
  margin-right: 20px;
  margin-bottom: 12px;
}
.bildrechts {
  float: right;
  padding: 3px;
  margin-bottom: 3px;
  margin-left: 3px;
 }
 
#box {
 min-width: 500px;
 max-width: 700px;
 margin: auto;
} 

/* Beginn Tabellenformatierung Getraenke */ 
table.getraenke { 
  width: 500px;
  vertical-align: top;
  margin: 0 auto;  
}
 
.getraenke tr {
  color: #552910;
  background: white;
}
.getraenke td,
.getraenke th { padding: 10px 5px 8px 0; }
 
.getraenke td strong,
.getraenke td.price {
  color: #552910;
  font-family: Verdana,Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-style: normal;
  background-color: transparent;
/*  text-transform: uppercase;   Umformung in Grossbuchstaben*/
  font-weight: bold;
}
.getraenke td.price {
  vertical-align: bottom;
  text-align: right;
  white-space: nowrap;
}

Danke für die Mühe

 

[cebito]

AW: CSS Horizontalmenü zentriert

Wie siehts denn aus, wie solls denn aussehen? Wenn du "#navigation ul li" auf inlinestellst, hast du kaum Möglichkeiten, die entsprechend zu platzieren. Benutze "inline-block" oder floate sie. Aber wie gesagt... bebilder mal.

 

[Donatien]

AW: CSS Horizontalmenü zentriert

Die Navigationpunkte (Home etc. ) fangen am linken Rand an, sollen aber in der Mitte zentriert werden.

... das "inline" hab ich glöscht, aber die Linksaurichtung ist immer noch da.


Es geht also um diesen Bereich:

#navigation { 
float: left;     width: 994px;    
background-color: #fff;   
text-align: center; 
}  

#navigation ul {     
margin: 0;    
 padding: 0;
}  

#navigation ul li {
   list-style-type: none;
  }  

#navigation li a { 
    display: block;
     float: left;
     padding: 2px 15px;
     color: #3A90B4; 
    text-decoration: none; 
    border-right: 1px solid #fff;
}  

#navigation li a:hover {
    background: #A50010;
   color: #fff; }

 

[Herr_D]

AW: CSS Horizontalmenü zentriert

ol ul?


Sei es drum... bißchen html wäre auch noch schön, aber setz da einfach ein text-align:center mit ein

 

[Donatien]

AW: CSS Horizontalmenü zentriert

... das hilft mir bei obiger CSS nicht wirklich weiter ..

 

[cebito]

AW: CSS Horizontalmenü zentriert

Es geht also um diesen Bereich:

Wie viele Navipunkte hast du?
Sind/sollen die alle gleich breit (sein)?

... das hilft mir bei obiger CSS nicht wirklich weiter ..

...und deine Angaben helfen uns nicht wirklich weiter dir zu helfen. Klick mal die rote Zeile in meiner Signatur, hab keinen Bock auf Rätselraten.

 

[anoX]

AW: CSS Horizontalmenü zentriert

Zeig mal bitte noch die HTML.

 

[Herr_D]

AW: CSS Horizontalmenü zentriert

schmeiß display:block bei li a raus und inline bei li rein dann geht das auch mit text-align:center


z.B. zentrierte Navi (nur Navi)

<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">


body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #666;
}

#navigation ul
{
    margin: 0;
    padding: 0;
    text-align:center;
}

#navigation ul li
{
  list-style-type: none;
  display: inline;

}

#navigation li a
{
    padding: 22px 15px;
    color: #3A90B4;
    text-decoration: none;
    border-right: 1px solid #444;
}

#navigation li a:hover {
  background: #A50010;
  color: #fff;
}


</style>
</head>

<body>

<div id="navigation">
<ul>
<li><a href="">Punkt I</a></li>
<li><a href="">Punkt II</a></li>
<li><a href="">Punkt III</a></li>
<li><a href="">Punkt IV</a></li>
</ul></div>

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

 

[Donatien]

AW: CSS Horizontalmenü zentriert

Vielen Dank!!
Nu funktioniert es