Lücken im Div Layout

[Dj-Harem]

Hallo,

erst einmal will ich bemerken das ich css neuling bin
ich will mein Layout mit tabellen in ein css layout umschreiben.
so weit so gut
doch irgendwie sind immer lücken zwischen meinen divs, bei IE mehr bei FF weniger, zu sehen
hier
an was kann das liegen?

danke schon im vorraus

greetz
Dj-Harem

[satre]

Zunächst mal hat deine Seite keinen Doctype. Und was noch viel schlimmer ist, keinen head- und keinen html-Bereich(!) Ich bin überrascht, dass die CSS überhaupt eingebunden wird.

Zum eigentlichen Problem: Weise deinen Bildern ein display:block; zu.

Zum Quelltext selbst kann ich sagen, dass du dir eine richtige div-Suppe zusammengekocht hast. Das geht auch eleganter.

[Dj-Harem]

Zitat von satre

Zunächst mal hat deine Seite keinen Doctype. Und was noch viel schlimmer ist, keinen head- und keinen html-Bereich(!) Ich bin überrascht, dass die CSS überhaupt eingebunden wird.

Zum eigentlichen Problem: Weise deinen Bildern ein display:block; zu.

ist jetzt alles drin!!!
beim "display:block;" zuweisen hat sich aber nichts verändert!?

Zitat von satre

Zum Quelltext selbst kann ich sagen, dass du dir eine richtige div-Suppe zusammengekocht hast. Das geht auch eleganter.

Ja ich weiß, das Problem ist das ich grafische rahmen und ecken haben will,
das "SlidingDoors" habe ich nicht genommen, weil man da ja eine riesige grafik
haben muss, die widerum viel bandbreite braucht.
Deswegen habe ich eben für jeden Block 9 divs genommen um eine Tabelle nachzubauen.
Gibt's da auch eine andere Möglichkeit?

MfG
Dj-Harem

[hero-master]

Zitat von Dj-Harem

beim "display:block;" zuweisen hat sich aber nichts verändert!?

Pack mal folgendes CSS in deine CSS-Datei hinzu (ganz oben rein):

* {
margin:0;
padding:0
}

Somit löscht du quasi alle vordefinierten Abstände bei Überschriften (h1-h6), Paragraphen (p), Listen (ul,ol), etc aus, die deine Seite wohl "zerfetzen".

Zitat von Dj-Harem

Deswegen habe ich eben für jeden Block 9 divs genommen um eine Tabelle nachzubauen.
Gibt's da auch eine andere Möglichkeit?

Wenn du mit CSS arbeitest dann vergiss die Tabllen, deren Eigenschaften und deren Gebrauch beim HTML-Gerüst.
Wie du das konkret jetzt umsetzen könntest kann ich dir auf die Schnelle nicht beantworten. Muss dein Layout liquid sein? Dann kommst um eine kleine Div-Suppe leider nicht herum würd ich meinen, aber ein wenig einschränken kann man das sicherlich
Ein wenig mehr Semantik

[Dj-Harem]

Zitat von hero-master

Pack mal folgendes CSS in deine CSS-Datei hinzu (ganz oben rein):

* {
margin:0;
padding:0
}

Habe ich gemacht und sieht schon um einiges besser aus, nur der header will nicht so recht!?

Zitat von hero-master

Wenn du mit CSS arbeitest dann vergiss die Tabllen, deren Eigenschaften und deren Gebrauch beim HTML-Gerüst.
Wie du das konkret jetzt umsetzen könntest kann ich dir auf die Schnelle nicht beantworten. Muss dein Layout liquid sein? Dann kommst um eine kleine Div-Suppe leider nicht herum würd ich meinen, aber ein wenig einschränken kann man das sicherlich
Ein wenig mehr Semantik

Ja eigentlich wollte ich schon ein liquid layout.
aber ich hatte keine andere idee das zu lösen wie ich das will.
soll ich lieber ein static layout machen, ist das besser?
Dann bräuchte ich ja nur noch 3 divs oder?

danke
Dj-Harem

[Dj-Harem]

jetzt sieht das ganze schon ansehbarer aus.
leider der header immer noch nicht.
--> im IE setzt er mir den content div unter alles drunter
--> im FF ist der content div zwar am richtigen platz, schiebt sich aber zwischen die abständer der menü divs

wäre sehr schön und nett wenn mir jemand weiterhelfen könnte, der link ist immer noch der gleiche wie oben -->hier<--

grüße Dj-Harem

[Dj-Harem]

^^will ja nicht lästig sein, aber ich bin am verzweifeln.
egal was ich versuche bzw. verschiebe und umcode,
immer passt irgendetwas nicht.
Eigentlich müsste da fast nix mehr fehlen, ich steh
wahrscheinlich nur auf dem schlauch.....

bitte gebt mir wenigstens einen kleinen denkantoss,
damit ich vom schlauch runterkomme
danke

[IMBild]

boah das geht mal so gar nich, du brauchst für die darstellung eines kasten 5 divs!!!! das du so probleme hast ist kein wunder.
Dein Css sollte dringend mal aufgeräumt werden dass du so den überblick verlierst ist klar. z.B. hast du alle display:block; nich mit ; geschlossen. Räum mal auf dann siehst klarer.

Warum arbeitest du nicht mit einem div und nem hintergrundbild ???
Ja die größe passt sich nicht mehr dynamisch an ?
aber braucht sie das überall ? in der menübox ? in der überschriftenbox die eh über die ganze breite geht?. Da ist leichter ein größeres Hintergrundbild erstellt wenn mal ein menüpunkt dazu kommen sollte.

[hero-master]

Moin
ein weiteres Manko ist, dass du, wohl durch php-include, einen zweiten Doctype, head- und body-Bereich hast. Beim Includen durch PHP bindest du den kompletten Quellcode der Datei ein, also lass bei der includierten Datei einfach den Doctype, etc weg und schreib genau das rein, was du wirklich includieren willst.
Dann musst du dir noch genauer anschauen, was das Floaten eigentlich macht: Float - Die Theorie
Du floatest das Menu, somit schieben sich die nachfolgenden Objekte unter das Menu, da du diese weder floatest, noch nach rechts positionierst

[Dj-Harem]

Zitat von Josie_in_Joburg

...du brauchst für die darstellung eines kasten 5 divs!!!!
Dein Css sollte dringend mal aufgeräumt werden....
Warum arbeitest du nicht mit einem div und nem hintergrundbild ???

Erst einaml danke für die kritik.
aber warum 5 divs? -> 1oben, 1 unten, 3mitte? aber dann hab ich wieder das problem das das layout nicht liquid ist. vielleicht muss ich mir das mit dem "liquid" mal aus dem kopf schlagen.
Ich weiß das da mal aufgeräumt werden sollte, wollte ich eigentlich machen wenn alles fertig ist, aber es stimmt schon das man ab und zu mal den überblick verliert, obwohl ich sagen muss, dass es sich in grenzen hält.
ich wollte nicht mit einem hintergrundbild arbeiten wegen den ladezeiten, da so ein bild schon relativ groß wird vom speicherplatz her. und wie schon gesagt das mit dem liquid, aber im menü würde das ja wegfallen, wie du schon geschrieben hast. Doch wenn ich die grafiken sowieso für den rest lade, dann dachte ich mir dann mach ich das auch bei allen gleich.

Zitat von hero-master

ein weiteres Manko ist, dass du, wohl durch php-include, einen zweiten Doctype, head- und body-Bereich hast.
Du floatest das Menu, somit schieben sich die nachfolgenden Objekte unter das Menu, da du diese weder floatest, noch nach rechts positionierst

dir auch gleich mal ein dankeschön.
das mit den includeten dateien ist mir nie so wirklich aufgefallen, hab ich aber gleich behoben.
das stimmt, ich hatte aber schon den inhalt rechts gefloatet (jetzt auch wieder), aber da tut sich nix !?



Zudem hab ich im IE immer noch das problem das es mir den header div auseinanderzieht, an was kann das liegen? bei den anderen divs, die gleich aufgebaut sind, geht auch alles einwandfrei.

ich danke allen schon mal im vorraus
Dj-Harem

[IMBild]

. vielleicht muss ich mir das mit dem "liquid" mal aus dem kopf schlagen.

Nicht unbedingt, nur ein bisschen umdenken.
Boxen die ihren Inhalt nicht ändern kannst du getrost mit einem statischen Hintergrund versehen, da diese in keinem Fall größer werden. Und wenn du die Bilder im richtigen Format speicherst sollte die Größe wirklich kein Problem sein.
Für die Boxen in denen sich der Inhalt ändert ebenfalls ein Hintergrundbild(muss gekachelt werden könnne) und dann auf repeat-x y.
Wenn du einen Rahmen haben willst, nimm die Mittel die dir HTML bzw. CSS zu Verfügung stellen. Somit passt sich die Box komplett der Größe des Inhalts an.
Für ein super exaktes pixelgenaues und komplexes Design eignet sich liquides Layout weniger.
Deshalb solltest du dir im Vorfeld überlegen was du auf deiner Seite präsentieren willst, ist ein klarer Schwerpunkt auf die Inhalte gelegt, bringt das liquide Layout gewissen Vorteile, da universeller und somit User-freundlicher. Willst du jedoch deine Fähigkeit im Grafikdesign unter Beweis stellen, und das ganze in die Gestaltung deiner Page mit einfließen zu lassen, würde ich vom liquiden ehr abraten. Da dies wenn überhaupt nur schwer umzusetzen ist.

[Dj-Harem]

Habe nun mein nicht liquides menü nur noch aus 5 divs bestehen, damit es zuminest in der höhe noch variabel bleibt. habe trotzdem einige divs weniger.
mein stylesheet habe ich auch aufgeräumt

Zitat von Josie_in_Joburg

Für die Boxen in denen sich der Inhalt ändert ebenfalls ein Hintergrundbild(muss gekachelt werden könnne) und dann auf repeat-x y.
Wenn du einen Rahmen haben willst, nimm die Mittel die dir HTML bzw. CSS zu Verfügung stellen. Somit passt sich die Box komplett der Größe des Inhalts an.

einen gekachelten hintergrund brauche ich gar nicht, da ich nur eine arbe benutze. aber wie meinst du das mit den rahmen?
--> und meine probleme mit dem header und dem rechts gefloatetem inhalt bekomme ich !"§$% leider auch hin.

greetz Dj-Harem

[IMBild]

-->also beim header seh ich kein Problem der wird doch einwandfrei angezeigt.
--> pack deinen Contentbereich mit allen Divs für den Rahmen in ein div und floate das dann rechts.

Du hast noch nicht alle divs die für den Contentbereich verantwortlich sind gefloatet. Gib jedem div eine eigene id bzw. Klasse im Content-Bereich.
Zumindest solange du noch am probieren bist,... es lässt sich dann leichter zu ordnen was sich auf was auswirkt.

[Dj-Harem]

Soooo, das was ich gefloatet hatte war anscheinend schon richtig, denn als ich den contentbereich von 100% auf zB 600px gesetzt habe, war der bereich sofort neben dem menü.
Habe mich jetzt doch für eine feste Breite entschieden...und schon funtioniert es
jetzt muss ich nur noch meine DIV-Suppe in den griff kriegen, wen jemand
ne idee hat, immer her damit.

-->also beim header seh ich kein Problem der wird doch einwandfrei angezeigt.

du hast keinen IE benutzt, oder?
da habe ich nämlich auch noch ein kleines Problem und ich bekomme es nicht weg.

dankeschön und schöne grüße
Dj-Harem

[Dj-Harem]

hat noch jemand ne idee, warum der header im IE falsch angezeigt wird?

danke
mfg Dj-Harem