Link-problem: Du kan fortsatt trykke på linken selv om musen er vekke fra teksten

Danny Boy · 4. desember 2007

Hei

Har et lite problem her som irriterer meg, som da er at selv om musen ligger vekke fra teksten, så kan du fortsatt trykke på linken. Du har liksom musen over linken, så kan du trykke på den, men viss du beveger musen 10 cm til høgre hvor teksten ikke kan sees lenger, så kan du fortsatt trykke på linken! Men etter 15 cm forsvinner den Har et bilde her eksempel:

Som dere ser så er musen vekke fra linken, men kan fortsatt trykke på den. Har lastet opp hjemmesiden til dere og, så dere kan fysisk teste det selv Dere finner den her, husk at jeg ikke er ferdig enda, men har endelig fått satt opp oppsettet skikkelig, nesten.

Siden er kun optimalisert for Firefox. Aner ikke hvordan den ser ut i Opera. I IE er den litt rar noen steder, men linken virker i hvert fall som den skal der!

Kom gjerne med tips i samme slengen og Legger opp koden også:

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Danny's Website</title>

function mouseOver()

{

document.home.src ="images/buttons/home2.gif";

}

function mouseOut()

{

document.home.src ="images/buttons/home2.gif";

}

</script>

function mouseOver2()

{

document.tutorials.src ="images/buttons/tutorials2.gif";

}

function mouseOut2()

{

document.tutorials.src ="images/buttons/tutorials.gif";

}

</script>

function mouseOver3()

{

document.blog.src ="images/buttons/blog2.gif";

}

function mouseOut3()

{

document.blog.src ="images/buttons/blog.gif";

}

</script>

function mouseOver4()

{

document.links.src ="images/buttons/links2.gif";

}

function mouseOut4()

{

document.links.src ="images/buttons/links.gif";

}

</script>

</head>

<body>

</div>

<h1><u>Kortnovelle</u></h1>

</div>

<a href="http://www.diskusjon.no"><p>About Me</p></a>

</div>

<p>Det var en gang en Trompet.</p>

<p>Som aldri klarte å suge skikkelig.</p>

<p>Fordi Eplefe ikke var tilstedet.</p>

<p>Helt til Trompeten såg lyset.</p>

<p>Men lyspæren gikk HAHA</p>

<p>Dermed tok han seg en skive med Reker.</p>

<p>Plutselig snakket Reken.</p>

<p>- Ikke spis meg, svarte hun opphissende.</p>

<p>Sug meg heller.</p>

<p>SLUTT</p>

</div>

</body>

</html>

CSS

body {

font-family: arial, helvetica, sans-serif;

font-size: 0.8em;

background: #ccc;

width: 800px;

height: 600px;

margin: auto;

border: solid #036;

border-width: 3px;

}

h1 {

font-size: 3em;

font-style: italic;

color: white;

text-align: center;

margin-top: 30px;

}

#header {

width: 800px;

height: 191px;

}

#buttons {

margin-left: 25%;

}

.home {

margin-top: 160px;

border: none;

}

.tutorials {

border: none;

}

.blog {

border: none;

}

.links {

border: none;

}

#header2 {

width: 640px;

height: 102px;

float: right;

}

#menu {

width: 160px;

height: 409px;

float: left;

}

#content {

background: black;

width: 640px;

height: 307px;

float: right;

overflow: auto;

}

#menu-links {

margin-top: 70%;

margin-left: 10%;

font-size: 1em;

}

#text {

color: #ccc;

margin-left: 2%;

}

a:active, a:focus {

outline: 0;

}

a:link {

text-decoration: none

}

a:visited {

color: #FFF;

text-decoration: none

}

a:active {

text-decoration: none

}

a:hover {

font-weight: bold;

}

Håper på hjelp

Koden kun til linken er:

//// XHTML

<body>

<div id="menu">

<div id="menu-links">

<a href="http://www.diskusjon.no"><p>About Me</p></a>

</div>

</body>

//// CSS

#menu {

background-image: url(images/menu.jpg);

width: 160px;

height: 409px;

float: left;

}

#menu-links {

margin-top: 70%;

margin-left: 10%;

font-size: 1em;

}

Edit: Ehm, den novellen er bare noe jeg skrev for å teste, så... :ermm:

Endret 4. desember 2007 av Danny Boy

arex1337 · 4. desember 2007

Kan det være at <p> er et blokkelement, og tar dermed opp 100% bredde? Prøv å fjern p-taggene fra "<a href="http://www.diskusjon.no"><p>About Me</p></a>"

Danny Boy · 4. desember 2007

Kan det være at <p> er et blokkelement, og tar dermed opp 100% bredde? Prøv å fjern p-taggene fra "<a href="http://www.diskusjon.no"><p>About Me</p></a>"

Haha fy **** takk skal du ha! Det fikset problemet med en gang! Du aner ikke hvor lenge jeg har søkt på google for å finne ut problemet :no: Takk igjen^^

Edit: Bruker <br /> taggen heller, og det fungerer perfekt

Endret 4. desember 2007 av Danny Boy

Stian Jacobsen · 6. desember 2007

Kan det være at <p> er et blokkelement, og tar dermed opp 100% bredde? Prøv å fjern p-taggene fra "<a href="http://www.diskusjon.no"><p>About Me</p></a>"

Haha fy **** takk skal du ha! Det fikset problemet med en gang! Du aner ikke hvor lenge jeg har søkt på google for å finne ut problemet Takk igjen^^

Edit: Bruker <br /> taggen heller, og det fungerer perfekt

Bruk en liste

FrodeNilsen · 7. desember 2007

Du kan med stor fordel benytte en validator som http://validator.w3.org/.

Da ville du funnet feilen, og en rekke andre, uten å søke deg rundt på nett.

Jeg ser at du ønsker å benytte br for linjeskift. Dette elementet har bare en praktisk bruk, og det er i adresser, og selv der kan man benytte pre.

u elementet burde du kutte ut, benytt css.

Danny Boy · 10. desember 2007

Kan det være at <p> er et blokkelement, og tar dermed opp 100% bredde? Prøv å fjern p-taggene fra "<a href="http://www.diskusjon.no"><p>About Me</p></a>"

Haha fy **** takk skal du ha! Det fikset problemet med en gang! Du aner ikke hvor lenge jeg har søkt på google for å finne ut problemet Takk igjen^^

Edit: Bruker <br /> taggen heller, og det fungerer perfekt

Bruk en liste

<ul><li><a></a></li></ul>

Takk, det virket enda bedre

Du kan med stor fordel benytte en validator som http://validator.w3.org/.

Da ville du funnet feilen, og en rekke andre, uten å søke deg rundt på nett.

Jeg ser at du ønsker å benytte br for linjeskift. Dette elementet har bare en praktisk bruk, og det er i adresser, og selv der kan man benytte pre.

u elementet burde du kutte ut, benytt css.

Takk for validatoren, meget nyttig Har skiftet fra br til <ul><li><a> nå. Har og lagt til u elementet i css-en heller som du sa, så det ble mer enkelt.

Men jeg har laget en ny side med nytt design nå, og har fått enda et lignende problem, så kan vel spør om hjelp til dette og :hmm: Har lagt ut den nye siden til dere her (alt er midlertidig i PNG). Har litt mer avansert meny nå, og dermed fått et problem. Uansett hvilken knapp jeg holder over, så linker den til "Links"-knappen. Det jeg har gjort er å lage en div til alle knappene, og så klassifisert de, og brukt margin-left for å flytte de til høgre. Så brukt padding på hver enkelt knapp (margin virket ikke) for å justere høyden perfekt. Men dette resulterer i at jeg kan trykke på linken overalt hvor jeg har brukt padding, og i tillegg ligger "Links-"knappen over alle de andre knappene. Her er koden til siden:

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Beta Website</title>

</head>

<body>

<a href="home.html"

<a href="tutorials.html"

<a href="blog.html"

<a href="links.html"

</div>

</div>

</div>

<ul>

</ul>

<li><a href="">About Me</a></li>

<li><a href="">Final Fantasy</a></li>

<li><a href="">Walt Disney</a></li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

CSS

body {

background: #ccc;

width: 1024px;

height: 768px;

border: solid #036;

border-width: 3px;

margin: auto;

}

#banner {

width: 1024px;

height: 218px;

}

#banner img {

position: absolute;

border: none;

margin-left: 184px;

}

.home {

padding-top: 45px;

}

.tutorials {

padding-left: 150px;

padding-top: 45px;

}

.blog {

padding-left: 314px;

padding-top: 83px;

}

.links {

padding-left: 459px;

padding-top: 124px;

}

#left_menu {

position: relative;

width: 208px;

height: 116px;

float: left;

}

#menus {

margin: 3em 0em 0em 2em;

}

#right_menu {

position: relative;

width: 209px;

height: 116px;

float: right;

}

#left_menu2 {

background: #7fbbfe;

width: 208px;

height: 434px;

clear: left;

float: left;

}

#right_menu2 {

background: #7fbbfe;

width: 209px;

height: 434px;

clear: right;

float: right;

}

#content {

background: #fff;

width: 607px;

height: 550px;

margin: auto;

}

#banner_two {

position: absolute;

width: 62px;

height: 36px;

margin-top: -550px;

margin-left: 208px;

}

#navigation {

width: 160px;

color: black;

margin-left: 0.5em;

}

#navigation ul {

margin: 0 0 1em 0;

padding: 0;

list-style: none;

}

#navigation ul a {

color: white;

text-decoration: none;

display: block;

background: #17a;

padding: 0 0.5em;

margin: 0 1em 1px 1em;

}

#navigation a:visited {

color: #ccc;

}

#navigation a:hover {

background: #28b;

}

a:active, a:focus {

outline: 0

}

Setter pris på hjelp

Edit: Fungerer best i Firefox.

Endret 10. desember 2007 av Danny Boy

FrodeNilsen · 11. desember 2007

<a href="home.html"
<img class="home" src="images/buttons/home.png" width="117" height="52" />
</a>

Ser du feilen?

Du mangler alt atributt samt lukking med hake av a elementet!

<a href="home.html" alt="Link til forsiden">
<img class="home" src="images/buttons/home.png" width="117" height="52" />
</a>

Slike feil, eller at det er noe seriøst galt, vil dukke opp ved å benytte:

http://validator.w3.org/

Danny Boy · 11. desember 2007

Ups, noen grove feil av meg :whistle: Har nå fikset alle feilene som kom opp i validatoren (This Page Is Valid XHTML 1.0 Strict!), men har fortsatt samme problem Uansett hvilken hovedknapp du holder over, så kan du kun trykke på "Links"-knappen. I tillegg kan du trykke på knappen selv om musen ikke er rett over knappen.

Har oppdatert siden:

http://www.freewebs.com/dannys_site5000/Ne...bsite/home.html

Edit: Trykk CTRL+A mens du er på siden min, så får du kanskje en bedre anelse om hvorfor det kan være slik.

Endret 11. desember 2007 av Danny Boy

arex1337 · 11. desember 2007

Problemet er at du bruker padding-left og padding-top på alle bildene. Dermed ligger elementene oppå hverandre. Man kan gjøre det du prøver på, på mange forskjellige måter, men ikke akkurat den

Kanskje du kan bruke margin-left og margin-top isteden. Eller "position: relative" og "top" og "left" attributtene. Eller du kutte opp bildene på en annen måte og floate dem. Eller du kan {fyll inn nytt forlsag her}.

Endret 11. desember 2007 av arex1337

FrodeNilsen · 12. desember 2007

Du benytter absolute positioning helt galt.

Nullstill først css med:

* {
margin: 0px;
padding: 0px;
border: 0px;
}

Fjer "#banner img" samt skriv ".home" om til "a.home" osv. i css fila.

Deretter burde du fjerne klassen på bildene og sette klassen til linkene, dvs. a-elementene. Du kan også med fordel fjerne det unødvendige div-elmentet. da får du noe sånt som dette.

<div id="banner">
<a href="home.html" class="home">
	<img src="images/buttons/home.png" width="117" height="52" alt="home" />
</a>
<a href="tutorials.html" class="tutorials">
	<img src="images/buttons/tutorials.png" width="129" height="68" alt="tutorials" />
</a>
<a href="blog.html" class="blog">
	<img src="images/buttons/blog.png" width="112" height="78" alt="blog" />
</a>
<a href="links.html" class="links">
	<img src="images/buttons/links.png" width="134" height="53" alt="links" />
</a>
</div>

Html koden blir mye renere slik. Det er lov å indentere etter nøsting.

Absolutt eksempel:

a.blog{
position: absolute;
top: 70px;
left: 500px;
width: 112px;
height: 78px;
}

Her justerer du plassering med top og left, og setter width og height lik størrelsen på bildet i det nøstende img-elementet.

Relativ plassering er enklere

a.home{
position: relative;
left: 150px;
top: 20px;
}

Her justerer du med left og top.

Da er nesten all koden du hadde skrevet om. Du kan med fordel benytte htmldog.com eller deffen til html4.01 som du finner elementlisten til her:

http://www.w3.org/TR/html401/index/elements.html

Du kan umulig ha forstått absolutt plassering, når du har plassert boksene med padding og margin og ikke satt størrelse eller plassering. Alle boksene overlappet hverandre.

Les her:

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Må sove!

Danny Boy · 12. desember 2007

Forstår nå mye bedre, så takk skal du ha Har ryddet i koden som du sa, og nå fungerer alt perfekt med posisjonen satt til relative, og brukt "left" og "top" kommandoene istedenfor margin til å flytte på knappene. Har lagt den ut igjen her:

http://www.dannyboy007.untouchable.0lx.net/home.html

Takk igjen, og sov godt ja

Logg inn

Link-problem: Du kan fortsatt trykke på linken selv om musen er vekke fra teksten

Anbefalte innlegg

Danny Boy

Lenke til kommentar

Videoannonse

arex1337

Lenke til kommentar

Danny Boy

Lenke til kommentar

Stian Jacobsen

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Danny Boy

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Danny Boy

Lenke til kommentar

arex1337

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Danny Boy

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer