Sidebar an die richtige Stelle (CSS)

Judil

Ich hab mal wieder ein problem mit der Sidebar, die soll an die richtige Stelle und zwar nach rechts, das ist die unter dem Content und läuft bei mir unter Obar.

CSS-Datei:

Code

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    margin: 0;
    padding: 0;
}


body{
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
    background: url(images/bg.jpg);
    color: #ccc;
}


h1, h2, h3, h4, h5, h6{
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 14px;
}


a{
    text-decoration: underline;
    color: #fff;
}
a:link {
        text-decoration:none;
}


a:visited{
    text-decoration: none;
}


a:hover{
    text-decoration: none;
}


a img, img{
    border: 0;
}


abbr, acronym{ border: 0; }


address, dl, p{ padding: 15px 0 0; }


blockquote{
    margin: 15px 0 0;
    background: #222;
    color: #fff;
}


blockquote p{ padding: 15px; }


blockquote blockquote{
    margin: 15px;
    background: #333;
    color: #fff;
}


code{
    background: #222;
}


dt{ font-weight: bold; }


dd{ padding: 0 0 0 15px; }


hr{
    clear: both;
    margin: 15px 15px 5px 15px;
    border: 0;
    height: 1px;
    text-align: left;
    background: #222;
    color: #222;
}


/* Modified image styles of WordPress Default Theme, Kubrick */


.entry img{
    border: 2px solid white;
}


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


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


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


img.wp-smiley{
    border: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
}


.alignright {
    float: right;
}


.alignleft {
    float: left
}


/* end image styles */


small{
    font-size: 11px;
}


pre{
    width: 90%;
}


input, textarea{
    font-family: Arial, Helvetica, Georgia, sans-serif;
    font-size: 12px;
    padding: 2px;
}


input#s, input#author, input#email, input#url, textarea#comment{
    border: 1px solid #393939;
    background-color: #000;
    padding: 3px;
    color: #fff;
}


input#author, input#email, input#url{
    margin: 0 5px 0 0;
}


#saranwrap{
    margin: 0 auto;
    width: 761px;
    text-align: left;
    vertical-align: top;
}


.airbubble{
    padding: 5px;
    background: #fff;
}


#header{
    width: 751px;
    height: 113px;
    background: #000 url(images/bg_header.gif) no-repeat;
    clear: both;
}


#header h1{
    padding: 35px 0 0 20px;
    font-family: Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 36px;
    color: #fff;
        text-decoration: none;
}


#top-menu{
    padding: 11px 0 10px 0;
    background: #000 url(images/bg-navbar.gif) repeat-x;
}


#top-menu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}


#top-menu ul li{
    display: inline;
    padding: 0 10px;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}


#top-menu a{
    text-decoration: none;
}


#top-menu a:hover{
    text-decoration: underline;
}


#banner{
    float: left;
    margin: 5px 0;
    width: 751px;
    height: 250px;
    overflow: hidden;
    background: #fff url(images/splash.jpg) no-repeat;
}


#page{
    clear: both;
    float: left;
    width: 751px;
    background: #000;
    color: #ccc;
}


.pagecap{
    padding: 19px 20px;
    font-family: Arial;
    font-size: 18px;
    background: #036FA9 url(images/bg-pagecap.gif) no-repeat;
    color: #fff;
}


#sidebar{
    float: left;
    width: 160px;
}


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


#sidebar ul li h2{
    margin-bottom: 1px;
    padding: 11px 10px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #de0202;
    background: #222 url(images/bg-sidebar-h2.jpg) no-repeat;
}


#sidebar ul ul{
    margin: 0;
    padding: 0 0 20px;
    background: #000 url(images/bg-sidebar-ul-ul-li.jpg) no-repeat;
}


#sidebar ul ul li{
    padding: 6px 10px 0 10px;
    font-size: 11px;
    line-height: 18px;
}


#sidebar ul ul ul{
    padding: 0;
    background-color: transparent;
    background-image: none;
}










#obar ul ul ul{
        
    padding: 0;
    background-color: transparent;
    background-image: none;
}


.narrowcolumn{
    float: left;
    margin-top: 5px;
    width: 421px;
    background: #1f1f1f url(images/bg-narrowcolumn.png) no-repeat;
}


.narrowcolumn-footer{
    clear: both;
    width: 421px;
    height: 18px;
    background: #1f1f1f url(images/bg-narrowcolumn-footer.gif) no-repeat;
}


#obar{
    float: left;
    width: 160px;
}


#obar ul{
        
    margin: 5px 5px 0;
    padding: 0;
    list-style-type: none;
}






#obar ul li h2{
        margin-bottom: 1px;
    padding: 11px 10px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #de0202;
    background: #222 url(images/bg-sidebar-h2.jpg) no-repeat;
}


#obar ul ul{
        
    margin: 0;
    padding: 0 0 20px;
    background: #000 url(images/bg-sidebar-ul-ul-li.jpg) no-repeat;
}


#obar ul ul li{
        
    padding: 6px 10px 0 10px;
    font-size: 11px;
    line-height: 18px;
}


.maincol{
    float: left;
    width: 421px;
}


.maincol-padding{
    padding: 10px 10px 0;
}


.maincol .site-title{
    padding: 10px 10px 8px;
    border-bottom: 3px solid #222;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ccc;
}


.subscribe{
    margin: 0 0 1px;
    padding: 6px 10px 7px;
    border-bottom: 3px solid #1f1f1f;
    font-size: 11px;
    background: url(images/feed-icon.png)  10px 6px no-repeat;
}


.subscribe a{
    padding-left: 22px;
    color: #aaa;
}


.post{
    margin-bottom: 10px;
    padding: 10px;
    background: #111;
}


.post h2{
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
}


.post h2 a{
    color: #de0202;    
}


.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
    border: 0;
    padding: 15px 0 0;
    background: none;
}


.entry h1{
    font-size: 24px;
    font-weight: normal;
    line-height: 30px;
}


.entry h2{font-size: 14px;}


.entry h3{}


.entry  h4{ font-size: 16px; }


.entry h5{ font-size: 14px; }


.entry h6{ font-size: 11px; font-weight: normal; }


.entry{
    line-height: 24px;
    color: #aaa;
}


.postmetadata{
    margin: 10px 0 0;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 18px;
    background: #1c1c1c;
    color: #ccc;
}


.postmetadata a{
    color: #de0202;
}


.browse{
    padding: 0 10px;
    font-size: 11px;
    line-height: 18px;
    background: #1f1f1f;
}


/* comments template */


.comments-template{
    margin: 10px 0 0;
    border-top: 1px solid #222;
}


.comments-template ol{
    margin: 0;
    padding: 0 0 20px;
    list-style: none;
}


.comments-template ol li{
    margin: 15px 0 0;
    padding: 5px 0 15px;
    line-height: 24px;
    line-height: 24px;
    border-bottom: 1px solid #222;
}


.commentmetadata{
    font-size: 12px;
}


.comments-template p.nocomments{
    padding: 0;
}


.comments-template textarea{
    width: 90%;
}


/* end comments template */


#footer{
    clear: both;
    width: 751px;
    padding: 5px 0;
    background: #000;
}


#footer p{
    margin: 0 5px;
    padding: 20px 10px;
    font-size: 6pt;
    line-height: 18px;
    background: #111 url(images/bg-footer.jpg) no-repeat;
}

Alles anzeigen

Danke schonmal

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

Judil

Hat denn keiner eine Idee, ich bin am verzweifeln.
DAnke

perryzelda

deine obar liegt innerhalb der narrowcolumn und heisst auch sidebar. ich nehme aber an, das soll ausserhalb liegen. Und wenn es die id "sidebar" hat, dann kann es gar nicht funktionieren.
also auf id=Obar umbenennen, den obar-div-container oberhalb von narrowcolum notieren und im stilesheet auf float:right ändern. dann ggf. die Breite der obar anpassen

Judil

Danke, aber klappt leider immernoch nicht ganz, immerhin ist die Obar jetzt rechts, aber immernoch unterhalb des Contents.
Ich verzweifele echt langsam, bin ein kleiner Fehler, aber je länger man sich damit beschäftigt umso blinder wird man :D

So sieht die CSS jetzt aus:

Code

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
    margin: 0;
    padding: 0;
}


body{
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
    background: url(images/bg.jpg);
    color: #ccc;
}


h1, h2, h3, h4, h5, h6{
    font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 14px;
}


a{
    text-decoration: underline;
    color: #fff;
}
a:link {
        text-decoration:none;
}


a:visited{
    text-decoration: none;
}


a:hover{
    text-decoration: none;
}


a img, img{
    border: 0;
}


abbr, acronym{ border: 0; }


address, dl, p{ padding: 15px 0 0; }


blockquote{
    margin: 15px 0 0;
    background: #222;
    color: #fff;
}


blockquote p{ padding: 15px; }


blockquote blockquote{
    margin: 15px;
    background: #333;
    color: #fff;
}


code{
    background: #222;
}


dt{ font-weight: bold; }


dd{ padding: 0 0 0 15px; }


hr{
    clear: both;
    margin: 15px 15px 5px 15px;
    border: 0;
    height: 1px;
    text-align: left;
    background: #222;
    color: #222;
}


/* Modified image styles of WordPress Default Theme, Kubrick */


.entry img{
    border: 2px solid white;
}


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


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


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


img.wp-smiley{
    border: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
}






/* end image styles */


small{
    font-size: 11px;
}


pre{
    width: 90%;
}


input, textarea{
    font-family: Arial, Helvetica, Georgia, sans-serif;
    font-size: 12px;
    padding: 2px;
}


input#s, input#author, input#email, input#url, textarea#comment{
    border: 1px solid #393939;
    background-color: #000;
    padding: 3px;
    color: #fff;
}


input#author, input#email, input#url{
    margin: 0 5px 0 0;
}


#saranwrap{
    margin: 0 auto;
    width: 761px;
    text-align: left;
    vertical-align: top;
}


.airbubble{
    padding: 5px;
    background: #fff;
}


#header{
    width: 751px;
    height: 113px;
    background: #000 url(images/bg_header.gif) no-repeat;
    clear: both;
}


#header h1{
    padding: 35px 0 0 20px;
    font-family: Arial, Helvetica, Georgia, Sans-Serif;
    font-size: 36px;
    color: #fff;
        text-decoration: none;
}


#top-menu{
    padding: 11px 0 10px 0;
    background: #000 url(images/bg-navbar.gif) repeat-x;
}


#top-menu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}


#top-menu ul li{
    display: inline;
    padding: 0 10px;
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}


#top-menu a{
    text-decoration: none;
}


#top-menu a:hover{
    text-decoration: underline;
}


#banner{
    float: left;
    margin: 5px 0;
    width: 751px;
    height: 250px;
    overflow: hidden;
    background: #fff url(images/splash.jpg) no-repeat;
}


#page{
    clear: both;
    float: left;
    width: 751px;
    background: #4b103b;
    color: #ccc;
}


.pagecap{
    padding: 19px 20px;
    font-family: Arial;
    font-size: 18px;
    background: #036FA9 url(images/bg-pagecap.gif) no-repeat;
    color: #fff;
}






#sidebar{
    float: left;
    width: 160px;
}


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


#sidebar ul li h2{
    margin-bottom: 1px;
    padding: 11px 10px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #de0202;
    background: #222 url(images/bg-sidebar-h2.jpg) no-repeat;
}


#sidebar ul ul{
    margin: 0;
    padding: 0 0 20px;
    background: #000 url(images/bg-sidebar-ul-ul-li.jpg) no-repeat;
}


#sidebar ul ul li{
    padding: 6px 10px 0 10px;
    font-size: 11px;
    line-height: 18px;
}


#sidebar ul ul ul{
    padding: 0;
    background-color: transparent;
    background-image: none;
}


#obar{
    float: right;
    width: 160px;
}


#obar ul{
        
    margin: 5px 5px 0;
    padding: 0;
    list-style-type: none;
}






#obar ul li h2{
        margin-bottom: 1px;
    padding: 11px 10px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #de0202;
    background: #222 url(images/bg-sidebar-h2.jpg) no-repeat;
}


#obar ul ul{
        
    margin: 0;
    padding: 0 0 20px;
    background: #000 url(images/bg-sidebar-ul-ul-li.jpg) no-repeat;
}


#obar ul ul li{
        
    padding: 6px 10px 0 10px;
    font-size: 11px;
    line-height: 18px;
}




#obar ul ul ul{
        
    padding: 0;
    background-color: transparent;
    background-image: none;
}




.narrowcolumn{
    float: left;
    margin-top: 5px;
    width: 421px;
    background: #661650 url(images/bg-narrowcolumn.png) no-repeat;
}


.narrowcolumn-footer{
    clear: both;
    width: 421px;
    height: 18px;
    background: #661650 url(images/bg-narrowcolumn-footer.png) no-repeat;
}






.maincol{
    float: left;
    width: 421px;
}


.maincol-padding{
    padding: 10px 10px 0;
}


.maincol .site-title{
    padding: 10px 10px 8px;
    border-bottom: 3px solid #222;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ccc;
}


.subscribe{
    margin: 0 0 1px;
    padding: 6px 10px 7px;
    border-bottom: 3px solid #1f1f1f;
    font-size: 11px;
    background: url(images/feed-icon.png)  10px 6px no-repeat;
}


.subscribe a{
    padding-left: 22px;
    color: #aaa;
}


.post{
    margin-bottom: 10px;
    padding: 10px;
    background: #4b103b;
}


.post h2{
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
}


.post h2 a{
    color: #de0202;    
}


.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
    border: 0;
    padding: 15px 0 0;
    background: none;
}


.entry h1{
    font-size: 24px;
    font-weight: normal;
    line-height: 30px;
}


.entry h2{font-size: 14px;}


.entry h3{}


.entry  h4{ font-size: 16px; }


.entry h5{ font-size: 14px; }


.entry h6{ font-size: 11px; font-weight: normal; }


.entry{
    line-height: 24px;
    color: #aaa;
}


.postmetadata{
    margin: 10px 0 0;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 15px;
    background: url(images/bg-postmetadata.gif) no-repeat;
    color: #ccc;
}


.postmetadata a{
    color: #de0202;
}


.browse{
    padding: 0 10px;
    font-size: 11px;
    line-height: 18px;
    background: #1f1f1f;
}


/* comments template */


.comments-template{
    margin: 10px 0 0;
    border-top: 1px solid #222;
}


.comments-template ol{
    margin: 0;
    padding: 0 0 20px;
    list-style: none;
}


.comments-template ol li{
    margin: 15px 0 0;
    padding: 5px 0 15px;
    line-height: 24px;
    line-height: 24px;
    border-bottom: 1px solid #222;
}


.commentmetadata{
    font-size: 12px;
}


.comments-template p.nocomments{
    padding: 0;
}


.comments-template textarea{
    width: 90%;
}


/* end comments template */


#footer{
    clear: both;
    width: 751px;
    padding: 5px 0;
    background: #4b103b;
}


#footer p{
    margin: 0 5px;
    padding: 20px 10px;
    font-size: 6pt;
    line-height: 18px;
    background: #111 url(images/bg-footer.jpg) no-repeat;
}

Alles anzeigen

perryzelda

die obar ist noch immer innerhalb der narrowcolumn, die muss da raus sonst wird das nie was.
wichtig ist, dass ein float:right element im code vor den anderen elementen kommt.
also:
1. obar
2. sidebar
3. narrowcolumn

Judil

Kannst du mir das einmal in der CSS-Datei ändern, komme gerade nicht mit.
Danke

perryzelda

das betrifft nicht die css datei sondern dein php-seiten-template.
dort sind die beiden elemente verschachtelt.
d.h. obar liegt innerhalb der narrowcolumn. die ist aber nur in der mitte. also muss die obar da raus.

Muster dazu:

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Judil

Danke hat wunderbar geklappt, ja ich war blind :D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar an die richtige Stelle (CSS)

Jetzt mitmachen!