Safari verrückt Navigation nach rechts. Hilfe! CSS

[Nielz]

Hallo liebe Macgemeinde,

Ich befinde mich tief in meiner Ausbildung zum Mediengestalter in Digital und Print.

Zur Zeit arbeite ich an meiner ersten Internetseite.
es ist ein fiktives Projekt dass gleichzeitig die "Abschlussarbeit" für HTML/CSS sein soll. Da die Dozentin aus Zeitnot sehr schnell auf Dreamweaver geswitched ist, haben ich und ein paar mitschüler uns vorgenommen weiterhin per hand zu coden, um den code später auch verstehen zu können
Nun zu meinem eigentlichen Problem:

auf nielzzz.funpic.de liegt das Projekt. wie gesagt fiktiv und ohne realen Inhalt.

in FF und IE wird die Seite fehlerfrei dargestellt. in Safari verrutscht allerdings die Navi nach rechts. die Subnavi (auf die ich übrigens sehr stolz bin ) rutscht auch nochmal nach rechts....

die CSS liegt unter nielzzz.funpic.de/css/style.css

Ich hoffe jemand findet den Fehler bzw hat einen Lösungsweg.


Bitte keine all zu harte Kritik, es ist wirklich meine aller aller aller erste Internetseite. Ich habe hauptsächlich auf "Funktion" geachtet, deshalb ist die Gestaltung vielleicht nicht sehr ansprechend ;(


Grüße aus Berlin,

Nielz

 

[rm -r *]

Hallo Nielz.
Erstmal grundsätzlich die Frage, wieso Du Attribute wie align="left" und andere im Quelltext verwendest, wenn Du eine Seite bastelst die mit CSS gestyled werden soll.
Das sollte man nicht machen.

Dann solltest Du dringend darauf achten, das die Seite validiert.
Auf jeder der Seiten bekomme ich 3-8 Validierungsfehler angezeigt.

Du benutzt durchgehend Angaben in px anstatt in em, was dazu führt, das der IE und der Safari beim Vergößern der Schrift die ganzen werte nicht miskaliert.
Der FF 3.x und aktuelle Operas sind die px Angaben inzwischen egal.

Wegen der Navi muß ich mal gucken.
Aber die anderen Sachen sind imho auch wichtig, wobei ich natürlich nicht weiß, wie di Vorgaben sind.
Wenn ich schon lese, das die Dozentin DW benutzt.... :/

 

[rm -r *]

Definiere mal noch:

#navigation ul {
margin:0;
padding: 0;
}

Dann geht es auch im Safari.

 

[Nielz]

Tausend Dank !

Hallo, erstmal danke für die schnelle Hilfe...

Die navi sitzt jetzt da wo sie sein soll *freu*
Was die px-Angaben betrifft, wie meinst du das mit "em" ?
Hab da wohl ne Gedächtnislücke
Wie findest du die Seite sonst ?

MfG, Nielz

 

[rm -r *]

Wenn Du höhen, oder breiten angibst, kannst das entweder mit festen Maßen per px machen, oder mit em. Die Angabe von em ist relativ zur Schriftgröße, was dazu führt, das beim vergrößern der Schrift einer Seite auch der Rest mitskaliert.
Der aktuelle Firefox und Opera skalieren inzwischen auch Seiten wo die Angaben in px
angegeben werden, aber der Safari und die IEs machen das nicht.

Hier http://nielzzz.ni.funpic.de/html/Projekte2008.html rutscht im IE noch
ein Bild von diesem "Glasfassade"-Abschnitt nach rechts.

Ansonsten finde ich das mit den Linien die auslaufen nicht so schön.
Bei den Horizontalen geht es ja noch, aber die Vertikale Linie wiederholt sich bei längeren Seiten und Du hast dann eine Lücke in der Linie.
Das ist so doch nicht gewollt, oder ?

Sonst kann man da nicht viel sagen. Es ist eine einfach gehaltene Seite
mit ein paar Elementen (Text, Text mit Bild, großes Bild, Navigation mit hovers), die halt gemacht worden ist, um ein wenig mit CSS zu machen.

