zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden navigation mit css und ich bin doof

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.06.2008, 22:58
:::seitlich:::
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2007
Ort: Braunschweig
Beiträge: 32
ismx befindet sich auf einem aufstrebenden Ast
Standard 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>
des weiteren gibt es eine css namens style.css, die wie folgt ausschaut:

/* 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.06.2008, 23:16
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ismx
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...
Mal ne Frage, was meinst du damit?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.06.2008, 23:31
:::seitlich:::
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2007
Ort: Braunschweig
Beiträge: 32
ismx befindet sich auf einem aufstrebenden Ast
Standard

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>
. denn ich möchte ja nur bilder verwenden als link, keinen text.
und wenn ich aber das "hintergrundbild" im markup über
Code:
<img src="bild_normal.gif" alt="" />
einbinde hat das background-image vom css keine chace in den vordergrund zu kommen.

verstanden was und wie ich es meine?
gruss
Mit Zitat antworten
  #4 (permalink)  
Alt 24.06.2008, 23:38
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 24.06.2008, 23:40
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

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;
in der CSS ausblenden. Dient auch der Zugänglichkeit, wenn die Seite ohne CSS Stile dargestellt werden soll.
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.06.2008, 23:54
:::seitlich:::
neuer user
Thread-Ersteller
 
Registriert seit: 28.05.2007
Ort: Braunschweig
Beiträge: 32
ismx befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.06.2008, 23:56
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

hm, ok. Falls noch Fragen offen sein sollten, immer her damit.

Wollen ja nicht arbeitslos werden hier.
Mit Zitat antworten
  #8 (permalink)  
Alt 25.06.2008, 00:32
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von ismx Beitrag anzeigen
[...] und bin gerade vater geworden [...]
Herzlichen Glückwunsch.
Mit Zitat antworten
  #9 (permalink)  
Alt 25.06.2008, 00:34
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

OT:

Ja auch von mir Glückwunsch
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.06.2008, 17:26
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

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

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:11 Uhr.