2 Navigationsleisten.Aber wie?

RemusGTR · 10.02.2009

Hallo
Im Moment versuche ich von den Tabellen los zu kommen und mit CSS zu arbeiten.
Bisher klappt es relativ gut.
Nur auf der Page sollen 2 Navigationsleisten sein.
Eine horizontal und eine vertikal.Einzeln funktionieren sie perfekt aber sobald ich beide in die CSS-Datei schreibe klappt es irgendwie nicht.
Klar muss die 2 Leiste anders benannt werden nur was genau umbenannt werden muss ist mir bisher noch nicht klar.
Vieleicht kann mir ja jemand sagen wo ich was umbenennen oder ändern muss damit beide funktionieren.

Vertikal:
Listamatic: Rollover lists

Horizontal:
Listamatic: Rollover horizontal list

Vielen Dank im vorraus und ich hoffe das ich nicht zerissen werde weil ich die Menüs nicht selbst erstellt habe :rolleyes:

Gruß Remus

lauffreak · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

poste doch mal bitte einen link zu deiner html+css Datei!

lordwebbie · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

oder den inhalt der dateien direkt. wie soll man sonst einen möglichen fehler finden?????

dlogic · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

Ich denke mal da du beide über nen Tool generierst, werden die Bezeichnungen in der CSS Datei für beide Navigationen gleich sein... sprich wenn es eine Festlegung für ein Element z.B. div, Link... innerhalb der horizontalen Navigation gibt wird diese evtl. so aussehen

.element { color:#000 }

somit wird eine schwarze Farbe für ein "nicht näher bezeichnetes" Element in der horizontalen Navigation festgelegt und weil du dir eine zweite Navigation mit dem gleichen Tool erstellst, wird die gleiche Bezeichnung für die vertikale Navigation genutzt. Es findet also keine Unterscheidung statt... diese könnte jedoch aussehen:

.element_horizontal { color:#000 }
.element_vertikal { color:#fff }

Schau dir bitte mal beide CSS Dateien separat an!

lordwebbie · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

dlogic schrieb:
Ich denke mal da du beide über nen Tool generierst, werden die Bezeichnungen in der CSS Datei für beide Navigationen gleich sein... sprich wenn es eine Festlegung für ein Element z.B. div, Link... innerhalb der horizontalen Navigation gibt wird diese evtl. so aussehen

.element { color:#000 }

somit wird eine schwarze Farbe für ein "nicht näher bezeichnetes" Element in der horizontalen Navigation festgelegt und weil du dir eine zweite Navigation mit dem gleichen Tool erstellst, wird die gleiche Bezeichnung für die vertikale Navigation genutzt. Es findet also keine Unterscheidung statt... diese könnte jedoch aussehen:

.element_horizontal { color:#000 }
.element_vertikal { color:#fff }

Schau dir bitte mal beide CSS Dateien separat an!

1. woher weist du, dass er ein tool benutzt? so wie ich das verstanden habe nimmt er die codeschnipsel von der o.g. homepage.

2. Deshalb hat er auch keine zwei dateien, sondern bindet den code direkt in die hp ein bzw. legt die sachen in eine datei.

man müsste den code mal sehen...

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

Ja genau.Ich benutze den Code und füge ihn direkt in den code der Page und der CSS Datei ein.
Den Code der Vertikalen Liste habe ich belassen und den Code der Horizontalen wollte ich umbenennen was allerdings nicht klappt weil ich etwas auf dem Schlauch stehe.
Der Code sieht dann so aus. (nicht lachen)

<div id="upnavcontainer">
<ul id="upnavlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
ul#upnavlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#upnavlist li
{
display: inline;
list-style-type: none;
}

#upnavlist a { padding: 3px 10px; }

#upnavlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#upnavlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Wo liegt der Fehler?

Gruß Remus

lordwebbie · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

RemusGTR schrieb:
ul#upnavlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#upnavlist li
{
display: inline;
list-style-type: none;
}

#upnavlist a { padding: 3px 10px; }

#upnavlist a:link, #upnavlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#upnavlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

da fehlt ein up und schon klappt es...

mfg webbie

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

Wenns das ist bin ich zufrieden.
Das probiere ich nachher direkt aus.

Gruß Remus

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

Wenn ich mir das Ergebnis in der Browservorschau ansehe wird das Upmenü
als Liste dargestellt mit Listenpunkten und die Links sind nur mit Schrift also ohne diese Recheckigen Hintergründe.

Das seltsame ist das es in Dreamweaver korrekt angezeigt wird.
Einfach seltsam

Gruß Remus

dlogic · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

@lordwebbie
na wenn ich schon "Listamatic" lese nehme ich das an... zumal ich mir nun beide Beispiele angesehen habe und es ist schon so wie ich geschrieben habe, das die id's bzw. Bezeichnungen bei der horizontalen wie bei der vertikalen gleich sind....

@RemusGTR

hm, bei mir funktioniert es wunderbar...... wie bindest du denn die Stylesheets ein?

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

Eingebunden ist die CSS Datei mit

<link href="thrColHybHdr.css" rel="stylesheet" type="text/css" />

Bei dir sieht es so aus wie ich es haben wollte.Da steckt bestimmt nur eine Kleinigkeit hinter.
Wie hast du die Sachen denn umbenannt?So wie es weiter oben beschrieben war?

Na ich lerne ja noch

Gruß Remus

dlogic · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

es ist 100% ne kleinigkeit... nur müssen wir dies jetzt rausfinden... also liegt deine CSS Datei in dem selben Ordner wie das HTML Dokument richtig?

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

ja liegt sie

dlogic · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

okay... in der css datei hast du

den "upnavcontainer" und die "upnavlist" für die horizontale definiert

und in der HTML hast du

Code:

<div id="upnavcontainer">
<ul id="upnavlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

so siehts es in der html Datei aus
<div id="upnavcontainer">
<ul id="upnavlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

und so in der CSS

ul#upnavlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#upnavlist li
{
display: inline;
list-style-type: none;
}

#upnavlist a { padding: 3px 10px; }

#upnavlist a:link, #upnavlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#upnavlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

dlogic · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

... ich poste die hier mal die HTML Datei mit beiden Navigationen und integriertem CSS... den CSS Code kannst du ja später noch in einer CSS Datei auslagern.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<style>

#upnavcontainer { /*ANGABEN FÜR DAS OBERE NAVI DIV*/ }

ul#upnavlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#upnavlist li
{
display: inline;
list-style-type: none;
}
#upnavlist a { padding: 3px 10px; }
#upnavlist a:link, #upnavlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#upnavlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}


#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}

</style>

<body>
<div id="upnavcontainer">
<ul id="upnavlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

</body>
</html>

RemusGTR · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

Ich habe nun deine CSS Zeilen in meine CSS DAtei eingefügt und die von mir gelöscht.
Meinen HTML Code habe ich beibehalten und siehe da es funktioniert.
Also muss der Fehler in meiner CSS Datei gelegen haben.
Mich würde mal interessieren wo er war.

Vielen Dank für diese schnelle Hilfe und eurer Mühe.

Gruß Remus

lordwebbie · 10.02.2009

AW: 2 Navigationsleisten.Aber wie?

also:
ich habe gerade folgendes gemacht:
die beiden codeschnipsel zusammen hintereinander in eine html datei gepackt.
dann in eine css datei den codeauszug von oben (mit meiner "up"-veränderung geschrieben).
dann in der html datei das css eingebunden.
und siehe da - es klappt.

ohne dieses eine up habe ich das selbe wie du oben beschrieben. es wird nur eine liste angezeigt. ohne bilder.

ganz sicher, dass du das up da hin gemacht hast? notfalls aktualisier deine seite mal im browser mit STRG+F5, damit vllt. die seite komplett neu geladen wird.

mfg webbie

edit: sorry nicht gesehen, dass es geklappt hat, war zu langsam. Herzlichen Glückwunsch.

RemusGTR · 11.02.2009

AW: 2 Navigationsleisten.Aber wie?

Der Dank gilt euch.
Nu is das eine Problem beseitigt da taucht ein neues auf.
Ich kriege es nicht hin das diese obere Navigationsleiste sich ohne Abstand oben anlegt .Also sie soll über dem Banner sein.Da ist sie auch aber mit ein wenig Abstand zum Banner und ich versuche heraus zubekommen welches CSS Teil dafür verantwortlich ist.
Aber das wird schon noch.

Gruß Remus

dlogic · 11.02.2009

AW: 2 Navigationsleisten.Aber wie?

hallo remus... hier ist eine wirklich sehr gute Seite dazu CSS 4 You - The Finest in Stylesheets .... am besten einfach ausprobieren, auch wenn es Zeit kostet... aber es spart in der Zukunft. ;o)