---

Nogle gode forslag til hvordan jeg

laver en knap, bestående af grafik + tekst, der skal fungerer som link?

Jeg vil altså gerne have
1) tekst placeret centeret (v+h) på et billede
2) gøre denne konstruktion til et link
3) kun gøre brug af css2 og html (validerende)

Jeg har rodet lidt med det - men kan ikke finde en løsning.

problemet er at <a> kun må indeholde inline elementer, og teksten ikke
kan placeres på andre måder end ved centrerings style ( størrelse kendes
jo ikke )

/Hans

---

hal@no_spam_statsbiblioteket.dk skrev :

>laver en knap, bestående af grafik + tekst, der skal fungerer som link?

F.eks. som på
http://home13.inet.tele.dk/smedpark/webhjaelp/link.htm
--
Knud

---

Knud Gert Ellentoft wrote:

> F.eks. som på
> http://home13.inet.tele.dk/smedpark/webhjaelp/link.htm

Nope, teksten skal stå centreret på billedet, der skal være en del af
linket

/Hans

---

hal@no_spam_statsbiblioteket.dk skrev :

>Nope, teksten skal stå centreret på billedet, der skal være en del af
>linket

Har ikke lige tid at prøve noget nu.

Men hvad kender du ikke størrelsen på?

Billedet eller teksten?

Et par forslag er at lade billedet være et baggrundsbillede.

Bruge z-index til at placere billedet bagerst, kræver så at du
kan placere boksen med position: absolute.

Ellers kan du ikke lave en testside med et eksempel med et
billede og en tekst, så jeg har det at arbejde ud fra.
--
Knud

---

Knud Gert Ellentoft wrote:
> hal@no_spam_statsbiblioteket.dk skrev :
>
>
>>Nope, teksten skal stå centreret på billedet, der skal være en del af
>>linket
>
>
> Har ikke lige tid at prøve noget nu.
>
> Men hvad kender du ikke størrelsen på?
>
> Billedet eller teksten?
>
> Et par forslag er at lade billedet være et baggrundsbillede.
>
> Bruge z-index til at placere billedet bagerst, kræver så at du
> kan placere boksen med position: absolute.
>
> Ellers kan du ikke lave en testside med et eksempel med et
> billede og en tekst, så jeg har det at arbejde ud fra.


Jeg kender ikke størrelsen af teksten; ( kender ikke folks zoom faktor -
eller tekstens indhold. Her er et eksempel ( der tilfældigtvis virker
i mozilla ( i IE skal a taget være omkribg td cellen for det virker)),
men ikke er valid HTML:

<div class="latin" style="display:block; position:absolute; width80px;
heigth:80px; left:123px; top:456px;">
<img src="my_pix.gif" alt="knap" class="knap" />
<a href="http://foo.bar.org/somewhere.htm" tabindex="1">
<table class="knap">
<tr><td class="text">Foo <br />
<span lang="en">Bar</span>
</td></tr></table></a></div>


med følgende css:

..knap{
position: absolute;
top: 0px;
left: 0px;
border: none;
}

img.knap{
z-index: 1;
}

table.knap{
z-index: 2;
width: 100%;
heigth: 100%;
}

..text{
z-index: 2;
}

td.text{
text-align:center;
vertical-align: middle;
width: 100%;
height: 100%;
}


Det er følgende jeg gerne vil have skrivet om til vaild HTML med samme
funktionalitet ( her er det hele tabellen der fungerer som link ( og
denne har samme størrelse som billedet ). Jeg tror dog ikke det er
muligt (hvis også det skal virke i fleste browsere ), medmindre at jeg
scripter mig ud af problemet

/Hans

---

hal@no_spam_statsbiblioteket.dk skrev :

>Det er følgende jeg gerne vil have skrivet om til vaild HTML med samme
>funktionalitet ( her er det hele tabellen der fungerer som link ( og
>denne har samme størrelse som billedet ). Jeg tror dog ikke det er
>muligt (hvis også det skal virke i fleste browsere ), medmindre at jeg
>scripter mig ud af problemet

Eftersom jeg forstår at det er samme link, der skal være på tekst
og billede, den simple løsning med både link på tekst og på
billede?

<div class="latin" style="display:block; position:absolute;
width80px;
heigth:80px; left:123px; top:456px;">
<a href="http://dr.dk" tabindex="1">
<img src="lille.jpg" alt="knap" class="knap" />
</a>
<table class="knap">
<tr><td class="text"><a href="http://dr.dk" tabindex="1">Foo <br
/>
<span lang="en">Bar</span></a>
</td></tr></table></div>

<div .. style="display:block; ...

En div er altid et blockelement, så display er overflødig.

Eller sætte billedet i cellen som baggrundsbillede er det ikke en
mulighed?
--
Knud

---

Knud Gert Ellentoft wrote:
> Eftersom jeg forstår at det er samme link, der skal være på tekst
> og billede, den simple løsning med både link på tekst og på
> billede?

Jo, det er da en mulighed; men kan give problemer med at styre hover
stylen ( brugeren skulle gerne opfatte det som én knap ) - men det lyder
som et fornuftigt forslag.

> En div er altid et blockelement, så display er overflødig.

- fuldstændigt korrekt

> Eller sætte billedet i cellen som baggrundsbillede er det ikke en
> mulighed?

- Nej den går ikke så er billedet ikke en del af linket, og
baggrundsbilleder kan heller ikke scriptes til at opnå samme effekt


/Hans

---

hal@no_spam_statsbiblioteket.dk skrev :

>- Nej den går ikke så er billedet ikke en del af linket, og
>baggrundsbilleder kan heller ikke scriptes til at opnå samme effekt

Du sætter bare display: block på a samt width: 100%, så vil hele
cellen fungere som link.
--
Knud

---

Knud Gert Ellentoft wrote:

> Du sætter bare display: block på a samt width: 100%, så vil hele
> cellen fungere som link.

Det vil jeg prøve
Kan jeg så samtidigt centerer linkteksten både vertikalt og horizontalt
i forhold hertil ( den kommer jo nu ind i et nyt block element ) ?

/Hans

---

hal@no_spam_statsbiblioteket.dk skrev :

>Kan jeg så samtidigt centerer linkteksten både vertikalt og horizontalt
>i forhold hertil ( den kommer jo nu ind i et nyt block element ) ?

text-align: center centrerer jo vertikalt.

Horizontalt er lidt sværere, men i en celle burde
vertical-align: middle;
virke.

Hvis ikke, så må du også bruge display: table-cell;
sidstnævnte er dog ikke understøttet i IE, men virker fint i
Opera og Mozilla.

--
Knud

---

> Knud Gert Ellentoft skrev:
>
> Du sætter bare display: block på a samt width: 100%, så vil hele
> cellen fungere som link.

Hans svarede:
> Det vil jeg prøve

Faktisk det samme som jeg foreslår, men det kunne ikke bruges?

Man bliver vel en smule harm over at blive ignoreret, mens diskutionen
foregår direkte hen over svaret....men tak for den tid jeg brugte.

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Michael Arildsen skrev:
>>Knud Gert Ellentoft skrev:
>>
>> Du sætter bare display: block på a samt width: 100%, så vil hele
>> cellen fungere som link.

> Faktisk det samme som jeg foreslår, men det kunne ikke bruges?
> Man bliver vel en smule harm over at blive ignoreret, mens diskutionen
> foregår direkte hen over svaret....men tak for den tid jeg brugte.

Jeg har prøvet det samme flere gange, og må konstatere at
nyhedsgrupperne er en hårdtslående lektion i markedsføring og i hvad der
er let at forstå hvis der er flere svar til samme spørgsmål :-/

Dit svar siger det samme - og bruger tilmed langt færre hjælpetimer -
desværre er det ikke lige så let at gå til og forstå for den spørgende,
og du siger selv at du ikke er sikker på at det virker. Jeg vil tro det
er derfor spørgeren har forfulgt det andet svar.

Ovenstående skriver jeg ikke for at sige at dit svar ikke var godt nok -
tværtimod - det var det - du var bare uheldig at spørgeren fandt noget
han havde mere tiltro til og som så lettere ud ved første øjekast.

På den igen - der er garanteret mange som stadig har brug for din hjælp
af og til - jeg vil gerne sige tak for din tid hvis det kan plastre en
smule til

vi ses forhåbentlig igen i en anden tråd

mvh

Jesper Brunholm

---

Michael Arildsen <f.arildsen@email.dk> skrev:

> Faktisk det samme som jeg foreslår, men det kunne ikke bruges?
>
> Man bliver vel en smule harm over at blive ignoreret, mens diskutionen
> foregår direkte hen over svaret....men tak for den tid jeg brugte.

Det kan ikke betale sig at blive harm, så når du aldrig videre. Når du
stiller spørgsmål her, kan du ikke forvente at få svar. Omvendt kan du
heller ikke forvente at nogen lytter til dig og dine svar når du kommer
med noget, uanset hvor godt det er.

Jamen, skal man virkelig være kendt for at virke seriøs? Ja, det er mit
indtryk af gruppen her. Jo flere seriøse svar på problemstilligner du kan
komme med, jo mere seriøs virker du - det er bare vilkårene her.

Jeg synes naturligvis at det er beklageligt at det er sådan, men det er
min erfaring efter mange år i disse grupper.

Min bedste anbefaling er at lave en hjemmeside med svar på de
problemer folk har vanskeligheder med - så har andre også noget at
henvise til. Jeg har lavet html-faq.dk - den er godt besøgt, og der er
mange der henviser til de artikler der ligger for at besvare spørgsmålene,
så...

Fat mod, kom videre - det er ikke så svært. Jeg har endnu ikke set et
link til din hjemmeside?

--
Allan
http://html-faq.dk

---

>Hans skrev:
>
>
>
> Jeg vil altså gerne have
> 1) tekst placeret centeret (v+h) på et billede
> 2) gøre denne konstruktion til et link
> 3) kun gøre brug af css2 og html (validerende)
>
> Jeg har rodet lidt med det - men kan ikke finde en løsning.
>
> problemet er at <a> kun må indeholde inline elementer, og teksten ikke
> kan placeres på andre måder end ved centrerings style ( størrelse kendes
> jo ikke )
>
> /Hans
>


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Beklager, det første tomme svar - en fejl40 herfra

>Hans skrev:
>
> Jeg vil altså gerne have
> 1) tekst placeret centeret (v+h) på et billede
> 2) gøre denne konstruktion til et link
> 3) kun gøre brug af css2 og html (validerende)
>
> Jeg har rodet lidt med det - men kan ikke finde en løsning.
>
> problemet er at <a> kun må indeholde inline elementer, og teksten ikke
> kan placeres på andre måder end ved centrerings style ( størrelse kendes
> jo ikke )
>
> /Hans

Jeg er ikke helt sikker på om det kan bruges, men jeg har lavet en knap
med mouse-over funktion. Måske kan du bruge princippet?

[CSS]...

menu { width:100px;height:10px;
border:1px solid #000000;
text-align:center; }

menu a { display:block;
padding:5px;
height:100%;
width:100%;
background-image:url("image_out.jpg");
background-repeat:repeat-x;
text-decoration:none;
font-family:verdana;
font-weight:bold;
font-size:10px;
color:#fff; }

menu a:hover { background-image:url("image_in.jpg");
background-repeat:repeat-x;
color:#000; }


[HTML]...

<div class="menu"><a href="">Knap</a></div>


Mvh Michael Arildsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials