Weboldal tiltása és egy div vertikális középre igazítása
TweetAkkor kezdjünk is hozzá.
Legelőször hozzunk létre egy szimpla html oldalt tesztelés végett.
<html> <head> <title></title> </head> <body> </body> </html>
Ezt akár el is menthetjük divcenter.html néven. Ezután az első lépésként a body tagek közé hozzunk létre egy div-et, aminek az azonosítója bgDisabled legyen.
<div id="bgDisabled"></div>
A következő fontos mozzanat, ennek a divnek a css-el való felruházása. Ehhez a és rész közé gépeljük be az alábbi pár sort.
<style>
body
{
margin: 0;
}
#bgDisabled
{
position: absolute;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter:alpha(opacity= 40);
opacity: 0.4;
-moz-opacity:0.4;
-khtml-opacity: 0.5;
}
</style>(Ha gondoljuk, mentés és megtekintés.)
bgDisabled főbb paramétereinek felsorolása:
- background : a tiltó div hátterének színe
- top, left, width, height : itt megadhatjuk a háttér kezdő pozícióját, ami a bal felső sarok 0. koordinátája. Ezzel tudjuk elérni, hogy a háttér a teljes böngészőablakot lefedje.
- filter, opacity, -moz-opacity, -khtml-opacity : beállítható a háttér szín áttetszöségének értéke. Azért van szükség mind a 4 féle értékadásra, mivel a böngészők még nem egyformán kezeik ezeket a beállításokat.
A következő fontos lépés, magának a középre igazított divnek a létrehozása. Vagyis egy befogadó div létrehozása, amibe egy, a megjeleníteni kívánt tartalommal feltöltött és méretezett div kerül.
Akkor lássunk is hozzá.
Az előzőleg megadott háttér tiltó div után illesszük az alábbi pár sort.
<div id="Container">
<div id="CenterDiv">
</div>
</div>Majd ezeket is ruházzuk fel tulajdonságokkal. mégpedig a következőkkel:
#Container
{
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#CenterDiv
{
margin: 30px auto;
padding: 3px;
width: 200px;
height: auto;
background: #fff;
border: solid 1px #ff0000;
}A Container div végeredményében megegyezik a hátteret tiltó divvel, a különbség csupán annyi, hogy nincs háttérszín és áttetszőség. Felmerülhet a kérdés, hogy akkor miért is van erre szükség?
“Ugyanis egy gyerek elem nem lehet kevésbé áttetsző, mint a szülője (hogy miért nem engedi a CSS, ne kérdezd).” by Warner
És nem utolsó sorban IE-ben csak ezzel a módszerrel állítható a div középre.
lásd: text-align: center tulajdonság
A CenterDiv könnyen testre szabható pár paraméter átírásával.
Ezek a következők:
- margin: (első értéke) a lap tetejétől való távolság.
- padding: a divben lévő tartalom távolsága a div szélétől (minden irányban)
- width: szélesség
- height: auto – automatikusan nyúlik, vagy akár fix magasság is beállítható
- background: háttérszín
- border: keret stílusa vastagsága és színe
Ha ezekkel a módosításokkal is megvagyunk, mentsünk egyet és nézzük meg a böngészőben a megjelenést.
Innentől igazából készen is vagyunk. Mindössze annyit tehetünk még, hogy mind a divet és mind a hátteret feltöltjük némi tartalommal, majd megnézzük a böngészőben.
Ha minden klappol, nem marad más, mint a testreszabása, mindenkinek az egyéni szája-íze szerint.
És akkor a teljes kód:
<html>
<head>
<title>Weboldal teljes méretének tiltása és egy div középre igazítása.</title>
</head>
<style>
body
{
margin: 0;
}
#bgDisabled
{
position: absolute;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter:alpha(opacity= 40);
opacity: 0.4;
-moz-opacity:0.4;
}
#Container
{
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#CenterDiv
{
margin: 30px auto;
padding: 3px;
width: 200px;
height: auto;
background: #fff;
border: solid 1px #ff0000;
}
</style>
<body>
<div id="bgDisabled"></div>
<div id="Container">
<div id="CenterDiv">
bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla..
bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla.. bla..
</div>
</div>
</body>
</html>
Írta: Keveqiah
"Életrajzi információ" ? Hmm, az hosszú lenne. Legyen elég annyi, hogy weboldalak fejlesztésével foglalatoskodom. Ahogy időm engedi, webdesign, fejlesztés, sminkelés (Drupal, Wordpess), fotó buherálás és egyéb nyalánkságok.