Theme zentrieren

cyrous

Hallo WP-Fans!

Ich bin gerade dabei, meine Seite aufzubauen und komme ganz gut voran. Woran ich ein wenig scheitere ist beim Zentrieren meines Theme. Ich möchte eigentlich nur 2 Kleinigkeiten ändern.

1. Theme soll zentriert werden
2. Contentbereich (da, wo die Artikel platziert wird) soll verbreitert werden.

Mag mir jemand sagen, welche Parameter geändert werden müssen, damit die o. g. Änderungen erscheinen? Danke euch! Hier ist die Seite.

Ich habe folgenen CSS-Code (Fortsetzung des Codes auf Seite 2):

PHP

/*
Theme Name: Black Car
Theme URI: http://www.themesjunction.com
Description: a clean and simple fixed width, 3-column layout with the sidebar on the right.
Author: Themes Junction
Author URI: http://www.themesjunction.com
*/


body {
    font: 12px arial,verdana,sans-serif;
    padding:0px;
    margin:0px;
    background:#040404;        
}


#wrap {
     clear: both;     
    width: 1004px;
    padding:0;    
    margin:0px;
    
}
#content-container {
    float: left;
    width: 1004px;
    padding:0px;    
    margin-top:0px;
    margin:0px;
}
#content {
margin:0 0 0 20px;
}


#header {
    height:404px;
    width: 1004px;
    padding:0px;
    margin:0px auto;
    background:url(images/header.jpg) no-repeat top center;
    float:none;
}
#header h1 
{
font:36px 'times new roman';
text-align:center;
padding-left:630px;
padding-top:5px;
font-weight:bold;
width:350px;
}
#header h1, h1 a, h1 a:visited {
text-decoration: none;
margin:0;
color:#ffffff;
}
#header h1 a:hover {
text-decoration: none;
color:#ffffff;
}
#subtitle {
    padding-left:680px;
    color: #ffffff;
    font:14px 'times new roman';
    text-align:left;
    font-weight:bold;
}




#navlist-container{    
    position:absolute;
    top:59px;
    height:30px;
    float:left;    
    }
#navlist{
    position:relative;
    display:block;
    height:40px;
    font-size:12px;
    font-weight:normal;
    font-weight:bold;
    padding:0;
    font-family:Verdana,arial;
    }
#navlist ul{
    margin:0px;
    padding:0px 0px 0 20px;
    list-style-type:none;
    width:auto;
    float:left;
    }
#navlist ul li{
    display:block;
    float:left;
    margin:0 ;
    width:110px;
    }
#navlist ul li a{
    display:block;
    float:left;
    color:#999999;
    padding:17px 0px 0 0px;
    width: 110px; 
    height: 30px;
    background:url(images/menu.gif) no-repeat right top;
    text-align: center;
    text-decoration:none;
    }
#navlist ul li a:hover,#navlist ul li.current_page_item a{
    color:#4d4d4d;
    background:url(images/menu.gif) no-repeat top left;
    width: 110px; height: 30px;
    text-align: center;
    }
#navlist ul li .current_page_item a,#navlist ul li .current_page_item a:hover{
    color:#3A5978;
    width: 110px; height: 30px;
    background:url(images/menu.gif) no-repeat top left;
    }
    
#footer {    
    color:#ffffff;
    font: 12px arial,verdana,sans-serif;
    text-align:left;
    height:70px;
    float:left;
    position:relative;
    width:1004px;
    margin:0px;
    background:url(images/footer.gif) no-repeat bottom center;
}
.footerlinks 
{
    color:#999999;
    text-align:center;
    margin-top:25px;
}
.footerlinks  a
{
    color:#e5e5e5;
    text-decoration:underline;


}


/* General Header Styles */
h2 {
    margin-top:0;
    font-size:16px;    
}
h3 {
    margin:0;
    font-size:14px;    
}




/* Post Related */
h2 a:hover, h2 a:visited, h2 a {
    text-decoration:none;
}
.post-container
{
    float:left; 
    width:522px;     
    margin-top:-40px;
    
}
.post {
    width:522px;
    margin:0;
    padding:0;
    color:#999999;
    float:none;
    display:block;
    margin-bottom:30px;    
    clear:both;    
    background:url(images/post-bg.gif) repeat-y left ;
}
.posttop {
    width:522px;
    height:60px;
    margin:0;
    color:#e5e5e5;
    padding-top:10px;
    background:url(images/post-top.gif) no-repeat top left;
}


.post p {
    margin:0px;
}




.post a:hover {
    color:#999999;
}


.posttop h2 {
    font: 16px arial;
    text-align:left;
    overflow:visible;
    margin-bottom:10px;
    padding:0;
    float:left;
    font-weight:bold;
    margin-left:10px;
    width:510px;
}
.posttop h2 a {
    color:#ffffff;
}




.postinfo {
width:510px;
clear:both;
color:#777777;
font-size:11px;
padding:5px 0px 0 10px;
}


.postinfo a {
text-decoration:none;
color:#FF9B14;
}


.postinfo a:hover {
color:#FF9B14;
text-decoration:underline;
}


.postinfo .posted {
float:left;
background:url(images/filled.gif) no-repeat left;
padding-left:18px;
margin-right:0px;
}






.postinfo .published {
float:right;
background:url(images/date.gif) no-repeat left;
padding-left:20px;
width:120px;
margin-right:0px;
}


.postbottom
{
    font-size:11px;
    color:#C41407;
    text-align:left;
    width:522px;
    padding:0;    
    height:40px;
    background:url(images/post-bottom.gif) no-repeat bottom left;
    
}
.postbottom a
{
text-decoration:none;
color:#FF9B14;    
}
.postbottom a:hover
{
text-decoration:underline;
color:#cccccc;
}
.postbottom .comments {
float:right;
background:url(images/comments.gif) no-repeat left bottom;
height:16px;
position:relative;
padding:15px 20px 0 20px;
}


.navigation a {
    color:#cccccc;
    text-decoration:none;
}
.navigation a:hover 
{
    color:#999999;
    text-decoration:underline;
}


.navigation {
    text-align:left;
    width:520px;
    float:left;
    font-size:12px;
}
img.centered {
    display: block;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left
}
.navigation .alignright {
    margin-bottom:10px;
}
.navigation .alignleft {
    margin-bottom:10px;
}    


.pagetitle{
    font: bold 26px verdana;
    margin-top:0;    
    margin-bottom:5px;
    text-align:left;
    color:#A90101;
    overflow:visible
}
blockquote {
    font-style:italic;
    margin:5px;
    border-left:5px solid #CD0100;
    padding-left:5px;
}
a img {
    border:0;
}
.entry {
    font: 12px arial,verdana,sans-serif;
    padding-right:20px;
    padding-left:15px;
    padding-bottom:10px;
    text-align:justify;
    clear:both;
    
}
.entrytext .postmetadata {
    font: 12px arial,verdana,sans-serif;
}
.more-link {
    font: 10px arial,verdana,sans-serif;
}
#sidebar {
        float: left;
        width: 420px;
        margin-top:-120px;
        margin-left:10px;
        
    }
    
    #sidebar a {
        color: #fff;
        text-decoration: none;
    }
    
    #sidebar a:hover {
        text-decoration: underline;
    }
    
    /* Main - Sidebar - Sides */
    
    #sidebar #sidebar-left {
        float: left;
        width: 201px;
        
    }
    
    #sidebar #sidebar-right {
        float: right;
        width: 201px;
        
    }
    
    /* Main - Sidebar - Boxes */
    
    #sidebar .sidebar-box {
        width: 201px;
        margin-bottom: 7px;
        background: url("images/sidebar_box.gif") repeat-y;
    }
    
    #sidebar .sidebar-box-top {
        width: 201px;
        
    }
    
    #sidebar .sidebar-box-bottom {
        width: 201px;
        padding-bottom: 14px;
        min-height: 50px;
        background: url("images/sidebar_box_bottom.gif") no-repeat left bottom;
    }
    
    /* Sidebar - Titles */
    
    #sidebar h3 {
        width: 201px;
        height: 32px;
        padding: 6px 0px 5px 0px;
        font:bold 14px Arial, Verdana;
        color: #ffffff;
        text-align: center;
        background: url("images/sidebar_box_top.gif") no-repeat;
    }
    
    /* Sidebar - Menus */
    
    #sidebar ul {
        margin: 0;
        padding: 0 11px 6px 9px;
        list-style-type: none;
    }
    
    #sidebar ul li {
        color: #CCCCCC;
        font: 12px Arial, Verdana;
        border-bottom:1px solid #5A5A5A;
        
    }
    
    #sidebar ul li a {
        color: #CCCCCC;
        text-decoration: none;
        padding: 4px 0 0px 13px;
        display: block;
        height: 22px;
        background:url(images/arrow.gif) no-repeat left;
        
    }
    
    #sidebar ul li a:hover {
        text-decoration: underline;
    }
    
        /* Sidebar - Menus - Submenus */
        
        #sidebar ul li ul {
            padding: 0;
        }
        
        #sidebar ul li ul li a {
            padding: 0 0 2px 15px;
        }

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

cyrous

Hier ist die Fortsetzung des Codes, danke für eure Hilfe!

PHP

/* Sidebar - Forms */
    
    #sidebar #searchform {
        margin: 0;
        padding: 20px 11px 10px 9px;
        width: 158px;
        text-align: center;
    }
    
    #sidebar #searchform #s {
        width: 138px;
    }
    
    /* Sidebar - Tables */
    
    #sidebar #calendar_wrap {
        margin: 0 auto;
        padding-bottom: 2px;
        width: 128px;
    }
    
    #sidebar #calendar_wrap caption {
        font-weight: bold;
    }
    
    #sidebar #calendar_wrap tbody {
        text-align: right;
    }
    
    #sidebar #calendar_wrap tfoot #next {
        text-align: right;
    }
    
    #sidebar #calendar_wrap #today {
        font-weight: bold;
    }
    
    /* Sidebar - Texts */
    
    #sidebar .textwidget {
        padding: 0 15px 2px 13px;
    }


