---

På http://vinsiderne.dk/test9/vinanmeldelser_test.htm har jeg lavet et
link som blok (display: block), når man fører musen hen over området
med Navn (kun de to øverste rækker).
For at blokken også skal udløses, når man fører musen hen over
stjernebilledet har jeg indsat samme link ved dette.

Det virker sådan set ok, men der er nogle ulemper, især: 1) Rent
arbejdsmæssigt vil det være en fordel kun at skulle indsætte et link,
2) hvis musen føres hen et sted, hvor der ikke er noget tekst, udløses
blokken ikke.

Ideelt ville være, hvis hele det område, hvor den grå hover-blok-
effekt kan ses, linkmæssigt kunne fungere som en helhed, så effekten
udløses uanset hvor musen befinder sig indenfor dette område. Er det
muligt at omdanne hele den div, der indeholder dette (.row1) til et
link?

/Preben

---

Preben Nielsen kom med følgende:
> På http://vinsiderne.dk/test9/vinanmeldelser_test.htm har jeg lavet et
> link som blok (display: block), når man fører musen hen over området
> med Navn (kun de to øverste rækker).
> For at blokken også skal udløses, når man fører musen hen over
> stjernebilledet har jeg indsat samme link ved dette.
>
> Det virker sådan set ok, men der er nogle ulemper, især: 1) Rent
> arbejdsmæssigt vil det være en fordel kun at skulle indsætte et link,
> 2) hvis musen føres hen et sted, hvor der ikke er noget tekst, udløses
> blokken ikke.
>
> Ideelt ville være, hvis hele det område, hvor den grå hover-blok-
> effekt kan ses, linkmæssigt kunne fungere som en helhed, så effekten
> udløses uanset hvor musen befinder sig indenfor dette område. Er det
> muligt at omdanne hele den div, der indeholder dette (.row1) til et
> link?
>
> /Preben

Du kunne prøve at sætte linket som row1.
Og du kan godt mikse class:
<a class="row1 vinanmeldelse"> ...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 28 Jan., 19:45, Birger Sørensen wrote:

> Du kunne pr ve at s tte linket som row1.

Ja, hvorfor tænkte jeg ikke lige på det. Men der sker så det at
blokken gemmer sig omme bagved, som det ses her:
http://vinsiderne.dk/test9/vinanmeldelser_test_1.htm Er der nogen
løsning på det?

En helt anden ting: De der links, som du og mange andre kaster til
jeres hjemmesider under jeres indlæg, indsætter du dem manuelt efter
hvert indlæg, eller findes der en automatiseret måde i ens profil? Jeg
har ledt efter sidstnævnte mulighed men har ikke kunnet finde den.

/Preben

---

Den 28-01-2011 21:58, Preben Nielsen skrev:

> En helt anden ting: De der links, som du og mange andre kaster til
> jeres hjemmesider under jeres indlæg, indsætter du dem manuelt efter
> hvert indlæg, eller findes der en automatiseret måde i ens profil? Jeg
> har ledt efter sidstnævnte mulighed men har ikke kunnet finde den.
>
> /Preben

Nyhedsgrupper - Kontoindstillinger
(Thunderbird)
--
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Preben Nielsen skrev:
> On 28 Jan., 19:45, Birger Sørensen wrote:
>
>> Du kunne pr ve at s tte linket som row1.
>
> Ja, hvorfor tænkte jeg ikke lige på det. Men der sker så det at
> blokken gemmer sig omme bagved, som det ses her:
> http://vinsiderne.dk/test9/vinanmeldelser_test_1.htm Er der nogen
> løsning på det?
>
> En helt anden ting: De der links, som du og mange andre kaster til
> jeres hjemmesider under jeres indlæg, indsætter du dem manuelt efter
> hvert indlæg, eller findes der en automatiseret måde i ens profil? Jeg
> har ledt efter sidstnævnte mulighed men har ikke kunnet finde den.
>
> /Preben

