Minima sablon szélesítése

Kérdés:

Szeretném szélesebbre széthúzni a hasábokat, egyrészt a teljes sablon két szélét, másrészt a hasábok közti margótávolságot is. Elég sokat próbálkoztam, de nem sikerült megtalálnom a megfelelő megoldást.:-( Ebben tudnál nekem segíteni? Mit és milyen értékekre, a HTML kódokon belül hol kellene átírnom?

Az alap Minima áll a fejlécből, és az alsó részből. Az alsó részen belül van egy fő terület (a posztoké) és egy oldalsáv. A fő terület és az oldalsáv között pedig van egy-egy üres sáv.
A három hasábos Minima annyiban tér el ettől, hogy 2 oldalsáv van, és ennek megfelelően két üres sáv.
Példánkban egy 3 hasábos sablont szélesítünk meg, 900 pixelről 1000 pixelre. Az oldalsávok balról és jobbról vannak, a posztok területe középen. Ha a számítás menetét végignézed, akkor a kéthasábost is könnyedén meg tudod szélesíteni.
Irányítópult-Elrendezés-HTML kód szerkesztése

A szélességet a width mögötti szám adja meg. A dobozokon belül körben üresen maradó hely nagyságát a padding mögötti szám.
Keresd meg ezeket a részeket:

Fejléc doboza:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid #ffffff;
}

Alsó rész legkülső doboza:

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

Ennek a kettőnek egyformának kell lenni. Most 900 pixel, a képernyő 1024 széles (általában), én 1000-1010 értékre írnám át.

Az alsó részen belül:

A középső rész doboza:

#main-wrapper {
width: 460px;
float: left;
margin:0px 10px 0px 0px;
word-wrap: break-word; /* fix for long text 
breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text 
content breaking IE sidebar float */
}

Oldalsáv doboza (mindkettő ilyen széles, egyszerre változik):

.sidebar-wrapper {
width: 205px;
float: left;
margin:0px 10px 0px 0px;
word-wrap: break-word; /* fix for long text 
breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text 
content breaking IE sidebar float */
}

Ha most tanulmányozod, akkor 205+205+460=870 az egész 900.  900-870=30
ennyi marad a két távolságra (15-15) az oldalsávok és a középső rész között. De az outer-wrappernek van még jobbról-balról 10-10 pixel paddingja is, ezért marad 5-5 pixel az üres sávokra.

Tehát pl.:
Az egész legyen 1000 széles.
A két "szünet" legyen nagyobb 20+20=40
Az oldalsávok csökkenjenek egy kicsit: 190+190=380
Mivel az alsó rész legkülső dobozában van 10px padding is (körben), ezért ez a jobb és a baloldalon erre nem engedi rátenni az oldalsávokat. Ez összesen 20px.
Akkor a középső rész szélessége nőjön:
380+40+20=440 1000-440= 560

Tehát példánkban:

#header-wrapper {
width: 1000px;

#outer-wrapper {
width: 1000px;

#main-wrapper {
width: 560px;

.sidebar-wrapper {
width: 195px;

Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady