HTML oldalon fix pozicióban a fejléc és az alsórész CSS segítségével
Kategóriák CSS, Programozás, webfejlesztés, XHTML, HTML
17-10-2007
2
Nemrég belefutottam egy olyan problémába, hogy egy weblap flashes fejlécét fixre kellett tenni, vagyis ne mozogjon együtt a tartalommal. Legegyszerűbb megoldás a framek (keretek) használata lett volna, de mivel az egyáltalán nem keresőbarát, így szóba se jöhetett. A DIV layerek mellett döntöttem és ez alapján mutatom be, hogyan lehet nagyon egyszerűen megoldani a dolgot. Plusz még hozzátettem egy alsórészt is, ami fixen áll. Az egészben nagy segítségemre volt a CSS, utólag is köszönet érte … kérem tapsoljuk meg.
Az egész lényege, hogy a HTML-nek kikapcsoljuk a görgetősávját, a felső és alsó részt fixre beállítjuk a position absululttal, amiknek a szélessége a görgetősáv miatt 100% de 17 pixeles jobb margóval, így nem lóg rá a görgetősávra. A hasznos rész DIV-ét szélességben és magasságban is 100%-ra tesszük és ezután ennek a tartalmi résznek adunk egy oldalsó görgetősávot. Internet Explorer és Firefox alatt is működő dologról van szó.
Nagyon fontos momentum az, hogy a html, body tagnak 100% magasságot kell adni, e nélkül IE-ben nem fog megjelenni a tartalmi résznél a görgetősáv oldalt.
html, body {
height: 100%;
}
Lássuk:
HTML eléggé egyszerű felépítésű:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FIX fejléc</title>
<link rel="stylesheet" href="stilus.css" />
</head>
<body>
<div id="fejlec">
<div id="fejlec_belso">| <a href="#">menüpont 1</a> | <a href="#">menüpont 2</a> | <a href="#">menüpont 3</a> | <a href="#">menüpont 4</a> | <a href="#">menüpont 5</a> | </div>
</div>
<div id="tartalomhely">
<div id="tartalomhely_hasznos">
<p>Tartalom gördül csak!</p>
</div>
</div>
<div id="alsoresz">
<div id="alsoresz_belso">Fixált alsórész</div>
</div>
</body>
</html>
CSS-ben van a lényeg:
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7D6E37;
}
html, body {
margin: 0px;
padding: 0px;
/* eltuntetjuk a fo gorgetosavokat */
overflow:hidden;
/* ez nagyon fontos beallitas IE miatt */
height: 100%;
}
/* Fejlec fixalasa */
#fejlec {
display:block;
z-index: 10;
left: 0px;
top: 0px;
overflow: hidden;
width: 100%;
position: absolute;
height: 40px;
}
#fejlec_belso {
display:block;
/* jobboldali margo 17 pixel ami altal nem log ra
a gorgetosavra a fejlec szele */
margin-right: 17px;
padding: 5px;
background-color:#CCCCCC;
text-align:center;
}
#tartalomhely {
z-index: 1;
/* biztos ami biztos alapon alul ne legyen gorgetosav */
overflow-x:hidden;
/* oldalso gorgetosav lathato ha a tartalom tullog */
overflow-y:auto;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: block;
}
#tartalomhely_hasznos {
text-align: justify;
width: 950px;
/* a fejlec es az alsoresz magassagat bele kell
szamolni itt a margonal, hogy ne logjon
a tartalom egyik ala se */
margin: 50px auto 50px auto;
background-color:#FFFFDF;
}
/* Alsoresz fixalasa */
#alsoresz {
display:block;
z-index: 11;
bottom: 0px;
overflow: hidden;
width: 100%;
position: absolute;
height: 30px;
padding: 0px;
margin: 0px;
}
#alsoresz_belso {
height: 30px;
/* jobboldali margo 17 pixel ami altal nem log ra
a gorgetosavra az alsoresz szele */
margin-right: 17px;
padding: 5px;
background-color:#006600;
color:#FFFFFF;
text-align:center;
}
A minta megtekintése – A forrásfájlok letöltése
sziasztok
olyan kérdésem lenne, hogy ha nem statikus a weboldal teljes egészében és a div-et php-n post-oláskor akarom megtenni, akkor erre van lehetőség?
köszi
Sajnos a kerdest nem igazan ertem.