Länge der seite automatisch anpassen ?!

gaku

Hi

Ich baue gerade nen design um so wich ich es haben will ich muss sagen ich kenne mich nicht wirklich mit CSS aus und habe daher eib paar kleine probleme damit...

Das ist die seite an der ichz gerade baue http://www.getaway-in-bonn.de

so wie man erkennen kann gibt es links ja die Sidebar die ich anders eingefärbt habe (#424242) so wie ihr veleicht auch sieht reicht die sidebar nicht gans bis nach unten...

wo wir auch sochn bei meinem problem währen ich möchste das sich die sidebar Automatisch der seiten größe anpasst also das der balken egal welche auflösung man hatt bis gans nach unten geht...

so jezt ist nur die frage wie mache ich das ? wenn das überhaupt geht ich habe scohn nach CSS befehlen gegoogelt aber das hatt mir nicht weiter geholfen...

hier meine Style.css:

Code

/*
Theme Name: 
Version: 1.0
Author: 
Author URI: 
*/


body {
    position: relative;
    background: url('http://getaway-in-bonn.de/back01.gif');
    height: 100%;
    font-family: Arial;
    text-align:left;
    color:#000;
    font-size: 8pt;
    margin:  0px;
    padding: 0;
    text-align: center;
}


#wrapper {
    position: left;
    height: 100%;
    width: 700px;
    border-left: 10px solid black;
    border-right: 10px solid black;
    margin: 0 auto;
    background-color: #000;
} 


#insideWrapper {
    position: relative;
    top: 0px;
    height: 100%;
    width: 700px;
    margin: 0px;
    background-color: #858585;
    text-align: left;
}
#insideWrapper:after{
content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}




.post {
    position: relative;
    top: 0px;
    width: 550px;
    left: 10px;
    margin: 0px;
    background-color: #858585;
    text-align: left;
}


#content {
    width: 420px;
    margin-left: 110px;
    background-color: #858585;
    text-align: left;
}


#sidebar {
    position: left;
    float: left;      
        height: auto;    
        width: 100px;
    left: 40px;
    padding: 10px;
    background-color: #424242;
    text-align: left;
    font-family: Arial;
    color: #000;
    font-size: 7.5pt;
    line-height: 11pt;


    text-transform: uppercase;
} 


.left {
    float: left;
    margin: 0px 10px 0px 10px;
}


.right {
    float: right;
    margin: 0px 10px 0px 10px;
}


#masthead {
    position: relative;
    top: 0px;
    background: url('images/masthead.gif');
     width: 700px;
     height: 225px;
    margin: 0px;
    margin-top: 0px;
}


.centeredImage {
    text-align:center;
    margin-top:10px;
    margin-bottom:0px;
    padding:0px;
}


#footer {
    font-size: 7pt;
    position: relative;
    color: #fff;
    top: 5px;
    width: 700px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
}


#footer a {
    color: #fff;
}


#footer a:visited {
    color: #fff;
}


#footer a:hover {
    color: #ff3333;
    border: 0px;
}
 


.sep {
    position: left;
        background: url('images/balken.jpg');     
        width: 416px;
    height: 18px;
    margin: 0px;
    padding: 0px;
    left: 132px;
    text-align: center;
}


#sidebar a {
    color: #000;
}


#sidebar a:visited {
    color: #000;
}


#sidebar a:hover {
    color: #999;
}


.commentBox {
    position: relative;
    margin: 0 auto;
    width: 90%; 
    background-color: #f5f5f5; 
    text-align: left; 
    border: 1px solid #999; 
    padding: 5px;
}


.cite {
    font-size: 7pt;
    color:#666;
}


code {
    font-family: Courier New, Verdana;
    text-align:left;
    color:#666;
    font-size: 8pt;
}


input {
    border: 1px solid #333333;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;
    padding: 0px;
}


h2 {
    color: #666;
    font-size: 14px;
    text-align: left;
}


ul {
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
}


li {
    list-style-type: none;
    margin-left: 0px;
}


blockquote, blockquote p {
    text-indent: 0px;
    margin-bottom: 7px;
    color: #666;
}


.footerLink {
    color: #666;
    text-decoration: underline;
}


a.footerLink {
    color: #666;
    text-decoration: underline;
}


a.footerLink:visited {
    color: #666;
    text-decoration: underline;
}


a.footerLink:hover {
    color: #999;
    text-decoration: underline;
}


.title {
    font-family: 'Arial Black';
    color: #333;
    font-size: 7.5pt;
    text-transform: uppercase;
}


a.title {
    color: #c;
}


a.title:visited {
    color: #333;
}


a.title:hover {
    color: #999;
    border: 0px;
}


#blogTitle {
    position: relative;
    top: 50px;
    left: 20px;
    font-family: 'Arial Black';
    color: #000000;
    font-size: 8pt;
    text-transform: uppercase;
    text-align: left;
}


#blogTitle a {
    color: #333;
}


#blogTitle a:visited {
    color: #333;
}


#blogTitle a:hover {
    color: #ff3333;
    border: 0px;
}


.commentPos {
    font-family: 'Arial Black';
    font-size: 7pt;
    position: relative;
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
}


a.commentPos {
    font-family: 'Arial Black';
    color: #333333;
}


a.commentPos:visited {


    color: #333333;
}


a.commentPos:hover {
    color: #000;
    border: 0px;
}


a {
    color: #333333;
    text-decoration: none;
}


a:visited {
    color: #000000;
    text-decoration: none;
}


a:hover {
    color: #394651;
    text-decoration: none;
    border-bottom: 1px dashed #394651;
}

Alles anzeigen

währe nett wenn mir da jemand weiter helfen könnte mfg Gaku

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

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Länge der seite automatisch anpassen ?!

Jetzt mitmachen!