✔ kompliziertes Layout wird zur DivSuppe...

[ErinOnline]

Hallo zusammen!
Nach viel zu langer Zeit ohne Web-Bastelei wollte ich meinem Blog ein neues Design verpassen, und nun komme ich einfach nicht weiter. Ich habe ein recht kompliziertes Design gewählt [ http://www.ffcorner.com/testb/ ], aber nach vielem hin und her doch geschafft, es umzusetzen.
Dachte ich.
Folgende[r] Fehler taucht[en] dann doch noch auf, und diese[n] bekomme ich einfach nicht in den Griff:

Wenn ich einen Link anklicke der mich zu einem Anker führt [in der Beitragsübersicht auf den Kommentarlink klicken] dann werden sowohl im IE als auch im FF sämtliche Inhalte überhalb des Ankers "gefressen". Ursache dafür ist wohl das "overflow: hidden" von #container3.
Dies wurde aber extra eingebaut um zu gewährleisten, dass alle im Container enthaltenen Divs immer die gleiche länge haben.

Im Opera wird es btw richtig angezeigt. Dafür verschwindet dort bei langen Seiten [z.B. http://www.ffcorner.com/testb/eine-seite/ ] ab einer gewissen Stelle der Background, der sich eigentlich bis zum Seitenende wiederholen sollte. Vermutlich liegt auch das am overflow?

Vielleicht kann von Euch jemand helfen? Ich hab soviel rumprobiert und geschoben, dass ich nun langsam echt den Überblick verloren habe und das ganze Design mehr einer Div-Suppe als einem geordneten Gerüst entspricht
Mir fällt echt nichts mehr ein wie das zu lösen wäre, weil gerade der overflow all meine anderen vorherigen Probs mit dem Design gelöst hatte.
Es gibt sicher einen eleganteren Weg als meinen, ich hab viel zu viel probiert und verschachtelt, vielleicht seh ich deshalb vor lauter CSS gar keine Lösung mehr...

Hoffe von Euch hat da evtl jemand die Erleuchtung!

Schonmal vielen Dank
Erin

 

[Maik]

Hi,

ich kann auf http://www.ffcorner.com/testb/category/k2/ und/oder http://www.ffcorner.com/testb/category/k3/ keinen abgeschnittenen Bereich entdecken, und bekomme alles angezeigt, was im Quellcode notiert ist (getestet im FF und IE).

mfg Maik

 

[Maik]

Okay, ich hab die falschen Seiten betrachtet

Lösung:

#container3 {
width: 754px;
/*height: 100%;*/ /* auskommentiert = deaktiviert */
margin: 0 auto;
overflow: hidden;
background-color: #3D1A21;
}

mfg Maik

 

[ErinOnline]

Funktioniert bei mir nicht
Bei durch Anker verlinkten Seiten [z.B. http://www.ffcorner.com/testb/allgemein/hallo-welt/#comments ] ist oben noch immer alles weg, der Beitrag verschwindet oben hinter dem header [nehm ich mal an, da ja die Grafiken im rechten und linken Menü auch "später einsetzen]. Bei mir ändert sich da gar nichts, weder im FF noch im IE

 

[Maik]

Mein Vorschlag erzielt bei mir in beiden Browsern die unbeschnittene Darstellung der Seite. Blos hat sich da in deinem Stylesheet nichts verändert.

Kurioserweise kann ich in der zuletzt genannten Seite diesen Fehler nicht bestätigen:



mfg Maik

 

[ErinOnline]

Ich glaube wir reden aneinander vorbei
Die Bilder die Du gepostet hast, zeigen beide eine beschnittene Version! Über "6 Reaktionen zu..." gehört eben der Beitrag... An der Seitengrafik sieht man recht gut, dass es nicht passt.
Im Opera Screenshot sieht man, wies eigentlich aussehen soll:

 

[Maik]

Okay, dann eben hier die unbeschnittene Version, der ich auf meinem lokalen Testserver das editierte Stylesheet gegönnt habe



mfg Maik

 

[ErinOnline]

habs nun mal online im CSS auch auskomomentiert, aber es ändert sich noch immer nichts bei mir... in keinem browser Cache ist auch geleert...
[die URLs in deinen screenshots sehen aber auch anders aus? halt.. keine #? wenn ich die Seiten ohne den anker aufrufe gehts ja...?! ]

 

[ErinOnline]

So, nach langem hin und her und zig Neuversuche,n in denen immer irgendetwas nicht ganz klappte, habe ich nochmal alles nach Eurem Tutorial [ http://www.tutorials.de/forum/css-tutorials/280722-css-layout-mit-100-hoehe.html ] neu aufgebaut und siehe da: Es funktioniert!

- Bis auf eine winzige Kleinigkeit: Der IE [6] verschiebt den content mal wieder nach unten... ich habe verschiedene lösungen durchprobiert, aber nichts scheint so recht zu klappen, egal ob ich dem content für den ie eine kleinere höhe, eine geringere breite gebe oder ihn mit einem negativen magin verschiebe... Habe ich was übersehen?

http://www.ffcorner.com/aaa/leerversuch2.htm

 

[Maik]

Hi,

ändere dies:

div#content {
margin: 0 220px;
width: 456px;
background-image: url(images/cbg.jpg);
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: top left;
}

in das hier um:

div#content {
margin: 0 78px 0 220px;
background-image: url(images/cbg.jpg);
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: top left;
}

mfg Maik