CSS + Zentrieren + DIVs?

[Ben7893]

Hallo Leute.

Um mein Problem genau zu beschreiben folgt erstmal der Sourcecode, damit jeder interessierte User sich einen Überblick verschaffen kann.

Code: Alles auswählen

#head { overflow: auto; width: 750px; top: 50px; position: absolute; text-align:center; margin:auto; }
#main { overflow: auto; width: 522px; top: 4px; left: 117px; position: relative; text-align:center; margin:auto; }
#aussen { width: 731px; margin:auto; text-align:left; }

#lefthold {width: 215px; overflow:hidden; position:fixed; margin:auto;text-transform:lowercase;top: 4px;left: 250px;-moz-border-radius:4px; border-radius:4px;font-size:9px;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; }

#left {line-height: 10px;height:auto;padding: 5px; -moz-border-radius: 1px;-webkit-border-radius: 1px; background-Color:#F5F5F5;Display:block; }


Und hier das dazugehörige Resultat:


--> http://h-3.abload.de/img/resultattdtb.png

Mein Problem:

Ich habe 5 Kästchen. Alle ungefähr in diesem Format:

Code: Alles auswählen

line-height: 10px;height:auto;padding: 5px; -moz-border-radius: 1px;-webkit-border-radius: 1px; background-Color:#F5F5F5;Display:block;

Den Header habe ich dank position:relative zentrieren können. Somit bewegt sich das ganze bei abgehender Auflösung nicht wirklich, es bleibt halt mittig, zentral, zentriert. Aber bei dem Menü funktioniert das ganze nicht! Es lässt sich nicht so zentrieren, dass das Menü neben dem Textbereich steht.

Hier nochmal das volle Sheet:

Code: Alles auswählen

/* BG */
body {
background: #8F8F8F;
text-align:center;
background: url(X); html, body { height: 100% };
background-size: 100%;

}



/* Links */

a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:hover {color:#000000; text-decoration:none; width:100%;}



p { margin: 5px 0 0 0; line-height:12px; padding: 0; }
ul, ol { margin: 5px 0 0 25px; padding: 0; }
blockquote { margin: 2px 2px 1px 2px; padding: 1px 2px 1px 4px; border: 0px solid #000000; }
blockquote p { margin: 0; padding: 0; line-height: 12px; }





/* Boxen */

#head { overflow: auto; width: 750px; top: 50px; position: absolute; text-align:center; margin:auto; }
#main { overflow: auto; width: 522px; top: 4px; left: 117px; position: relative; text-align:center; margin:auto; }
#aussen { width: 731px; margin:auto; text-align:left; }

#lefthold {width: 215px; overflow:hidden; position:fixed; margin:auto;text-transform:lowercase;top: 4px;left: 250px;-moz-border-radius:4px; border-radius:4px;font-size:9px;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; }

#left {line-height: 10px;height:auto;padding: 5px; -moz-border-radius: 1px;-webkit-border-radius: 1px; background-Color:#F5F5F5;Display:block; }

.right { background-color: #FFFFFF;  margin: 0 0 5px 0; padding: 5px; text-align:left; margin:left;
text-transform:(text:Body Text Transform);overflow:hidden;-moz-border-radius:1px; border-radius:1px;}




.details {
        display:block;
        font-size:10px;
        text-transform:uppercase;

}


.righty {float:right;}
.rightypagintation {float:right; margin-top:0px;}
.lefty {float:left;}


Brauche drigend Hilfe!

[sejuma]

Ein Link zur Seite wäre weitaus hilfreicher, damit man alles im Zusammenhang sieht, auch den HTML-Quelltext.

margin: auto und position: absolute widersprechen sich.
Verzichte am besten auf alle absoluten und relativen Positionierungen.
Zentrieren nach diesem Beispiel klappt immer:
http://www.ohne-css.gehts-gar.net/0001.php

[Ben7893]

Hey,

danke erstmal für die schnelle Antwort.

-> http://bujakkka.bu.funpic.de/test2.php ist die Seite. Wird alles noch auf eine TLD "zugeschnitten" und geändert. Header ist auch erstmal nur provisorisch drin, da das Original noch nicht vorliegt.

Mit der Methode die du gepostet hast habe ich es bereits versucht. Kann sein, dass mein Code falsch war, aber ich denke eher nicht. Ging auf jeden Fall nicht..

[sejuma]

Mir ist das jetzt soviel Arbeit, durch deinen unübersichtlichen und aufgeblähten Code durchzusteigen.
Du verwendest auch unzulässigerweise manche ID's doppelt, z.B. den #left.

Orientiere dich mal an diesem Layout und versuche, mit so wenig wie möglich ID's auszukommen:
http://www.ohne-css.gehts-gar.net/0077.php

[Ben7893]

Hey,

was heißt so wenige IDs wie möglich? Die Layer könnte ich theoretisch doch umändern, oder? Ich bin kein Ass in CSS. Bis auf den Syntax habe ich noch keine Ahnung.

Wäre es möglich mir mit dem Code zu helfen?

[sejuma]

Sieh dir mal den Quelltext des genannten Beispiels an.
Da gibt es einen zentrierten Header bzw. eine Überschrift, einen linken Bereich für navi und einen rechten Bereich für den Inhalt.
So ähnlich sieht deine Seite ja auch aus.

Dann bearbeite diesen HTML- und CSS-Quelltext, indem du deine Grafiken einbindest, evtl. die Breiten, Farben, Schrift usw. änderst und deinen spezifischen Inhalt einfügst.
Alles, was dann noch fehlt, kann man dann sicher noch nachträglich einbauen.