[Dw] Live-Ansicht unterscheidet sich von Browseransicht

statistiker · 23.07.2009

Guten Abend,

ich habe folgendes Problem im Dreamweaver:

Ich habe in CSS eine Navigationszeile so formatiert, dass der Listenpunkt, der zur aktuell angezeigten Page gehört, farblich hinterlegt ist, sodass erkennbar ist, wo ich mich gerade befinde.

In der Live-Ansicht ist alles so,wie ich es mir vorstelle. Schaue ich mir die Seite dann im Browser (Firefox) an, kommt das böse Erwachen, die farbliche Hinterlegung ist abhanden gekommen.

Kennt jemand das Problem oder gibt es dazu eine einfache Lösung?

Freue mich über jede hilfreiche Antwort. Dankeschön schonmal im Voraus!

anoX · 23.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

Zeig mal den Code her.

Ansonsten kann ich nur abraten, sich nach der Live-Ansicht zu richten. Diese ist zwar nicht immer falsch, stellt aber meiner Meinung bzw. Erfahrung nach meist die Ansicht des IE dar.

Kann also gut sein, dass Du deinem Quelltext für den Firefox noch was zufügen musst o.ä, aber zeig vllt. mal den Quelltext her um den es geht, dann kann man sicher mehr sagen.

statistiker · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

Gerne!

HTML:

<div id="navigation">
<ul>
    <li id="navi01"><a href="index.html">STARTSEITE</a></li>
    <li id="navi02"><a href="service.html">SERVICE</a></li>
    <li id="navi03"><a href="schulungen.html">SCHULUNGEN</a></li>
    <li id="navi04"><a href="preise.html">PREISE</a></li>
    <li id="navi05"><a href="kontakt.php">KONTAKT</a></li>
</ul>
</div>

Hier die relevante Box aus der html-Datei et voilà der Auszug aus dem stylesheet. Etwas unübersichtlich, aber ich hoffe, es ist vertretbar:

Code:

#navigation {
    width:auto;
    position:relative;
    border-top-color:black;
    border-top-style:solid;
    border-top-width:1px;
}

#navigation ul {
    list-style:none;
    padding:3px 14px;
}

#navigation li {
    display:inline;
}

#navigation a {
    font-size:12px;
    color:white;
    text-decoration:none;
    padding:3px 20px;
    background-color:#308CFF;
    border-width:0px 1px 1px 1px;
    border-color:black;
    border-style:solid;
    border-top-color:#308CFF;
    border-top-style:solid;
    border-top-width:1px;
}

#navigation a:hover,
#navigation a:focus,
#navigation a:active{
    background-color:#FADD12;
    color:black;
    border-bottom-width:4px;
}

#startseite #navi01 a:link,
#service #navi02 a:link,
#schulungen #navi03 a:link,
#preise #navi04 a:link,
#kontakt #navi05 a:link {
    background-color:#FADD12;
    color:black;
    border-bottom-width:4px;
}

oxygen · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

normal eingestellt (urzustand) is der ie primärbrowser
somit schauste dir dein ergebnis also im ie und später im ff an

quellcode oder domain wären ideal - um dir fix helfen zu können

statistiker · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

Du hast eine PN!

sokie · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

a:active gilt solange wie die Maustaste auf dem Button gedrückt gehalten wird.
a:hover gilt solange wie der Mauszeiger über der Schaltfläche ist,
a:focus solange wie der Button den Fokus hat.

all das gilt nach dem NEULADEN der Seite nicht mehr. Wenn du willst, dass die aktuelle Seite an der Schaltflächenfarbe zu erkennen sein soll,musst du dem entsprechenden a-Element eine klasse zuweisen. (zB class="aktuell") dann kannst du dein css entsprechend erweitern:

Code:

#navigation a:hover,
#navigation a:focus,
#navigation a:active,
.aktuell{
...
}

statistiker · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

Ich habe den einzelnen Listenpunkten heweils eine eigne id zugewiesen (navi01, navi02 etc.).

Müsste da nicht eigentlich folgende Passage im CSS den gleichen Effekt haben, wie die von dir vorgeschlagene Lösung?

Code:

#startseite #navi01 a:link,
#service #navi02 a:link,
#schulungen #navi03 a:link,
#preise #navi04 a:link,
#kontakt #navi05 a:link {
    background-color:#FADD12;
    color:black;
    border-bottom-width:4px;
}

anoX · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

Ähm nein, das ist nicht direkt das selbe.

Ich habe vor kurzem ein Tutorial geschrieben, wo ich den "Effekt" auch benutze, vielleicht hilft dir das weiter.

Du hast z.B. in der CSS einmal der ul die ID "navigation" zugewiesen und einmal seperat. Hier kannst Du z.B. die EIgenschaften von "navigation#ul" löschen und stattdessen dem die Eigenschaften des "#navigation" geben.

"display:block" und "float:left" solltest Du dir auch mal ansehen.

Alles im eben erwähntem Tutorial.

Wenn Du trotzdem nicht weiter kommst, helf ich dir gern anderweitig auf die Sprünge, aber ich bin zuversichtlich, dass Du es mit Hilfe des Tuts selbst hinbekommst.

Hier der Link zum Tutorial:

sokie · 24.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

statistiker schrieb:
Müsste da nicht eigentlich folgende Passage im CSS den gleichen Effekt haben, wie die von dir vorgeschlagene Lösung?

Code:

#startseite #navi01 a:link, #service #navi02 a:link, #schulungen #navi03 a:link, #preise #navi04 a:link, #kontakt #navi05 a:link { background-color:#FADD12; color:black; border-bottom-width:4px; }

nein,die Lösung bewirkt doch nur, dass das Element eine formatierung erhält. Ich habe Dich so verstanden, dass du erreichen willst, dass der Besucher schon durch die Farbe des Menüeintrags sehen kann auf welcher Seite er gerade ist. Bei deiner css bekommt nur der Link KONTAKT eine andere Formatierung.

arribua · 31.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

Das Problem liegt wahrscheinlich daran, dass Firefox die Farben die Du benutzt nicht unterstützt.
Es ist fast eine Wissenschaft, zumindest braucht es sehr viel Erfahrung, um ein Layout in allen Browsern so hin zu bekommen, dass es zufriedenstellend ist.

dr4g0nstyle · 31.07.2009

AW: [Dw] Live-Ansicht unterscheidet sich von Browseransicht

also das ne bestimmte farbe nicht erkannt wird hab ich ncoh nciht gehört

(ist aber eine interessante theorie).

deine id´s im menu sind überflüssig. einfach die listenpunkte so formatieren, wie du es vor hast )(optisch). Dem jeweiligen Menupunkt der aktuellen Seite musst du dann einer class zuweisen z.b. class="aktiv". Woher soll der Browser sonst wissen welche seite aktiv ist?

HTML:

<ul id="navigation">
    <li><a href="index.html">STARTSEITE</a></li>
    <li><a href="service.html">SERVICE</a></li>
    <li class="active"><a href="schulungen.html">SCHULUNGEN</a></li>
    <li><a href="preise.html">PREISE</a></li>
    <li><a href="kontakt.php">KONTAKT</a></li>
</ul>

nun einfach nur noch die listenpunkte und die klasse formatieren und fertig ist das ganze. der div um die liste ist auch überflüssig.

greetz dr4g