Autor |
Nachricht |
trinkbecher
Threadersteller
Dabei seit: 05.06.2008
Ort: Gummersbach
Alter: 34
Geschlecht:
|
Verfasst Do 18.09.2008 11:51
Titel [CSS] Listennavigation nur mit Bildern? |
|
|
Ich brauch dringend Hilfe und zwar habe ich heute seit langem wieder versucht eine CSS Navigation nur mit Bilder für nen Projekt zu basteln, aber ich verzweifel weil ich nciht mehr weis wie
Also ich möchte eine CSS Listen Navigation nur mit Bildern haben, d.H. das statt Text in jedem Listenfeld eine andere Grafik steht die sich bei einem Hover ändert!
Mein Ansatz sieht so aus
Code: | /*NAVIGATION*/
#nav {
position:absolute;
width:161px;
height:374px;
left: 1px;
top: 104px;
background-color: #FFFFFF;
#nav li.home a:hover { background-image:url(images/home_over.gif); }
#nav li.home a { background-image:url(images/home.gif); }
.........
|
Hier habe ich halt versucht den einzelnen Listen/links ihre Grafiken zuzuweisen
HTML CODE
Code: | <div id="main-nav" align="center">
<li class="home"><a href="" title="Home">Home</a></li>
<li class="about"><a href="" title="About">About</a></li>
<li class="work"><a href="#" title="Work">Work</a></li>
<li class="write"><a href="#" title="Write">Write</a></li> |
Hier wollte ich den Listenpunkten ihre spezifischen CSS Sheets zuzuteilen!
Das Problem ist jezt nur das wenn ich den Link text entferne ( .....titel="home"></a></li> ) dann seh ich garnichts aber wenn ich einen Text da lasse sehe ich die grafik ganz minimal! Naja aber ich wills halt so haben das ich nur Grafiken hab und keinen Text!
Also nun die Bitte an euch kann mir jemand weiterhelfen? Mirn Tip geben oder mir evt solch eine Navi eben bauen ( es reicht wenn es erstmal nur für einen menüpunkt ist) oder evt ein gutes tut geben?
|
|
|
|
|
deeesi
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
Verfasst Do 18.09.2008 12:05
Titel
|
|
|
hast du mal versucht, dem LI immer ne breite und höhe zu geben? so groß wie das hintergrundbild ist? du musst das ja irgendwie aufspannen.
und die As müssen da bleiben, sonst is der link ja weg. mach die um die LIs drum
also so ungefähr (dann musst du das css noch umschreiben)
Code: | <a href="#" class="home"><li > </li></a> |
|
|
|
|
|
Anzeige
|
|
|
xaos
Dabei seit: 06.10.2004
Ort: Kargath
Alter: -
Geschlecht: -
|
|
|
|
|
seal
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 18.09.2008 12:08
Titel
|
|
|
deeesi hat geschrieben: | [...] mach die um die LIs drum
also so ungefähr (dann musst du das css noch umschreiben)
Code: | <a href="#" class="home"><li > </li></a> |
|
Äh, bitte was?
Die Syntax wie er es hatte ist korrekt. Erst <li>, dann <a>!
//Edit
http://www.cssplay.co.uk/menus/image_dropdown.html
Zuletzt bearbeitet von seal am Do 18.09.2008 12:13, insgesamt 1-mal bearbeitet
|
|
|
|
|
deeesi
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
Verfasst Do 18.09.2008 12:12
Titel
|
|
|
seal hat geschrieben: | deeesi hat geschrieben: | [...] mach die um die LIs drum
also so ungefähr (dann musst du das css noch umschreiben)
Code: | <a href="#" class="home"><li > </li></a> |
|
Äh, bitte was?
Die Syntax wie er es hatte ist korrekt. Erst <li>, dann <a>! |
dann gibt er halt den As die breiten. mit der syntax hast du natürlich recht, hab ich nicht nachgedacht
Zuletzt bearbeitet von deeesi am Do 18.09.2008 12:16, insgesamt 1-mal bearbeitet
|
|
|
|
|
seal
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 18.09.2008 12:16
Titel
|
|
|
deeesi hat geschrieben: | seal hat geschrieben: | deeesi hat geschrieben: | [...] mach die um die LIs drum
also so ungefähr (dann musst du das css noch umschreiben)
Code: | <a href="#" class="home"><li > </li></a> |
|
Äh, bitte was?
Die Syntax wie er es hatte ist korrekt. Erst <li>, dann <a>! |
dann gibt er halt den As die breiten?
wo sollte denn sonst der link drauf liegen? |
Auf dem Text den er den Listenelementen mitgibt und mit Hilfe von CSS ausblendet, siehe http://www.cssplay.co.uk/menus/image_dropdown.html
Hinweis auf den Validator - der sowas garnicht mag - spar ich mir
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 18.09.2008 12:33
Titel
|
|
|
Sinnvollerweise macht man sowas so:
css:
Code: |
ul#menu {
list-style: none;
margin: 0;
padding: 0;
}
ul#menu li a {
display: block;
width: 200px;
height: 20px;
line-height: 20px
overflow: hidden;
}
ul#menu li a span {
display: block;
width: 200px;
height: 20px;
overflow: hidden;
}
ul#menu a.home {
background: url(img/home.gif) 0 0 no-repeat;
}
ul#menu a.home:hover {
background: url(img/home_hi.gif) 0 0 no-repeat;
}
ul#menu a.about {
background: url(img/about.gif) 0 0 no-repeat;
}
ul#menu a.about:hover {
background: url(img/about_hi.gif) 0 0 no-repeat;
}
ul#menu a.write {
background: url(img/write.gif) 0 0 no-repeat;
}
ul#menu a.write:hover {
background: url(img/write_hi.gif) 0 0 no-repeat;
}
ul#menu a.work {
background: url(img/work.gif) 0 0 no-repeat;
}
ul#menu a.work:hover {
background: url(img/work_hi.gif) 0 0 no-repeat;
}
|
Erklärung: Das span element, welches vor dem Text in den Menüpunkten steht, schiebt diesen über den sichtbaren Bereich des Links (der die eigenschaft overflow: hidden hat - es wird also alles was über dessen größe hinaus geht nicht angezeigt) hinaus. Dies hat den Vorteil, dass diverse Screenreader den Text lesen können, was sie im falle eines "display: none"; für den Container des Textes meist nicht können.
html:
Code: | <ul id="menu">
<li><a class="home" href="#"><span> </span>Home</a></li>
<li><a class="about" href="#"><span> </span>About</a></li>
<li><a class="write" href="#"><span> </span>Write</a></li>
<li><a class="work" href="#"><span> </span>Work</a></li>
</ul> |
Ich hab das mal Beispielhaft hochgeladen:
www.o315.de/temp/mgi/image_menu
Zuletzt bearbeitet von sahnemuh am Do 18.09.2008 12:58, insgesamt 1-mal bearbeitet
|
|
|
|
|
seal
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 18.09.2008 13:05
Titel
|
|
|
Zitat: | This one is for all those who have asked for a dropdown menu that has images instead of text. Although the menu uses text for screen readers it uses image replacement to have images in the background.
I have also added an extra feature in the dropdown which shows the text in a small box to the right of each image. This can be removed if not needed. |
|
|
|
|
|
|
|
|
Ähnliche Themen |
Listennavigation im IE6
eure meinung: listennavigation mit grafikelementen
[solved] Problem mit verschachtelter Listennavigation
Animation aus 15 Bildern
Illustrationen aus Bildern?
Dateigrößenberechnung bei Bildern
|
|