zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation mit Icons

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.03.2009, 12:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Standard Navigation mit Icons

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; }
[...]
* Das ganze habe ich auch in das HTML.de-Forum reingestellt
( 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.03.2009, 13:28
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.03.2009, 14:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Stichwörter
background-image, css, hintergrund, hintergrundbild, icon, icons, navigation

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
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


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