/* User Comment Specific */
#comment
{
border:1px solid #333333;
color:#333333;
background:#ffffff;
height:160px;
width:450px
}
#respond
{
    padding-left:10px;
}
#commentform
{
    padding:10px;


}
#commentform input
{
color:#333333;
background-color:#ffffff;
border:1px solid #333333;
margin-bottom:5px;
}


ol.commentlist {
    margin-left:25px;
    padding:0;
}


ol.commentlist a {
    color:#c4c4c4;    
}
ol.commentlist p {
    margin-top:3px;
    margin-bottom:10px;
}
small.commentmetadata {
    font: 10px arial,verdana,sans-serif;
}
small.commentmetadata a {
    text-decoration:none;
}
#submit {
    height: 25px;
    background-color: #D6E5BD;
    margin: 10px 10px 0 0;
    color:#ffffff;
    font-size: 1.2em;


}


/************************/
/*     Search Design    */
/************************/
#searchform{
display:none;
}
#s
{
    width:140px;
    font:12px tahoma;
    color:#c4c4c4;
}
#menu_search_box{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#ffffff;
    font-size:11px;
    height:30px;
    float:left;
    position:absolute;
    top:17px;
    left:50px;
}


#menu_search_box input.s{
    width:120px;
    font-size:11px;
    color:#c4c4c4;
    padding:5px;    
    background:none;
    border:none;
    height:15px;
    float:left;
}
#menu_search_box span{
    position:relative;
    top:-1px;
    font-weight:bold;
}
/*-------------Other------------------*/
hr {
    display: none;
}
a 
{
    color:#A90101;
}
#wp-calendar
{
width:150px;
color:#ffffff;    
margin-left:5px;
text-align:center;
}
#calendar
{


}
td
{
color:#999999;
}
#aboutus{
float:left;
width:320px;
height:150px;
color:#8E929E;
padding:20px;
padding-top:5px;
overflow:hidden;
position:absolute;
top:120px;
left:550px;
}
#aboutus a{
color:#ffffff;
text-decoration:none;
}

Alles anzeigen

mfitzen

Code

#wrap {
	 clear: both;     
	width: 1004px;
	padding:0;	
	margin:0px[COLOR="SeaGreen"] auto[/COLOR];
}

Sowas findet man übrigens Zuhauf über Google oder die Forensuche ;-)

cyrous

Zitat von infected
Code
#wrap {
     clear: both;     
    width: 1004px;
    padding:0;    
    margin:0px[COLOR=SeaGreen] auto[/COLOR];
}
Sowas findet man übrigens Zuhauf über Google oder die Forensuche ;-)

Hallo infected,

das ging ja super schnell! Vielen Dank dafür. Ich habe die beschriebene Klasse #wrap von dir auf "auto" geändert. Leidert tat sich nichts? Hab es einmal

PHP

#wrap {
     clear: both;     
    width: 1004px;
    padding:0;    
    margin:0px auto;

und einmal so

PHP

#wrap {
     clear: both;     
    width: 1004px;
    padding:0;    
    margin: auto;

gemacht. Beides ohne Erfolg? Habe ich etwas vergessen zu beachten?

Nachtrag: Ja, aber ich weiß die einzelnen Bezeichnungen nicht, so dass ich dachte, wenn ich es beschreibe, dass ich die passende Antwort erhalte ;-)

mfitzen

So geht es aber und so stehts auch in Deiner CSS Datei:

Code

#wrap {
clear: both;     
width: 1004px;
padding:0;    
margin:0 auto;
}

Eventuell mal den Browsercache leeren.

cyrous

Zitat von infected
So geht es aber und so stehts auch in Deiner CSS Datei:
Code
#wrap {
clear: both;     
width: 1004px;
padding:0;    
margin:0 auto;
}
Eventuell mal den Browsercache leeren.

Sauber! Jetzt klappt es infected. Hatte bei

PHP

margin 0px; auto;

das stehen gehabt ;-) Nun ist es einwandfrei. Weißt du auch, wie ich den Content verbreitern kann?

Nachtrag: Sehe grad mit Firebug, dass das 3 verschiedene Klassen sind. Wollte das genauso haben wie den Footer.

Ist der "Wrap" eigentlich ein Div-Container um das gesamte Theme herum?

InaiMathi

Zitat von cyrous

Ist der "Wrap" eigentlich ein Div-Container um das gesamte Theme herum?

Genau das ist er. :)

cyrous

Zitat von InaiMathi

Genau das ist er. :)

Ahhh, danke dir :|

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme zentrieren

Jetzt mitmachen!

Benutzer online in diesem Thema