|
|||
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> 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 |
Sponsored Links |
|
||||
Code:
background:url(images/home.png) no-repeat 50% 0%; 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 |
Sponsored Links |
|
|||
Hallo und danke für die Antwort
wenn ich das so eingebe, HTML-Code:
background:url(images/home.png) no-repeat 50% 0%; Durch padding verschiebt sich dann der ganze untere Bereich nach unten, also es geht raus aus dem Menü |
|
||||
hm?
Wie, es verkleinert sich? Stell das bitte mal online!
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |