Layout: Seite zentral ausrichten

1. alles im body zentieren

body {text-align:center;}

2. das element, in dem deine ganze seite liegt mittig ausrichten:

#container {position:relative;      width:1024px; text-align:left;     margin-left: -512px;          left: 50%;  }

damit erkennen alle Browser, auch der alte IE, was zu tun ist

das ganze kommt in die style.css

Das geht viel einfacher und ohne Positionierung, einfach das nur ergänzen statt der Verbiegungen vom obigen Post:

#container { margin: 0 auto; }

Das ist alles, was nötig ist, um das zu zentrieren.

die positionierung dafür da,damit man direkt innerhalb absolut oder relativ positionieren kann. Der Rest ist für alte Browser. Wenn man auf die verzichtet kann man's weg lassen. und die Breite braucht man ja wohl auch irgendwo

K2 Theme zentrieren

Hallo Ihr drei!
Also beim k2 Theme klappen beide Methoden nicht.
ich habe sowohl

#container {position:relative;
width:1024px;
text-align:left;
margin-left: -512px;
left: 50%; }

also auch:

#container { margin: 0 auto; }

zwischen
#page
und
#header

gepackt und nüscht tut sich. Any Help ?! Danke, Sebastian

zeig mal den quelltext, oder gib den link von der seite wo du es gemacht hast.. dann kann man weitersehen ;)

http://www.urban-changes.org/

und die style.css:
/*
Theme Name: K2
Theme URI: K2
Description: <strong><a href="themes.php?page=k2-options">Configure K2</a></strong> or visit the <a href="http://getk2.com/forum/">support forums</a>, <a href="http://k2.stikipad.com/">the wiki</a> or <a href="http://code.google.com/p/kaytwo/issues/list">the bug tracker</a>. K2 was developed by <a href="http://binarybonsai.com/">Michael</a>, <a href="http://chrisjdavis.org/">Chris</a>, <a href="http://zeo.unic.net.my/">Zeo</a>, <a href="http://stevelam.org/">Steve</a> and Ben, and is licensed under the <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
Version: 1.0-RC6
Author: Various Artists
Author URI: K2
Tags: ajax, blue, custom header, dynamic columns, fixed width, modules, multiple columns, styles, widgets

CSS Documentation: k2.stikipad.com
The Real K2: K2 - Wikipedia, the free encyclopedia
*/

/*- Reset CSS */
/* CSS Tools: Reset CSS */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
}

/*- Typography */

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}

strong, em, b, i {
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

.comments input[type=text], .comments textarea, code {
font-family: Monaco, "Courier New", Courier, monospace;
}

/*- Page Structure */

body {
font-size: 62.5%; /* Resets 1em to 10px */
color: #444;
background: #eee;
text-align: center;
}

body.lang-ar,
body.lang-fa,
body.lang-he,
body.lang-hi,
body.lang-km,
body.lang-ko,
body.lang-ja,
body.lang-th,
body.lang-zh {
font-size: 75%; /* Resets 1em to 12px */
}

#page {
background: white;
text-align: left;
padding-top: 20px;
position: relative;
border: 0px solid #ddd;
border-top: none;
margin: 0 auto;
clear: both;
}

.columns-one #page {
width: 560px;
}

.columns-two #page {
width: 780px;
}

.columns-three #page {
width: 950px;
}

#container {position:relative;
width:1024px;
text-align:left;
margin-left: -512px;
left: 50%; }

#header {
position: relative;
height: 200px;
background: #ffffff no-repeat scroll right bottom;
background-position: top left;
}

.content {
padding: 0 20px 10px;
}

body.columns-two #primary-wrapper {
float: left;
margin-right: -220px;
width: 100%;
}

body.columns-two #primary {
margin-right: 220px;
}

body.columns-two .secondary {
float: right;
}

#primary {
position: relative;
float: left;
width: 500px;
padding: 10px;
}

* html #primary {
display: inline;
}

.columns-one .secondary {
width: 240px;
border-top: 1px solid #eee;
}

.columns-three .secondary {
width: 175px;
}

.secondary {
width: 200px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}

#sidebar-2 {
clear: right;
}

.comments {
text-align: left;
margin: 30px 0 0;
position: relative;
}

/*- Main Menu in Header */

ul.menu {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 20px;
width: 90%;
}

ul.menu li {
display: inline;
margin: 0;
}

ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}

ul.menu li a {
font-size: 1em;
color: white;
margin: 0;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}

