CSS Layout abhängig vom Dateinamen?

[hell_bird]

hi,

ich habe für eine Webseite ein Template gefunden, das eigentlich einen ganz guten Eindruck gemacht hat... aber es tritt dabei dieses extrem seltsame phänomän auf:

das Design ist genau dann richtig, wenn die Seite mit dem namen "index.html" aufgerufen wird. hier ist das genze online:
http://www.on-mouseover.de/templates/hp88/index.html
und zum vergleich (cache leeren ist notwendig):
http://www.on-mouseover.de/templates/hp88/

hier gibt es das ganze als Download:
http://www.on-mouseover.de/scripte/ag_dlcounter/download.php?id=88

Leider habe ich kein bisschen ahnung von CSS, aber dieses Verhalten kommt mir doch etwas seltsam vor (es funktioniert im IE und FF auf die gleiche Weise... Chrome schafft es erst gar nicht das richtig anzuzeigen (oder zeigt es vielleicht als einziger standardkonform an))

Kann mir irgendjemand helfen? Wie passt man dieses Design an alle Browser und Situationen an?

Update: Ich hab inzwischen festgestellt, dass es nicht vom cache abhängt sondern vom Verlauf. Wie könnte man das beheben? ist es irgendetwas mit ".menu1 a:visited"?

[DanMan]

Wo genau soll der Unterschied denn sein? Für mich sehen im Ff und Opera beide gleich aus.

[hell_bird]

naja das vertikale menü ist zusammengestaucht wenn man die url ohne index.html aufruft (nachdem der Verlauf/Cache geleert wurde)... und die schriftart und größe ändert sich...

lustiger weise ist das layout wenn der dateinamenunfall passiert genau so wie es in chrome (evtl safari auch?) standardmäßig ist... vermutlich muss man es nur dort richtig hinbekommen dass alles funktioniert

ich bin allerdings nicht kompetent genug... ich bitte um hilfe

[Gast]

Ich würd das Template vergessen, weils wirklich mühsam werden könnte und in einer Woche CSS selbst lernen. Denn CSS ist sehr leicht zu lernen und dann hatt man auch nicht soviel überflüssiges Zeug mit drin.
Brauchst du nur Topsite (freeware css-editor) und css4you.de. Das wäre die saubere und wirklich sehr einfach zu lernende Lösung.

[hell_bird]

genau CSS ist ja das Problem... Irgendetwas in diesem Abschnitt ist nicht standardkonform oder wird von den Browsern seltsam interpretiert:


/* menue vertikal */

.menu1 a , .menu1 a:visited , .menu1 a:active {display:block;
background-image:url(images/black.png)!important;
background-image:url(images/black.gif);background-repeat:repeat;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);color:#fff;
text-decoration:none ;
text-align:center;
width:200px;
border:solid 1px #b6b6b6;
font-size: 12px;line-height: 28px;
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
margin:1px;
}

.menu1 a:hover{background-image:url(images/black60.png)!important;
background-image:url(images/black.gif);background-repeat:repeat;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
color:#fff;
text-decoration:none ;

}

Die höhe von den Elementen und Schriftart ist vom Verlauf abhängig (ich glaube ob man das ziel der Links schon besucht hat)... Ich habe schon versucht die Höhe der Menüpunkte durch "height: 28px" festzulegen, was auch funktioniert hat, aber der text ist, wenn das Ziel noch nicht im Verlauf war, nicht vertikal zentriert und auch nicht in der richtigen Schriftart/größe.

[DanMan]

Ok, jetzt hab ich es mit Hilfe der Ff DevTB auch nachvollziehen können. Die noch nicht besuchten Links sind idT flacher.

Nimm einfach mal alle Selektoren raus, die a:visited oder a:active heißen. Das sollte schon genügen. Also statt
.menu1 a , .menu1 a:visited , .menu1 a:active {
mal
.menu1 a {

[hell_bird]

bei mir sorgt das dafür, dass es immerhin in allen browsern gleich (falsch) aussieht. mir gefällt aber die originalversion besser. Mit "height: 28px;" kann ich schonmal die höhe richtig einstellen, jetzt muss der text nur noch ein wenig kleiner und vertikal-mittig sein.
wie mach ich das?

[Sephiroth]

a:link hat als line-height nur 18px statt 28px wie die anderen varianten (Zeile 131 der css-datei)
font-size für die Schriftgröße

vertikal zentrieren (auch beliebt bei der hiesigen suche) liefert u.a. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Versuch das ganze im nächsten Schritt auch mal ohne Tabellen. Tabellen sind für tabellarische Inhalte und nicht für den Aufbau/Aussehen der Webseite. ;)

[hell_bird]

ahh vielen dank... das kreist das Problem ein... machen die Browser dabei einen Fehler, dass sie nicht ".menu1 a:visited" sonder das allgemeine "a:visited" als style übernehmen oder ist das standardkonform?

Wenn ich natürlich das allgemeine a:visited ändere werden auch die Links im Text diesen Style übernehmen. Was kann man da machen? Muss man den Webseiteninhalt in einen Container setzen und dort neue Regeln für die Links machen?

[Sephiroth]

Du brauchst nur die Angaben, die für alle Varianten der Links gelten sollen (wie die Größe), bei ".menu1 a" deklarieren. Für die Pseudoklassen (http://www.css4you.de/wscss/css03.html#pseudoformate) änderst du dann noch die individuellen Eigenschaften.

:link
Nichtbesuchter Hyperlink.
:visited
Besuchter Hyperlink
:active
Aktiver Hyperlink

[hell_bird]

alles klar... vielen dank