Layout zentrieren

Ich bin ein wenig verzweifelt. Das Thema wurde schon öfter diskutiert aber ich kriegs selbst einfach nciht hin weil mein Code dann oft nicht so ist wie er sein müsste um bestimmte Lösungen anzuwenden.

Und zwar möchte ich mein gesamtes Layout auf dieser Seite gerne zentriert haben:

Music Diary

Ich häng euch HTML und CSS gleich mal an. Wäre jemand so lieb und würde wenn er meine funktionstüchtige Lösung hat diese gleich in meinem Code eingebaut posten? Sonst klappt es wieder nicht :frowning: Wäre super lieb!!!

[CODE]HTML:

Music Diary

Willkommen

auf meinem kleinem Musik-Diary. Hier werde ich regelmäßig über Musik schreiben, aktuelle CDs vorstellen und von Konzerten berichten, die ich besucht habe. Viel Spaß!

Navigation

About

Diese Webseite wurde zu privaten Zwecken erstellt und ich verdiene kein Geld damit. Wer mich kontaktieren möchte, kann dies per Mail sehr gerne tun.

<iframe id="hauptfenster" src="http://julia1985.lima-city.de/cutenews/show_news.php" width="780" height="570" name="hauptfenster" noresize="noresize" frameborder="0" border="0"
[/CODE][CODE]CSS:

body {
background-color: #ffffff;
font: 10pt Verdana, Arial;
text-align: justify;
}

#rezensionen {
width: 700px;
background-color: #ffffff ;
border: 1px solid #9d9c9c;
font: 10pt Verdana, Arial;
padding: 3px 5px;
text-align: justify;
}

h3 {
border-bottom: 1px solid #9d9c9c;
color: #5a0d0d;
font-size: 11pt;
}

h2 {
border-bottom: 1px solid #9d9c9c;
color: #5a0d0d;
font-size: 10pt;
}

#Schriftzug {
width: 1024px;
height: 100px;
background-image: url(schriftzug.png);
border: 0;
}

#Banner {
width: 1024px;
height: 219px;
background-image: url(filmstreifen.png);
border: 0;
margin: 5px 0px;

}

#Leiste {
width: 205px;
height: 500px;
background-color: #ffffff;
font: 10pt Verdana, Arial;
border: 0;
padding: 8px; margin: 0px 0px 5px 0px;
text-align: justify;
float: left;
}

#IFrame {
width: 756px;
height: 500px;
background-color: #ffffff;
font: 10pt Verdana, Arial;
border: 0;
padding: 8px;
margin: 0px 0px 0px 5px;
float: left;
}

#ratings {border: 0px; }

#blog {border: 1px solid #9d9c9c; }

#cdcover {border: 1px solid #9d9c9c; float: left; margin: 5px; }

#Liste {list-style-type: square; padding: 0 15px; }

#fotos_berichte {border: 1px solid #9d9c9c; float: left; margin: 0px 5px 0px 0px; }

#counter {font: 9pt Verdana, Arial; }

a:link {color: #502222; text-decoration: underline; }

a:visited {color: #502222 ;text-decoration: underline; }

a:focus {color: #502222; text-decoration: underline; }

a:hover {color: #502222; text-decoration: blink; text-decoration: underline; }

a:active {color: #502222; text-decoration: underline; }

[/CODE]

im css body margin-left:auto; margin-right:auto; einfügen

wieso brauchst du den da ein iframe?

Hm, ich hab den Code eingefügt, aber es funktioniert nicht?

Codeauszug aus CSS:

body { align: center; background-color: #ffffff; font: 10pt Verdana, Arial; text-align: justify; margin-left:auto; margin-right:auto; }

Das IFrame hab ich, weil ich nicht weiß wies anders geht :smiley: Also das Große Fenster wo sich dann die Unterseiten öffnen ist ja mein Iframe, dann brauch ich das bei einer Verlinkung nur ansprechen und es passt… wenn ich das nicht habe, weiß ich irgendwie nicht, wie ich das schaffe, dass sich die Unterseiten genau dort öffnen :smiley: Bin dankbar für Vorschläge.

Hallo xanthia123,

Umgebe deinen Seiten Bereich mit einem seperaten Div Container, diesen setzt du dann per CSS auf „margin: 0 auto;“.

Liebe Grüße Mr. Value

„margin: auto;“ wirkt nur auf Elemente zentrierend, wenn diese auch gleichzeitig eine feste Breite haben.

Das iframe würde ich dennoch rausschmeißen.

hm also ich hab das mit dem DIV außenrum probiert, klappt irgendwie auch nciht…

Wegen des Iframes, wenn ich es rausschmeiße, wie sag ich dann einem Link wo er sich öffnen soll? :smiley:

Was hast Du denn „probiert“? Ohne Code kann dir niemand helfen.

Links öffnen die angegeben URLs normalerweise immer in dem Browserfenster selbst.

ahh ich hab das zentrieren hinbekomme, das mit der Breite war das Schlüsselwort… bleibt noch mein unschöner Iframe :wink:

@threadi das würde heißen, ich müsste auf jede Unterseite einfach den HTML Code übernehmen, dass es so aussieht als würde sich nur der rechte Text ändern?

Ganz genau. Das ist der normale Weg.

hm okay dann denk ich da mal drüber nach… Nachteil wäre halt, dass ich dann auf jeder Unterseite das Menü + Text etc. anpassen müsste wenn ich was ändere… aber so viele Seiten sind es ja auch nicht, mal sehen :wink:
Auf jeden Fall danke für die Hilfe =) Zentriert siehts jetzt doch schöner aus =)

Ja, dafür gibts aber zB PHP, und dadurch geht das viel einfacher.

Mit include oder require kannst du files in deine htm dokumente reinladen.

Du hast dann zB die Datei navigation.htm

mit:

<?php include("navigation.htm); ?>

wird die Navigation reingeladen, dadurch musst du nur eine Änderung in der navigation.htm vornehemen, was sich dann bei allen htm dokumenten auswirkt, bei denen die navi includet wird.

ah das klingt gut, das kann ich mal ausprobieren, danke für den Tipp!