ul.menu li a:hover {
background: #333;
color: #eee;
text-decoration: none;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_ancestor a,
ul.menu li.current_page_ancestor a:hover {
color: #333;
background: white;
text-decoration: none;
}

/*- Sidebar Subpages Menu */

.sb-pagemenu ul {
margin-left: 10px;
}

.sb-pagemenu ul ul {
margin-top: 2px;
}

.sb-pagemenu ul ul .page_item {
margin-left: 10px;
padding: 0;
}

.sb-pagemenu .current_page_item {
}

/*- Headings */

h1 {
font-size: 3em;
}

h1.blog-title {
font-weight: bold;
letter-spacing: -1px;
padding: 75px 40px 0;
}

h1.blog-title a,
#header .description {
text-decoration: none;
color: white;
}

h1.blog-title a:hover {
text-decoration: underline;
}

#header .description { /* Description in header */
font-size: 1em;
margin: 0 40px;
}

h2 { /* H2 is what kind of page you are on. Eg. 'Monthly Archive'. */
text-align: center;
font-size: 2.5em;
font-weight: bold;
letter-spacing: -1px;
}

#rollingarchives.emptypage {
display: none;
}

.page-head {
margin: 20px 0;
}

.archivepages {
color: #999;
display: block;
font-size: .45em;
font-weight: normal;
letter-spacing: 0;
text-transform: lowercase;
margin-top: 2px;
}

.secondary h4 { /* Secondary H4 is sidebar headlines */
font-size: 1.5em;
font-weight: normal;
padding: 0;
display: block;
margin-bottom: 5px;
}

h3, h4, .single .k2-asides h3 { /* H3 is entry headlines. H4 is comments and replyform headlines */
font-size: 2.4em;
font-weight: normal;
letter-spacing: -1px;
}

.entry-content h3 {
font-size: 1.8em;
font-weight: normal;
margin-top: 25px;
}

.entry-content h4 {
font-size: 1.5em;
font-weight: normal;
margin-top: 25px;
}

.k2-asides h3 {
font-size: 1.6em;
font-weight: normal;
}

.entry-head {
margin-top: 10px;
}

body.page .entry-content h3 {
font-size: 1.7em;
display: block;
padding: 15px 0 0;
}

body.page .entry-content h4 {
font-size: 1.5em;
display: block;
padding: 15px 0 0;
}

.secondary div {
margin: 20px 0 0;
padding: 0;
position: relative;
}

.skiplink {
display: none;
}

#primary .metalink a, #primary .metalink a:visited, /* The Metalink class takes care of the comments, edit, rss and trackback links next to the titles */
.secondary .metalink a, .secondary .metalink a:visited,
.secondary span a, .secondary span a:visited {
color: #999;
font-weight: normal;
}

#primary .hentry .entry-head .metalink {
font-size: 1.8em;
letter-spacing: -1px;
text-transform: lowercase;
margin-left: 15px;
}

#primary .k2-asides .entry-head .metalink {
font-size: 1.4em;
}

.single #primary .k2-asides .entry-content {
font-size: 1.5em;
color: #999;
}

.comment-meta {
margin: 0 15px 0 0;
float: none;
}

.comment-login, .comment-welcomeback {
margin-top: 15px;
color: #777;
}

#comment-personaldetails {
margin-top: 10px;
}

.feedicon { /* Next to Comment Section Headline */
border: 0 !important;
padding: 0 !important;
}

.feedlink { /* On the sidebar */
border: none;
padding: 2px;
padding-right: 20px;
background: url('images/feed.png') right center no-repeat;
height: 16px;
position: absolute;
top: 0;
right: 0;
color: #777;
}

.feedlink span {
visibility: hidden;
}

.feedlink:hover span {
visibility: visible;
}

.secondary .k2-asides {
margin: 0;
padding: 0 0 10px;
word-spacing: -1px;
}

.secondary .k2-asides p {
display: inline;
}

.secondary .k2-asides .metalink {
padding-left: 0px;
}

.secondary span a {
margin-left: 10px;
}

.page-head .entry-edit {
position: absolute;
right: 0;
margin-top: -20px;
}

.entry-edit a {
border: none;
padding: 2px;
padding-left: 23px;
background: url('images/pencil.png') left center no-repeat;
height: 16px;
}

.comment-edit a {
border: none;
padding: 2px;
padding-left: 23px;
margin-left: 10px;
background: url('images/comment_edit.png') left center no-repeat;
height: 16px;
}

h2, h2 a, h2 a:visited,
h3, h3 a, h3 a:visited,
h4, h4 a, h4 a:visited {
color: #444;
}

h2, h2 a, h2 a:hover, h2 a:visited,
h3, h3 a, h3 a:hover, h3 a:visited,
h4, h4 a, h4 a:hover, h4 a:visited {
text-decoration: none;
}

.entry-meta { /* Time and category for blog entries */
font-size: 1em;
line-height: 1.6em;
display: block;
margin-top: 1px;
color: #bbb;
}

.entry-meta div {
display: inline;
}

.meta-start {
padding: 2px 0 2px 20px ;
background: url('images/time.png') left top no-repeat;
}

.entry-date abbr {
border: 0;
color: #777;
}

.entry-author {
display: none;
}

