zu dämlich für horizontales CSS Menü

**Kowkase** · 20.04.2010 13:53

Hallo liebe Gemeinde,

nachdem ich nun mehrere Foren durchgesucht und vielen Links gefolgt bin wende ich mich an Euch und bete um Erleuchtung.
Ich habe z.B. von Listamatic folgenden Code im DW CS3 eingefügt:

HTML-Code:

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

und hier der CSS-Code:

HTML-Code:

#navlist
{
border: 3px solid #222;
padding: 0 0 0 20px;
margin: 0;
background-color: #ACF;
font-family: verdana,sans-serif;
font-size: 12px;
font-weight: bold;
}

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

#navlist #active
{
float: right;
margin-right: 10px;
}

#navlist li a
{
text-decoration: none;
border: 3px solid #000;
padding: 0 8px 1px 8px;
margin: 0 2px;
background-color: #FFF;
color: #000;
}

* html #navlist li a { padding: 0 8px; }

#navlist li a:hover
{
background-color: #26A;
color: #FFF;
}

Im Dreamweaver wird auch alles hübsch angezeigt und ist ja auch verständlich. Aber solbald der Spass in die Vorschau geht steht alles ordentlich untereinander.

Bitte Bitte sagt mir: "Was mache ich anders als der Rest der Welt"?

Danke schonmal, der Kowkase

**max.m** · 20.04.2010 14:29

Also ich habe Deinen Code kopiert, ungeändert in eine html-Datei eingefügt und die Navi ist horizontal, getestet im IE7 und FF 3.6 unter Windows XP.

Was meinst Du mit Vorschau? Die Dreamweaver-Vorschau? Und was meinst Du dann mit "im Dreamweaver wird auch alles hübsch angezeigt"?
Falls es wirklich nur in Dreamweaver nicht passt: lass die Dreamweaver-Vorschau einfach weg, teste nur im Browser, denn mit Dreamweaver wird niemals ein Mensch Deine Seite anschauen.

Und das

Code:

float: right;

würde ich bei

Code:

#navlist #active

entfernen, oder soll der aktive Menüpunkt tatsächlich ganz nach rechts geschoben werden?

**Kowkase** · 20.04.2010 16:37

Danke erstmal für Deine schnelle Hilfe.

Also mit Vorschau ist der geteilte Bildschirm bei DW gemeint.

Wo es letztendlich hakt ist die Darstellung im Browser.

Jetzt bekomme ich aber auch gerade meine Zweifel ob das am Code oder an mir liegt, denn mein Rechner stellt nicht mal mehr die Grafiken dar. Hmmm, da liegt der Haase vermtl. woanders beim Pfeffern.

Kowkase

**max.m** · 20.04.2010 16:50

Zitat von Kowkase

Wo es letztendlich hakt ist die Darstellung im Browser.

Wie gesagt, in o.g. Kombination wird es korrekt dargestellt.

Zitat von Kowkase

Jetzt bekomme ich aber auch gerade meine Zweifel ob das am Code oder an mir liegt, denn mein Rechner stellt nicht mal mehr die Grafiken dar.

Von welchen Grafiken redest Du?

**Kowkase** · 20.04.2010 16:58

ach das mit den Grafiken hat nichts mit diesem Prob zu tun, das war nur testhalber. Aber das lag an falscher Konfig in DW. Die horizontale Darstellung sieht bei mir immernochnicht so aus aber das scheint besagter Weise eine loale geschichte zu sein.

Ich danke Dir, der Kowkas

**max.m** · 20.04.2010 19:17

So banale Dinge wie Browser-Cache leeren hast Du schon versucht?

**Kowkase** · 21.04.2010 08:28

ich habe sogar extra ein Prog namens CCleaner installiert und der hat auch ne Menge rausgeschmissen aber mein Menü wird, wenn ich es erzeuge, nicht horizontal dargestellt. Ich kriege noch nen Klopfer
Kannst Du Deinen Test vlt. irgendwo online stellen?

**max.m** · 21.04.2010 08:38

Ich habe hier gerade keinen FTP-Zugang, aber hier die ganze HTML-Datei:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
#navlist {
    border: 3px solid #222;
    padding: 0 0 0 20px;
    margin: 0;
    background-color: #ACF;
    font-family: verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

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

#navlist #active {
    margin-right: 10px;
}

#navlist li a {
    text-decoration: none;
    border: 3px solid #000;
    padding: 0 8px 1px 8px;
    margin: 0 2px;
    background-color: #FFF;
    color: #000;
}

* html #navlist li a {
    padding: 0 8px;
}

#navlist li a:hover {
    background-color: #26A;
    color: #FFF;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
    <li id="active"><a href="#">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>

Ich habe lediglich das id="current" (da im CSS nicht definiert) und das oben angesprochene float: right; rausgeworfen.

**Kowkase** · 21.04.2010 13:10

OK, das scheint die Lösung zu sein. Der Fehler hatte sich wohl irgendwie in den CSS - Bereich gemogelt. Ich habe nun mal einfach Dein CSS da reingekippt und voila auch mein Rechner kann ein horizontales Menü darstellen.

Ich danke Dir für Deine Ausdauer

der Kowkase

**max.m** · 21.04.2010 13:56

Ich verstehe es zwar nicht, aber wenns klappt passts ja.
Ich habe auch einfach Dein CSS kopiert, ohne irgendwelche Änderungen hat es funktioniert. Dieses float: right; habe ich nur entfernt weil es (für mich) keinen Sinn macht. Und id="current" hat einfach gar nichts bewirkt, da es im CSS-Teil ja kein #current { } gibt.

Ich vermute immer noch Browsercache.

Ob der CCleaner diesen überhaupt löscht kann ich nicht sagen.

**Kowkase** · 21.04.2010 14:20

Eigentlich gebe ich Dir ja Recht, aber es gibt auch noch den Umstand, dass man sogar beim kopieren des Codes noch Fehler machen kann. Kommt mir jetzt zwar selber ein wenig komisch vor aber immerhin geht es jetzt und ich habe das Menü auch schon lustig umgebaut

**Zer0** · 27.04.2010 18:03

Du bist aber dem Rat vom Max nachgekommen und ignorierst die Anzeige des Dreamwavers?

**Kowkase** · 28.04.2010 13:08

Zitat von Zer0

Du bist aber dem Rat vom Max nachgekommen und ignorierst die Anzeige des Dreamwavers?

ich habe alles so gemacht wie der max das gesagt hat. Aber warum soll ich meinen DW ignorieren? Dort hat´s zwar komischerweise vorher schon gestimmt nun ist es aber in allen Browsern auch so.

**Zer0** · 28.04.2010 13:21

Aber warum soll ich meinen DW ignorieren?

Dies wurde ebenfalls schon vom Max beantwortet:

Falls es wirklich nur in Dreamweaver nicht passt: lass die Dreamweaver-Vorschau einfach weg, teste nur im Browser, denn mit Dreamweaver wird niemals ein Mensch Deine Seite anschauen.

**Kowkase** · 28.04.2010 13:35

Wie gesagt, nun passt alles, in DW und in den Browsern.

Vielen Dank, der Kowkase

zur Startseite vom TP

Thema: zu dämlich für horizontales CSS Menü

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

zu dämlich für horizontales CSS Menü

Ähnliche Themen

Horizontales Drop down Menü

Horizontales Menü

Horizontales Menü

Simples horizontales Menü

horizontales Menü im IE als Treppe :(

Aktive Benutzer

Aktive Benutzer