1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Layout: Seite zentral ausrichten

Dieses Thema im Forum "Design" wurde erstellt von boon, 22. Februar 2009.

  1. boon

    boon Well-Known Member

    Registriert seit:
    14. Januar 2009
    Beiträge:
    56
    Zustimmungen:
    0
    Hallo,

    möglicherweise ist mein Problem recht banal. Aber ich finde die Lösung nicht - weder auf css4you noch hier.

    Mein Theme war vorher auf width:100% eingestellt. Jetzt habe ich es auf 1024px fix eingestellt. Nur ist das Thema nun links angeordnet. Ich möchte aber, dass der linke und rechte Abstand gleich ist und sich je nach Bildschirmgröße verkleinert.

    Welchen Code muss ich ändern bzw. einfügen?
    Wo muss ich es ändern? in der style.css?

    Hier zur Anschauung der momentane Link zur Wordpress-Installation: http://y.o-r-c-a.at

    Vielen Dank.
     
  2. perryzelda

    perryzelda Well-Known Member

    Registriert seit:
    9. April 2008
    Beiträge:
    459
    Zustimmungen:
    0
    1. alles im body zentieren

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    2. das element, in dem deine ganze seite liegt mittig ausrichten:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    damit erkennen alle Browser, auch der alte IE, was zu tun ist

    das ganze kommt in die style.css
     
  3. boon

    boon Well-Known Member

    Registriert seit:
    14. Januar 2009
    Beiträge:
    56
    Zustimmungen:
    0
    I sag nur VIELEN VIELEN DANK! Funzt.
     
  4. codestyling

    codestyling WPD-Team

    Registriert seit:
    30. März 2008
    Beiträge:
    1.904
    Zustimmungen:
    0
    Das geht viel einfacher und ohne Positionierung, einfach das nur ergänzen statt der Verbiegungen vom obigen Post:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das ist alles, was nötig ist, um das zu zentrieren.
     
  5. perryzelda

    perryzelda Well-Known Member

    Registriert seit:
    9. April 2008
    Beiträge:
    459
    Zustimmungen:
    0
    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
     
  6. boon

    boon Well-Known Member

    Registriert seit:
    14. Januar 2009
    Beiträge:
    56
    Zustimmungen:
    0
    Habs ausprobiert. Geht beides. VIELEN DANK!
     
  7. Sebstian

    Sebstian Active Member

    Registriert seit:
    5. März 2009
    Beiträge:
    37
    Zustimmungen:
    0
    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
     
  8. JonnyBauer

    JonnyBauer Well-Known Member

    Registriert seit:
    11. Oktober 2008
    Beiträge:
    93
    Zustimmungen:
    0
    zeig mal den quelltext, oder gib den link von der seite wo du es gemacht hast.. dann kann man weitersehen ;)
     
  9. Sebstian

    Sebstian Active Member

    Registriert seit:
    5. März 2009
    Beiträge:
    37
    Zustimmungen:
    0
    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;
    }
     
  10. JonnyBauer

    JonnyBauer Well-Known Member

    Registriert seit:
    11. Oktober 2008
    Beiträge:
    93
    Zustimmungen:
    0
    Wenn du
    #page ne bestimmte breite gibst, wirds zentriert.
    bsp.

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

    Sebstian Active Member

    Registriert seit:
    5. März 2009
    Beiträge:
    37
    Zustimmungen:
    0
    ah super, das war´s! Danke!!
     
  12. kaiser

    kaiser Well-Known Member

    Registriert seit:
    20. November 2008
    Beiträge:
    1.840
    Zustimmungen:
    0
    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:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    dann einen <div>, der alles (zB Wordpress) einschließt und in dem die eigentliche "seite" auftaucht:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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).
     
  13. derblog

    derblog Well-Known Member

    Registriert seit:
    15. Dezember 2008
    Beiträge:
    188
    Zustimmungen:
    0
    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....
     
    #13 derblog, 22. Mai 2009
    Zuletzt bearbeitet: 22. Mai 2009
  14. Joe Leblanc

    Joe Leblanc New Member

    Registriert seit:
    25. März 2009
    Beiträge:
    4
    Zustimmungen:
    0
    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 :)
     
    #14 Joe Leblanc, 17. Juli 2009
    Zuletzt bearbeitet: 17. Juli 2009
  15. alchymyth

    alchymyth Well-Known Member

    Registriert seit:
    7. Juni 2009
    Beiträge:
    3.959
    Zustimmungen:
    1
    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
     
  16. Joe Leblanc

    Joe Leblanc New Member

    Registriert seit:
    25. März 2009
    Beiträge:
    4
    Zustimmungen:
    0
    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:
     
  17. alchymyth

    alchymyth Well-Known Member

    Registriert seit:
    7. Juni 2009
    Beiträge:
    3.959
    Zustimmungen:
    1
    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:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    damit ging's soweit ich testen konnte.:D
     
  18. Joe Leblanc

    Joe Leblanc New Member

    Registriert seit:
    25. März 2009
    Beiträge:
    4
    Zustimmungen:
    0
    Aaaaaaaaahhhhhhhhhhhhhhhhhhhhhhhh - Du bist mein Held!!! :mrgreen:
    Funktioniert ... alles so wie's sein soll!
    Ich danke Dir! :D
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden