|
||||
Problem mit Hintergrund-Grafik für CSS-Links!
Hallo,
ich hab ein kleines Problem mit meinem horizontalen (schwarz-blau) Menü. Leider schaffe ich es nicht die Hintergrundgrafik (cellpic.png) durchgehend von links nach rechts hinzubekommen. Sondern nur da wo ein Link sich befindet. http://gothic-saga.com CSS Code:
#mainmenu { background: #679ccb url(http://gothic-saga.com/design/images/cellpic.png) repeat-x; height: 28px; } #mainmenu ul { list-style-type: none; margin-left: 1%; } #mainmenu ul li { display: block; float: left; border-right: 0px solid #fff4d8; padding-right: 10px; } #mainmenu ul li a { display: block; width: 100%; height:25px; line-height: 26px; font-size: 0.66em; font-weight: normal; color: #ffffff; text-decoration: none; background: url(http://gothic-saga.com/design/images/cellpic.png) repeat-x; border-top:1px solid #000000; border-bottom:1px solid #000000; } #mainmenu ul li a:hover { background: transparent; color:#000000; ; } |
Sponsored Links |
Sponsored Links |
|
||||
Wenn du was machst?
Lösung 1 oder 2? Ich denke, die Lücken im Menü kommen von dem padding:10px; bei den lis. Gib das stattdessen dem a. Oder bricht dann alles auseinander? Wenn du etwas 0px border gibst, kannst du es auch ganz weglassen. |
|
|||
Manchmal sieht man den Wald vor lauter Bäumen nicht
Schon mal probiert, die Hintergrundgrafik einfach dem ul zuzuordnen? Das sollte deine Probleme mit dem durchgehenden Hintergrund beheben. grüsse andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
||||
Ich hab das ganze nun mal anders gemacht. Doch auch hier habe ich zwei Probleme:
1. Im Mozilla sieht allles prächtig aus, doch im IE natürlich nicht. Wo muss ich nun die Anpassungen für den M$ Browser machen? 2. Ich bekomme den weissen Streifen zwischen dem Logo und dem horizontalen Menü nicht weg http://gothic-saga.com/test CSS Code:
body { font-family:Verdana; font-size:12px; background-color:#e0e0e0; } #wrap { width: 75%; min-height:100%; margin: auto; border-width: 0 1px; border-style: solid; border-color: #000000; background: #ffffff; text-align: left; } #logo { height:115px; border-top:1px solid #000000; border-bottom:1px solid #000000; } #inhalt { float:left; width:66%; padding:8px; border-left:1px solid #000000; border-right:1px solid #000000; text-align: justify; } #footer { text-align:center; border-top:1px solid #000000; } #left, #right { width:14%; line-height:18px; } #left { float:left; margin-left:2.5%; } #right { float:right; } .menutitle { font-weight:bold; border-top:1px } #navcontainer ul { padding-left: 0; margin-left: 0; background-color: #036; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; } #navcontainer ul li { display: inline; } #navcontainer ul li a { padding: 0.2em 1em; background-color: #036; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; } #navcontainer ul li a:hover { background-color: #369; color: #fff; } a:link, a:visited, a:active, a:hover { text-decoration:none; font-weight:bold; color:#036; font-size:10px; } a:hover { color:#369; } Code:
<body> <div id="wrap"> <div id="logo"> [img]./design/images/logo.png[/img]</div> <div id="navcontainer"> <ul id="navlist"> <li id="active">Home[*]Kotor I[*]Kotor II[*]Community[*]Guestbook[/list]</div> <div id="left"> <p class="menutitle">Infos</p> » Review » Screenshots » Charaktere » Planeten » Völker <p class="menutitle">Tips & Tricks</p> » Komplettlösung » Minispiele » Fertikeiten » Mächte » Ausrüstung » Items » Gegner <p class="menutitle">Downloads</p> » Trailer » Wallpaper </div> <div id="right"> <p class="menutitle">MENU 4</p> » HYPERLINK 1 » HYPERLINK 2 » HYPERLINK 3 » HYPERLINK 4 » HYPERLINK 5 <p class="menutitle">MENU 5</p> » HYPERLINK 1 » HYPERLINK 2 » HYPERLINK 3 » HYPERLINK 4 » HYPERLINK 5 <p class="menutitle">MENU 6</p> » HYPERLINK 1 » HYPERLINK 2 » HYPERLINK 3 » HYPERLINK 4 » HYPERLINK 5 </div> <div id="inhalt"> <h1><?php echo $title4 ?></h1> <h2><?php echo $title5 ?></h2> </div> <div id="footer"> <p style="clear:both;margin-top:20px;">Powered & design by ### ©2005 All rights on ### by ### ©1999-<? $datum = date("Y"); echo $datum; ?></p></div> </div> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Css Problem Hintergrund | drag2killer | CSS | 1 | 19.07.2014 10:46 |
CSS / HTML Problem | Meister | CSS | 1 | 29.05.2013 16:09 |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
CSS Hover Submenü - Problem in Darstellung des Elternelements | DaDom | CSS | 3 | 07.03.2011 10:44 |
Inspiration - Sammlung von Links | emti | Ressourcen | 8 | 01.12.2009 19:02 |