|
|||
navigation mit css und ich bin doof
hallo allesamt,
man mag es kaum glauebn, aber ich bekomme es einfach nicht hin eine nav mit css zu realisieren. für gewöhnlich kein problem. nur bekomme ich es nicht hin, dies heute mal umzusetzen und ich habe auch keinen ansatz, wie ich es schaffen könnte. nun aber zum problem: ich habe beispieldateien aufgebaut, die ihr hier seht, welche aber schon dem entsprechen, worauf es hinauslaufen soll. es gibt eine index.html mit folgendem inhalt: Code:
<html> <head> <title></title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <!-- beginn der nav mit css und zwei bildern (beispiel) // --> <div id="footer"> <ul> <li><a href="#" title="">Startseite</a></li> <li><a href="#" title="">Kontakt</a></li> <li><a href="#" title="">Impressum</a></li> </ul> </div> <!-- ende der navigation mit css und bildern // --> </body> </html> /* css file fuer die nav im footer (beispiel) */ body { color: #303030; font-size: medium; font-family: Verdana, Arial, Helvetica, sans-serif; } div#footer { position: absolute; top: 200px; left: 100px; background: transparent url(footer.gif) center top no-repeat; width: 384px; height: 101px; } div#footer ul { list-style-type: none; } div#footer ul li { display: inline; } div#footer ul li a { background: url(link.gif) left top no-repeat; } div#footer ul li a:link, div#footer ul li a:visited { background: url(link.gif) left top no-repeat; } div#footer ul li a:focus, div#footer ul li a:hover { background: url(link_active.gif) left top no-repeat; } mein problem ist eben, dass das <a href="" ... leert bleibt und daher eben nix angezeigt wird. lege ich ein bild drüber, gehts auch nichts, da das bild im html permanent im vordergrund ist... *GRRRRRRRRRRR* im anhang befindet sich ein bild, welches die zustände darstellt. nav-elemente (hier weisse sonnen) auf einem bg-image (graues shape). beim hover wird die sonne farbig (mit verlauf). eigentlich nicht schwer. die ganze nav soll jedoch ohne text (ich weiss, gehört sich nicht) umgesetzt werden. wie also bekomme ich nun mit (x)html und css eine navigation hin, die entsprechend meinen wünschen funktioniert? im netz finde ich gerade auch nix passendes. ich danke euch allen, die sich beteiligen für eure hilfe... ismx |
Sponsored Links |
Sponsored Links |
|
|||
naja, das ganze soll ja nun über css erstellt werden. die verschiedenen zustände für a:link, a:visited (weisse sonne) und für a:focus, a:hover und a.active (sonne mit farbigen verlauf). das heisst dann ja dementsprechend, dass ich alles background: url(.....); regel. dann steht jedoch im markup nichts drin ausser
Code:
<ul><li><a href="index.html" title="startseite"></a></li></ul> und wenn ich aber das "hintergrundbild" im markup über Code:
<img src="bild_normal.gif" alt="" /> verstanden was und wie ich es meine? gruss |
|
||||
Du solltest dir mal Image Replacement Techniken anschauen.
Im Markup muss was zwischen <a href="#"> und </a> stehen.
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4 |
|
||||
Ja wiess ich.
Also um zu dem Text zu kommen, den solltest du rein schreiben am besten in ein <span> Tag und dieses per Code:
visibility: hidden; Ausserdem soll man keine leeren Elemente verwenden. Wie sehen Deine CSS Kenntnisse aus? Weil evtl. kannst Du dir auch fertige Menus anschauen bei Stu Nicholls z.B. und den Code anpassen. |
|
|||
ganz ehrlich gesagt arbeite ich seit fast 8 jahren im bereich mediengestaltung, webentwicklung, mediendesign. meine kenntnisse sind im grund egenommer richtig gut (tableless, yaml, barrierefrei etc) ich arbeite derzeit nur leider viel zu viel und bin gerade vater geworden und kann (es geht einfach nicht mehr, ehrlich nicht) keine klaren gedanken fassen!!! und (für das vatersein....)
ich brauchte gerade nur einen gedankenschubser..... und ihr habt mir gerade richtig geholfen.. danke euch und beste grüße aus bs |
|
||||
hm, ok. Falls noch Fragen offen sein sollten, immer her damit.
Wollen ja nicht arbeitslos werden hier. |
|
||||
OT:
Ja auch von mir Glückwunsch |
Sponsored Links |
|
||||
Von mir auch Glückwunsch
Hier mein Tipp zur Lertüre: Die CSS vom Board link in meiner Sig.
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Navigation mit CSS erstellen | Boof | CSS | 7 | 17.02.2009 16:23 |
Listennavigation - falsche Darstellung | realmuecke | CSS | 1 | 12.02.2009 19:04 |
Navigation in CSS datei | Linuxonkel | CSS | 5 | 01.02.2008 10:30 |