[HTML] Menu beweegt

[jvaneijk]

Ik heb een probleem.
Namelijk mijn menu dat ik heb gemaakt dat wil niet blijven staan.
Ik heb het zo gemaakt dat het eigenlijk een verlengde van de IE balk is en als je er dan overheen gaat moeten de knoppen iets hoger komen te liggen zoals je ook met IE 6 hebt nu doe ik dit door middel van een style in een mouseover

hieronder stukje code

HTML:

<table cellspacing="0" cellpadding="3" border="0">
    <tr>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';" onClick="parent.content.location.href='../algemeen/default.htm';">[img]"/_shared/images/icons/16x16_archive.gif"[/img]&nbsp;Algemeen&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';" onClick="parent.content.location.href='../develop/default.htm'">[img]"/_shared/images/icons/16x16_input.gif"[/img]&nbsp;Develop&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';" onClick="parent.content.location.href='../foutrapportage/default.htm'">[img]"/_shared/images/icons/16x16_details.gif"[/img]&nbsp;Foutrapportage&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';" onClick="parent.content.location.href='/content/servers/view.asp'">[img]"/_shared/images/icons/16x16_monitor.gif"[/img]&nbsp;Remote Desktop&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';" onClick="parent.content.location.href='http://extranet.absolutions.nl/exchange'">[img]"/_shared/images/icons/16x16_mail_open.gif"[/img]&nbsp;Exchange&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';" onClick="parent.content.location.href='../pmm/default.htm'">[img]"/_shared/images/icons/16x16_briefcase.gif"[/img]&nbsp;PMM&nbsp;</td>
    </tr>
</table>

mijn excuses voor het vern**ken van mijn post.
maar anders is het helemaal onoverzichtelijk.

Als je hier dus overheen gaat met je muis schuift alles als het ware 1px omlaag en dat is niet de bedoeling het moet gewoon blijven staan. ik heb al van alles geprobeerd om standaard een border van 1px mee te geven met dezelfde kleur maar hij blijft bewegen. ook alles al afgezocht
en aan mijn CSS moet het volgens mij ook niet liggen.

want alles wat maar met borders te maken kan hebben heb ik er al uit gehad en erin gehad en niets hielp.

Ik hoop dat iemand mij kan helpen met dit probleem
Ik heb nog geen concreet voorbeeld online staan dat heb ik denk ik morgenavond.
als jullie dat willen zien.

Ik heb overal al gezocht googlegroups GOT DevGuru noem maar op.
maar kom er niet uit

[Rataplan]

Huh?

D'r staat hierboven toch heel duidelijk

code:

onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';"

en een border "none" heeft een border-width van 0. Dus bij een onMouseOver wordt er een randje van 1px toegevoegd, waardoor alles een puntje op moet schuiven. Dus je code doet precies waar je over klaagt.

Oplossing? Of die onMouseOver+Out eruit halen, óf de onMouseOut een border in de achtergrondkleur geven (en "outset" door "solid" laten vervangen zodat de browser niet aan het kliederen gaat).

[Willem]

Je moet een zelfde randje als onmouseover neerzetten bij onmouseout in dezelfde kleur als de achtergrondkleur.

edit:

spuit 11

[ Voor 9% gewijzigd door Willem op 11-02-2004 16:47 ]

[jvaneijk]

Rataplan schreef op 11 februari 2004 @ 16:47:
Huh?

D'r staat hierboven toch heel duidelijk

code:

onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='none';"

en een border "none" heeft een border-width van 0. Dus bij een onMouseOver wordt er een randje van 1px toegevoegd, waardoor alles een puntje op moet schuiven. Dus je code doet precies waar je over klaagt.

Oplossing? Of die onMouseOver+Out eruit halen, óf de onMouseOut een border in de achtergrondkleur geven (en "outset" door "solid" laten vervangen zodat de browser niet aan het kliederen gaat).

Het is juist de bedoeling dat Het als het ware eruitspringt en dus niet er gewoon plat op ligt met een stom randje.
en als ik dit

HTML:

onMouseOut="this.style.border='1px solid buttonface';"

ervan maak dan doet ie het nog niet.

[Johnny]

Pff.. wat een code, dat kan veel simpeler, en dan ook nog eens zonder javascript.

code:

<style type="text/css">

ul#menuBalk {
padding: 0px;
margin: 0px;
}

ul#menuBalk li {
list-style-type: none;
float: left;
}

ul#menuBalk li a {
border: none;
}

ul#menuBalk li a:hover {
border: 1px outset;
}

</style>

<ul id="menuBalk">
<li><a href="'>plaatje + link </a></li>
<li><a href="'>plaatje + link </a></li>
<li><a href="'>plaatje + link </a></li>
<li><a href="'>plaatje + link </a></li>
</ul>

Je maakt gewoon een lijst die je horizontaal zet, en waarvan de links een andere style krijgen zodra je er over gaat.

[ Voor 54% gewijzigd door Johnny op 11-02-2004 16:57 ]

[Rataplan]

jvaneijk schreef op 11 februari 2004 @ 16:54:
[...]


Het is juist de bedoeling dat Het als het ware eruitspringt en dus niet er gewoon plat op ligt met een stom randje.
en als ik dit

HTML:

onMouseOut="this.style.border='1px solid buttonface';"

ervan maak dan doet ie het nog niet.

Van mij mag je outset in de onMouseOver gebruiken, maar in de onMouseOut moet je dan wel weer solid gebruiken, anders "verdwijnt" je randje niet. Bovendien is een drie-parameter border IE-only.

Doe dus zoiets als

code:

onMouseOver="this.style.border='1px outset foreground';" 
onMouseOut="this.style.border='1px solid background';"

Overigens heeft Johnny hierboven volledig gelijk: dit soort dingen hoef je niet met javascripts op te lossen. Zijn regel 14 moet volgens mij ook weer "1px solid" als waarde geven, en na regels 14 en 18 moet je nog een extra regel voor het wisselen van kleur opnemen, want anders hou je het verspring-probleem.

[ Voor 16% gewijzigd door Rataplan op 11-02-2004 17:48 ]

[jvaneijk]

Nou ik ga hier morgen eens even naar kijken wat ik hier allemaal van kan gebruiken iig bedankt voor het meedenken en morgen horen jullie verder van me. Morgen middag wel te verstaan want ben 's ochtends vrij

[crisp]

Rataplan schreef op 11 februari 2004 @ 17:01:
[...]Bovendien is een drie-parameter border IE-only.

http://www.w3.org/TR/REC-CSS2/box.html#propdef-border

[Rataplan]

crisp schreef op 11 februari 2004 @ 17:23:
[...]



http://www.w3.org/TR/REC-CSS2/box.html#propdef-border

Je hebt gelijk, de juiste term is niet "IE-only" Maar border:2 outset #ff0000; aan een <p> hangen wordt bij mij in Mozilla niet weergegeven (en weer wel in Konqueror). "Niet door alle browsers ondersteund", kan je daar mee leven? Of doe ik iets fout?

[disjfa]

code:

border:2 outset #ff0000;

moet zijn:

code:

border:2px outset #ff0000;

mozilla weet niet wat 2 is....

[Rataplan]

disjfa schreef op 11 februari 2004 @ 17:45:
mozilla weet niet wat 2 is....

Damn, dank jullie beiden Dat was weer even suf

[ Voor 24% gewijzigd door Rataplan op 11-02-2004 17:49 ]

[jvaneijk]

Jullie kwamen allemaal met hele mooie oplossingen maar geen een van deze werkt. mijn stomme menu blijft bewegen. En ik kom er gewoon niet vanaf.

[ Voor 29% gewijzigd door jvaneijk op 12-02-2004 15:30 ]

[jvaneijk]

Ik ga denk ik maar voor de IE only manier want het wordt toch een admin page en die wordt alleen maar op IE gedraaid 6.0 of hoger dus ga maar over op Button tag.
Maar toch nog bedankt.

[Verwijderd]

Afhankelijk van je achtergrondkleur:

HTML:

<style type="text/css">
td {
    border:1px #fff solid;
    cursor:pointer;
}

</style>

waarbij je #fff moet vervangen door de achtergrondkleur (IE ondersteund geen transparent op de border )

en vervolgens:

HTML:

<table cellspacing="0" cellpadding="3" border="0">
    <tr>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='1px #fff solid';" onClick="parent.content.location.href='../algemeen/default.htm';">[img]"/_shared/images/icons/16x16_archive.gif"[/img]&nbsp;Algemeen&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='1px #fff solid';" onClick="parent.content.location.href='../develop/default.htm'">[img]"/_shared/images/icons/16x16_input.gif"[/img]&nbsp;Develop&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='1px #fff solid';" onClick="parent.content.location.href='../foutrapportage/default.htm'">[img]"/_shared/images/icons/16x16_details.gif"[/img]&nbsp;Foutrapportage&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='1px #fff solid';" onClick="parent.content.location.href='/content/servers/view.asp'">[img]"/_shared/images/icons/16x16_monitor.gif"[/img]&nbsp;Remote Desktop&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='1px #fff solid';" onClick="parent.content.location.href='http://extranet.absolutions.nl/exchange'">[img]"/_shared/images/icons/16x16_mail_open.gif"[/img]&nbsp;Exchange&nbsp;</td>
        <td class="isHeaderButton" onMouseOver="this.style.border='1px outset';" onMouseOut="this.style.border='1px #fff solid';" onClick="parent.content.location.href='../pmm/default.htm'">[img]"/_shared/images/icons/16x16_briefcase.gif"[/img]&nbsp;PMM&nbsp;</td>
    </tr>
</table>