Theme Zentrieren probleme

GeneralMaster

Hallo Zusammen

Ich habe mir vorhin ein neues Theme installiert, leider ist es komplett linksbündig, dann habe ich hier im Forum etwas gesucht und wurde auch fündig nun ist mein Theme immer Mittig zentriert so wie ich es haben wollte nur mein Problem was ich nun noch habe ist, was ich aber leider nicht mit der Sufu gefunden habe ist das mein Seiten Menü immer noch Linksbündig ist aber ich weiß nicht was ich da noch einfügen muss das es auch Zentriert ist, hier ist nun mal mein Blog http://www.sendersworld.de (Home und Eine Seite ist immer noch linksbündig) was kann ich tun??

Wäre super wenn mir einen Helfen könnte, vielen dank schonmal.

Mfg GeneralMaster

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

koslowski

Hi,

horizontal zentriert wird wenn du einem Element neben einer festen Breite margin:0 auto zuweist.

In deinem Fall fehlt ein alles umschließendes Element (div#wrapper) das zentriert werden muss.

Ach ja, deine Website leidet an der 12px-Seuche. ;-)

GeneralMaster

Danke koslowski für die schnelle Antwort wo muss ich denn diese Element (div#wrapper) genau einsetzten, ich kann dir ja hier mal meine Style CSS posten weil ich bin nicht so der CSS Profi leider ;)

Wäre super wenn du mir das noch sagen könntest, übringens danke für den Tip mit den 12px Seuche die kannte ich nocht garnicht.

Hier meine Style CSS:

CSS

/* 
    Theme Name: StudioPress White
    Theme URL: [url]http://www.geckoandfly.com/wordpress-themes[/url]
    Description: Wordpress Theme for Photographer
    Author: GeckoandFly.com
    Author URI: [url]www.geckoandfly.com[/url]
    Version: 1.0
        
    The CSS, XHTML and design is released under GPL:
    [url]http://www.opensource.org/licenses/gpl-license.php[/url]
    
*/


body {
    background-color: #000000;
    width: 1000px;
    background-image: url(images/bg2.gif);
    margin: 0px auto;
        padding: 0px 0px 0px 0px;;
    font-family: Arial, Georgia, "Times New Roman", Times, serif;
    font-size:12px;


    }
    
#wrap {
    background: #000 url(images/bg.gif) top center repeat-y;
    width: 1000px;
    color: #000;
    font-size: 12px;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
    margin: 0px auto 0px;
    padding: 0px;
    }


#wrap a  {
    color: #ff9933;
    text-decoration: none;
    }


#wrap a:hover {
    color: #ff9933;
    text-decoration: underline;
    }
    
/************************************************
*    Hyperlinks                                    *
************************************************/


a, a:visited{
    color: #507AA5;
    text-decoration: none;
    }
    
a:hover{
    text-decoration: underline;
    }
    
/************************************************
*    Header                                      *
************************************************/


#header {
    background: #fff url(images/header.jpg) center;
    width: 1000px;
        height: 700px;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    }
.backgroundimage {
    background: #fff url(images/bg4.gif) center;
    width: 1000px;
        height: 20px;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
    }


/************************************************
*    Navbar                                      *
************************************************/


ul.menu {
    top: 677px;
    left: 8%;
    width: 1000px;
    margin: 0 0 0 -60px;
    position: absolute;
    }


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


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


ul.menu li a {
    font-size: 1.2em;
    color: #fff;
    background: #e99228;
    margin: 0;
    }


ul.menu li a:hover {
    background: #fff;
    color: #000 !important;
    text-decoration: none;
    }


ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
    color: #000 !important;
    background: #fff;
    text-decoration: none;
    }


/************************************************
*    Right Sidebar                                  *
************************************************/
    
#r_sidebar {
    float: right;
    width: 250px;
    margin: 0px 0px 0px 0px;
    padding: 20px 50px 0px 0px;
    display: inline;
    }


#r_sidebar p{
    padding: 2px 0px 16px 0px;
    margin: 0px;
    line-height: 20px;
    }


#r_sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px 0px 20px 0px;
    }
    
#r_sidebar ul li a {
    color: #ff9933;
    text-decoration: none;
    }


#r_sidebar ul li a:hover {
    color: #ff9933;
    text-decoration: underline;
    }


#r_sidebardotted {
    margin: 10px 0px 5px 0px;
    padding: 5px 5px 5px 5px;
    border: 1px dotted #C0C0C0;
    }
    
/************************************************
*    Content                                      * 
************************************************/


#content {
    width: 1000px;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
    }


#content p{
    padding: 0px 0px 10px 0px;
    margin: 0px;
    line-height: 20px;
    }
    
#content p img{
    max-width: 600px;
    }
    
#content h1 {
    color: #ff9933;
    font-size: 32px;
    font-family: Arial, Garamond, Times New Roman, Verdana, Sans-Serif;
    font-weight: normal;
    padding: 0px 0px 5px 0px;
    margin: 0px 0px 5px 0px;
    border-bottom: 1px solid #C0C0C0;
    }
    
#content h1 a  {
    color: #ff9933;
    text-decoration: none;
    }


#content h1 a:hover {
    color: #000;
    text-decoration: none;
    }
    
#content h2 {
    color: #000;
    font-size: 18px;
    font-family: Arial, Garamond, Times New Roman, Verdana, Sans-Serif;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
    margin: 0px;
    border-bottom: 1px dotted #C0C0C0;
    }


#content h3 {
    color: #000;
    font-size: 18px;
    font-family: Arial, Garamond, Times New Roman, Verdana, Sans-Serif;
    font-weight: bold;
    padding: 5px 0px 10px 0px;
    margin: 0px;
    }
#content h4 {
    color: #000;
    font-size: 25px;
    font-family: Arial, Garamond, Times New Roman, Verdana, Sans-Serif;
    font-weight: normal;
    padding: 10px 0px 2px 0px;
    margin: 0px;
    }
#content h5 {
    color: #000;
    font-size: 18px;
    font-family: Arial, Garamond, Times New Roman, Verdana, Sans-Serif;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
    margin: 0px;
    border-bottom: 1px dotted #C0C0C0;
    }
#content h6 {
    color: #000000;
    font-size: 16px;
    font-family: Arial, Garamond, Times New Roman, Verdana, Sans-Serif;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin: -5px 0px 0px 0px;
    }
#contentmiddle {
    float: left;
    width: 600px;
    margin: 0px 0px 0px 0px;
    padding: 20px 20px 10px 60px;
    _padding: 20px 0px 10px 20px;
    display: inline;
    }
    
#contentmiddle ol{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }
    
#contentmiddle ol li{
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }
    
#contentmiddle ul{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }
    
#contentmiddle ul li{
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }
        
.contenttitle {
    float: left;
    width: 600px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    }
    
#content img.wp-smiley {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }


#content img.wp-wink {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }
    
/************************************************
*    Footer                                      *
************************************************/


#footer {
        background: url(images/bg3.gif) no-repeat;
    width: 1000px;
        height: 50px;
    padding: 0px 0px 50px 0px;
    _padding: 0px 0px 10px 1px;
        color: #000;
    font-size: 10px;
    font-family: Verdana, Helvetica, Sans-Serif;
    text-align: center;
    }


/************************************************
*    Search Form                                    *
************************************************/


#searchdiv {
    margin: 0px;
    padding 0px;
    }
    
#searchform {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    
#s {
    width: 260px;
    background: #FFFFFF url(images/search.gif);
    color: #000000;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    padding: 3px;
    margin: 8px 0px 0px 0px;
    border: 1px solid #C0C0C0;
    }


/************************************************
*    Comments                                    *
************************************************/
    
#commentblock {
    width: 500px;
    background: #fff;
    color: #000;
    float: left;
    padding: 20px 20px 10px 20px;
    margin: 10px 0px 0px 0px;
    }
    
#commentblock ol{
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    }
    
.commentdate {
    font-size: 12px;
    padding-left: 0px;
    }
    
#commentlist li p{
    margin-bottom: 8px;
    line-height: 20px;
    padding: 0px;
    }
.commentlist li .avatar { 
    float: left;
    border: 1px solid #eee;
    padding: 2px;
    margin: 0px 5px 2px 0px;
    background: #fff;
    }
.commentname {
    color: #000;
    margin: 0px;
    padding: 5px 5px 5px 0px;
    }


.commentinfo{
    clear: both;
    }


.commenttext {
    clear: both;
    color: #000;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 350px;
    background: #efefef url(images/comment.gif) no-repeat top;
    }


.commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 350px;
    background: #efefef url(images/comment.gif) no-repeat top;
    }


#commentsformheader{
    padding-left: 0px;
    }


#commentsform{
    text-align: center;
    margin: 0px;
    padding: 0px;
    }


#commentsform form{
    text-align: left;
    margin: 0px;
    }


#commentsform p{
    margin: 0px;
    }


#commentsform form textarea{
    width: 99%;
    }
    
p.comments_link  img{
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
.count {
        float:right;
        font-size:26px;
        color:#999;
        font-style: italic; 
        }

Alles anzeigen

Mfg GeneralMaster

GeneralMaster

Und was noch gut wäre wie ich meine Hauptnavigation sprich die obere etwas kleiner Buttons machen kann wäre auch super wenn mir das einer sagen könnte.

Mfg GeneralMaster

koslowski

Zitat von GeneralMaster

Danke koslowski für die schnelle Antwort wo muss ich denn diese Element (div#wrapper) genau einsetzten, ich kann dir ja hier mal meine Style CSS posten weil ich bin nicht so der CSS Profi leider ;)

Du mußt in deinem Editor erst die header.php öffnen.
Dort trägst du unmittelbar nach <body>
<div id="wrapper"> ein.
Dann öffnest du die footer.php und trägst dort unmittelbar vor:

PHP

<?php wp_footer(); ?>

HTML

</div><!-- Ende #wrapper -->

ein.

Danach öffnest du die style.css und trägst dort normal ziemleich weit oben ein:

HTML

#wrapper  {
    width:1000px;
    margin:0 auto;
}

Ich würde aber dann auch diese Angaben aus der style.css löschen:

HTML

body  {
     width:1000px;
     margin:0 auto;
}

Außerdem wäre ein CSS-Prolog von Vorteil, d.h.
ganz oben in der style.css folgendes eintragen:

HTML

*  {
    padding:0;
    margin:0;
}

Damit werden alle Abstände browserübergreifend auf null gesetzt.
Danach müssen diese natürlich wieder für die Elemente neu definiert werden.

Zitat von GeneralMaster

Wäre super wenn du mir das noch sagen könntest, übringens danke für den Tip mit den 12px Seuche die kannte ich nocht garnicht.

Das kennen viele Profis nicht mal, wenn ich mir Websites so anschaue.
Dabei ist es doch eigentlich so einfach und tut überhaupt nicht weh. :mrgreen:

Zitat von GeneralMaster

Und was noch gut wäre wie ich meine Hauptnavigation sprich die obere etwas kleiner Buttons machen kann wäre auch super wenn mir das einer sagen könnte.

Die Navi gehört völlig anders aufgebaut.
position:absolute ist völlig unnötig, die mit display:inline; aufzubauen halte ich auch für suboptimal.
Dabei hast du nicht soviel Kontrolle über die Darstellung.

Besser ist es die mit Float auszurichten, weil du es dann nur mit Blockelementen zu tun hast.

Wenn das jetzt böhmische Dörfer für dich waren, wirst du nicht umhin kommen dich mit CSS zu beschäftigen.

Hier ist ein guter Onlinekurs dazu. ;-)

GeneralMaster

Danke Koslowski für die schnelle und Ausführliche Hilfe, werde heute Abend direkt mal damit beginnen was du mir alles geschrieben hast und werde dann nochmal Bescheid geben ob alles geklappt hat. Muss nähmlich jetzt leider zur Arbeit also dann bis später mal.

Mfg GeneralMaster

GeneralMaster

Hi Koslowski

Du haste mir gestern und heute sehr gut geholfen nur ein Problem habe ich jetzt nun noch und zwar bin ich nach deiner Anleitung gegangen wie du mir das Geschrieben hast aber als ich fertig war, war mein Header weg mein Footer war verschoben und die Navigation war immer noch nicht Mittig Zentriert leider, ich denke mal ich habe da wohl noch was falsch gemacht obwohl man da nicht mehr viel falsch machen kann nur die frage jetzt ist was habe mache ich falsch.

Mfg GeneralMaster

telekommander

Den negativen [FONT="Courier New"]margin[/FONT]-Wert entfernen bzw. diese Zeile kpl. löschen und das Menü sollte wieder passen.

Code

ul.menu {
    top: 677px;
    left: 8%;
    width: 1000px;
[COLOR="Red"]    margin: 0 0 0 -60px;[/COLOR]
    position: absolute;
    }

GeneralMaster

Habe ich versucht Menü bleibt trotzdem Links.

Mfg GeneralMaster

koslowski

Zitat von GeneralMaster

Habe ich versucht Menü bleibt trotzdem Links.

das ist ja auch kein Wunder, da das alles umschließende div#wrapper mit den entsprechenden Formatierungen noch immer fehlt.
Die navi ist immer noch absolut positioniert und hat im Widerspruch dazu auch noch display:inline;.

Du solltest dich wirklich mit den Grundlagen beschäftigen, damit du weißt was du tust. ;-)

GeneralMaster

Ja ich habe ja alles wieder rückgängig gemacht weil wie gesagt der Header komplett weg war und der footer sich auch komplett verschoben hat als ich den div#wrapper eingefügt habe.

Mfg GeneralMaster

bgeissler

Sieht doch schon ganz gut aus.
änder mal in der style.css:

Zitat

ul.menu {
top: 677px;
width: 1000px;
margin: 0 0 0 0px;
position: absolute;
}

koslowski

HTML

ul.menu {
    width: 1000px;
    margin:0;
    text-align:center;
}

das reicht für ul.menue.
Wg. der Inline-Variante reicht text-align:center um das Menü horizontal zu zentrieren.
Wenn das Menü etwas nach oben in das Kopfbild verschoben werden soll, reicht ein zusätzliches negatives margin-top für ul.menue.

position:absolute; ist noch immer überflüssig.

GeneralMaster

So habe nun noch einen Kolegen gehabt der mir das fertig gemacht hat denn ich alleine hääte noch so viel Probieren können ürgendwas war falsch in meine style.css und das hat er jetzt geändert und nun gehts aber trotzdem nochmal großen dank euch.

Mfg GeneralMaster

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme Zentrieren probleme

Jetzt mitmachen!