.entry-author address {
display: inline;
font-style: normal;
}

.entry-category {
text-transform: lowercase;
margin-right: 10px;
}

.entry-meta a, .comment-meta a {
color: #777;
}

.commentslink {
padding: 2px 0 2px 20px;
background: url('images/comment.png') left center no-repeat;
margin-right: 10px;
}

.quoter_comment {
padding: 2px 0 2px 20px;
background: url('images/comment.png') left center no-repeat;
margin-left: 5px;
}

.entry-tags {
display: block;
margin: 2px 0;
padding: 0 0 0 20px;
background: url('images/tag_blue.png') left center no-repeat;
}

Wenn du
#page ne bestimmte breite gibst, wirds zentriert.
bsp.

#page {
[COLOR=Red]width:950px;[/COLOR]
background: white;
text-align: left;
padding-top: 20px;
position: relative;
border: 0px solid #ddd;
border-top: none;
margin: 0 auto;
clear: both;
}

ah super, das war´s! Danke!!

Um´s klar zu stellen, wie das gemeint ist

es sollte zu allererst einen <div> geben, der die komplette browserfläche nutzt und alles was darin liegt in die mitte schiebt:

div#bodycontainer {
text-align: center;
padding: 0;
margin: 0;
width: 100%;
height: 100%
}

dann einen <div>, der alles (zB Wordpress) einschließt und in dem die eigentliche "seite" auftaucht:

div#container {
text-align: left;
margin: 0 auto;
height: 100%;
width: XYpx;

Zur Erklärung: mit dem äußeren <div>#bodycontainer und dem text-align: center; positioniert man auch im IE den inneren <div>#container in der Mitte. Um den Text dann nicht auch mittig darzustellen wird beim <div>#container dann text-align: auf left; retour gesetzt. mit margin: 0 auto; definiert man den Abstand oben und unten (erster Wert) auf 0px und mit auto; (zweiter Wert) wird der Abstand rechts und links automatisch (sprich: gleichmäßig) angepasst.

gutes Gelingen.

sebastian: Es gibt überm Text-Feld einen #-Button. Der ist für jegliche Art von Code, damit man die Seite nicht unendlich scrollen muss (s. Dein Css).

hallo leute...
kann mir BITTE jemand sagen, wie ich alles (header, content, navi, bilder usw) auf meiner seite mittig ausrichten kann? bei mir ist immer eines zu sehr rechts oder links. auch bekomme ich z.B. die headergrafik nicht mittig in den header, der wiederum natürlich auch nicht mittig steht. muss da dann erstmal alles die gleiche breite haben, oder? oder ist das egal. soll ich erstmal überall padding und margin wegnehmen?:confused:
oder brauche ich da auch so eine #div?
...bin verzweifelt

edit:
ok, glaube ich bekomm´s langsam hin auch wenn mir der blog noch paar props macht aber....
http://www.freedom-skateboards.de/wordpress/

Hallo zusammen!
Dann reihe ich mich auch mal ein! Bin zur Zeit dabei, das Designe, welches ich nutze (10PAD2-Rising Sun) meinen Vorstellungen anzupassen und habe auch das Problem, dass ich das Designe nicht mittig bekomme. Header und Footer waren kein Problem, aber der Mittelteil ist nach links verschoben.
Habe gestern schon den ganzen Nachmittag hier im Forum gesucht und auch viele Lösungen zu dem Problem gefunden, aber nichts hat etwas gebracht.
Vielleicht kann mir ja jemand von Euch anhand des Codes weiter helfen?

(Kriege den Code leider nicht hier eingefügt, weil mein Beitrag dann zu viele Zeichen hat und auch in einem zweiten Post nur mit Code hat es nicht funktioniert. Hülfe! Wie machen andere das denn?)

Über Hilfe freue ich mich sehr und danke schonmal im Vorraus für Eure Mühe!
Liebe Grüße
Joe :)

sieht hier bei mir alles gut aus - IE7 und firefox - alles 'mittendrin'.
vielleicht ist der browser cache noch voll mit dem alten stil - mit STRG F5 mal auffrischen:-D

Cache ordnungsgemäß geleert, aber bei mir ist der Mittelteil nicht mittig ... weder im IE noch im Firefox und auch in sonst keinem Browser, den ich so ausprobiert habe. :confused:

meine erste antwort war voreilig :mrgreen:- ich musste zweimal gucken um zu begreifen, was du meinst.

versuch mal zwei stellen in der style.css zu aendern:

#header {
  width: 710px;
}
 
#contentwrap {
 width: 710px;
 }

damit ging's soweit ich testen konnte.:D

Aaaaaaaaahhhhhhhhhhhhhhhhhhhhhhhh - Du bist mein Held!!! :mrgreen:
Funktioniert ... alles so wie's sein soll!
Ich danke Dir! :-D