Jak usunąć rączkę z linku
Mam takie Menu i na IE’ku lekko mi się wali z linkiem. Otóż:
Gdy najadę na tekst to jest rączka, ale jak najadę na puste pole to jest zwykły kursor i nawet się nie podświetla całe pole
Jeżeli można to naprawić, to tez proszę o porady
Mi się wydaje, że Animologic `owi chodziło o to żeby cały ten obszar był linkiem… Ale mogę się mylić. W takim wypadku należy zastosować albo obrazek z tekstem, albo jeżeli chcesz by po najechaniu kursorem, obrazek się zmienił, trzeba zastosować efekt rollover. Nawet gdzieś mam bardzo fajny skrypt, więc jeżeli chodzi o to, to mogę go tu zamieścić.
Dobrze Ci chodziło, tylko, że ja korzystam z CSS’ów i JS’a podanego w linku powyżej.
Jeżeli cały link z obrazkiem ma posiadać i łapkę i być klikalny to trzeba nadać
display: block + rozmiary linkudisplay: block 1px
:?: Nie , no sory niemoge. Może mi to ktoś przerobić tak aby było ok w IE’ku i FF?? CSS
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 135px;
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li ul{
position: absolute;
width: 140px;
left: 0;
top: -1px;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: 11px Segoe UI;
color: white;
display: block;
width: 125px;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 4px;
background: transparent url(arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
JS
var menuids=new Array("verticalmenu")
var submenuoffset=-2
function createcssmenu(){
for (var i=0; i
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="nextdiv"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)[/code]
[b]HTML[/b]
Obrazy
Nie będę kodu przerabiał, ale dam przykład
a { display: block; width: 100px; height: 100px; }
i masz klikalne link o wymiarach wysokość 100px i szerokości 100px.
Dobra, to już zrobione. Teraz Mnie tylko Jedno Zastanawia:
Chodzi mi o taki margines w IE’ku u góry. Jak to usunąć??
Masz zrobione zerowanie globalne w css na początku arkusza?
* { margin: 0; padding: O; }Plik CSS od menu
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 140px;
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li ul{
position: absolute;
width: 140px;
left: 0;
top: -1px;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: 11px Segoe UI;
color: white;
display: block;
width: 130px;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
I jak widać jest.
Nie jest, mogłeś zapomnieć coś wyzerować, dlatego robi się to globalnie (nie widzę i tak zerowania dla ul.
Najlepiej pokaż stronę on-line.