Antworten auf deine Fragen:
Neues Thema erstellen

CSS Horizontalmenü zentriert

Donatien

Aktives Mitglied

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

Die Reichenfolge :

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

Code:
/* ==================================
   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
 
Zuletzt bearbeitet:

cebito

undefined

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

Aktives Mitglied

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:

Code:
#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; }
 
Zuletzt bearbeitet:

Herr_D

offline

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
 

Herr_D

offline

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)

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=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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben