Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Rozwijane menu i pozycja absolute
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
chfast
Witam.
Mam rozwijane menu javascript (gotowe, ściągnięte z netu) i jak to bywa w przypadku takich menu trzeba je umieścić na stronie w pozycji absolutnej. Stwarza to w moim projekcje problem: moja strona jest co prawda o stałej szerokości, ale jest wyśrodkowana i niemożliwe jest wtedy umieszczenie menu w porządanym miejscu. Menu jest oparte na divach w pozycji absolutnej. Czy da się takiego diva przypiąć do jakiegoś innego elementu niż body? Moge też zmieniać style dla tych divów i w ogóle cała strukturę xhtml menu. Może za pomocą rozmieszczenia relatywnego da się rozwiązać problem?
Dominik
Cytat
Może za pomocą rozmieszczenia relatywnego da się rozwiązać problem?

Tak, wlasnie do tego jest pozycjonowanie relatywne.
chfast
Cytat
Cytat
Może za pomocą rozmieszczenia relatywnego da się rozwiązać problem?

Tak, wlasnie do tego jest pozycjonowanie relatywne.

No tak. Ale wszystkie te divy trzeba najpierw gdzieś umieścić, aby można było je później przesuwać. Nie wiem jak ja mam znaleźć miejsce na kilkanaście pozycji menu.
Dominik
Cytat
Ale wszystkie te divy trzeba najpierw gdzieś umieścić, aby można było je później przesuwać. Nie wiem jak ja mam znaleźć miejsce na kilkanaście pozycji menu.

Hmm... trudno o dokladna porade bo nie widac jak to wyszstko myglada a jak ma wygladac i jaki jest kod. Ale generalnie moge napisac, ze kazdy element mozna relatywnie spozycjonowac, poniewaz kazdy ma spojego rodzica (oprocz root-elementu jednak on i tak sie nie pozycjonuje z definicji).
chfast
Można wszystkie elementy takiego menu umieścić relatywnie?
Dominik
Cytat
Można wszystkie elementy takiego menu umieścić relatywnie?

Moze nie specjalnie sie przyjrzalem ale na samej stronie nie ma specjalnie pozycjownowania absolutniego (jedynie jest tam gdzie sa znaczniki <noscript> ktore i tak generalnie nie sa wyswietlane przez przegladarki - niejako pomijane) za pomoca CSS ale z drugiej strony kod JS odpowiedzialny za poszczegolne elementy moze w tym aspekcie ingerowac (nie wglebialem sie w pod, poniewaz jest perfidnie dlugi i nie specjalnie czuje sie na sialch modyfikowania czyjegos skomplikowanego kodu), Wiem, ze pewnie nie to chcesz uslyszec ale ja bym nie przesadzal akurat z tym skryptem i napisal sam (lub wziol) cos znacznie czytelniejszego i mniej skomplikowanego, nawet powiedzmy cos co jest oparte o same CSS (bo mozna i dosyc podobne menu zrobic w CSS-ach nie uzywajac JS, co z drugiej strony tez nie jest rozwiazaniem bo IE tego nie wyswietli).
chfast
Dobra, ostatecznie zdecydowałem się na Tigra Menu. Kod tego menu generuje dwa znaczniki dla każdego elementu: a i div. Nie wiem dokładnie co jest wrzucane do znacznika div, bo kod menu jest bardzo skompresowany i ciężko zakumać co się skąd bierze.
[xml:1:1eb3899d28]...
document.write(
'<a id="e..o"
class=".."
href=".."
target=".."
style="position: absolute; top: ..px; width: ..px; height: ..px; visibility: hidden; z-index: ..;"
onclick=".."
onmouseout=".."
onmouseover=".."
onmousedown="..">
<div id="e..i"
class="..">..</div></a>');[/xml:1:1eb3899d28]
Co by nie było w tym skrypcie to zasada działa nia jest prosta: każdy element jest umieszczany absolutnie, a jego pozycja jest obliczana przez skrypt w odniesieniu do elementu nadrzędnego.
Dominik
Cytat
Co by nie było w tym skrypcie to zasada działa nia jest prosta: każdy element jest umieszczany absolutnie, a jego pozycja jest obliczana przez skrypt w odniesieniu do elementu nadrzędnego.

No to w taki sposob napewno nie sprowadzi sie do zmany slowka absolute na relative + ewentualnie inne szczegoly. Trzaba przetobic skrypt (o ile sie da).
chfast
Dzięki Dominik za wszelką pomoc. Ja popróbuje się pobawić z tym relative, ale powiedz mi jedno: czy istnieje jakikolwiek sposób, żeby pozycja absolutna odnosiła się do elementu nadrzędnego, ale innego niż body?
chfast
Chyba znalazłem sposób, żeby zaczepić element w pozycji absolute do innego elementu. Działa na Mozilli, IE 5.5 i Operze 7.23.
[xml:1:a1ed69e1b2]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute</title>
<style type="text/css">
/*<![CDATA[*/
#b { border: 1px solid #0a0; height: 200px; padding: 20px;}
#before, #after { width: 100px; background: #fdf; float: left; }
#main { width: 300px; height: 200px;
float: left;
background: #ffd;
border: 1px solid #f00;
}
#main div { position: absolute; }
#menu { width: 160px; height: 120px;
border: 1px solid #f00; background: #fcc;
left: 30px;
top: 10px; }
/*]]>*/
</style>
</head>
<body>
<div id="b">
<div id="before">before</div>
<div id="main">
<div>
<div id="menu">DIV<br/>position: absolute;<br/>left: 30px;<br/>top: 10px;</div>
</div>
</div>
<div id="after">after</div>
</div>
</body>
</html> [/xml:1:a1ed69e1b2]
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.