Avatar billede motyl Nybegynder
09. oktober 2005 - 15:50 Der er 8 kommentarer

Positionering med absolute

Hej Eksperter.

Jeg sidder og roder med layers, men det driller. Jeg er ved at bygge en menu op til en hjemmeside, hvor der ved mouse-over på link'ene skal dukke et lag op i en celle.

PROBLEMET er dog at lagenes placcering flytter sig i forhold til vinduets størrelse, og der er ikke planen.

Her er lidt at se på:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><img src="grafik/menu_left.gif" width="21" height="30" border="0" alt=""></td>
    <td><a href="<?echo $PHP_SELF;?>?side=news" onMouseOut="MM_showHideLayers('news','','hide');" onMouseOver="MM_showHideLayers('news','','show');"><img src="grafik/news.gif" width="112" height="30" border="0" alt="[ News ]"></a></td>
    <td><a href="<?echo $PHP_SELF;?>?side=show" onMouseOut="MM_showHideLayers('show','','hide');" onMouseOver="MM_showHideLayers('show','','show');"><img src="grafik/show.gif" width="113" height="30" border="0" alt="[ Show ]"></a></td>
    <td><a href="<?echo $PHP_SELF;?>?side=bio" onMouseOut="MM_showHideLayers('bio','','hide');" onMouseOver="MM_showHideLayers('bio','','show');"><img src="grafik/adversary.gif" width="113" height="30" border="0" alt="[ Adversary ]"></a></td>
    <td><a href="<?echo $PHP_SELF;?>?side=pic" onMouseOut="MM_showHideLayers('pic','','hide');" onMouseOver="MM_showHideLayers('pic','','show');"><img src="grafik/pic.gif" width="113" height="30" border="0" alt="[ Picture ]"></a></td>
    <td><a href="<?echo $PHP_SELF;?>?side=guest" onMouseOut="MM_showHideLayers('guest','','hide');" onMouseOver="MM_showHideLayers('guest','','show');"><img src="grafik/guest.gif" width="113" height="30" border="0" alt="[ Guest book ]"></a></td>
    <td><a href="<?echo $PHP_SELF;?>?side=contact" onMouseOut="MM_showHideLayers('contact','','hide');" onMouseOver="MM_showHideLayers('contact','','show');"><img src="grafik/contact.gif" width="115" height="30" border="0" alt="[ Contact Adversay ]"></a></td>
    <td><img src="grafik/menu_right.gif" width="20" height="30" border="0" alt=""></td>
</tr>
<tr>
    <td colspan="8">
    <?if($side=="news"){?><img src="grafik/menu_news_set.gif" width="720" height="9" border="0"><?}?>
    <?if($side=="show"){?><img src="grafik/menu_show_set.gif" width="720" height="9" border="0"><?}?>
    <?if($side=="bio"){?><img src="grafik/menu_adv_set.gif" width="720" height="9" border="0"><?}?>
    <?if($side=="pic"){?><img src="grafik/menu_pic_set.gif" width="720" height="9" border="0"><?}?>
    <?if($side=="guest"){?><img src="grafik/menu_guest_set.gif" width="720" height="9" border="0"><?}?>
    <?if($side=="contact"){?><img src="grafik/menu_contact_set.gif" width="720" height="9" border="0"><?}?>
   
    <?if($side!="news"){?><div id="news" style="position:absolute; left:141px; top:188px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_news_over.gif" width="720" height="9" border="0" alt=""></div><?}?>
    <?if($side!="show"){?><div id="show" style="position:absolute; left:141px; top:188px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_show_over.gif" width="720" height="9" border="0" alt=""></div><?}?>
    <?if($side!="bio"){?><div id="bio" style="position:absolute; left:141px; top:188px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_adv_over.gif" width="720" height="9" border="0" alt=""></div><?}?>
    <?if($side!="pic"){?><div id="pic" style="position:absolute; left:141px; top:188px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_pic_over.gif" width="720" height="9" border="0" alt=""></div><?}?>
    <?if($side!="guest"){?><div id="guest" style="position:absolute; left:141px; top:188px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_guest_over.gif" width="720" height="9" border="0" alt=""></div><?}?>
    <?if($side!="contact"){?><div id="contact" style="position:absolute; left:141px; top:188px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_contact_over.gif" width="720" height="9" border="0" alt=""></div><?}?>
   
    </td>
</tr>
</table>
Avatar billede roenving Novice
09. oktober 2005 - 16:11 #1
Kunne du ikke prøve at vise koden uden php-tingene (f.eks. Vis kilde i browseren ?-)

Men hvis tingene hører til i en tabel, er det sikkert heller ikke lige absolut positionering, du skal bruge !-)
Avatar billede motyl Nybegynder
09. oktober 2005 - 16:22 #2
Ok, selve div-tagget ser sådan ud:

<div id="guest" style="position:absolute; left:141px; top:187px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_guest_over.gif" width="720" height="9" border="0" alt=""></div>

...og det er placeret inde i en <td></td>
Avatar billede olebole Juniormester
09. oktober 2005 - 17:17 #3
<ole>

Et absolut positioneret element placerer sig i forhold til det første omkransende element, der er positioneret.
Findes et sådan ikke, placerer det sig i forhold til body-elementet.

Det er som oftest en skidt idé at positionere sit grundlayout absolute, men da jeg ikke ved, hvordan resultatet skal se ud, er det vanskeligt at råde  :)

/mvh
</bole>
Avatar billede motyl Nybegynder
09. oktober 2005 - 17:36 #4
Du kan se et billede ag menuen her: http://www.adversary.dk/test/grafik/menu.gif

Sagen er at når jeg fører musen over linket "adversary" skal div-taggets visibility sættes til "show".

Læg mærke til at det orange grafikelement på billeder skal vises oven på det røde grafikelement. Har du nogle konkrete forslag til hvad jeg skal gøre?

Her er HTML'en:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><img src="grafik/menu_left.gif" width="21" height="30" border="0" alt=""></td>
    <td><a href="/adversary/index2.php?side=news" onMouseOut="MM_showHideLayers('news','','hide');" onMouseOver="MM_showHideLayers('news','','show');"><img src="grafik/news.gif" width="112" height="30" border="0" alt="[ News ]"></a></td>
    <td><a href="/adversary/index2.php?side=show" onMouseOut="MM_showHideLayers('show','','hide');" onMouseOver="MM_showHideLayers('show','','show');"><img src="grafik/show.gif" width="113" height="30" border="0" alt="[ Show ]"></a></td>
    <td><a href="/adversary/index2.php?side=bio" onMouseOut="MM_showHideLayers('bio','','hide');" onMouseOver="MM_showHideLayers('bio','','show');"><img src="grafik/adversary.gif" width="113" height="30" border="0" alt="[ Adversary ]"></a></td>
    <td><a href="/adversary/index2.php?side=pic" onMouseOut="MM_showHideLayers('pic','','hide');" onMouseOver="MM_showHideLayers('pic','','show');"><img src="grafik/pic.gif" width="113" height="30" border="0" alt="[ Picture ]"></a></td>
    <td><a href="/adversary/index2.php?side=guest" onMouseOut="MM_showHideLayers('guest','','hide');" onMouseOver="MM_showHideLayers('guest','','show');"><img src="grafik/guest.gif" width="113" height="30" border="0" alt="[ Guest book ]"></a></td>
    <td><a href="/adversary/index2.php?side=contact" onMouseOut="MM_showHideLayers('contact','','hide');" onMouseOver="MM_showHideLayers('contact','','show');"><img src="grafik/contact.gif" width="115" height="30" border="0" alt="[ Contact Adversay ]"></a></td>
    <td><img src="grafik/menu_right.gif" width="20" height="30" border="0" alt=""></td>
</tr>
<tr>
    <td colspan="8">
                        <img src="grafik/menu_contact_set.gif" width="720" height="9" border="0" align="top">   
    <div id="news" style="position:absolute; left:141px; top:187px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_news_over.gif" width="720" height="9" border="0" alt=""></div>    <div id="show" style="position:absolute; left:141px; top:187px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_show_over.gif" width="720" height="9" border="0" alt=""></div>    <div id="bio" style="position:absolute; left:141px; top:187px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_adv_over.gif" width="720" height="9" border="0" alt=""></div>    <div id="pic" style="position:absolute; left:141px; top:187px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_pic_over.gif" width="720" height="9" border="0" alt=""></div>    <div id="guest" style="position:absolute; left:141px; top:187px; width:720px; height:9px; visibility: hidden;  z-index: 2;"><img src="grafik/menu_guest_over.gif" width="720" height="9" border="0" alt=""></div>        </td>
</tr>
</table>
Avatar billede motyl Nybegynder
09. oktober 2005 - 19:22 #5
Er der nogle der kan hjælpe mig? Jeg kommer ingen vegne :)
Avatar billede motyl Nybegynder
09. oktober 2005 - 23:27 #6
I kan se princippet her: www.adversary.dk/test

Håber snart at der kommer noget hjælp!
Avatar billede olebole Juniormester
09. oktober 2005 - 23:33 #7
- tak ... 4.3 sekunder med tilbagestrøget hår er mere end rigeligt! Har du overvejet, der sidder mennesker derude med et ordentligt lydanlæg sluttet til PC'en?
Der må være en anden, der har høreskade nok til at hjælpe her
Avatar billede motyl Nybegynder
10. oktober 2005 - 12:00 #8
Tak hjælpen Ole...Jeg er ikke kommet meget længere. Er der ellers andre eksperter der kan komme med et løsningsforslag?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester