• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bearbeitung eines ul-li-Menus

L

ldb

Mitglied
Hallo zusammen, da bin ich schon wieder!
Ich bin daran, ein Menu, welches ich mit div's realisiert habe, in ein ul-li-Menu zu ändern. Allerdings komme ich leider nicht so richtig voran, ich hoffe, ihr könnt mich da mal erleuchten :)

Ich habe auf hier meinen aktuellen Stand hochgeladen:
Workbook Lukas Bieri

Rechts ist das alte Menu, links das Neue.
Ich möchte die Bilder und Texte alle so formatieren, wie das rechte Menü aussieht. Und ich möchte es vor Allem verhindern, dass die Links als Links angezeigt werden (keine Färbung, Underline oder Markierung der bereits geklickten Links)

Ich habe bereits gegooglet, allerdings nicht wirklich viel gefunden. Wie steuere ich die entsprechenden Teile des Menus an?
Habe ich die Bilder korrekt integriert?

Gruss und schönen Abend,
LDB
 
Ich würde die Bilder als Background-Image (li-element) einfügen und diesen dann zentieren (background-position: center).
Vergiss aber nicht das Padding und auch den Text zu zentieren. ggf muss du den Text soweit padding geben dass dieser unter dem bild ist...

Außerdem musst du erster den Link dann das li Element angeben:

<a href="#"><li class="li_navigation home">home</li></a>

PS: du kannst so viele klassen definieren wie du willst ;)
 
Um den li-Elementen individuelle Hintergrundgrafiken zu verpassen, vergibst du den li-Elementen ids:
HTML: 
<ul id='menue'>
  <li id='menue_home'><a href='..'>Home</a></li>
  <li id='menue_about'><a href='..'>&Uuml;ber mich</a></li>
...
</ul>
und weißt dann über deine css-Datei jeweils die Grafiken zu:
Code: 
#menu li a { /* allgemeine Formatierung, Default für alle Links. */
    background-repeat:no-repeat;
    background-position:center;
    display:block;
    height:...;
    width:...;
    padding:...;
    ...
}
#menue_home {
    background-image:url(home.gif);
}
#menue_about {
    background-image:url(about.gif);
}
Und ich stimme Cheffchen zu: in einer <ul> haben <a> nicht zu suchen. Nur <li>, die dann <a> beherbergen dürfen.
 
Hallo Bodil,
Ein weiteres Mal vielen Dank für deinen hilfreichen Beitrag! Ich werde das gleich mal ausprobieren.
Gruss aus der Schweiz,
LDB
 
So, ich habe das "Gerüst" von Bodil (nochmals Danke!) eingebaut und angepasst. Es sieht schon deutlich besser aus, als vorher, aber zwei Probleme sind so hartnäckig, dass ich nochmals euch Profis fragen muss :)

Ich habe den aktuellen Stand hier hochgeladen, auf der rechten Seite die alte Navigation, auf der linken die neue:
Workbook Lukas Bieri

Ich möchte den Text unter den Icons haben, wie schaffe ich das?
Das gesamte Menü ist von links her eingerückt, ich finde aber nirgends ein margin-left... ??

Ich hoffe, dass diese kleineren Probleme bald behoben sein werden :)

Gruss,
LDB
 
der Abstand liegt an den Defaultwerten vom Bowser, diese musst du überschreiben
ul{margin:0;padding:0;}
die Position des Textes würde ich mit line-height bestimmen
li a{line-height:100px} (z.b.)
 
So, ich habe das alles eingebaut und angepasst, habe jetzt- oh Wunder- noch ein Problem:
Ich habe einen erzwungenen Scrollbalken eingebaut, damit ich in der Inhalt-div scrollen kann. Jetzt verdecken die Scrollbalken leider meine abgerundeten Ecken... Gibt es da eine Möglichkeit, die Scrollbalken entweder abzurunden oder zu verstecken?

Die Seite mit dem aktuellen Stand findet man hier:
Workbook Lukas Bieri

Danke schon im Vorraus und liebe Grüsse an alle Leser :)

LDB
 
Kannst auch in das Div mit den runden Ecken und dem Padding ein weiteres Div setzen, das dann den Scrollbar erzeugt.
Btw: wenn du den Scrollbar so erzeugst
Code: 
overflow-x:auto;
verschwindet der Scrollbar unten und der rechts taucht nur auf, wenn er wirklich gebraucht wird.
 
Vielen, vielen Dank für die hilfreichen Antworten! Ich habe es jetzt einfach mit einem separaten div gemacht.
Kleine Frage am Rande: Ist es der oder die Scrollbar? In der Schweiz sagen wir "die". Ich war gerade etwas verunsichert... Ist das in Deutschland anders?
Gruss und auf wiederfragen,
LDB
 
Ich glaube, das ist regigional abhängig, welchen Artikel man Wörtern gibt, die aus dem Englischen stammen. Ich (aus dem Rhein-Main-Gebiet stammend) sag z.B. die E-Mail (so wie die Nachricht, die Benachrichtigung), in Süddeutschland und in der Schweiz sagt man eher das E-Mail.
Ich finde der Scrollbar klingt richtig und legt zufälligen Mithörern nahe, dass es nicht um ein Restaurant geht.
- »Ich hab nen Problem mit der Scrollbar.«
- »Was? Die kenn ich noch gar nicht! Deckel nicht bezahlt?«

Der Bar, der bei der Scrollbar gemeint ist, entspricht eher dem aus (chocolate) bar, und den würde ich halt instiktiv eher mit der (Schoko-)Riegel übersetzen. Und eben nicht die Bar um die Ecke, wo es die leckeren Cocktails gibt. Insofern: der Scrollbar. Aber: jede(r) wie sie/er mag ...
 
Scrollbar ist bei mir auch feminin, weil es auf Französisch "La barre de scroll" (oder für Puristen l'ascenseur :D) ist ^^
Franzosen haben die Art, für alle computertechnischen Begriffe ein eigenes Wort zu finden:

Die E-Mail: le courriel (von courrier : post und électronique : elektronisch); Spam wird immer öfter Pourriel genannt, was ein Wortspiel ist, da" pourri" faul, verdorben bedeutet.
Der Browser: le navigateur
Der/Die/Das Scrollbar: l'ascenseur
usw.
 
Da bin ich ja beruhigt ^^
Deine Begründung klingt in der Tat logisch, aber ich werde trotzdem bei "die" Scrollbar bleiben... Jedem das seine :)


Schönen Abend und Gruss über die Grenze!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben