Seitenbreite vergrößern und Boxen anpassen

1 krieger98

Ich möchte einige Änderungen auf meiner Webseite vornehmen:
http://www.fahrrad-workshop-sprockhoevel.de/
Die Seitenbreite möchte ich ändern auf 1165 pixel. Ist jetzt 972 pixel.
Der Wrapper sollte am linken Seitenrand mit einem Abstand von 10 Pixel plaziert sein. Die BOX "Main" sollte in der Größe bleiben.
Was muss ich in den anderen Boxen noch ändern damit diese richtig (links) plaziert werden? Auf der linken Seiten sollen Werbeboxen hin.

#wrapper {
overflow: auto;
margin: 10px auto;
padding: 4px;
width: 972px;
border: 1px solid #333;
background-color:#B0C4DE;
}
#wrapper > aside {
float: left;
padding-top: 2px;
width: 180px;
}
/* Box in Sidebar */
#wrapper > aside > * {
padding: 3px;
width: 168px;
background: #C7D2E0;
border: 0px solid #333;
border-radius: 6px;
}
--------------------------------
#main {
left: 188px;
width: 792px;
position: absolute;
}

2 Jörg Kruse

Die Seitenbreite möchte ich ändern auf 1165 pixel. Ist jetzt 972 pixel.

Was ist mit Seitenbreite gemeint - die Breite von #wrapper?

Der Wrapper sollte am linken Seitenrand mit einem Abstand von 10 Pixel plaziert sein.

Also soll #wrapper nicht mehr zentriert werden? das erreichst du, indem du die Margin-Angabe von '10px auto' in '10px' änderst:

#wrapper {
/* ... */
margin: 10px;
/* ... */
}

... dann beträgt auch der horizontale Abstand 10px

3 krieger98

Ich habe das Ganze soweit hinbekommen nur ein Fehler ist noch vorhanden.
Was muss ich noch ändern das sich der #Wrapper und die #Sidebar an die Seitenlänge von #Main" anpasst?
http://s201291267.online.de/

4 Jörg Kruse

Ich habe das Ganze soweit hinbekommen nur ein Fehler ist noch vorhanden.

Ich sehe da nicht nur einen Fehler. Die Navigation überdeckt bei mir teilweise die Werbung. Ich nehme an, dass du die Seite nur mit einer Bildschirmbreite getestet hast? Schieb mal das Browserfenster zusammen, dann siehst du wie sich die Seitenelemente in- bzw. auseinanderverschieben.

Was muss ich noch ändern das sich der #Wrapper und die #Sidebar an die Seitenlänge von #Main" anpasst?

Das 'position: absolute' wieder entfernen - damit hast du #main nämlich aus dem Elterncontainer rausgehoben. Zum einen orientiert es sich jetzt in der Position nicht mehr an #wrapper, zum anderen füllt es diesen auch nicht mehr aus, so dass sich #wrapper in der Höhe nicht mehr an das Kindelement #main anpasst.

Wenn du #wrapper inklusive der Kindelemente #main und #sidebar nicht mehr zentrieren, sondern stattdessen am linken Rand des Browserfenster ausrichten möchtest, brauchst du wie gesagt nur dessen margin Wert von '10px auto' in '10px' ändern!

nach oben

Seitenbreite vergrößern und Boxen anpassen

Beitrag schreiben (als Gast)

Verwandte Themen