Pozícionálási megoldások

[Giraffe1]

Az elsõ kérdés egyszerûbb: bottom: 0;

 

A másodikra elsõ pillantásal csak JS, de talán CSS-sel is meg lehet oldani...

[Gozo]

Sziasztok!

Azt hogyan tudnám megoldani css-sel, hogy adott egy oldal aminek a közepére egy képet rakok és azt szeretném, hogy a képernyő baloldalán egy menüsor lebegjen, de úgy hogy a kép maradjon középen és ez mindenféle képernyő felbontásnál így legyen?

 

Köszi:

Gozo

[payskin]

Csak CSS-bõl szerintem sehogy. Azt tudod csinálni, hogy az egyik div-be berakod a menüt, a másik div-be a képet, és a második div-et JavaScriptbõl bepozícionálod a képernyõ közepére.

[Gozo]

Szia!

Sokáig keresgéltem, de sehol nem találtam megoldást rá. Esetleg beszúrnál ide egy ilyen javascriptes megoldást?

 

Köszi!

Gozo

[payskin]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="hu" lang="hu" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
    <title>Center Image</title>

<style type="text/css">
* { border: 0; padding: 0; margin: 0; }

body 
{ 
    background-color: #eef2f7; 
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    padding: 10px;
}

div#menu
{
    width: 190px;
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

    div#menu ul
    {
        list-style-type: none;
    }

div#centerpic
{
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}
</style>

<script type="text/javascript">
//<![CDATA[

function centerImg()
{
    if (document.getElementById)
    {
        var pic = document.getElementById('centerpic');
        var winW = document.documentElement.clientWidth;
        var winH = document.documentElement.clientHeight;
        var picW = pic.offsetWidth;
        var picH = pic.offsetHeight;
        pic.style.left = (winW-picW)/2 + 'px';
        pic.style.top  = (winH-picH)/2 + 'px';
        pic.style.visibility = 'visible';
    }

    return true;
}

window.onload = centerImg;
//]]>
</script>

</head>

<body>
<div id="menu">
    <ul>
        <li>Menüpont #1</li>
        <li>Menüpont #2</li>
        <li>Menüpont #3</li>
    </ul>
</div>
<div id="centerpic">
    <img src="http://www.pcworld.hu/TRf/pcstudio47/kep01.jpg" width="387" height="135" alt="pic" title="pic" />
</div>
</body>
</html>

Csak a JavaScriptet magyarázom, a többi szerintem egyértelmű.

 

Megnézzük, hogy a böngésző támogatja-e a document.getElementById funkciót. Az összes modern böngésző igen, de biztos, ami biztos. Utána megcímezzük a 'centerpic' id-jű div-et, és ezt belerakjuk a pic nevű változóba. Ezután lekérdezzük az ablak méretét (winH, winW), majd a div méretét, majd pozícionáljuk a divet, és végül bekapcsoljuk, hogy látható legyen.

 

Mindez egy CenterImg nevű függvényben üldögél, amit akkor hívunk meg, ha már a teljes oldal betöltődött (window.onload sor).

[Gozo]

Köszönöm!

Kipróbálom!

[Gozo]

Sziasztok!

 

CSS-sel akarom a következõ oldalszerkezetet megalkotni:

 

- legfelül egy címsor, teljes képernyõ szélességben (magassága mindegy, azt tudom szabályozni);

- legalul egy lábjegyzet teljes képernyõ szélességben (magassága mindegy, azt tudom szabályozni);

- kettõ között 2 hasáb(egyik menû, a másik tartalom) lebegõ pozícionálással , a kettõ töltse ki a teljes képernyõ szélességet;

 

Magát az oldalt meg tudom szerkeszteni CSS-sel, de az alsó lábjegyzet sáv helye függ a két középen lévõ (menû és tartalom) egymás melletti rész tartalmától.

Ha túl sok valamelyik oszlop tartalma, akkor a lábjegyzet már nem látszik görgetés nélkül, ha túl kevés akkor pedig feljebb csúszik a képernyõ aljától.

 

A másik problémám pedig az lenne, hogy ha sikerül is a fenti elrendezést kialakitanom, hogyan tudom megoldani, hogy az a képernyõ méretétõl függetlenül (800*600 vagy 1024*768 stb) mindig csak egy browser ablaknyit foglaljon el.

 

Elõre is köszönöm a segítségetket!

Gozo

Edited October 1, 2007 by h.arpad