Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Problem bei Navigation/Unterschiedliche Angaben für IE/Firef

Antwort erstellen

Problem bei Navigation/Unterschiedliche Angaben für IE/Firef

Beitragvon roy_r » 15.09.2008, 15:27

Ich hab gerade ein Riesenproblem:

Bis auf die Navigation passt bei der Seite alles, nur bei der Navi hab ich eben Probleme:

Die Navigation soll rein mit CSS gelöst werden. Es gibt 6 verschiedene Menüpunkte (1.Schule, 2.Kindergarten, 3.Volksschule...), wobei 4 davon eigene Untermenüs haben. Ist man im Bereich Schule, sieht man das Untermenü für den Bereich Schule, die anderen Untermenüs sieht man nicht. Dh wenn man sich durchklickt zwischen den 4 Hauptnavigationspunkten die ein Untermenü haben, sieht man immer nur das Untermenü von dem jeweiligen Hauptbereich.

Warum passt also folgender Code beim HTML/CSS bei mir nicht?

<DOCTYPE>
<html>
<head>
<meta>
<title>Schule</title>
<link>
<if>
<style>@import url('css/ie_css.css');</style>
<endif>
</head>
<body>
<div>
<div>
<img><img>
<h1>Schule</h1>
</div>

<div id="navigation">
<ul id="mainNav">
<li class="navSchule">Schule</li>
<li class="navGrauCurrent"> | Willkommen</li>
<li class="navGrau"><a href="schule/s_aufnahme.html"> | Aufnahme</a></li>
<li class="navGrau"><a href="schule/s_schulordnung.html"> | Schulordnung</a></li>
<li class="navGrau"><a href="schule/s_schulerhalter.html"> | Schulerhalter</a></li>
<li class="navGrau"><a href="schule/s_geschichte.html"> | Geschichte</a></li>
<li class="navGrau"><a href="schule/s_info.html"> | Info</a></li>
<li class="navGrau"><a href="schule/s_elternverein.html"> | Elternverein</a></li>
<li class="navGrau"><a href="schule/s_presse.html"> | Presse</a></li>
<li class="navGrau"><a href="schule/s_links.html"> | Links</a></li>
<li class="navKindergarten"><a href="kindergarten/k_haupt.html">Kindergarten</a></li>
<li class="navVolksschule"><a href="volksschule/v_haupt.html">Volksschule</a></li>
<li class="navGymnasium"><a href="gymnasium/g_haupt.html">Gymnasium</a></li>
<li class="navAlumni">Alumni</li>
<li class="navKontakt">Kontakt</li>
</ul>
</div>

<div id="downloads">
</div>

<div id="mainContent">
<h2>Schule</h2>
<p>blabla
</p>
</div>

<div id="footer">
<ul id="foota">
<li>Schule</li>
<li><a href="kindergarten/k_haupt.html">Kindergarten</a></li>
<li><a href="volksschule/v_haupt.html">Volksschule</a></li>
<li><a href="gymnasium/g_haupt.html">Gymnasium</a></li>
<li>Alumni</li>
<li><a href="kontakt/kontakt_haupt">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>



CSS: (der Einfachheit halber hab ich bis auf das CSS für die Navigation alles andere rausgehauen, ebenso ist nur das CSS für SCHULE und KINDERGARTEN drin)

#navigation {
position:absolute;
left:105px;
top:174px;
float:left;
width:209px;
list-style-position:inside;
margin:0px;
padding:0px;
}

#mainNav li {
padding:0px;
margin:0px;
}

.navSchule {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:white;
background-image:url(../img/buttons/s_button.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
height:27px;
width:209px;
line-height:27px;
list-style:none;
list-style-position:inside;
}

.navSchule a {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:white;
background-image: url(../img/buttons/s_button.jpg);
background-repeat: no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
height:27px;
width:209px;
line-height:27px;
list-style: none;
list-style-position:inside;
}

.navSchule a:link {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:white;
background-image:url(../img/buttons/s_button.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
width:209px;
height:27px;
line-height:27px;
list-style:none;
list-style-position:inside;
}

.navSchule a:hover {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:black;
background-image:url(../img/buttons/s_button.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
width:209px;
height:27px;
line-height:27px;
list-style:none;
list-style-position:inside;
}

.navKindergarten {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:white;
background-image:url(../img/buttons/k_button.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
height:27px;
width:209px;
line-height:27px;
list-style:none;
}

.navKindergarten a {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:white;
background-image: url(../img/buttons/k_button.jpg);
background-repeat: no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
height:27px;
width:209px;
line-height:27px;
list-style: none;
}

.navKindergarten a:link {
display:block;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:white;
background-image:url(../img/buttons/k_button.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
width:209px;
height:27px;
line-height:27px;
list-style:none;
}

.navKindergarten a:hover {
display:block;
text-transform:uppercase;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
color:black;
background-image:url(../img/buttons/k_button.jpg);
background-repeat:no-repeat;
margin:0px;
padding:0px 0px 0px 20px;
width:209px;
height:27px;
line-height:27px;
list-style:none;
}


.navGrau {
display:block;
list-style:none;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:silver;
line-height:20px;
list-style-position:inside;
width:209px;
height:20px;
}

.navGrau a {
text-decoration:none;
color:#000000;
}

.navGrau a:hover {
list-style:none;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:silver;
line-height:20px;
width:209px;
height:20px;
display:block;
background-color:silver;
color:white;
margin:0px;
padding:0px;
display:block;
}

.navGrauCurrent {
list-style:none;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:silver;
line-height:20px;
width:209px;
height:20px;
background-color:silver;
color:white;
display:block;
margin:0px;
padding:0px;
}

.navGelbCurrent {
list-style:none;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:orange;
line-height:20px;
width:209px;
height:20px;
background-color:orange;
color:white;
display:block;
margin:0px;
padding:0px;
}

.navGelb {
display:block;
list-style:none;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:orange;
line-height:20px;
list-style-position:inside;
width:209px;
height:20px;
}

.navGelb a {
text-decoration:none;
color:#000000;
}

.navGelb a:hover {
list-style:none;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:orange;
line-height:20px;
width:209px;
height:20px;
display:block;
background-color:orange;
color:white;
margin:0px;
padding:0px;
display:block;
}

*ul#mainNav {
list-style-type:none;
list-style-position:inside;
margin:0px;
padding:0px;
}



Ich bin echt am verzweifeln und hoffe auf Hilfe...
Zuletzt geändert von roy_r am 15.09.2008, 16:16, insgesamt 1-mal geändert.
roy_r
neu hier
 
Beiträge: 2
Registriert: 15.09.2008, 15:14
Wohnort: Wien
Nach oben

hi

Beitragvon renernyc » 15.09.2008, 16:06

wieso sind deine <div> leer und haben nicht die angaben die du unten geschrieben hast drin, also id="navigation" usw. ?
http://www.bass-shirt.de(T-Qualizer Shirt)
http://www.hirn-futter.de

CSS macht schön!
renernyc
Gelegenheitsleser
 
Beiträge: 34
Registriert: 03.09.2008, 11:38
Wohnort: Berlin
Nach oben

Re: hi

Beitragvon roy_r » 15.09.2008, 16:17

renernyc hat geschrieben:wieso sind deine <div> leer und haben nicht die angaben die du unten geschrieben hast drin, also id="navigation" usw. ?


sorry, mein Fehler. Jetzt ist es aber richtig drin. Hoffe jetzt kann wer was damit anfangen
roy_r
neu hier
 
Beiträge: 2
Registriert: 15.09.2008, 15:14
Wohnort: Wien
Nach oben

Beitragvon Laus » 15.09.2008, 16:31

Was genau passt den daran nicht? Aus deiner Aussage "warum passt folgender Code nicht" kann man sehr wenig ableiten. Stimmt die Aufteilung nicht oder was genau? Da du mit Hintergrundbildern arbeitest wäre ein Link zur Originalseite nicht schlecht um sich von dem ganzen einen Eindruck zu verschaffen.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Problem bei Navigation/Unterschiedliche Angaben für IE/Firef"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de