Problem bei der Anpassung eines Designs

achimos

Hey,
ich arbeite zur Zeit an meinem ersten Designversuch für Wordpress. Ich habe im Moment folgendes Problem. Mein Design sieht im Moment so aus:
http://oror.or.ohost.de/achim%20sagner_1221389971910.png

aber eigentlich soll es so aussehen:
http://oror.or.ohost.de/achim%20sagner…910%20Kopie.jpg

Kann mir jemand sagen wie ich den content Bereich, die Navigation und den Footer so verschieben kann? Ich hoffe auf Antworten.

LG, achimos

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

gsibergerin

Die Seite ist noch nicht online, nehme ich an? Falls doch, solltest du den Link dazu posten. Um dir zu helfen, müsste man einen Blick in deine CSS werfen können, nur die Bilder helfen da nicht weiter.

achimos

nein sie ist noch nicht online. sie läuft über xammp. reicht es wenn ich die CSS poste?

gsibergerin

Ich denke schon. Ich bin jetzt leider gleich aus dem Haus, aber das Problem dürfte, soviel ich gesehen habe, kein großes sein, und es werden sich hoffentlich andere finden, die einspringen. Mach das - viel Glück!

achimos

ok danke. Hier der CSS:

Code

/*  
Theme Name: achim-medien.de
Theme URI: achim-medien.de
Description: My own Theme
Version: 1.0
Author: Achim Sagner
Author URI: achim-medien.de
*/




body {
    padding: 40px 0 20px 0;
    margin: 0;
    background: #222222;
    text-align: left;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #c8c8c8;
}


#header-wrap {
    width: 10%;
    text-align: left;
    background: #222222;
}


#header {
    margin: 0 auto 0 auto;
    text-align: left;
    width: 230px;
    position: relative;
}


#header img {
    display: block;
}


#search-box {
    position: absolute;
    top: 25px;
    right: 700px;
}    


#search-box form {
    margin: 0;
    padding: 0;
}


#search-box input {
    margin: 0;
    padding: 0;
    width: 160px;
    color: #888888;
}










#container {
    margin: 0 auto 0 auto;
    width: 780px;
    text-align: left;
}






a img {
    border: none;
}


a {
    color: #D9D27C;
    text-decoration: underline;
}


a:hover {
    color: #888888;
    text-decoration: none;
}






ul, ol {
    margin: 4px 0 15px 35px;
    padding: 0;
}


ul ul, ol ol {
    margin: 4px 0 0 15px;
    padding: 0;
}


li {
    margin: 0 0 4px 0;
    padding: 0;
}




























#top-nav {
    color: #FFFFFF;
    width: 100%;
    font-size: 0.9em;
}


#top-nav ul {
    margin: 0;
    padding: 8px 7px 8px 7px;
    list-style: none;
}


#top-nav li {
    display: inline;
    margin: 0 20px 0 0;
    padding: 0;
}


#top-nav a {
    color: #D9D27C;
    text-decoration: none;
}


#top-nav a:hover {
    color: #999999;
    text-decoration: none;
}










#content {
    width: 550px;
    float: right;
    display: inline;
    margin: 20px 20px 20px 0;
}






.post {
    margin: 0 0 20px 0;
}


#content h1 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 2px 0;
    font-size: 24px;
    color: #993366;
}


#content h1 a {
    text-decoration: none;
}


#content h1 a:hover {
    text-decoration: none;
}


#content h1.pagetitle {
    font-size: 24px;
    color: #993366;
    margin-bottom: 6px;
}






#content h2 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 2px 0;
    font-size: 1.25em;
    color: #808080;
}


#content h3 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 2px 0;
    font-size: 1.1em;
    color: #505050;
}


#content h4 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 2px 0;
    font-size: 1.05em;
    color: #707070;
}








#content .post-date {
    color: #707070;
    font-size: 0.8em;
    margin: 0 0 3px 0;
}


#content p {
    margin: 0 0 12px 0;
    line-height: 140%;
}


#content .post-info {
    color: #808080;
    font-size: 0.8em;
    background: #2A2A2A;
    padding: 4px 8px 4px 8px;
}


#content .post-info a {
    text-decoration: none;
}


#content .post-info a:hover {
    text-decoration: underline;
}


#content .single-date {
    text-align: right;
    font-size: 0.9em;
    color: #707070;
    margin-bottom: 3px;
}








#content .attachment-image {
    text-align: center;
    padding: 10px 0 10px 0;
}








code {
    font: 0.9em 'Courier New', Courier, Fixed;
    color: #D9D27C;
}


blockquote {
    background: #303030;
    padding: 4px 8px 4px 8px;
    margin: 5px 0 15px 0;
    font-size: 0.9em;
}








acronym, abbr, span.caps {
    font-size: 0.9em;
    cursor: help;
}


acronym, abbr {
    border-bottom: 1px dashed #808080;
}








.navigation {
    display: block;
}












#wp-calendar caption {
    text-decoration: none;
}


#wp-calendar #prev a, #wp-calendar #next a {
    font-size: 0.9em;
}


#wp-calendar a {
    text-decoration: none;
}


#wp-calendar caption {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 2px 0;
    font-size: 1.1em;
    color: #D9D27C;
    text-align: center;
}


#wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    text-align: center;
}
    
#wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
}


#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
}


#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
}


#wp-calendar a {
    display: block;
}


#wp-calendar caption {
    text-align: center;
    width: 100%;
}


#wp-calendar td {
    padding: 3px 0;
    text-align: center;
}


#wp-calendar td a {
    color: #D9D27C;
    font-weight: bold;
}


#wp-calendar td.pad:hover {
    background-color: #FFFFFF; 
}












img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


img.alignright {
    padding: 4px;
    margin: 0 0 2px 4px;
    display: inline;
}


img.alignleft {
    padding: 4px;
    margin: 0 4px 2px 0;
    display: inline;
}








.alignright {
    float: right;
}


.alignleft {
    float: left
}


.center {
    text-align: center;
}








#sidebar {
    width: 170px;
    float: left;
    display: inline;
    margin: 20px 0 20px 20px;
}


#sidebar h2 {
    font-family: 'Verdana', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #FFFFFF;
    margin: 0 0 0px 0;
    padding: 0 0 0px 0;
}


#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


#sidebar ul ul {
    margin: 6px 0 15px 8px;
    padding: 0;
}


#sidebar ul ul ul {
    margin-bottom: 6px;
}


#sidebar li {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 0.95em; 
}


#sidebar a {
    text-decoration: none;
}


#sidebar a:hover {
    text-decoration: none;
    color:#FFFFFF
}








h3#comments, h3#respond {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 6px 0;
    font-size: 1.1em;
    background: #2A2A2A;
    color: #B0B0B0;
    padding: 3px 10px 3px 10px;
}


ol.commentlist {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
}


ol.commentlist li {
    margin: 0;
    padding: 0;
    border-top: 8px solid #404040;
    padding: 3px 0 5px 0;
}


ol.commentlist li.alt {
    border-top: 8px solid #303030;
}


ol.commentlist .comment-date {
    width: 35%;
    float: right;
    text-align: right;
    font-size: 0.9em;
    display: inline;
}


ol.commentlist .comment-author {
    width: 55%;
    float: left;
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 3px 0;
    font-size: 1.2em;    
    color: #808080;
    display: inline;
}


ol.commentlist .comment-date a, ol.commentlist .comment-author a {
    text-decoration: none;
}


ol.commentlist .comment-date a:hover, ol.commentlist .comment-author a:hover {
    text-decoration: underline;
}


ol.commentlist .comment-text {
    clear: both;
}








form#commentform textarea {
    width: 100%;
}


form#commentform label {
    font-size: 0.9em;
}












#footer {
    clear: both;
    border-top: 10px solid #2A2A2A;
    padding: 8px 22px 25px 22px;
    color: #808080;
    font-size: 0.85em;
    text-align: center;
}


#footer a {
    text-decoration: none;
}


#footer a:hover {
    text-decoration: underline;
}

Alles anzeigen

Ich hoffe jemand kann mir helfen! :oops:

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem bei der Anpassung eines Designs

Jetzt mitmachen!