Webdesign Problem: CSS

Nime

Nime

Registriert
24.02.04
Beiträge
671
Reaktionen
0
Punkte
765
Hallo zusammen.

Ich habe ein Problem beim Webdesignen. Siehe:
http://www.berlin2k.de/test/home.html

Ich probiere mich gerade in CSS. Dazu habe ich Reiterkärtchen (oben links) als Menü auserkoren. Die Bilder für link/hover/active Zustände sind in einem Bild, und je nach Zustand lädt er nur die Positionen des Bildes.

Siehe: http://www.berlin2k.de/test/home.gif

Jetzt habe ich 2 Probleme:

1. Mein Browser (Firefox) zeigt beim Laden der Seite die Reiterkärtchen nicht an, erst wenn man mind. 1x mit der Maus drüber gefahren ist.

2. Der selected Status wird nicht angenommen, er zeigt immer nur die link-Bilder für das Menü.

Hier das CSS-Stylesheet:

#menu {
position: relative;
width: 600px;
height: 30px;
padding: 0;
margin: 0cm;
left: 0.26cm;
background: #000000;
}

#navigation {
position: absolute;
top: 10px;
left: 0px;
list-style: none;
margin: 0;
padding: 0;
height: 20px;
display: inline;
overflow: hidden;
width: 180px;
}

#navigation li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navigation a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win */
}

#navigation a:hover {
background-position: 0 -20px;
}

#navigation a:active, #navigation a.selected {
background-position: 0 -40px;
}

#menu_home a {
width: 60px;
background: url(home.gif) top left no-repeat;
}

#menu_musik a {
width: 60px;
background: url(musik.gif) top left no-repeat;
}

#menu_kontakt a {
width: 60px;
background: url(kontakt.gif) top left no-repeat;
}

BODY { background-color: #000000 }

#inhalt {
position: relative;
width: 600px;
height: 400px;
padding: 0;
margin: 0cm;
margin-left: 0.26cm;
float: left;
background: #b3c1c7;
font family: tahoma;
color: black;
font-size: 10px;
}


Hoffe, jemand kann mir helfen, vor allem beim Problem Nr. 2

Gruß
Nime
 
also wegen dem selected status, der nicht angenommen wird:

du hast ja jeweils die Seite selbst verlinkt, wenn man drauf klickt wird die Seite jedesmal neu geladen, damit sind die Links natürlich nicht mehr selektiert. Denk ich zumindestens.
 
Hey, das ist ne gute Idee gewesen. Als ich sie gelesen habe, habe ich mir selbst vor den Kopf gehauen. Leider war das auch nix... Habe einfach probiert die Navileiste in nem oberen Frame zu packen, den Inhalt dadrunter. So dass die Navileiste nicht mehr neugeladen wird. Bringt leider nix.

Andere Einfälle ?
 
Hallo Nime,

eigentlich passiert bei mir (mit Mozilla 1.01) genau das, was Du definiert hast:
- zunächst sehe ich die grauen Buttons/Reiter
- mit der Maus drüber, und ich sehe Bildabschnitt 2
- solange ich draufklicke, sehe ich Bild 3 (weißer Untergrund)

Möchtest Du, dass Bild 3 erscheint, solange man auf der entsprechenden Seite ist?
Oder was?
Gruß
chris

EDIT: lass bloß Frames aus dem Spiel... ;)
 
Hi DonChris.

Genauso wollte ich es haben. Nur - warum funktioniert es bei dir und bei mir nicht ? Die einzigen Unterschiede, die mir auffielen, waren eine veränderte < li > anordnung, sowie weggelassene tabs in der css-Datei. Ich habe mir die Quelltexte von dir kopiert, es funktioniert bei mir nicht. Weder lokal noch auf dem Server. Er lädt von dem Musikbild immer den active-Zustand, von den beiden anderen den normalen. Egal auf welcher Seite ich bin.

Grummel...

Gruß
Nime

PS: Siehe www.berlin2k.de/test2/home.html (genau deine Seiten)

edit: Die Frames waren bloss um es zu testen.. Werde nicht darauf zurückgreifen :)
 
Hi,
der Kniff liegt darin, dass ich für jede Seite ein anderes Stylesheet lade:
also, für
"musik.html" wird Datei "style_m.css" geladen
kontakt.html wird Datei style_k.css geladen
home.html wird Datei style_h.css geladen

im jeweiligen Stylesheet ist dann die entsprechende Zeile hinzugefügt:
Bespiel aus "style_k.css":

#menu_kontakt a {
width: 60px;
background: url(kontakt.gif) top left no-repeat;
background-position: 0 -40px;
}

die Zeile "background-position: 0 -40px;" hab ich vom selected/active Bereich geklaut
und reingepasted.
Bedeutet, dass jede Seite mit dem richtigen Reiter in Weiß angezeigt wird...

Ich hoffe, dass Du mich verstanden hast ;)
ansonsten frag ruhig...
Gruß
 
Hmmm - ok, vielen Dank erstmal. Aber eigentlich habe ich zu CSS gegriffen, um die gesamten Designwünsche innerhalb einer Datei zu haben. Das muss doch auch irgendwie gehen ?!
 

Ähnliche Themen

Grummelrocker
Antworten
5
Aufrufe
779
26_DAEMONS
26_DAEMONS

Oft gelesene Themen

Zurück
Oben