Vom Layout usw. her passiert da ja nicht viel, was aber wahrscheinlich gar nicht der Sinn dieser Seite bzw. dieses Projektes war, wenn ich Deinen Eingangspost richtig verstehe.

 

[rm -r *]

Ach ja.
Du besnutzt hier http://nielzzz.ni.funpic.de/html/Projekte2008.html
<br /> um Abstände zu erreichen und verwendest dort auch Attribute
wie align="left" oder align="justify".

Wenn man sich schon entscheidet eine CSS-basierte Seite zu machen, sollte man solche Sachen auch per CSS lösen.

HTML-Tags sollten nicht dazu benutzt werden um das Aussehen einer Seite zu beeinflussen, sondern nur um die Inhalte zu gliedern (Stichwort Semantik)

 

[Nielz]

also das mit der vertikalen Linie ist eigentlich so gedacht:
im Navi-Div ist die Linie als Hintergund unten rechts angeordnet.
im content liegt das gleiche img unten rechts angeordnet.
Bei längerem Content sollte diese eigentlich nach unten "ausfahren".
Dummer Weise, liegt die linie in der Navi darüber, und nicht darunter.
wie kann ich das am "dümmsten" machen ?

Was die simple Gestaltung angeht, habe ich anfangs schon gewagtere Layouts gehabt, dummer weise hatte ich mir immer wieder selbst ein Bein gestellt. Da für das Projekt erstmal die Funktion im Vordergrund steht, habe ich also das "Design" meinen CSS/HTML Kenntnissen angepasst

Finde aber, dass es gut zum Thema Architektur passt.

Gruß, Nielz

 

[rm -r *]

...
im Navi-Div ist die Linie als Hintergund unten rechts angeordnet.
im content liegt das gleiche img unten rechts angeordnet.
Bei längerem Content sollte diese eigentlich nach unten "ausfahren".
Dummer Weise, liegt die linie in der Navi darüber, und nicht darunter...

Warum Du diese Linie in der Navi und im Content einbaust verstehe ich nicht.

Wenn Du die Linie in der Navi einfach rausschmeißt, dann wächst die Linie doch mit, ohne diese Unterbrechung.

 

[Nielz]

dann ist Sie aber bei wenig Inhalt des Contents zu Kurz.
sie soll schon bei wenig Inhalt zu sehen sein...

 

[rm -r *]

Dem könnte man mit einer min-height beim content entgegenwirken.
Aber da führen viele wege nach Rom.

Imho wäre es wichtiger das die Seite korrekt validiert und Du Dir Gedanken über Semantik machst.
Aber das mit der Semantik nur unter vorbehalt.
Ich weiß ja nicht, wo bei Dieseem Projekt der Schwerpunkt liegt.

Falls Semantik eine Rolle spielt, sollte man z.B. die Haupüberschrift des Impressums nicht als

<strong>Impressum</strong>

, sondern als

<h1>Impressum</h1>

auszeichnen.
Wahrscheinlich ist das aber die Kür.

 

[Nielz]

Erzwingt h1 nicht einen absatz? Habe strong nur testweise verwendet. Das mit min height, kann IE damit umgehen?

Gruß, nielz

 

[Emagdnim]

Ich befinde mich tief in meiner Ausbildung zum Mediengestalter in Digital und Print.

Und ich dachte immer, es geht nur eins zur Zeit...

Oder haben sie das Berufsbild mal wieder total umgekrempelt...?




http://de.selfhtml.org/

 

[rm -r *]

Erzwingt h1 nicht einen absatz? Habe strong nur testweise verwendet. Das mit min height, kann IE damit umgehen?

Nicht zwingend.
Das hat man ja per CSS unter Kontrolle.

Aber ein Absatz ist ja auch eigentlich genau das, was du da auch hast.
Erst kommt die Überschrift "Impressum" und dann darunter der Text.

Beim IE muß man tricksen um ihm min-height beizubringen, aber da findet man viele Anleitungen im Netz.

Ab einem gewissen Punkt, kommt man bei CSS leider nicht drumherum, sich speziell um die IEs zu kümmern, wenn die Seitw auf allen Browsern Pixelgenau gleich aussehen soll.
Das ist echt die Pest.

Selektor für IE 6:

* html #meinElement

Selektor für IE 7:

* + html #meinElement