zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menuinhalt richtig positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.01.2009, 06:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2009
Beiträge: 8
Pari befindet sich auf einem aufstrebenden Ast
Standard Menuinhalt richtig positionieren

Hallo Leute,

ich habe ein Template mit folgendem Menü:



HTML:

HTML-Code:
<div id="menu_tab">
                    <ul class="menu">
                         <li><a href="index.html" class="nav1">  Home </a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav2">Products</a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav3">Specials</a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav4">My account</a></li>
                         <li class="divider"></li>
                         <li><a href="#" class="nav4">Sign Up</a></li>
                         <li class="divider"></li>                         
                         <li><a href="#" class="nav5">Shipping </a></li>
                         <li class="divider"></li>
                         <li><a href="contact.html" class="nav6">Contact Us</a></li>
                         <li class="divider"></li>
                         
                    </ul>
CSS:

HTML-Code:
#menu_tab{
width:1000px;
height:50px;
background-color:#fff;
}

ul.menu {
list-style-type:none; float:left; display:block; width:982px; 
margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;}

ul.menu li {
display:inline;
font-size:11px;
font-weight:bold;
line-height:50px;
}
ul.menu li.divider {
display:inline;
width:2px;
height:50px;
float:left;
background:url(images/menu_divider.gif) no-repeat center;
}

a.nav1:link, a.nav1:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.nav2:link, a.nav2:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/services.png) no-repeat left; color:#676d77;}
a.nav3:link, a.nav3:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/favs.png) no-repeat left; color:#676d77;}
a.nav4:link, a.nav4:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/user_add.png) no-repeat left; color:#676d77;}
a.nav5:link, a.nav5:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/car.png) no-repeat left; color:#676d77;}
a.nav6:link, a.nav6:visited {
display:block; float:left; padding:0px 8px 0px 22px; margin:0 14px 0 14px;height:50px;text-decoration:none; background:url(images/contact-new.png) no-repeat left; color:#676d77;}

a.nav1:hover, a.nav2:hover, a.nav3:hover, a.nav4:hover, a.nav5:hover, a.nav6:hover {
color:#333333;}


Ich würde gerne diese Grafiken (home.png, products.png usw.) oben haben und direkt dadrunter den Link als Text. Die Bilder sind ja als Hintergrund positioniert, ich bekomme es einfach nicht hin Text und Grafik entsprechend zu positionieren, kann mir da vielleicht bitte jemand einen Tipp geben, wie ich das am besten angehen kann?

Liebe Grüsse
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.01.2009, 12:17
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Code:
background:url(images/home.png) no-repeat 50% 0%;
http://www.css4you.de/background-position.html

Dann musst du den Text nur noch per "padding" nach unten drücken.
http://www.thestyleworks.de/ref/padding.shtml

PS: 5:40Uhr ... nicht übel.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.01.2009, 15:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2009
Beiträge: 8
Pari befindet sich auf einem aufstrebenden Ast
Standard

Hallo und danke für die Antwort

wenn ich das so eingebe,

HTML-Code:
background:url(images/home.png) no-repeat 50% 0%;
dann verkleindert sich das Bild ziemlich.

Durch padding verschiebt sich dann der ganze untere Bereich nach unten, also es geht raus aus dem Menü
Mit Zitat antworten
  #4 (permalink)  
Alt 03.01.2009, 17:11
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

hm?
Wie, es verkleinert sich? Stell das bitte mal online!
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Antwort

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
Elemente auf der Startseite richtig positionieren chrissie65 CSS 7 03.08.2010 21:03
DIV´s richtig positionieren k-f-r-123 CSS 2 28.12.2009 21:40
Bilder richtig positionieren - wie mit CSS? RaBo CSS 2 15.07.2009 15:34
2 DIVS richtig positionieren Pari CSS 0 13.06.2009 21:22
Grafik richtig positionieren?! Pumpkin CSS 7 13.06.2007 23:43


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