[HTML] Link over tabel / div - Softwareontwikkeling

donderdag 22 mei 2003 12:53

Acties:

Vrolijkheid alom!

Topicstarter

Ik heb, met behulp van hits en tips van mensen op GoT, een navigatiemenu werkend gekregen. Alles leek goed te gaan... totdat er ook even op een Mac getest werd. Toen bleek dat uitklapmenu's qua layers fout zaten (kwamen achter het hoofdmenu terecht).

Ook waren er tijdens een vergadering over de functionaliteiten van dit menu een aantal dingen die eventueel ook nog moesten kunnen, zoals een afgerond hoekje. Het leek me daarom handig om in m'n <a href> van breedte 100% en block stijl, een table te plaatsen met 3 cellen.

Het probleem wat zich hierbij voordoet, is dat de <a href> niet doorwerkt in de tabel. Dit heeft tot gevolg dat de mouse-over nog wel steeds werkt, alleen kan ik niet meer op het item klikken, als ik met m'n muis binnen de table sta. Dat was dus, voor zover ik kon bedenken, geen goede optie.

Met <div>'s werkt het wel, echter lukt het me niet om er daarvan 3 naast elkaar te plaatsen met een breedte van 33%. Deze moesten dan de 3 cellen uit de tabel vervangen. Mouse-over werkt er in, link doet het ook nog steeds, alleen komen ze onder elkaar terecht, ongeacht wat ik instel.

Ik gebruik de hier onderstaande code om te testen. Deze bevat 2 items, welke allebei een klein uitklapmenu'tje hebben.
Mijn vraag is: Is het mogelijk om een link om een tabel heen te zetten zodat deze nog werkt? En/of is het mogelijk op drie <div>'s naast elkaar te plaatsen?

De onderstaande code is overigens verkregen via een andere GoTter, die me al meer heeft kunnen helpen. Dit was de enige manier om de uitklap _voor_ het hoofdmenu te krijgen. Aangezien ik toch die code wil implementeren, leek het me handig om hier ook meteen bovenstaande issues op te proberen

(hij is wat lang, maar daar ontkom ik in deze niet aan)

HTML:

<html>
<head>
    <title>Test</title>
   <link rel="stylesheet" type="text/css" href="stylesheet.css">
   <script language="javascript">
      function ShowMenu(Item)
      {
         document.getElementById(Item).style.visibility = 'Visible';
      }
         
      function HideAction(Item)
      {
         document.getElementById(Item).style.visibility = 'Hidden';
      }
   </script>
</head>
<body>
<table border='0' cellpadding='0' cellspacing='0' width='30%'>
    <tr>
        <td onmouseover="ShowMenu('m1')" onmouseout="HideAction('m1');">
            <div style="position: relative;">
                <div id='m1' style="position: absolute; top: 5px; left: 130px; visibility: hidden;">
                    <table border='0' cellpadding='0' cellspacing='0' width='150'>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=1.1' class='nav_niveau1'
                                    style="display: block; width: 100%;">
                                1.1
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=1.2' class='nav_niveau1' 
                                    style="display: block; width: 100%;">
                                1.2
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <a href='navigatie.php?var=1' class='nav_niveau0'
                style="display: block; width: 100%;">
                <div style="position: relative; border-color: #33DD33; border-width: 2px; border-style: solid;">
                    <div style="position: relative; width: 30%; border-color: red; border-width: 2px; border-style: solid;">|</div>
                    <div style="position: relative; width: 30%; border-color: red; border-width: 2px; border-style: solid;">1</div>
                    <div style="position: relative; width: 30%; border-color: red; border-width: 2px; border-style: solid;">></div>
                </div>
            </a>
        </td>
    </tr>
</table>
<table border='0' cellpadding='0' cellspacing='0' width='30%'>
    <tr>
        <td onmouseover="ShowMenu('m2')" onmouseout="HideAction('m2')">
            <div style="position: relative;">
                <div id='m2' style="position: absolute; top: 5px; left: 130px; visibility: hidden;">
                    <table border='0' cellpadding='0' cellspacing='0' width='150'>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=2.1' class='nav_niveau1'
                                    style="display: block; width: 100%;">
                                2.1
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=2.2' class='nav_niveau1' 
                                    style="display: block; width: 100%;">
                                2.2
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <a href='navigatie.php?var=2' class='nav_niveau0' 
                style="display: block; width: 100%;">
            <table><tr><td>Cel1</td><td>2</td><td>Cel3</td></tr></table>
            </a>
        </td>
    </tr>
</table>
</body>
</html>

En als stukje stylesheet:

Cascading Stylesheet:

.nav_niveau0{
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #337788;
}

.nav_niveau1{
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #33aaaa;
}

[ Voor 14% gewijzigd door Kaastosti op 22-05-2003 12:53 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

donderdag 22 mei 2003 13:19

Acties:

André

Analytics dude

Drie divjes naast elkaar kan met <div style='display:inline'>.

En waarom wil je een link om een tabel heen? Je kunt beter de link in de onclick van de <td> zetten waar alles in staat.

donderdag 22 mei 2003 13:28

Acties:

crisp

Devver

Pixelated

André schreef op 22 May 2003 @ 13:19:
Drie divjes naast elkaar kan met <div style='display:inline'>.

En waarom wil je een link om een tabel heen? Je kunt beter de link in de onclick van de <td> zetten waar alles in staat.

Als je een div inline maakt kan je 'm geen width en height meer geven, beter is dan om floats te gebruiken.
En inderdaad, een link om een tabel gaat niet. onclick is dan de oplossing

Voor afgeronde hoekjes heb je echter geen tabel nodig hoor.
Zie bijvoorbeeld dit voorbeeld, dat is ook te doen met plaatjes van afgeronde hoeken

[ Voor 22% gewijzigd door crisp op 22-05-2003 13:34 ]

Intentionally left blank

donderdag 22 mei 2003 13:38

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Als je bovenstaande code runt (die herkent crisp denk ik nog wel), zie je dat de table in principe al werkt met de mouse-over. Je aanwijzer wordt blijft echter een pijltje en je kunt er niet meer op klikken. Als je echter over de tekst heen gaat, krijg je het bekende tekst-edit icoontje er voor in de plaats. Da's natuurlijk ook weer niet de bedoeling

En is float een property van div, of een losse tag? Ik vind er namelijk niets over, behalve dat het bestaat

[ Voor 23% gewijzigd door Kaastosti op 22-05-2003 13:44 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

donderdag 22 mei 2003 13:48

Acties:

crisp

Devver

Pixelated

Kaastosti schreef op 22 mei 2003 @ 13:38:
Als je bovenstaande code runt (die herkent crisp denk ik nog wel), zie je dat de table in principe al werkt met de mouse-over. Je aanwijzer wordt blijft echter een pijltje en je kunt er niet meer op klikken. Als je echter over de tekst heen gaat, krijg je het bekende tekst-edit icoontje er voor in de plaats. Da's natuurlijk ook weer niet de bedoeling

En is float een property van div, of een losse tag? Ik vind er namelijk niets over, behalve dat het bestaat

floats:

HTML:

<div style="width: 300px;position: relative">
  <div style="width: 100px;float:left">Menu 1</div>
  <div style="width: 100px;float:left">Menu 2</div>
  <div style="width: 100px;float:left">Menu 3</div>
</div>

* crisp heeft nu eigenlijk even geen tijd...

Intentionally left blank

donderdag 22 mei 2003 13:54

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Hehe owkee dat biedt perspectieven

* Kaastosti geeft crisp de verloren tijd terug en bedankt hem hartelijk ...en Andre ook natuurlijk

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.