Prøv med
<a href="vinanmeldelse_2.htm" class="row1 vinanmeldelse">
<div class="stjerner">
<img
src="billeder/stjerner/ny/5_stjerner_original_graa_baggrund_12h_tp1_hue17.png"
alt="" class="stjernebillede">
</div>
<div class="flaske">
<img src="billeder/farvede_flasker/roed_flaske_moerk1.gif"
alt="">
</div>
<div class="vin_info">Navn Navn Navn Navn Navn Navn Navn Navn Navn
Navn Navn Navn Navn Navn
</div>
</a>

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 28 Jan., 22:15, Birger Sørensen wrote:

> Prøv med
> <a href="vinanmeldelse_2.htm" class="row1 vinanmeldelse">
>    <div class="stjerner">
>       <img
> src="billeder/stjerner/ny/5_stjerner_original_graa_baggrund_12h_tp1_hue17.p­ng"
> alt="" class="stjernebillede">
>       </div>
>    <div class="flaske">
>       <img src="billeder/farvede_flasker/roed_flaske_moerk1.gif"
> alt="">
>       </div>
>    <div class="vin_info">Navn Navn Navn Navn Navn Navn Navn Navn Navn
> Navn Navn Navn Navn Navn
>       </div>
>    </a>

Det gør ingen forskel.

/Preben

---

On 28 Jan., 22:15, Birger Sørensen wrote:

> Prøv med
> <a href="vinanmeldelse_2.htm" class="row1 vinanmeldelse">
>    <div class="stjerner">
>       <img
> src="billeder/stjerner/ny/5_stjerner_original_graa_baggrund_12h_tp1_hue17.p­ng"
> alt="" class="stjernebillede">
>       </div>
>    <div class="flaske">
>       <img src="billeder/farvede_flasker/roed_flaske_moerk1.gif"
> alt="">
>       </div>
>    <div class="vin_info">Navn Navn Navn Navn Navn Navn Navn Navn Navn
> Navn Navn Navn Navn Navn
>       </div>
>    </a>

Ja, nu kom det om foran. Så jeg vil umiddelbart tro at resten er
justeringer. Men jeg må konstatere at jeg er for træt nu - kom lige
til at slette et forkert indlæg, men heldigvis har I citeret, så
forståelsen af tråden burde være intakt.

Vender tilbage, når friskheden har indfundet sig...Godnat!

/Preben

---

Så er jeg klar igen.

Jeg kan få det til at virke perfekt med en lille ændring i forhold til
dit forslag, Birger. Mit ser sådan ud:

<div class="row1">
<a href="vinanmeldelse_2.htm" class="vinanmeldelse">
<div class="stjerner">
<img class="stjernebillede" alt="" src="billeder/stjerner/ny/
5_stjerner_original_graa_baggrund_12h_tp1_hue17.png" />
</div>
<div class="flaske"><img class="border0" src="billeder/farvede_flasker/
roed_flaske_moerk1.gif" alt=""/></div>
<div class="vin_info">Navn Navn Navn Navn Navn Navn Navn Navn Navn
Navn Navn Navn Navn Navn </div>
</a>
</div>

Men det validerer ikke. De fejl, der meldes om, ser for mig ud til at
handle om, at man ikke må have div'er inde i et link - som jo er selve
løsningsmodellen. Jeg tilstræber, at mine sider validerer 100%, har
indtil videre kun accepteret en enkelt error (css-runde hjørner i en
boks, hvilket jeg går ud fra løser sig med tiden). Nogle forslag?

/Preben

---

On 29-01-2011 09:31, Preben Nielsen wrote:
> Så er jeg klar igen.
>
> Jeg kan få det til at virke perfekt med en lille ændring i forhold til
> dit forslag, Birger. Mit ser sådan ud:
>
> <div class="row1">
> <a href="vinanmeldelse_2.htm" class="vinanmeldelse">
> <div class="stjerner">
> <img class="stjernebillede" alt="" src="billeder/stjerner/ny/
> 5_stjerner_original_graa_baggrund_12h_tp1_hue17.png" />
> </div>
> <div class="flaske"><img class="border0" src="billeder/farvede_flasker/
> roed_flaske_moerk1.gif" alt=""/></div>
> <div class="vin_info">Navn Navn Navn Navn Navn Navn Navn Navn Navn
> Navn Navn Navn Navn Navn</div>
> </a>
> </div>
>
> Men det validerer ikke. De fejl, der meldes om, ser for mig ud til at
> handle om, at man ikke må have div'er inde i et link - som jo er selve
> løsningsmodellen. Jeg tilstræber, at mine sider validerer 100%, har
> indtil videre kun accepteret en enkelt error (css-runde hjørner i en
> boks, hvilket jeg går ud fra løser sig med tiden). Nogle forslag?
>
> /Preben

Prøv at skifte dine <div class ud med <span class og så lav en class
..highlight.

http://studio9.ws/tutorials/highlight-div-tag.php

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Glemte lige link: http://vinsiderne.dk/test9/vinanmeldelser_test_2.htm

---

Preben Nielsen sendte dette med sin computer:
> Glemte lige link: http://vinsiderne.dk/test9/vinanmeldelser_test_2.htm

<a> elementet er inline, og inline elementer kan ikke indeholde
blockelementer, som div'er er.
Så røv at sætte display : block; på vinanmeldelse - det laver den om
til et blockelement, og så skulle det validere.
Det laver også om på hvordan der klikkes på linket - normalt er kun
teksten klikbar, men hvis du sætter display:block, bliver hele
elementet klikbart. Det er smart i menuer o.l., men i almindelig tekst,
kan man ikke bruge det - der skal <a> stadig være et inline element.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 28 Jan., 22:05, Jørgen Farum Jensen wrote:

> Nyhedsgrupper - Kontoindstillinger
> (Thunderbird)

Har du mulighed for at kaste et link? Jeg kan simpelthen ikke finde
det.

On 29 Jan., 11:14, Karl Erik Christensen wrote:

> Prøv at skifte dine <div class ud med <span class og så lav en class
> .highlight.
>
> http://studio9.ws/tutorials/highlight-div-tag.php

Det førte i mål. Så tak for hjælpen.

Umiddelbart forekommer det mig dog lidt pudsigt at skulle have
billeder inden i <span>, og så skal der også bruges negative top-
margener for at skulle justere billedernes placering korrekt. Men det
virker og det validerer. html-koden ser nu sådan ud:
<div class="row1 highlight">
<a href="vino.htm">
<span class="stjerner">
<img class="stjernebillede" alt="" src="billeder/stjerner/ny/
5_stjerner_original_graa_baggrund_12h_tp1_hue17.png" /></span>
<span class="flaske"><img class="border0" alt="" src="billeder/
farvede_flasker/roed_flaske_moerk1.gif" height="20" width="6" /></
span>
<span class="vin_info">Navn Navn Navn</span>
</a>
</div>

On 29 Jan., 11:42, Birger Sørensen wrote:

> <a> elementet er inline, og inline elementer kan ikke indeholde
> blockelementer, som div'er er.
> S r v at s tte display : block; p vinanmeldelse - det laver den om
> til et blockelement, og s skulle det validere.
> Det laver ogs om p hvordan der klikkes p linket - normalt er kun
> teksten klikbar, men hvis du s tter display:block, bliver hele
> elementet klikbart. Det er smart i menuer o.l., men i almindelig tekst,
> kan man ikke bruge det - der skal <a> stadig v re et inline element.

Valideringen brokker sig over præcis det samme med display: block som
uden. Så selv om jeg pga. frihed for krumspring med negativ margen for
at justere billedplacering (nævnt ovenfor) egentlig bedre kan lide
denne kode, der jo tilmed virker perfekt, må jeg heller holde mig til
<span> versionen.

/Preben

---

Preben Nielsen skrev:
> On 28 Jan., 22:05, Jørgen Farum Jensen wrote:
>
>> Nyhedsgrupper - Kontoindstillinger
>> (Thunderbird)
>
> Har du mulighed for at kaste et link? Jeg kan simpelthen ikke finde
> det.
>
> On 29 Jan., 11:14, Karl Erik Christensen wrote:
>
>> Prøv at skifte dine <div class ud med <span class og så lav en class
>> .highlight.
>>
>> http://studio9.ws/tutorials/highlight-div-tag.php
>
> Det førte i mål. Så tak for hjælpen.
>
> Umiddelbart forekommer det mig dog lidt pudsigt at skulle have
> billeder inden i <span>, og så skal der også bruges negative top-
> margener for at skulle justere billedernes placering korrekt. Men det
> virker og det validerer. html-koden ser nu sådan ud:
> <div class="row1 highlight">
> <a href="vino.htm">
> <span class="stjerner">
> <img class="stjernebillede" alt="" src="billeder/stjerner/ny/
> 5_stjerner_original_graa_baggrund_12h_tp1_hue17.png" /></span>
> <span class="flaske"><img class="border0" alt="" src="billeder/
> farvede_flasker/roed_flaske_moerk1.gif" height="20" width="6" /></
> span>
> <span class="vin_info">Navn Navn Navn</span>
> </a>
> </div>
>
> On 29 Jan., 11:42, Birger Sørensen wrote:
>
>> <a> elementet er inline, og inline elementer kan ikke indeholde
>> blockelementer, som div'er er.
>> S r v at s tte display : block; p vinanmeldelse - det laver den om
>> til et blockelement, og s skulle det validere.
>> Det laver ogs om p hvordan der klikkes p linket - normalt er kun
>> teksten klikbar, men hvis du s tter display:block, bliver hele
>> elementet klikbart. Det er smart i menuer o.l., men i almindelig tekst,
>> kan man ikke bruge det - der skal <a> stadig v re et inline element.
>
> Valideringen brokker sig over præcis det samme med display: block som
> uden. Så selv om jeg pga. frihed for krumspring med negativ margen for
> at justere billedplacering (nævnt ovenfor) egentlig bedre kan lide
> denne kode, der jo tilmed virker perfekt, må jeg heller holde mig til
> <span> versionen.
>
> /Preben

Det må være fordi validatorerne går efter elementets navn, og ikke den
faktiske opsætning. Syntes nu ellers det plejer at fungere.
Men så må du sætte de andre til at være spans - og du skal så give dem
en display:block; så burde det ikke være nødvendigt med negative margin
og andre fiksfakserier...

http://bbsorensen.com/test/vin/vinanmeldelser_test_2.htm
Ved godt det ikke validerer - FF laver doctype om når der gemmes sider
- og jeg har ikke tid lige nu. Den del det handler om validerer. Og jeg
har kun ændret den første...
Det eneste du behøver gør i forhold til det oprindelige, er at ændre
div'er inde i a er til span, og tilføje
a.vinanmeldelse span {
   display : block;
   }
til din css.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 29 Jan., 18:22, Birger Sørensen <s...@bbsorensen.com> wrote:

> Det må være fordi validatorerne går efter elementets navn, og ikke den
> faktiske opsætning. Syntes nu ellers det plejer at fungere.
> Men så må du sætte de andre til at være spans - og du skal så give dem
> en display:block; så burde det ikke være nødvendigt med negative margin
> og andre fiksfakserier...
>
> Det eneste du behøver gør i forhold til det oprindelige, er at ændre
> div'er inde i a er til span, og tilføje
> a.vinanmeldelse span {
>         display : block;
>         }
> til din css.

Fuldstændig korrekt. Det både virker og validerer. Og koden er enkel
og uden fiksfakserier. Så det bliver den løsning jeg bruger.
Tak for hjælpen!

/Preben

---

Hej Preben.
"Preben Nielsen" skrev...
På http://vinsiderne.dk/test9/vinanmeldelser_test.htm har jeg lavet et
link som blok (display: block), når man fører musen hen over området
med Navn (kun de to øverste rækker).
For at blokken også skal udløses, når man fører musen hen over
stjernebilledet har jeg indsat samme link ved dette.

Det virker sådan set ok, men der er nogle ulemper, især: 1) Rent
arbejdsmæssigt vil det være en fordel kun at skulle indsætte et link,
2) hvis musen føres hen et sted, hvor der ikke er noget tekst, udløses
blokken ikke.

Ideelt ville være, hvis hele det område, hvor den grå hover-blok-
effekt kan ses, linkmæssigt kunne fungere som en helhed, så effekten
udløses uanset hvor musen befinder sig indenfor dette område. Er det
muligt at omdanne hele den div, der indeholder dette (.row1) til et
link?

/Preben


Som Karl Erik er inde på, så skal du udskifte nogle af dine <div>'er med
<span>.
Dette skyldes at en <div> er et blokelement og <span> er et inlineelement.

Og da du - for at opnå den ønskede effekt - skal have pakket noget ind i et
<a>, er du nødt til at udføre denne operation...


Jeg har taget det mest essentielle fra din kode og lavet dette:

CSS - tilføj nedenstående (skift selv farvekoder og tilføj evt. padding):
..row1 a {
width:100%;
min-height: 29px;
text-decoration:none;
display:block;
}
..row1 a:hover {
text-decoration:none;
background-color:#f00;
}


HTML:
<div class="row1">
<a href="vinanmeldelse_2.htm">
<span class="stjerner"><img class="stjernebillede" alt=""
src="http://vinsiderne.dk/test9/billeder/stjerner/ny/5_stjerner_original_graa_baggrund_12h_tp1_hue17.png"
/></span>

<span class="flaske"><img alt=""
src="http://vinsiderne.dk/test9/billeder/farvede_flasker/roed_flaske_moerk1.gif">

<span class="vin_info">Navn Navn Navn Navn Navn Navn Navn</span>
</a>
</div>

<div class="row2">
159,00 kr
</div>


Test kan ses her:
http://test.skovaa-munding.dk/PN/

NOTE:
Hvis du kigger i kildekoden, vil du opdage at der er en #wrap - den er kun
indsat for at centrere indholdet.


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."

---

Hej Dennis

Tak for din opmærksomhed og dine forklaringer.
Jeg ved ikke om jeg har været uklar i det indlæg jeg skrev små 4 timer
før dit, men jeg har løst problemet. Jeg fik Karl Eriks til at virke,
men valgte som nævnt at bruge Birgers. Begge er med span, men med
a.vinanmeldelse span {
display : block;
}
samt enklere kode som de forskelle, som jeg valgte ud fra.

Måske jeg burde have uploadet løsningen. Det gør jeg så her:
http://vinsiderne.dk/test9/vinanmeldelser_test_3.htm

Jeg er via arbejdet i forbindelse med denne tråd blevet opmærksom på
netop det du skriver om span som inlines. Jeg har blot altid tænkt på
span som noget til tekst indenfor en linje, men den er - har jeg
hermed lært - blot en neutral ting ligesom div med den forskel at den
skal bruges, når det er inline, og kan dermed ligeså godt rumme
billede som tekst.

/Preben

---

On 30-01-2011 14:50, Preben Nielsen wrote:
> Hej Dennis
>
> Tak for din opmærksomhed og dine forklaringer.
> Jeg ved ikke om jeg har været uklar i det indlæg jeg skrev små 4 timer
> før dit, men jeg har løst problemet. Jeg fik Karl Eriks til at virke,
> men valgte som nævnt at bruge Birgers. Begge er med span, men med
> a.vinanmeldelse span {
> display : block;
> }
> samt enklere kode som de forskelle, som jeg valgte ud fra.
>
> Måske jeg burde have uploadet løsningen. Det gør jeg så her:
> http://vinsiderne.dk/test9/vinanmeldelser_test_3.htm
> /Preben

Bør retfærdigvis indskydes, at omtalte løsning ikke er/var min.

Jeg læste Prebens indlæg, og lokaliserede problemet - ok, han ønsker
altså at hover en div.

Søgte på Google "css hover div", og ved lykketræf poppede det link jeg
sendte, op som nr.1.

Det tog mindre end 3 minutter at finde løsningen på Prebens problem,
vha. Google.

At Prebens css så kunne komprimeres, har jeg ikke studeret nærmere - jeg
vidste såmænd ikke en gang, hvordan den så ud.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign