mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:11 Benutzername: Passwort: Auto-Login

Thema: [CSS] Listennavigation nur mit Bildern? vom 18.09.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> [CSS] Listennavigation nur mit Bildern?
Seite: 1, 2  Weiter
Autor Nachricht
trinkbecher
Threadersteller

Dabei seit: 05.06.2008
Ort: Gummersbach
Alter: 34
Geschlecht: Männlich
Verfasst Do 18.09.2008 11:51
Titel

[CSS] Listennavigation nur mit Bildern?

Antworten mit Zitat Zum Seitenanfang

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

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?
  View user's profile Private Nachricht senden
deeesi

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Do 18.09.2008 12:05
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
xaos

Dabei seit: 06.10.2004
Ort: Kargath
Alter: -
Geschlecht: -
Verfasst Do 18.09.2008 12:06
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

schau dir mal das Menü auf

http://www.thestyleworks.de

an, damit solltest du weiterkommen.
  View user's profile Private Nachricht senden
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 18.09.2008 12:08
Titel

Antworten mit Zitat Zum Seitenanfang

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? *Huch*

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
  View user's profile Private Nachricht senden
deeesi

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Do 18.09.2008 12:12
Titel

Antworten mit Zitat Zum Seitenanfang

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? *Huch*

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 18.09.2008 12:16
Titel

Antworten mit Zitat Zum Seitenanfang

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? *Huch*

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 *zwinker*
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Do 18.09.2008 12:33
Titel

Antworten mit Zitat Zum Seitenanfang

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>&nbsp;</span>Home</a></li>
   <li><a class="about" href="#"><span>&nbsp;</span>About</a></li>
   <li><a class="write" href="#"><span>&nbsp;</span>Write</a></li>   
   <li><a class="work" href="#"><span>&nbsp;</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
  View user's profile Private Nachricht senden
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht: Männlich
Verfasst Do 18.09.2008 13:05
Titel

Antworten mit Zitat Zum Seitenanfang

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.


*Whaazzzz uppp?*
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.