✔ kompliziertes Layout wird zur DivSuppe...

aaah, ja, okay, super das holt den content nach oben. :)
Leider bleibt menue_right im ie noch immer zu weit innen...

das habe ich versucht via

Code: 
/* Vom IE mac 5.x verstecken. Fix für den Windows IE 3px-Text-Gap-Bug \*/
div#menue_right {
margin: 0 -34px;
}
/* Ende von IE5/mac verstecken*/
Code am besten ignoerien, ich hab grad den totalen Knoten im Kopf.. xD Natürlich ignorieren ff und opera das nicht, ist ja trotz auskommentar auch für sie verständlich.. *rolleyes*

zu beheben. Klappt auch in ie6, aber der FF schiebts nun um diese 34 Pixel nach aussen, obwohl ers ja ignorieren soll...
[wieso überhaupt 34 Pixel? Wo kommen die her?

[ http://www.ffcorner.com/aaa/leerversuch2.htm ]
 
Zuletzt bearbeitet:
Wenn der rechte Spaltenblock im IE zu weit nach innen wandert, liegt's lediglich an der Zeichenlänge "menue_right", die länger als 78px ist.

Das erklärt dann auch den negativen Außenabstand, um die Box nach rechts zurückzusetzen - "effektiver" wäre hier overflow:hidden, da der margin-Wert von der Zeichenlänge abhängig wäre:
Code: 
div#menue_right {
width: 78px;
 height: 976px;
float: right;
 background-image: url(images/rechts.jpg);
 background-repeat: no-repeat;
 overflow:hidden;
}

Ansonsten einfach mal ein Wort in den Block einfügen, das nicht länger als 78px ist ;)

Übrigens wäre für die beiden äußeren Spalten kein Hintergrundbild erforderlich, da deren Hintergrund schon im Hintergrundbild "bg.jpg" enthalten ist.

mfg Maik
 
Meine Güte, wie bescheuert kann ein Mensch allein sein xD
Danke Dir, NATÜRLICH liegts nur daran, dasss in menue_right noch der Text aus dem Tutorial Beispiel enthalten war.. -.- Echt, wenn man zu lange auf diesen Krempel guckt, dann sieht man irgendwann gar nichts mehr.

overflow:hidden ist da ja gar nicht erforderlich, muss ja nur den Text aus dem Beispiel löschen... Ausserdem fing mit dem overflow ja erst das ganze Problem an [Ankerlinks usw.. ;) ]

Vielen vielen Dank!

Werds nun mal richtig ums php frickeln und gucken, ob das Gerüst Inhalte verträgt :)
 
Ich krieg ne Kriese... :confused:

CSS geändert und html gerüst umgebaut, und um den blog drumrumgebaut. Noch immer zig kleine Fehler...

http://www.ffcorner.com/testb/


Die große freie Stelle im Content, kommt die durch den Platz von #navi? Habe schon versucht, #navi mittel z-Index nach vorne zu legen, klappt aber nicht. Ich glaube, ich muss mal alles ganz auseinender nehmen und alle divs die durchs php ini den #content gehören, genau unter die Lupe nehmen, weil überall sind freie Stellenund unter dem Footer ist nun immer der Rest von #content entsprechend der Footergröße verborgen...
*haarerauf*

vielleicht heute abend nochmal...
Trotzdem: bisher schonmal vielen Dank! :)) Auch für die Geduld :D
 
Vergleich mal deine neuen CSS-Regeln für #content mit meinem Lösungsvorschlag von vorhin.

Außerdem gehören diese beiden clear-Deklarationen für #footer

CSS: 
clear: left;
clear: right;

durch clear:both ersetzt.

Das "Unterwandern" des Seiteninhalts im Footerbereich verhinderst du mittels einem unteren Innenabstand (padding-bottom:83px entspricht der deklarierten Footerhöhe) für die drei Spaltenblöcke.

mfg Maik
 
Wo schaust Du denn?
clear: left/right sind im aktuellen css gar nicht mehr im footer vorhanden, und auch die marginwerte im content angepasst und gelöscht :)
bin von der reinen html seite wieder ins testblog gewechselt
http://www.ffcorner.com/testb/
und dort schaut das css aktuell so aus:

Code: 
* { 
margin: 0;
padding: 0;
}
body {
text-align: center; 
}
div {
text-align: left; 
}
html, body {
height: 100%; 
background-color:#A18488; 
}

/* DIV-Boxen */

div#container {
position: relative;
margin: 0 auto;
width: 754px;
min-height: 100%; 
height: auto !important; 
height: 100%; 
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
}

div#header {
width: 754px;
height: 165px;
background-color: #3D1A21;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}

div#menue_left {
background-color: #3D1A21;
width: 220px;
height: 976px;
float: left;
background-image: url(images/links.jpg);
background-repeat: no-repeat;
padding-bottom:83px
}

div#menue_right {
width: 78px;
height: 976px;
float: right;
background-color: #3D1A21;
background-image: url(images/rechts.jpg);
background-repeat: no-repeat;
padding-bottom:83px
}

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

div#footer {
background-color: #3D1A21;
clear: both;
position: absolute;
bottom: 0;
width: 754px;
height: 83px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
}


div#navi {
 position: absolute; 
 top: 150px; 
 left: 20px; 
 width: 180px;
 height: auto;
 padding: 0px;
 margin: 0px;
z-index: 3;
 }

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}


muss aber nun erstmal weg, ich mach heute abend weiter. Ich verstehe nicht wieso soviel freie Fläche im #content ist und wieso [bei langen Seiten] das Hintergrundbild von #container nicht angezeigt wird.

Danke Dir für soviel Mühe :)
 
Der Auslöser für das Umbrechen der Einträge bis unterhalb der linken Navigation ist die derzeitige clear:left-Deklaration für postmetadata.

Außerdem solltest du für die äußeren Spaltenblöcke eine Mindesthöhe einrichten, da die derzeitige height:976px-Deklaration von den standardkonformen Browsern als fixe Höhe interpretiert wird:
Code: 
div#menue_left {
background-color: #3D1A21;
width: 220px;
min-height: 976px;
height: auto !important;
height: 976px;
float: left;
background-image: url(images/links.jpg);
background-repeat: no-repeat;
padding-bottom:83px
}

div#menue_right {
width: 78px;
min-height: 976px;
height: auto !important;
height: 976px;
float: right;
background-color: #3D1A21;
background-image: url(images/rechts.jpg);
background-repeat: no-repeat;
padding-bottom:83px
}


mfg Maik
 
Vielen Dank, das mit der Mindesthöhe muss ich mir mal eintrichtern, das gabs vor ein paar Jahren noch nicht :D

Eins ist da trotzdem noch:
Z.B. auf http://www.ffcorner.com/testb/eine-seite/ fehlt, wenn man runter scrollt ein großes Stück Hintergrund aus dem container. Ich ein bisschen mit den margins und paddings von #post und #entry herumgespielt, sie auch ganz herausgenommen, aber der gewünschte Effekt blieb aus, die Lücke bleibt bestehen.
Ebenso gibts es oben eine kleine freie Stelle auf http://www.ffcorner.com/testb/category/allgemein/ über "Archiv der Kategorie ‘Allgemein‘ "
Zuerst habe ich vermutet, es läge den .navigation divs, die wieder Umbrüche hervorrufen, da die align right/left divs darin ja gecleared werden müssen. Aber auch das Einbetten in den clearfix brachte keine Lösung, im Gegenteil, der komplette inhalt unterhalb der Überschruft rutschte wieder nach unten.

Hast Du dafür auch noch eien Lösung parat?
[Langsam wirds mir mehr als peinlich, aber ich komm iwie nicht mehr damit klar... Zulange nichts gemacht... :-( ]
 
Die Unterbrechung des Hintergrundbildes ergibt sich durch die Kombination der "Mindesthöhe" und dem unteren Innenabstand der beiden äußeren Spalten.

Entweder verzichtest du hier auf die Höhendeklaration, oder aber auf den unteren Innenabstand.

Für die Lücke unterhalb des Header-Bereichs ist die margin-top:5px-Deklaration im Selektor div#content h2 verantwortlich, die sich durch einen oberen Innenabstand ersetzen lässt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück