|
|||
![]()
Ich habe eine horizontale und eine vertikale UL (Aufzählung) als Navigationsleisten.
( Vorlage von SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten ) In diesem UL befinden sich 9 LIs (Aufzählungspunkte). Jedes LI hat eine background-image (Hintergrund mit Bump-Effekt). Nun soll ganz links in jedem LI ein quadratisches JPEG-Icon eingebunden werden. Also ganz links das Icon und dann dahinter rechts der Text. Nun dachte ich daran, den A-Tags in den LIs eine background-image für das jeweilige Icon zu verpassen. Das Icon wird dann auch ganz links in dem LI angezeigt. - Allerdings ist der Hintergrund rechts von dem Icon weiß. Man kann den Hintergrund des LIs dahinter anhand der Ränder noch erahnen. Das ist natürlich nicht Sinn der Sache - der dahinterliegende Hintergrund des LIs soll natürlich auch angezeigt werden. Zurzeit sieht der HTML-Quelltext folgendermaßen aus: HTML-Code:
[...]
<style>
[...]
ul.Navigation_Horizontal {
margin: 0; padding: 0em;
text-align: center;
width:100%;
}
ul.Navigation_Horizontal li {
list-style: none;
margin: 0; padding: 0;
display:inline;
line-height:30px;
}
ul.Navigation_Horizontal a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white;
background-color:#006699;
background-image:url('btnHover.png');
}
ul.Navigation_Horizontal a:active {
border: 1px solid red;
background-color:#0066FF;
color: #FFFFFF;
background-image:url('btnActive.png');
}
ul.Navigation_Horizontal a {
float:left;
width: 10%;
text-decoration: none; font-weight: bold;
border-left-color: white; border-top-color: white;
text-align:center;
padding: 0;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #FFCC00;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
text-decoration:none;
font-weight: bold;
background-color:#003366;
background-image:url('btnNormal.png');
background-repeat:repeat;
background-position:top;
}
#icon_home{background: url('/icons/home.jpeg') no-repeat left top;padding-left:40px;background-position:left; margin:0; }
#icon_about{background: url('/icons/about.jpg') no-repeat left top;padding-left:40px;background-position:left; margin: 0; }
[...]
( Problem mit Navigation - html.de Forum - HTML für Anfänger & Fortgeschrittene ) - Allerdings hat darauf keiner geantwortet - und das wird auch wahrscheinlich keiner mehr. Vielen Dank für eure Antworten im Vorraus! Mit freundlichen Grüßen Innocentus |
Sponsored Links |
|
||||
![]()
Hi,
je eine Hg-Grafik für li und a hört sich nicht so praktisch an. Hast du mal einen Link für uns, damit wir uns das mal anschauem können? Hast du schon mal in die CSS-FAQ geschaut? Dort gibt es ein Tut zu allen möglichen Navi-Arten, u.a. auch eine grafische Navi. ![]()
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
![]()
Vielen Dank für den Link.
Nun ist es so, dass ich eine Hintergrundgrafik habe. Und dann soll jeder Eintrag eben noch ein Icon erhalten. Ich kann jetzt natürlich das Icon mit in die Hintergrundgrafik montieren (mit einem Grafikprogramm) - dann wäre das aber Verschwendung und ist auch unpraktisch. Mit freundlichen Grüßen Innocentus Geändert von Innocentus (27.03.2009 um 14:14 Uhr) |
![]() |
Stichwörter |
background-image, css, hintergrund, hintergrundbild, icon, icons, navigation |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 11:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 16:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 15:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 18:18 |