erstes DIV und schon Probleme

[whyte]

Hallo,

ja, war auch nicht anders zu erwarten. Ich brauche eigentlich nur ein paar Denkanstösse ...

es geht um eine Testseite www.breite-palette.ath.cx

Ich wollte mit diesem Projekt das erste mal komplett mit DIVs statt Tables arbeiten - so wie ich mir das vorstelle, gehts wohl aber nicht.

Es geht um genau 2 Probleme.
Zum einen der Contentbereich, der Mittelbereich.
Dort verzieht es den Text um einen Milimeter nach links, wenn die linke Box zueende ist (nur im IE wohl).

Desweiteren hängt der Footerbereich über den Boxen, das ist wohl nur im Firefox so ... im IE hört die Footerleite nocht vor der rechten Box auf, das ist so eigentlich auch nicht gewollt.

kann mir da jemand mal einen kurzen Denkanstoss oder mal eine Seite mit gescheiten Beispielen oder Aufbau geben ?

Danke
gruß
marco

[MonikaTS]

https://blog.html.it/layoutgala/

oder Du kupferst Dir das HTML und CSS von meinen Domains ab,

lg

[whyte]

Also,
ich habs mal etwas an den Beispielen da angepasst, im IE sah das dann auch gut aus. Nur als ich den Firefox aufgemacht hab, hab ich nen Schreck bekommen und hätt den Mist am liebsten weggeschmissen.
Das kann doch nicht so kompliziert sein ...

gruß

[MonikaTS]

ich finde in der style.css des obigen Links nirgendwo eines dieser Musterlayoute und ich kenn die fast auswändig.


das was Du gemacht hast geht eben so nicht, nimm wirklich eines der Layoute oben und lerne daraus dann,

lg

[t-rex]

Hi,

für den Footerbereich, schau Dir mal eine Userseite bei delicious an. Die haben da eine Javascriptlösung, dass der Footer immer nach der höchsten Spalte bzw. wirklich am Ende der Seite angezeigt wird.

zum 3 spalten Layout.

setze das linke Menü und den Content in ein Div (ich nene das jetzt wrap). Das Menü mit float left. den content mit einen margin-left: [breite des menüs]

für das rechte Menü verwendest Du ein float right. und bei dem wrap wendest Du ein margin-right: [breite des rechten menüs] an.

Das lässt sich auch in der Reihenfolge anders sortieren, so dass man da auch SEO mässig ein bisschen was rausholen kann.

sonnige Grüsse
HaPe

[whyte]

Hi,
ich hab nun erstmal alles gelöscht und habe mal ein Beispiel hingemacht.
Ich bau da jetzt mal mein zeug drumrum, bin mal gespannt

Gruß + Danke
Marco

[whyte]

So, ich habs nun glaub ich soweit, dass se ok ist

nochmal DANKE an alle .-)

Gruß
Marco

[MonikaTS]

hi whyte sieht schon mal besser aus und noch ein bisschen Feintuning und es wird gut.

gehe sparsam mit padding um,nimm lieber öfter margin

lg

[whyte]

Hallo,
danke
was ist denn der unterschied zwischen padding und margin.
Ich dachte, das margin gilt für aussen des objektes und padding für innerhalb des objektes ... hmmm

gruß

[Schneeflocke]

Hallo,
danke
was ist denn der unterschied zwischen padding und margin.
Ich dachte, das margin gilt für aussen des objektes und padding für innerhalb des objektes ... hmmm

gruß

richtig! hier ist noch etwas lektüre die das ganz gut beschreibt ,auch die Probleme mit verschiedenen Browsern: https://de.selfhtml.org/css/formate/box_modell.htm

[whyte]

Ich gebs auf, das klappt alles nicht ...
Es verzieht sich alles, ich nehm wieder Tables, da weiss ich, wie es geht

vielleicht setz ich mir irgendwann mal nochmal dran, aber ich glaub eher nicht.

Gruß + Danke an alle, die helfen wollten.

gruß
Marco

[Tiefenrausch]

Ich gebs auf, das klappt alles nicht ... Es verzieht sich alles, ich nehm wieder Tables, da weiss ich, wie es geht.

Als ich vor ca. einem Jahr auf div's umgestiegen bin, war das auch mein erster Gedanke. Das Problem ist ja, dass jeder Browser macht, was er will bzw. seine eigenen Definitionen vom Internet hat. Dann habe ich aber die Zauberlösung entdeckt:

Code: Alles auswählen

* {margin:0px; padding:0px}

Dieser Eintrag, ganz oben in der css-Datei schaltet alle Browser erstmal auf gleiche Linie. Das Sternchen sorgt dafür, dass die Angabe für alle Elemente gilt (h1, p, div usw.).

Anschließend definierst du dann die entsprechenden Werte für die Elemente, die du brauchst. Zum Beispiel:

h1 {margin:7px 0px 14px 0px}

Mit dieser Technik habe ich absolut gleichartige Darstellung unter allen bekannten Browsern erreicht: IE (ab 6.0), Firefox, Opera, Safari und Netscape.

Ob das jetzt dein Problem löst, weiß ich nicht (scheint mir eher ein floating-Problemchen zu sein). Aber es ist ein guter Einstieg zum Umstieg auf div-Layouts.

[Schneeflocke]

Ich gebs auf, das klappt alles nicht ... Es verzieht sich alles, ich nehm wieder Tables, da weiss ich, wie es geht.

Als ich vor ca. einem Jahr auf div's umgestiegen bin, war das auch mein erster Gedanke. Das Problem ist ja, dass jeder Browser macht, was er will bzw. seine eigenen Definitionen vom Internet hat. Dann habe ich aber die Zauberlösung entdeckt:

Code: Alles auswählen

* {margin:0px; padding:0px}

Dieser Eintrag, ganz oben in der css-Datei schaltet alle Browser erstmal auf gleiche Linie. Das Sternchen sorgt dafür, dass die Angabe für alle Elemente gilt (h1, p, div usw.).

Anschließend definierst du dann die entsprechenden Werte für die Elemente, die du brauchst. Zum Beispiel:

h1 {margin:7px 0px 14px 0px}

Mit dieser Technik habe ich absolut gleichartige Darstellung unter allen bekannten Browsern erreicht: IE (ab 6.0), Firefox, Opera, Safari und Netscape.

Ob das jetzt dein Problem löst, weiß ich nicht (scheint mir eher ein floating-Problemchen zu sein). Aber es ist ein guter Einstieg zum Umstieg auf div-Layouts.

Danke für den Tipp, den kannte ich noch nicht. Werd ich beim nächsten CSS-Gerüst gleich mal testen