Vermutlich ein paar kleine tippfehler?

Computer: Software & Programmierung HTML & CSS
#1

hi allerseits,
ich habe grade vor meine Seite ein wenig umzugestalten, was aber nicht so ganz klappt wie ich mir das vorstelle. Ich vermute ich hab irgendeinen ganz blöden Fehler drin, sehe ihn aber irgendwie nicht… ich wäre euch für hilfe dankbar.
Es geht um folgende (vorerst in Probe hochgeladene) Seite:
http://derjesko.de/ersatz/index.shtml

Wie unschwer zu sehen ist sind die Links oben in der Navigationsleiste nicht so gewollte, sie überlagern sich aus irgendeinem Grund…
Vorher hatte ich die Navigation links statt oben, da klappt es wunderbar:
http://derjesko.de

Außerdem stört mich in Opera der Streifen Lücke (wo das Gelb zu sehen ist) bzw. im IE der kleine rote Rand neben der Navigation, der scheinbar länger ist als die angegebenen 700px… ??? (Ich weiß jetzt nicht ob im Firefox auch noch was anderes falsch ist)…

Wäre super wenn mir jemand helfen könnte.

ach ja, die Css datei ist folgende: http://derjesko.de/ersatz/redstyle.css und die Navigation (mit SSI eingebunden) befindet sich hier:
http://derjesko.de/ersatz/Navi.shtml

vielen dank, gruß derjesko

#2

Einmal so

und das andere mal

#3

Einmal so

und das andere mal

danke, da hast du natürlich Recht und das hat einen kleinen Unterschied gemacht (nämlich dass die zwei links nach erstem Beispiel nach hinten geöffnet waren) aber das war natürlich nicht das Problem, da sie sich immer noch überschneiden (vertikal) und nicht gleich lang (150 px) sind, obwohl ich dies angegeben habe. (Abgesehen bei dem Link zum Enzyclopädium, das ist absichtlich breiter). Auch das Problem der Spalte ist damit noch nicht gelöst.
trotzdem danke, gruß derjesko

#4

Hallo Jesko,

das war natürlich
nicht das Problem, da sie sich immer noch überschneiden
(vertikal) und nicht gleich lang (150 px) sind, obwohl ich
dies angegeben habe. (Abgesehen bei dem Link zum
Enzyclopädium, das ist absichtlich breiter).

Links (‚a‘) sind inline-Elemente und nehmen als solche keine Breiten-Angaben an. Weisen den Links die Eigenschaft ‚display:block‘ zu, dann greift auch Deine Breiten-Angabe. Die Links stehen dann allerdings untereinander, deshalb mußt Du sie floaten.

Auch das Problem
der Spalte ist damit noch nicht gelöst.

Der Abstand zwischen dem Navi- und dem Content-Bereich entsteht durch das top-margin der dort notierten Überschrift („Der Jesko - Geschichten über alles.“). Setz das margin auf 0, dann müßte der Abstand verschwinden.

Ansonsten solltest Du mal überprüfen, ob Du für alle divs, die Du schließt auch einen geöffnet hast. Mir scheinen da zu viele schließende divs. Du bist ohnehin ziemlich großzügig mit divs. Drei würden völlig ausreichen, um das gleiche Layout zu erhalten. Die Menge Deiner Absätze (‚p‘) solltest Du auch noch mal überdenken. Der Gruß am Ende der Info-Absätze gehört meines Erachtens zum jeweiligen Absatz dazu und könnte daher in diesen eingebettet sein. Auf keinen Fall braucht der Gruß allerdings zwei Absätze. Statt dessen könntest Du dem jeweiligen Datum eine Auszeichnung spendieren, damit das nicht mehr so unmotiviert im Quelltext rumsteht.

Und last but not least solltest Du aus Deinem includeten Teil mal den Head und die body- und html-Schlusstags entfernen, damit Du im generiereten Dokument nicht mehr zwei davon hast.

Schöne Grüße
Yasmin

#5

Hallo Yasmin

Links (‚a‘) sind inline-Elemente und nehmen als solche keine
Breiten-Angaben an. Weisen den Links die Eigenschaft
‚display:block‘ zu, dann greift auch Deine Breiten-Angabe. Die
Links stehen dann allerdings untereinander, deshalb mußt Du
sie floaten.

auf displaz:block war ich auch schon gestossen, was mich aber zu genau dem Problem brachte, dass sie dann untereinander waren. nur wie meinst du das mit dem floaten? ich kenne float nur als ‚float:left‘ oder eben right…

Der Abstand zwischen dem Navi- und dem Content-Bereich
entsteht durch das top-margin der dort notierten Überschrift
(„Der Jesko - Geschichten über alles.“). Setz das margin auf
0, dann müßte der Abstand verschwinden.

es hatte was damit zu tun, denn jetzt wo der Text raus ist haut es hin. dabei ist mir aufgefallen dass ich das noch als h4 bezeichnet hatte, was noch von einer alten css-datei stammte… aber auch mit dem normalen h1 oder p wurde es nicht besser - ist ein margin immer automatisch drin? ich hab keins angegeben. naja, zur not gehts auch ohne.

Ansonsten solltest Du mal überprüfen, ob Du für alle divs, die
Du schließt auch einen geöffnet hast. Mir scheinen da zu viele
schließende divs.

doch, das stimmt schon. hab extra grad nachgeguckt.

Du bist ohnehin ziemlich großzügig mit divs.
Drei würden völlig ausreichen, um das gleiche Layout zu
erhalten.

meinst du? ich vermute du meinst damit „main“, „rdnav“ und „rright“? und wie kriege ich dann zum beispiel rcontent umgesetzt, also das hinter dem text keine ecken zu sehen sind? ok, an ein paar ecken kann ich sie sicher noch dezimieren - aber gibt es so viel einfachere methoden, also sind die divs denn so unpraktisch?

Die Menge Deiner Absätze (‚p‘) solltest Du auch noch
mal überdenken. Der Gruß am Ende der Info-Absätze gehört
meines Erachtens zum jeweiligen Absatz dazu und könnte daher
in diesen eingebettet sein. Auf keinen Fall braucht der Gruß
allerdings zwei Absätze. Statt dessen könntest Du dem
jeweiligen Datum eine Auszeichnung spendieren, damit das nicht
mehr so unmotiviert im Quelltext rumsteht.

ist passiert.

Und last but not least solltest Du aus Deinem includeten Teil
mal den Head und die body- und html-Schlusstags entfernen,
damit Du im generiereten Dokument nicht mehr zwei davon hast.

dito.

vielen dank, gruss derjesko

#6

noch etwas: die spalte im opera ist zwar weg, im IE ist aber immer noch rechts neben der navi eine rote spalte zuviel. kannst du mir vielleicht auch noch bitte bitte sagen wie ich die wegkriege?
gruss derjesko

#7

auf displaz:block war ich auch schon gestossen, was mich aber
zu genau dem Problem brachte, dass sie dann untereinander
waren. nur wie meinst du das mit dem floaten? ich kenne float
nur als ‚float:left‘ oder eben right…

ja, genau so habe ich es auch gemeint. Also z.B.

a {display:block; float:left;}

es hatte was damit zu tun, denn jetzt wo der Text raus ist
haut es hin. dabei ist mir aufgefallen dass ich das noch als
h4 bezeichnet hatte, was noch von einer alten css-datei
stammte… aber auch mit dem normalen h1 oder p wurde es nicht
besser - ist ein margin immer automatisch drin? ich hab keins
angegeben. naja, zur not gehts auch ohne.

Viele Elemente werden von den Browsern von Haus aus mit (zum Teil unterschiedlichen) Standard-Formatierungen versehen, es sei denn, sie bekommen etwas anderes gesagt. Das gilt auch für Überschriften oder Absätze. Wie gesagt: Du mußt den Abstand auf 0 setzten, ansonsten wird die jeweilige Browser-Standard-Formatierung gesetzt.
Viele Seitenschreiber (so auch ich) setzen durch den Universal-Selektor ‚*‘ grundsätzlich erst einmal alle Abstände auf 0 und vergeben dann nach Bedarf eigene. Das sähe dann so aus:

* {margin:0; padding:0}

meinst du? ich vermute du meinst damit „main“, „rdnav“ und
„rright“? und wie kriege ich dann zum beispiel rcontent
umgesetzt, also das hinter dem text keine ecken zu sehen sind?
ok, an ein paar ecken kann ich sie sicher noch dezimieren -
aber gibt es so viel einfachere methoden, also sind die divs
denn so unpraktisch?

Ein schlankerer Quelltext ist m.E. nach immer besser, weil er übersichtlicher und im Zusammenahng mit CSS einfacher zu handeln ist.

Deine Seite könnte man aufbauen, indem man folgendes benutzt:

  1. Ein Mutter-Element, das alle anderen Elemente umfasst und zur Positionierung innerhalb des Anzeigefensters dient. Dieses könnte das gekachelte Hintergrundbild enthalten.
  2. Ein div-Element, das die Navigationsliste enthält und in dem das Banner als Hintergrundbild eingestellt ist.
  3. Ein div-Element, das den Inhalt enthält sowie die Hintergrundfarbe, die das -bild verdeckt und z.B. 80% breit und horizontal zentriert ist. Darin liegen dann einfach im normalen Dokumentfluss die Text-Elemente wie H_x_, p, etc.

Schöne Grüße
Yasmin

#8

noch etwas: die spalte im opera ist zwar weg, im IE ist aber
immer noch rechts neben der navi eine rote spalte zuviel.

das div mit der Klasse .av hat durch die definierte Breite von 700px und die margins von 10px eine Gesamtbreite von 720px und ist somit breiter als die umgebende Box. Der IE dehnt nun fälschlicherweise die umgebende Box auf die Breite des Kindelements aus und da dieses eine Hintergrundfarbe enthält, entsteht diese rote Spalte.

kannst du mir vielleicht auch noch bitte bitte sagen wie ich
die wegkriege?

Schmeiß das div raus, wenn ich das richtig sehe, ist es sowieso zu nichts gut.

Gruß
Yasmin

#9

hallo yasmin,
erstmals danke für den anderen tip mit dem „av“ div. hat natürlich geklappt (schande über mich:wink: )

ja, genau so habe ich es auch gemeint. Also z.B.

a {display:block; float:left;}

tatsache… manchmal sind die lösungen so einfach…

* {margin:0; padding:0}

enorm guter tipp!

Ein schlankerer Quelltext ist m.E. nach immer besser, weil er
übersichtlicher und im Zusammenahng mit CSS einfacher zu
handeln ist.

ja, das was klar. ich vermutete du hättest statt divs eine andere lösung, ich wusste nicht dass du schlicht und einfach von einer dezimierung redetest. dass sowas sinnvoll ist ist klar.

Deine Seite könnte man aufbauen, indem man folgendes benutzt:

  1. Ein Mutter-Element, das alle anderen Elemente umfasst und
    zur Positionierung innerhalb des Anzeigefensters dient. Dieses
    könnte das gekachelte Hintergrundbild enthalten.

also sozusagen „main“ und „rright“ in einem. macht irgendwie sinn. bisher hatte ich das nicht, denn wie du auf meiner noch im alten design gehaltenen seite (http://derjesko.de) siehst, musste ich da letzteren floaten.

  1. Ein div-Element, das die Navigationsliste enthält und in
    dem das Banner als Hintergrundbild eingestellt ist.

meinst du mit dem banner jetzt wirklich den blauen Banner („Literarisches, Philosophisches…“ etc)? oder eher das himmelbild mit der roten trennlinie als Navi-hintergrund? bei zweiterem (was ich vermute) wäre das Problem, dass ich das dann als Gif machen müsste damit das Eckenmuster nicht falsch ineinander übergeht. momentan ist das ding ein JPG wo die ecken auch mit drauf sind, und da erst dadrunter das andere gifbild (die ecken) vor dem roten Grund anfängt, überschneiden sich die zacken nicht. in deinem beschriebenen fall würden die zacken aber oben anfangen, weshalb das möglicherweise nicht hinhauen würde, oder?

  1. Ein div-Element, das den Inhalt enthält sowie die
    Hintergrundfarbe, die das -bild verdeckt und z.B. 80% breit
    und horizontal zentriert ist. Darin liegen dann einfach im
    normalen Dokumentfluss die Text-Elemente wie H_x_, p,
    etc.

das ist klar.
das heißt, nach deinem Schema könnte ich auf den div „rright“ verzichten, den div der um den zähler rum ist hab ich grad versucht wegzumachen (durch ein span ersetzen, damits weiter rechts ausgerichtet ist) aber das sieht nicht gleich aus und verbraucht ja außerdem nicht weniger quelltext. außerdem den div „menu“ in der navigation (der war überflüssig und ist schon raus), aber den div „nav“ brauch ich doch ebenfalls zur formatierung der navilinks.

Schöne Grüße
Yasmin

ebenfalls und vielen dank, gruß derjesko