Hi kann mir einer sagen warum ich bei den drei Einzelbildern zwischen dem div und der Headline einen Abstand habe, und beim Einzelbild nicht?

Ich hab jeweils magrin-bottom 40 px

Ich komm nicht dahinter, wäre toll wenn jemand helfen könnte.
DANKE

Hier die Links:
Drei Bilder:
Ein Bild:
und hier das CSS:

Gib dem h1 mal ein margin-top:-10px;

 uplift
Naja bringt nix, da der Abstand jeweils um 10 px verringert wird.

.conthead {
margin-bottom: 40px;
border-width: none;
height: 190px;
width: 600px;

Beim .conthead hast Du border-width: none und bei den .headpics nicht Vielleicht ist das das Problem.

Desweiteren fällt auf das es unterschiedliche height gibt (190px und 195px)

das div class="clear" is schuld.

erklärung: margin-bottom des bildes oben (bzw der 3 bilder) wird bis zum nächsten element berechnet. margin-top des h1 ebenfalls. hierbei entsteht bei einem bild eine schnittmenge, effektiv zählt dann der höhere wert. bei den 3 bildern ist das nächste element jedoch nicht das h1, sondern das div.

versuchs doch stattdessen mit h1 class="clear" (h1 is schließlich auch ein block-element)

Hier noch ein Screenshot, der die Verdrängung des h1 containers zeigt:

 void
h1 class="clear" bringt nicht
und alternativ clear zu löschen brachte auch nix!

Einmal hast Du die Bilder in .conthead drin (welcher margin-bottom: 40px hat) und einmal nicht. Einmal benutzt Du .conthead, einmal kommen Deine Bilder bzw. das Bild direkt in div#content zu liegen.

Außerdem: warum soviel vermeidbarer Markup-Overhead (bläht den Code nur auf)? Wozu packst Du jedes Bild nochmal in einen Div-Container? Bilder sind von Natur aus Inline-Elemente, können also nebeneinander gesetzt werden. Wozu kapselst Du sie durch ein umgebendes <div> extra nochmal, nur um sie dann per float doch nebeneinander zu setzen? Und wenn Du schon floaten willst: warum machst Du nicht jedes Bild dann einfach per display:block einfach zu einem Blockelement und floatest dann? Das würde Dir das jeweils ummantelnde <div> ersparen und semantisch viel mehr Sinn ergeben.

Und: wozu ein <div class="clear"></div>, wenn danach sowieso ein Blockelement folgt (nämlich Deine <h1>-Überschrift), dem Du per CSS dieses von Dir gewollte "clear: both", damit es den Float-Prozess durchbricht und nach den gefloateten Elementen garantiert unten drunter gesetzt wird, ebenfalls mitgeben kannst (wo es semantisch gesehen auch viel mehr Sinn ergibt)?

Deine <h1>-Überschrift hat keinerlei Angaben zu margin und padding, noch nichtmal eine Reduzierung auf 0. Also wird diesbzgl. die diesbzgl. im Browser voreingestellte Größe dafür genommen (bin mir nicht sicher, aber es könnte 1em oder 1.5em sein, also die einfache bzw. eineinhalbfache Buchstabenhöhe des übergeordneten Elternelements). Vielleicht willst Du das ja für Dich an der Stelle regulieren, statt Deinen 40px-Abstand auf unterschiedliche Weise von oben her kommend festzuschreiben?

Nur mal so ein paar Ideen und Ansätze zur Problemlösung...

 sierkb
Da sag ich nur Schuster bleib bei Deinen Schuhen.
Danke für die ausführlichen Tipps. Bin halt kein Coder

Du hast a class="single_image" gar nicht definiert in deiner CSS!
.img_end hingegen schon.

 sierkb
verwenden nun nur den .conthead und schon klappts
THX

Außerdem: zwischendurch immer mal wieder auf Validität und Wohlgeformtheit achten, z.B. mittels

Markup Validation Service ,
CSS Validation Service ,
Unicorn - Der Einheitsvalidator des W3C (Neu! Unicorn vereint beide Validatoren in einem einzigen Werkzeug)

Oder per Browser-Erweiterung, welche auf diese Dienst zugreift. Oder diese Dienste lokal installieren.

Auch nur mal so am Rande als Tipp...

 sierkb
Das einzige was es an der Seite zu meckern gibt ist die Fancybox, und da auch nur die IE Hacks


Vielen Dank für Deine Hilfe

Wenn wir schon dabei sind,
warum funktioniert eigentlich mein active Status nicht?



Link zur Seite:

...ich hab mich jetzt noch nicht reingelesen, aber FireBug für Firefox kennst Du, oder?

Mit dem Add-On siehst Du recht schön die CSS-Einflüsse; vor allem auch vererbte Eigenschaften...

By the way:
Spare Code:
statt:

Bernd:

Wie soll es denn sein?
Im CSS sollen bei Dir ja Hintergrund- und Vordergrundfarbe bei :hover und :active identisch sein. Und genauso wird's zumindest bei mir auch angezeigt. Wo ist also Dein Problem, bzw. wie hättest Du es denn gerne?

Zudem -- das hier solltest Du wissen und beherzigen: bzw. hier (deutsche Übersetzung).

sierkb

NE bei mir wird der active wieder zu link, also KEINE hintergrundfarbe beim geklickten Menupunkt

Den IST-Zustand sehen wir.
Und wie soll der von Dir gewünschte SOLL-Zustand sein? Farbe der Vordergrundfarbe soll beibehalten werden, Hintergrundfarbe soll NICHT weiß sein, sondern die Hintergrundfarbe des Menüs? In dem Fall müsstest Du erstmal


auftrennen und a:hover und a:active zumindest unterschiedliche Hintergrundfarben geben und nicht dieselben wie bislang geschehen...

liegt es evtl. daran das die navi per php include geladen wird?

Bernd:

Und was wäre mit:

oder auch:
}

Bitte das Impressum nicht vergessen. Ist leider Pflicht in Deutschland für gewerbliche Internetauftritte.

Klar … wir sind noch in der DEMO Phase!

Gut gemachtes Demo