CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

buxxy Praktikant

30. december 2011 - 04:24 Der er 6 kommentarer og
1 løsning

Valideret kode virker ikke efter hensigten.

Hej eksperter.

Jeg har downloadet en dropdown menu herfra: http://www.stunicholls.com/menu/pro_dropdown_2.html

Jeg ville så lige tjekke validering af koden, og kunne straks se at den var gal et enkelt sted i HTML-koden:
<a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>

Denne linje burde jo se ud som flg. hvis den vel og mærke skal validere:
<span class="down"><a href="#nogo27" id="contacts" class="top_link">Contacts</a></span>

Problemet med den validerede kode er, at dropdown menuen ikke viser en "pil ned" når der er en/flere undermenuer - det gør den ikke-validerede kode til gengæld.

Her er den validerede menu lagt op på min side (som ikke viser "pil ned"):
http://www.hundedebat.dk/dropdown_valid/dropdown_valid.html

Her er den ikke-validerede menu lagt op på min side (som viser "pil ned"):
http://www.hundedebat.dk/dropdown_not_valid/dropdown_not_valid.html

Er her mon et skarpt hovede der kan hitte en løsning på det ?

Jeg har læst / søgt efter evt. lignende problemstilling - dog uden held mht. at hitte en løsning derpå.

Nå, anyway så må I alle have et rigtigt godt nytår!

Mvh.
Buxxy.

Synes godt om

buxxy Praktikant

30. december 2011 - 06:14 #1

Nå, sørme nok om jeg ikke selv hittede en løsning. Jeg kom i tanke om, om jeg ikke bare kunne lave en a. class i stedet for at bruge span i style filen - og så bruge den i HTML-filen - og det kan man åbenbart godt.

Jeg ændrede blot disse linjer i css-filen:

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}

#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}

#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

- til:

#nav li a.top_link_noarrow {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}

#nav li a.top_link_arrow {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link_noarrow {background:url(three_1.gif) no-repeat right top;}

#nav li:hover a.top_link_arrow {background:url(three_1a.gif) no-repeat right top;}

Det er skisme rart når man selv kan hitte en løsning :-)

Synes godt om

DeeDawg Nybegynder

30. december 2011 - 06:59 #2

Rent faktisk behøver du ikke ændre så drastisk på tingene. Alt du behøver at ændre på er dette:

#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

Som skal se således ud (ændringer er markeret med rødt):

#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} /* background: url(three_0.gif); er fjernet */
#nav li span {float:left; display:block; margin-left:12px; padding-right:24px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li span.down {float:left; display:block; margin-left:12px; padding-right:24px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li.top:hover{ background: url(three_1.gif) no-repeat; }
#nav li:hover a.top_link {color:#fff;} /* background: url(three_1.gif) no-repeat; er fjernet */
#nav li:hover span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover span.down {background:url(three_1a.gif) no-repeat right top;}

Synes godt om

olebole Juniormester

30. december 2011 - 15:17 #3

<ole>

Lige en enkelt detalje: Det virker, som om du undrer dig over, en valid kode ikke virker. Det er i den forbindelse vigtigt at huske på, at:

Valid kode er ikke nødvendigvis god kode - men god kode er altid valid.

/mvh
</bole>

Synes godt om

buxxy Praktikant

30. december 2011 - 17:07 #4

Hej DeeDawg og Ole Bole.

@DeeDawg: Det var da en finere løsning du kom med der - den vælger jeg at bruge i stedet ;-) Du skal have mange tusind tak for dit svar/din løsning. Jeg vil meget gerne belønne dig for dit svar, så hvis du er frisk - så opretter jeg en ny tråd med point til dig (hvis man må's de da ? )

Anyway: Igen mange tak for svaret.

@Ole Bole: Hmm, det vil jeg give dig ret i. Det er dog meget sjældent jeg støder ind i/har stødt ind i ikke-valid kode, som heller ikke har virket efter hensigten. Jeg gør mest i PHP (og HTML selvf.), og skriver altid mine koder som validerer iht. w3c. Men denne gang var det <li><lu>-tags som jeg absolut ikke rigtig kan overskue. Nå, jeg har taget dine, i øvrigt vise ord, til mig :-)

I må begge to have et rigtigt godt nytår.

Synes godt om

buxxy Praktikant

30. december 2011 - 17:15 #5

Hehe, for ikke lige at lyde helt "tabt bag af en vogn", så vil jeg nævne at det ikke kun/blot er den menu's css man kan downloade, jeg forsøgte at ændre på. Det er derimod en implemntering af css'et i en "hjemmestrikket" dropdown menu, med tilhørende administrations panel til oprettelse af links, ændre på style/udseendet mm. Det er så skrevet i PHP/SQL, og ja så selvfølgelig det implementerede css + en .js-fil.

Synes godt om

DeeDawg Nybegynder

30. december 2011 - 17:44 #6

Så længe det fremgår af tråden, at det er point til en bestemt person, tror jeg ikke det strider imod nogle regler, men jeg ved det ikke.

Uanset hvad så beholder du dem bare selv. Det vigtigste er at du får løst dit problem. :)

Synes godt om

olebole Juniormester

30. december 2011 - 18:04 #7

- hvilket bringer os videre til 'OleBoles 2. Lov':

Kode, der virker, er ikke nødvendigvis god kode - men god kode virker *D

Ekspertens database rummer fantasillioner af tråde om valid kode, som ikke virker efter hensigten. Brug af en valid DTD, som sætter IE i quirks mode, resulterer i en valid kode, der vises forskelligt i forskellige browsere - og JS-funktionalitet kan også være berørt. Det er bare ét af utallige eksempler =)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS