Søg
Avatar billede nwn Nybegynder
30. november 2008 - 15:56 Der er 21 kommentarer og
2 løsninger

Problem med a:visited. Link springer op, ændre menu's højde

Hej.

Jeg har på det seneste haft meget fokus på et design jeg har lavet. Nu hvor næsten alt er på plads, skulle jeg lige have resten med, og jeg opdager så at det menu-problem som jeg tidligere ikke var noget problem, er et problem.

Når man ser på menu'en ser den helt perfekt ud, indtil man klikker på et af linksne. Ved at gøre dette, sprænger linket en linie op i menuen, hvilket gør menuen lige pludselig bliver højere, og så har det link du trykkede på, på egen linie.

Problemet må jo blive forårsaget af a:visited af en eller anden grund, måske det har en "dybere" grund og har noget at gøre med selve menuen egenskaber.

Efter at linket så er sprunget op en linie over, så forbliver linket der, lige meget om du opdater, genstarter browseren. Men vælger du så at slette oversigten (Så linket ikke er visited) så er menuen på plads igen.

Nogle der tror de kan hjælpe? Jeg smider lige CSS koderne.

#menu {
float: left;
width: 75%;
padding-top: 4px;
padding-bottom: 3px;
font-family: Verdana;
font-size: 13px;
background-color: #000000;
text-align: left;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
#menu a:link, a:visited {
padding-top: 4px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 3px;
text-decoration: none;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
}
Avatar billede zips Juniormester
30. november 2008 - 23:39 #1
Det er ikke nemt at se udfra det du giver, da det kunne være noget andet som gør at det se ud som du beskriver, et link ville være nemmere at se fejlen udfra.

Men prøv at sætte dette ind i din
#menu a:link, a:visited {
height: 20px;
display: block;
Avatar billede olebole Juniormester
01. december 2008 - 09:33 #2
<ole>

Det skyldes garanteret, at du gør de besøgte links 100px bredere med padding i siderne. Så er der vel ikke noget at sige til, der er noget, som lander på næste linje.

Derudover er det ret tilfældigt, om nogen kan gætte, hvad der sker, og hvad du skal gøre for at undgå det, når vi ikke kan se koden  ;o)

/mvh
</bole>
Avatar billede nwn Nybegynder
01. december 2008 - 21:34 #3
Hej.

Det virker desværre ikke zips. Ved at gøre dette, så bliver de placeret på hver sin linie selvom de ikke er visited.

Olebole -> Heller ik det, det har jeg testet og har lige testet det igen for en sikkerheds skyld. Jeg smider lige de nødvendige koder så ;)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Title</title>
<link rel="stylesheet" href="default.css" type="text/css">
</head>
<body>

<div id="default">

  <div id="top">&nbsp;</div>

  <div id="menu">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
  </div>

  <div id="menu_right">

      <input type="text" name="find" class="input"> <input type="button" value="Find" class="button">

  </div>

  </div>
</div>

CSS:

body, pre {
font-family: Verdana;
font-size: 11px;
color: #000000;
background-color: #9A9A9A;
margin: 0px;
}
a:visited, a:link {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
#default {
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#top {
width: 100%;
height: 125px;
background-image: url("header.png");
background-repeat: no-repeat;
}
#menu {
float: left;
width: 80%;
padding-top: 4px;
padding-bottom: 3px;
font-family: Verdana;
font-size: 13px;
background-color: #E7EEF7;
text-align: left;
border-top: 1px solid #E1E1E1;
border-bottom: 1px solid #E1E1E1;
}
#menu a:link {
padding-top: 4px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 3px;
text-decoration: none;
color: #000000;
}
#menu a:visited {
text-decoration: none;
color: #000000;
}
#menu a:hover {
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
}
#menu_right {
float: left;
width: 20%;
padding-top: 2px;
padding-bottom: 2px;
font-family: Verdana;
font-size: 13px;
background-color: #E7EEF7;
text-align: left;
border-top: 1px solid #E1E1E1;
border-bottom: 1px solid #E1E1E1;
}
#menu_right .input {
font-family: Verdana;
font-size: 11px;
background-color: #E7EEF7;
border: 1px solid #7F95AA;
}
Avatar billede nwn Nybegynder
01. december 2008 - 21:35 #4
Ja, og det skal lige siges den overstående CSS kode er efter jeg lige gennemtestede det med a:visited ved padding, som olebole nævner ;)
Avatar billede zips Juniormester
01. december 2008 - 21:58 #5
udfra det du har lagt, virker det da ok hvis du flytter a:visited op som har i dit første eksempel, jeg kan ikke se den hopper en linje op, også selvom jeg sletter alt fra browsere og åbner siden igen.

Jeg kan kun se at dit input felt er højre end den menu.
Avatar billede olebole Juniormester
02. december 2008 - 01:58 #6
#menu a:link {
padding-top: 4px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 3px;
text-decoration: none;
color: #000000;
}
#menu a:visited {
padding-top: 4px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 3px;
text-decoration: none;
color: #000000;
}
#menu a:hover {
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
}
Avatar billede nwn Nybegynder
02. december 2008 - 15:32 #7
Zips -> Her i designet, så hopper linket et linie op når man klikker på det så det bliver visited. Det hopper så ned igen, hvis man sletter oversigten, så det IKKE er visited mere... Det med input feltet skal du ikke tage dig af, det er blot fordi CSS'en ikke er med osv.

Olebole -> Der er jo ingen forskel på det der, og det jeg startede med og poste sådan set, og det virker desværre heller ikke =(
Avatar billede olebole Juniormester
02. december 2008 - 15:42 #8
Så har jeg - ligesom zips - absolut ingen idé om, hvad du taler om. Læg et link til dokumentet og en _tydelig_ forklaring på dit problem  =)
Avatar billede zips Juniormester
02. december 2008 - 15:43 #9
Jeg har nu lagt det op her http://prebendahl.dk/exp/test/nwm/

Prøv om du kan få fejlen frem på mit link.
Avatar billede olebole Juniormester
02. december 2008 - 15:47 #10
Jeg tror, du glemte denne del af opgaven: "og en _tydelig_ forklaring på dit problem" ... jeg har som sagt ingen idé om, hvori dit problem består  ;o)
Avatar billede zips Juniormester
02. december 2008 - 15:50 #11
>> Olebole Hehe ja men så først din kommentar efter jeg sendte mit indlæg :)
Avatar billede nwn Nybegynder
02. december 2008 - 15:53 #12
Hej igen.

Lækkert du har smidt det online, da jeg kun sidder og tester offline. Linknes adresser er sat til '#' prøv lige at ændre dem til 'link1.php' 'link2.php' osv. Ligemeget at siden ikke eksisterer. Så vil jeg kigge igen =D
Avatar billede zips Juniormester
02. december 2008 - 15:59 #13
Det er nu med link2.php osv. men har lavet sider også, jeg kan stadig ikke se noget :)
Avatar billede nwn Nybegynder
02. december 2008 - 16:13 #14
Det var da godt nok mærkeligt. Det virker som det skal på din side, og også ved mig, hvis jeg bare kopier kildekoden fra din side. Men prøver at jeg at gøre det gennem CSS filen, så gider den sgu ik. Jeg prøver lige at kigge nærmere...
Avatar billede nwn Nybegynder
02. december 2008 - 20:54 #15
Ja, så fandt jeg fejlen. I har ikke haft mulighed for at finde fejlen, og dette beklager jeg, da dette egentlig har spildt jer tid lidt. Fejlen lå i noget kode som ikke nævnt, da jeg overhovedet ikke havde troet dette skulle kunne forårsage.

Som i måske kan læse i html koden, så er det toppen og menu'en af siden. Ud over det, er der mange flere divs, bl.a. venstre, midter og højre spalte. I højre spalte ligger nogle divs som har følgende CSS:

.inside a:link, a:visited {
display: block;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: #000000;
}

Det jeg blot ikke forstår, er at det på nogen måde har forbindelse til menuen, da der jo ikke er en f.eks <div class="inside"> lige før menu'en.

Men linien der forårsager det, er: display: block;
Avatar billede nwn Nybegynder
02. december 2008 - 20:56 #16
Så blot ved at ændre dette: .inside a:link, a:visited { til: .inside a:link { så virker det perfekt ;)
Avatar billede nwn Nybegynder
02. december 2008 - 21:00 #17
Jeps det virker perfekt. Hvad siger i til at dele pointene?
Avatar billede zips Juniormester
02. december 2008 - 21:04 #18
Som du kan se i min css har jeg lavet det sådan her #menu a:link, #menu a:visited { det gør at det kun virker i denne div, det er vigtigt så ikke dine a:visited arver noget fra en anden end den du tro du skriver til :)

Helt sikkert noget olebole kan skrive langt bedre så det også er til at forstå :-)

Deler gerne.
Avatar billede olebole Juniormester
03. december 2008 - 16:25 #19
Med dette:
    .inside a:link, a:visited {

- rammer du alle links, som ligger i elementet med klassen 'inside', samt - og det er her, koden 'fejler' - alle besøgte links i _hele_ dokumentet.

Havde du i stedet skrevet:
    .inside a:link, .inside a:visited {

- ville du have ramt alle besøgte og ubesøgte links i elementet med klassen 'inside'.

Lille forskel på skrift ... stor forskel i browseren  ;o)

En måske mere overskuelig at skrive lister af selectors på er:
    .inside a:link,
    .inside a:visited {

- så opdager man (måske) hurtigere en fejl, som den du har bokset med her  =)
Avatar billede olebole Juniormester
03. december 2008 - 16:29 #20
Læg i øvrigt mærke til, at du begår samme fejl (hvis du altså mener noget andet) i den kode, du oprindelig postede:
    #menu a:link, a:visited {

Det skulle nok have været:
    #menu a:link, #menu a:visited {

- eller:
    #menu a:link,
    #menu a:visited {

- og når nu zips foreslår en deler, vil jeg også tillade mig at lægge et svar  =)
Avatar billede nwn Nybegynder
03. december 2008 - 21:46 #21
Så er jeg helt med, tak for forklaringen. Jeg sad nemlig også lige og tænkte over at der nu også skulle foretages småændringer ved #menu så, mens jeg læste din forklaring ;)
Avatar billede zips Juniormester
03. december 2008 - 22:07 #22
Tak for point :)

Ja olebole kan skrive så det er til at forstå :)
Avatar billede olebole Juniormester
03. december 2008 - 22:25 #23
Tak for points  =)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 23:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows
16/0110:29 Negativ billeder på samsung Af ALICE i Småopgaver
White papers
Flere white papers »