zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü lässt sich nicht zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 18.03.2010, 12:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.03.2010
Beiträge: 3
Reiseplanerin befindet sich auf einem aufstrebenden Ast
Lächeln Menü lässt sich nicht zentrieren

Hallo nochmal an alle, die netterweise geantwortet haben.
Ich habe mich enschieden, das CSS umzustricken, basierend auf einer Lösung aus dem Netz von Mathew Taylor:
Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.
genauer gesagt für eines der Beispiele aus "more advanced centered CSS menus":
Centered CSS menu examples - Tabs, Bars and other Designs

Super easy und macht keine Zicken.

Habe mich für "Roundbar grey" entschieden.

CSS ist dann wie folgt:
/* -------------------------------------------------- */
/* roundbar-grey */
/* -------------------------------------------------- */
#roundbar-grey {
clear:left;
float:left;
width:100%;
background:#B7B7B7 url(roundbar-grey.gif) 0 25% repeat;
font-family:Trebuchet MS, Helvetica, sans-serif;
border-bottom:1px solid #A8A8A8;
overflow:hidden;
}
#roundbar-grey ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#roundbar-grey ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#roundbar-grey ul li.first {
border-left:1px solid #A8A8A8;
}
#roundbar-grey ul li.last {
border-right:1px solid #C8C8C8;
}
#roundbar-grey ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
border-left:1px solid #C8C8C8;
border-right:1px solid #A8A8A8;
line-height:1.3em;
}
#roundbar-grey ul li a span {
display:block;
}
#roundbar-grey ul li.active a {
background:url(roundbar-grey.gif) 0 75% repeat;
font-weight:bold;
}
#roundbar-grey ul li a:hover {
background:url(roundbar-grey.gif) 0 75% repeat;
}


Das dazu passende HTML dann

<div id="roundbar-grey">
<ul>
<li class="first"><a href="#">Home Page</a></li>
<li class="active"><a href="#">Our Products</a></li>
<li><a href="#">About Us</a></li>

<li class="last"><a href="#">Contact Us</a></li>
</ul>
</div>

Sonnige Grüsse
Reiseplanerin
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, menü, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dynamisches horizontales Menü zentrieren Elton CSS 17 21.06.2011 01:36
Horizontales Menü zentrieren - aber linker Einzug wieso?? dimension CSS 14 09.02.2011 13:13
Menü zentrieren Bodenturnen CSS 1 26.12.2009 20:44
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Menü Zentrieren! pressi CSS 2 15.02.2009 23:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:04 Uhr.