Keresés a blogban

2010. január 10.

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

8 megjegyzés:

siccike írta... [Válasz erre...]

Köszönöm az újabb tippeket!! Ami kérdésem lenne: a hasábok közti margót megnöveltem 40px-re, mert szerettem volna szellősebbre, a main wrapper 500, a sidebar wrapper 185, a teljes képernyő 1010px lett. Így viszont eléggé balra csúszottnak tűnik IE-ben az oldal..:-( Jó lenne megtartani a hasábok közti ilyen távolságot, de hogyan tudnám jobban középre csúsztatni az egészet? A fejléc fotója is nagyon balra van, azt is próbáltam jobban középre, de nem jöttem rá sajnos.:-( Nagyítani nem tudom tovább, mert elég homályos lenne, mivel az eredeti felbontás se volt túl nagy.

Vea írta... [Válasz erre...]

Szia!
Köszönöm a segítséget, amit a blogodtól kapok. Volna egy kérdésem. Én most kezdtem a blog írást, és szeretném a középső oldalt megszélesíteni. Megcsináltam annak alapján, ahogy itt le van írva, de nem lett jó, mert a beírás ugyanolyan szélességű maradt, ahogy volt, csak hozzátett egy plusz sávot, üresen, ráadásul egy hosszú szaggatott vonallal elválasztva.
(Rounders4-et használom).
Köszönöm előre is ha tudsz segíteni.

Ízlésszindróma írta... [Válasz erre...]

köszönöm a posztot!!!! bűvészkedek a blogomon;)

Alexandra írta... [Válasz erre...]

Ismét egy jó bejegyzés, aminek hasznát vettem.
Köszönöm.

Berta írta... [Válasz erre...]

És ha nem minima sablon, akkor nem lehet változtatni a hasábok szélességén?
köszi

Berta írta... [Válasz erre...]

Mert ha nem, visszaállítanám az előző sablonomat, ami gőzöm sincs mi volt. :( Azt hiszem Minima, mivel tudtam szélesíteni. Viszont a sablontervezőben nem látom a minimát, hogy állíthatom vissza?

Wise Lady írta... [Válasz erre...]

@Berta
Minden sablont lehet szélesíteni.
De, ha most sablontervezőből választottál új sablont, akkor a legkönnyebb:
Sablontervező - Elrendezés - Szélesség beállítása.
Egy csúszkával kell beállítani.

Berta írta... [Válasz erre...]

Oh, köszi. :) Egy kicsit tudtam ezzel szélesíteni, de még simán lehetne.

Megjegyzés küldése

Text Widget

Magyar nyelvű Blogger helpblog

-