|
|
 | Hjælp til css
Fra : Steen F. |
Dato : 26-07-11 06:01 |
|
Er dette gruppen for CSS også?
Jeg har brug for lidt hjælp til flg. CSS som står i BODY men som jeg
gerne vil have flyttet ned og indlejret så det kun gælder lokalt.
<style type="text/css">
body {font-family: "Arial black", sans-serif;
font-size: 22px}
a:link { color: #e00000; text-decoration: underline }
a:visited { color: #e00000; text-decoration: underline }
a:active, a:hover { color: #06c0bb; text-decoration: none }
</style>
Den gør, at når man bevæger musen over et link, så skifter teksten farve.
Men jeg har andre links som ikke skal skifte farve.
Mvh
Steen
| |
 Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 08:33 |
|
Steen F. skrev:
> Er dette gruppen for CSS også?
Ja.
> Jeg har brug for lidt hjælp til flg. CSS som står i BODY men som jeg
> gerne vil have flyttet ned og indlejret så det kun gælder lokalt.
Det klares ved at du laver en klasse. Der er flere måder at gøre
det på, men jeg vælger i eksemplet at lave en div sådan at alle
dens links er stylet, mens det ikke berører links uden for
div'en. Jeg bruger klassenavnet "menu", men du skal finde et
andet beskrivende navn hvis det ikke drejer sig om en menu:
CSS
..menu a { color: #e00000; text-decoration: underline; }
..menu a:hover { color: #06c0bb; text-decoration: none; }
HTML:
<div class='menu'>
<a href='HisMastersVoice.mpg' title='En gammel indspilning'>Et nummer med Kathleen Ferrier</a>
</div>
Jeg har benyttet mig af et par fiduser der ikke direkte har med
dit spørgsmål at gøre, men det forenkler CSS-opskriften.
1. Først styler jeg alle links i klassen menu. Så er jeg fri for
at bruge to linjer med samme style.
2. Jeg springer a:active over. Den har ingen praktisk betydning.
Den spiller kun en rolle i det mikrosekund der går fra man
trykker museknappen ned til man slipper den igen. Men du kan
selvfølgelig nemt style den hvis du vil alligevel, blot du passer på
rækkefølgen sådan som du har gjort i dit eget eksempel.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Birger Sørensen (26-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 26-07-11 09:02 |
|
Bertel Lund Hansen formulerede Tuesday:
> 2. Jeg springer a:active over. Den har ingen praktisk betydning.
> Den spiller kun en rolle i det mikrosekund der går fra man
> trykker museknappen ned til man slipper den igen. Men du kan
> selvfølgelig nemt style den hvis du vil alligevel, blot du passer på
> rækkefølgen sådan som du har gjort i dit eget eksempel.
Der forudsætter du vist, at alle bruger musen til navigering.
Tabber man sig gennem en menu, vil a:focus være som en slags a:hover
for keyboardet. Det er i hvert fald den opfattelse jeg har af det.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
 Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 09:16 |
|
Birger Sørensen skrev:
> Der forudsætter du vist, at alle bruger musen til navigering.
> Tabber man sig gennem en menu, vil a:focus være som en slags a:hover
> for keyboardet. Det er i hvert fald den opfattelse jeg har af det.
Åh, det har jeg ikke tænkt på før. Nu skal alle mine hjemmesider
revideres.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Birger Sørensen (26-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 26-07-11 10:43 |
|
Bertel Lund Hansen forklarede:
> Birger Sørensen skrev:
>
>> Der forudsætter du vist, at alle bruger musen til navigering.
>> Tabber man sig gennem en menu, vil a:focus være som en slags a:hover
>> for keyboardet. Det er i hvert fald den opfattelse jeg har af det.
>
> Åh, det har jeg ikke tænkt på før. Nu skal alle mine hjemmesider
> revideres.
I disse tider, hvor alskens "handikap" skal tilgodeses, syntes jeg bare
jeg ville nævne det.
Og det er jo bare at tage focus med:
a:focus:hover {...}
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 11:26 |
|
Birger Sørensen skrev:
>> Åh, det har jeg ikke tænkt på før. Nu skal alle mine hjemmesider
>> revideres.
> Og det er jo bare at tage focus med:
> a:focus:hover {...}
Det prøvede jeg, og bagefter prøvede jeg på en side at style
active separat. Ingen af delene gjorde nogen forskel ved Opera og
Firefox.
Lige nu er a:active stylet på min hjemmeside på alle links
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Birger Sørensen (26-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 26-07-11 13:17 |
|
Bertel Lund Hansen udtrykte præcist:
> Birger Sørensen skrev:
>> Og det er jo bare at tage focus med:
>> a:focus:hover {...}
>
> Det prøvede jeg, og bagefter prøvede jeg på en side at style
> active separat. Ingen af delene gjorde nogen forskel ved Opera og
> Firefox.
>
> Lige nu er a:active stylet på min hjemmeside på alle links
:active er vel bare en oplysning til brugeren om at hyn har aktiveret
linket; det bruges fra der klikkes eller tastes, til siden skifter.
Det er, IMHO, vigtigere at få :focus med, sammen med :hover - af hensyn
til de mennesker der navigerer med tastaturet i stedet for musen.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 13:41 |
|
Birger Sørensen skrev:
> :active er vel bare en oplysning til brugeren om at hyn har aktiveret
> linket; det bruges fra der klikkes eller tastes, til siden skifter.
Det var jo lige præcis det jeg skrev først: en ligegyldig
indstilling.
> Det er, IMHO, vigtigere at få :focus med, sammen med :hover - af hensyn
> til de mennesker der navigerer med tastaturet i stedet for musen.
Jamen, jeg kan ikke se forskel på om jeg tager det med eller ej.
Nu lægger jeg siden om til focus i stedet for det med active.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Birger Sørensen (26-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 26-07-11 15:45 |
|
Den 7/26/2011, skrev Bertel Lund Hansen:
> Birger Sørensen skrev:
>
>>> active er vel bare en oplysning til brugeren om at hyn har aktiveret
>> linket; det bruges fra der klikkes eller tastes, til siden skifter.
>
> Det var jo lige præcis det jeg skrev først: en ligegyldig
> indstilling.
>
>> Det er, IMHO, vigtigere at få :focus med, sammen med :hover - af hensyn
>> til de mennesker der navigerer med tastaturet i stedet for musen.
>
> Jamen, jeg kan ikke se forskel på om jeg tager det med eller ej.
> Nu lægger jeg siden om til focus i stedet for det med active.
Hvis du har focus med, på samme måde som hover, skal links blive
highlighted på samme måde som ved hover, når du tabber gennem dem.
Pointen er, at man skal kunne se, hvilket link der er fokused - hvad
der vil blive aktiveret ver tast på Enter/(spacebar)
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 16:16 |
|
Birger Sørensen skrev:
> Den 7/26/2011, skrev Bertel Lund Hansen:
>> Birger Sørensen skrev:
>>
>>>> active er vel bare en oplysning til brugeren om at hyn har aktiveret
>>> linket; det bruges fra der klikkes eller tastes, til siden skifter.
>>
>> Det var jo lige præcis det jeg skrev først: en ligegyldig
>> indstilling.
>>
>>> Det er, IMHO, vigtigere at få :focus med, sammen med :hover - af hensyn
>>> til de mennesker der navigerer med tastaturet i stedet for musen.
>>
>> Jamen, jeg kan ikke se forskel på om jeg tager det med eller ej.
>> Nu lægger jeg siden om til focus i stedet for det med active.
>
> Hvis du har focus med, på samme måde som hover, skal links blive
> highlighted på samme måde som ved hover, når du tabber gennem dem.
> Pointen er, at man skal kunne se, hvilket link der er fokused - hvad
> der vil blive aktiveret ver tast på Enter/(spacebar)
>
> Birger
Du skrev tidligere:
a:focus:hover
og det virker ikke. Focus skal have sin egen opskrift har jeg nu
fundet ud af.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Karl Erik Christense~ (26-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 26-07-11 10:23 |
|
On 26-07-2011 09:32, Bertel Lund Hansen wrote:
> CSS
> .menu a { color: #e00000; text-decoration: underline; }
> .menu a:hover { color: #06c0bb; text-decoration: none; }
..menu a, .menu a:visited { color: #e00000; text-decoration: underline; }
..menu a:hover, .menu a:focus { color: #06c0bb; text-decoration: none; }
Hvis du ikke tager menu a:visited med, får du den "kedelige" rød/lilla
farve på links der har været besøgt.
menu a.focus bør som Birger nævner, også tages med.
I øvrigt vil man nok normalt style en menu som id og ikke class:
#menu a, #menu a:visited { color: #e00000; text-decoration: underline; }
#menu a:hover, #menu a:focus { color: #06c0bb; text-decoration: none; }
Class er lovlig at bruge flere gange på samme side, medens id kun må
bruges een gang.
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Karl Erik Christense~ (26-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 26-07-11 10:32 |
|
On 26-07-2011 09:32, Bertel Lund Hansen wrote:
> CSS
> .menu a { color: #e00000; text-decoration: underline; }
> .menu a:hover { color: #06c0bb; text-decoration: none; }
> Jeg har benyttet mig af et par fiduser der ikke direkte har med
> dit spørgsmål at gøre, men det forenkler CSS-opskriften.
>
> 1. Først styler jeg alle links i klassen menu. Så er jeg fri for
> at bruge to linjer med samme style.
Hvis det drejer sig om at spare på de kostbare tastetryk, kan
text-decoration "spares" ved a - alle links er som standard understreget.
..menu a { color: #e00000; }
..menu a:hover { color: #06c0bb; text-decoration: none; }
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
runeofdenmark@hotmai~ (26-07-2011)
| Kommentar
Fra : runeofdenmark@hotmai~ |
Dato : 26-07-11 09:33 |
|
On 26 Jul., 08:16, Bertel Lund Hansen
<splitteminebrams...@lundhansen.dk> wrote:
> Du skrev tidligere:
>
> a:focus:hover
>
> og det virker ikke. Focus skal have sin egen opskrift har jeg nu
> fundet ud af.
Det er nok fordi ovenstående laver en AND imellem :focus og :hover.
Sådan at udtrykket er sandt, hvis både :hover og :focus er indtruffet.
Når jeg laver CSS liste-drop downs, så plejer jeg at udbygge det lidt.
Nemlig, at bruge ::not() på den ene af dem. Har ikke lige koden, men
man kan styre, hvad der sker, hvis noget IKKE er intruffet på den
måde, og det kan være smart, hvis man vil blande taste- og
musenavigering. Specielt hvis man vil lave CSS for IE<9 med, for de
forstår ikke not().
MVH
Rune Jensen
| |
Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 16:41 |
|
runeofdenmark@hotmail.com skrev:
>> a:focus:hover
> Det er nok fordi ovenstående laver en AND imellem :focus og :hover.
> Sådan at udtrykket er sandt, hvis både :hover og :focus er indtruffet.
Tak for forklaringen. Så hjælper det jo ikke en tasteoperatør.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Rune Jensen (26-07-2011)
| Kommentar
Fra : Rune Jensen |
Dato : 26-07-11 09:52 |
|
On 26 Jul., 08:41, Bertel Lund Hansen
<splitteminebrams...@lundhansen.dk> wrote:
> runeofdenm...@hotmail.com skrev:
>
> >> a:focus:hover
> > Det er nok fordi ovenst ende laver en AND imellem :focus og :hover.
> > S dan at udtrykket er sandt, hvis b de :hover og :focus er indtruffet.
>
> Tak for forklaringen. S hjælper det jo ikke en tasteoperat r.
Hvad er der galt i at benytte a:focus, a:hover?
I en sidenote - Meyerweb har lavet en lille test, som minder om jeres
med :focus og :hover:
http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm
MVH
Rune Jensen
| |
Bertel Lund Hansen (26-07-2011)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 26-07-11 18:03 |
| | |
Steen F. (27-07-2011)
| Kommentar
Fra : Steen F. |
Dato : 27-07-11 04:45 |
|
Den 26-07-2011 09:32, Bertel Lund Hansen skrev:
> CSS
> .menu a { color: #e00000; text-decoration: underline; }
> .menu a:hover { color: #06c0bb; text-decoration: none; }
>
> HTML:
>
> <div class='menu'>
> <a href='HisMastersVoice.mpg' title='En gammel indspilning'>Et nummer med Kathleen Ferrier</a>
> </div>
Mange tak for svaret! Også til de andre der har bidraget.
Kan man gøre det samme med billeder?
Jeg har et eksempel her, men problemet er, at browseren giver en
advarsel om Active-X hver gang, og det dur jo ikke:
www.steenmartin.dk/flag/
Som det ses vil jeg gerne have en rollover-effekt.
Mvh
Steen
| |
Karl Erik Christense~ (27-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 27-07-11 05:57 |
|
On 27-07-2011 05:44, Steen F. wrote:
> Mange tak for svaret! Også til de andre der har bidraget.
>
> Kan man gøre det samme med billeder?
> Jeg har et eksempel her, men problemet er, at browseren giver en
> advarsel om Active-X hver gang, og det dur jo ikke:
> www.steenmartin.dk/flag/
> Som det ses vil jeg gerne have en rollover-effekt.
>
> Mvh
> Steen
Jamen det er jo derfor vi er her 
Der er nu ingen problemer i mine browsere, FF, Chrome og Opera.
Men hvis du vil udskifte javascriptet, så prøv at kikke på noget jeg
engang skrev, om at hover billeder - jeg tror det lige er det du søger:
http://webdesign.ranunkelvej.com/test5/farvelink.html
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Birger Sørensen (27-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 27-07-11 08:24 |
|
Karl Erik Christensen forklarede:
> On 27-07-2011 05:44, Steen F. wrote:
>
>> Mange tak for svaret! Også til de andre der har bidraget.
>>
>> Kan man gøre det samme med billeder?
>> Jeg har et eksempel her, men problemet er, at browseren giver en
>> advarsel om Active-X hver gang, og det dur jo ikke:
>> www.steenmartin.dk/flag/
>> Som det ses vil jeg gerne have en rollover-effekt.
>>
>> Mvh
>> Steen
>
> Jamen det er jo derfor vi er her
>
> Der er nu ingen problemer i mine browsere, FF, Chrome og Opera.
>
> Men hvis du vil udskifte javascriptet, så prøv at kikke på noget jeg engang
> skrev, om at hover billeder - jeg tror det lige er det du søger:
>
> http://webdesign.ranunkelvej.com/test5/farvelink.html
>
> Karl Erik.
Hvorfor linkholder?
Hvorfor 4 billeder, når der kun bruges 3?
Der mangler så også :focus for brugere der navigerer med tastaturet.
^^
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Karl Erik Christense~ (27-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 27-07-11 09:21 |
|
On 27-07-2011 09:23, Birger Sørensen wrote:
> Hvorfor linkholder?
> Hvorfor 4 billeder, når der kun bruges 3?
> Der mangler så også :focus for brugere der navigerer med tastaturet.
> ^^
>
> Birger
>
JA JA - det er godt med dig
Færdige løsninger koster "kassen"
Læs hellere i Kim Ludvigsens tråd nedenunder, der er behov for din
ekspertise udi javascript.
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Steen F. (28-07-2011)
| Kommentar
Fra : Steen F. |
Dato : 28-07-11 02:36 |
|
Den 27-07-2011 06:57, Karl Erik Christensen skrev:
> Men hvis du vil udskifte javascriptet, så prøv at kikke på noget jeg
> engang skrev, om at hover billeder - jeg tror det lige er det du søger:
>
> http://webdesign.ranunkelvej.com/test5/farvelink.html
Hejsa
Mange tak. Jeg kan dog ikke helt gennemskue det. Hvorfor er der et
transparent billede? Hvorfor ikke bare skifte mellem billed 1 og 2?
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 12:23 |
|
On 28-07-2011 03:36, Steen F. wrote:
> Den 27-07-2011 06:57, Karl Erik Christensen skrev:
>> Men hvis du vil udskifte javascriptet, så prøv at kikke på noget jeg
>> engang skrev, om at hover billeder - jeg tror det lige er det du søger:
>>
>> http://webdesign.ranunkelvej.com/test5/farvelink.html
>
> Hejsa
> Mange tak. Jeg kan dog ikke helt gennemskue det. Hvorfor er der et
> transparent billede? Hvorfor ikke bare skifte mellem billed 1 og 2?
Fordi det ville kræve noget client/server halløj.
Bemærk at løsningen fungerer ved css alene, med skift af baggrundsbillede.
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Birger Sørensen (28-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 28-07-11 13:09 |
|
Karl Erik Christensen formulerede torsdag:
> On 28-07-2011 03:36, Steen F. wrote:
>> Den 27-07-2011 06:57, Karl Erik Christensen skrev:
>>> Men hvis du vil udskifte javascriptet, så prøv at kikke på noget jeg
>>> engang skrev, om at hover billeder - jeg tror det lige er det du søger:
>>>
>>> http://webdesign.ranunkelvej.com/test5/farvelink.html
>>
>> Hejsa
>> Mange tak. Jeg kan dog ikke helt gennemskue det. Hvorfor er der et
>> transparent billede? Hvorfor ikke bare skifte mellem billed 1 og 2?
>
> Fordi det ville kræve noget client/server halløj.
>
> Bemærk at løsningen fungerer ved css alene, med skift af baggrundsbillede.
>
> Karl Erik.
Øhm...?
Man kan skifte billeder med js, og man kan skifte billeder med CSS.
Og hverken js eller CSS har da brug for "client/server halløj" for at
fungere?
I øvrigt kan skiftet også realiseres, ved at have flere billeder ovenpå
hinanden og vise/skjule som nødvendigt, med css.
Og det fjerde billede er helt og aldeles unødvendigt!
Et til normal, et til hover/focus og til active - og det sidste er en
luksus som ikke altid vil ses, og kun fra der klikkes, til siden
skifter.
:oÞ :-? ^^
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 13:29 |
|
On 28-07-2011 14:08, Birger Sørensen wrote:
> Øhm...?
>
> Man kan skifte billeder med js, og man kan skifte billeder med CSS.
> Og hverken js eller CSS har da brug for "client/server halløj" for at
> fungere?
> I øvrigt kan skiftet også realiseres, ved at have flere billeder ovenpå
> hinanden og vise/skjule som nødvendigt, med css.
> Og det fjerde billede er helt og aldeles unødvendigt!
> Et til normal, et til hover/focus og til active - og det sidste er en
> luksus som ikke altid vil ses, og kun fra der klikkes, til siden skifter.
> :oÞ :-? ^^
>
> Birger
>
Du har fandme godt nok en skarp iagttagelsesevne Birger.
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
John (28-07-2011)
| Kommentar
Fra : John |
Dato : 28-07-11 14:31 |
|
Birger Sørensen har bragt dette til os:
> Og hverken js eller CSS har da brug for "client/server halløj" for at
> fungere?
Øhmm jeg er ikke helt med her.
Hvis js som du skriver er lig med JavaScript
er det da klient (client)side som fortolkes af den browser du anvender.
--
Mvh John
www.wordpresstema.dk
www.wordpress.dk/forum
| |
Birger Sørensen (28-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 28-07-11 15:38 |
|
John skrev:
> Birger Sørensen har bragt dette til os:
>
>
>> Og hverken js eller CSS har da brug for "client/server halløj" for at
>> fungere?
>
> Øhmm jeg er ikke helt med her.
> Hvis js som du skriver er lig med JavaScript
> er det da klient (client)side som fortolkes af den browser du anvender.
Jow.
Hvor kommer serveren ind i billedet, ifm skift af billede? Og hvad
særlig "client/server halløj" er nødvendigt for at skifte et billede ud
med et andet?
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
John (28-07-2011)
| Kommentar
Fra : John |
Dato : 28-07-11 15:41 |
|
Birger Sørensen sendte dette med sin computer:
> Hvor kommer serveren ind i billedet, ifm skift af billede? Og hvad særlig
> "client/server halløj" er nødvendigt for at skifte et billede ud med et
> andet?
Ok er med hvis vi blot sletter serverhalløj og bibeholder client 
--
Mvh John
www.wordpresstema.dk
www.wordpress.dk/forum
| |
Birger Sørensen (28-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 28-07-11 17:29 |
|
John skrev den 28-07-2011:
> Birger Sørensen sendte dette med sin computer:
>
>> Hvor kommer serveren ind i billedet, ifm skift af billede? Og hvad særlig
>> "client/server halløj" er nødvendigt for at skifte et billede ud med et
>> andet?
> Ok er med hvis vi blot sletter serverhalløj og bibeholder client
Der er jeg så ikke enig... B-)
Karl Erik skrev at man kunne ikke skifte 2 billeder uden en masse
"client/server halløj".
Og jeg spurgte, hvad det var for noget "client/server halløj", der skal
til at skifte et billede ud med et andet.
Man kan gøre det, ved blot at ændre src for et <img> - og så hentes
billedet fra serveren, hvis man ikke preloader det.
Det kvalificerer i min bog ikke til "halløj".
Andre metoder - incl. den han selv foreslår - involverer slet ikke
serveren.
Så jeg ville godt vide hvad det var for noget "halløj" han tænkte på -
og bruger som undskyldning for ikke at give et reelt svar til Steen.
Men - clienten kan vi nok ikke undvære. Så langt er vi da enige.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 16:00 |
|
On 28-07-2011 15:30, John wrote:
> Birger Sørensen har bragt dette til os:
>
>
>> Og hverken js eller CSS har da brug for "client/server halløj" for at
>> fungere?
>
> Øhmm jeg er ikke helt med her.
> Hvis js som du skriver er lig med JavaScript
> er det da klient (client)side som fortolkes af den browser du anvender.
>
Det der er så unikt i disse grupper, når nogen giver et løsningsforslag,
er at man enten kan klappe i sine små hænder af begejstring, eller man
kan give sit eget forslag.
Nogle vælger i stedet at hagle andres forslag ned.
At man pynter sin kritik med "smil", gør egentlig ingen forskel.
Så har man pludselig ikke tid til at give løsningsforslag, men man har
masser af tid til at kritisere - forstå det hvem der kan.
Men heldigvis er vi jo så forskellige
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
John (28-07-2011)
| Kommentar
Fra : John |
Dato : 28-07-11 16:43 |
|
Karl Erik Christensen skrev:
>
> Nogle vælger i stedet at hagle andres forslag ned.
> At man pynter sin kritik med "smil", gør egentlig ingen forskel.
Jeg påpegede blot at JS er clientside og bruger altid smileys :-? B-)
--
Mvh John
www.wordpresstema.dk
www.wordpress.dk/forum
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 17:20 |
|
On 28-07-2011 17:42, John wrote:
> Karl Erik Christensen skrev:
>
>
>>
>> Nogle vælger i stedet at hagle andres forslag ned.
>> At man pynter sin kritik med "smil", gør egentlig ingen forskel.
> Jeg påpegede blot at JS er clientside og bruger altid smileys :-? B-)
>
Det var slet ikke møntet på dig John.
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Birger Sørensen (28-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 28-07-11 19:57 |
|
Karl Erik Christensen skrev den 28-07-2011:
> Det der er så unikt i disse grupper, når nogen giver et løsningsforslag, er
> at man enten kan klappe i sine små hænder af begejstring, eller man kan give
> sit eget forslag.
>
> Nogle vælger i stedet at hagle andres forslag ned.
> At man pynter sin kritik med "smil", gør egentlig ingen forskel.
>
> Så har man pludselig ikke tid til at give løsningsforslag, men man har masser
> af tid til at kritisere - forstå det hvem der kan.
>
> Men heldigvis er vi jo så forskellige
Nej - det er vist ikke rigtigt, at der aldrig før er blevet
protesteret, når der gives forkerte svar.
At det vil "kræve noget client/server halløj" at skifte et billede ud
med et andet, er noget vrøvl. Og ikke et rimeligt svar til en spørger
med et niveau som i dette tilfælde.
Måske også fordi jeg ved du kan gøre det bedre.
Og lidt det samme mht. min oprindelige kommentar til din side; du kan
gøre det bedre - det har du lige demonstreret længere nede i denne tråd
- og det var vist egentlig en (måske for) skjult hentydning til at du
burde opdatere siden.
Og i øvrigt siger din reaktion mig bare, at du ved det godt...
Er du sikker på, de fik hele din brok med?
^^
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Steen F. (28-07-2011)
| Kommentar
Fra : Steen F. |
Dato : 28-07-11 14:26 |
|
Den 28-07-2011 13:23, Karl Erik Christensen skrev:
> Fordi det ville kræve noget client/server halløj.
> Bemærk at løsningen fungerer ved css alene, med skift af baggrundsbillede.
Har du lyst til at prøve at ændre min html/css med dit forslag?
www.steenmartin.dk/flag
Jeg kan nemlig stadig ikke få det til at virke 
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 14:55 |
|
On 28-07-2011 15:25, Steen F. wrote:
> Den 28-07-2011 13:23, Karl Erik Christensen skrev:
>> Fordi det ville kræve noget client/server halløj.
>> Bemærk at løsningen fungerer ved css alene, med skift af
>> baggrundsbillede.
>
> Har du lyst til at prøve at ændre min html/css med dit forslag?
> www.steenmartin.dk/flag
> Jeg kan nemlig stadig ikke få det til at virke
>
Det var godt nok hurtigt du opgav
Prøv om du kan gennemskue hvad det kræver.
Billederne skal være små når de vises, og større når der hovers. Altså
skal div'en være stor nok til hover-billedet.
Hvad sker der så med det lille billede, når det vises i en "for stor"
div? - Bliver det centreret både horisontalt og vertikalt?
Du ved jo hvordan du centrer horisontalt - margin: auto;
Kan man også centrere vertikalt? - ja, det kan man:
img.vertikal {
display: block;
margin-left: auto;
margin-right: auto }
....
<img class="vertikal" src="..." alt="...">
Prøv nu om du kan komme videre
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Birger Sørensen (28-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 28-07-11 17:53 |
| | |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 18:37 |
|
On 28-07-2011 18:53, Birger Sørensen wrote:
> http://bbsorensen.com/test/steen/
>
> Birger
>
Hvorfor nu ikke give Steen en chance for selv at løse sit problem?
I stedet for at manipulere med et billedbehandlingsprogram, hvor du gør
billedet mindre, og så laver margin om det, kunne man resize eks.
dk2.gif (45x45) til dk2_lille.gif (20x20).
Hvis man har mod til at være lidt fræk, og bruge css3:
..linkholder_dk a {
background-image: url(img/dk2_lille.gif);
background-position: center;
background-repeat: no-repeat;
text-decoration: none;
margin: 0;
padding: 0;
float: left;
}
..linkholder_dk a:hover, .linkholder_dk a:focus {
background-image: url(img/dk2.gif);
background-repeat: no-repeat;
}
background-position: center; er tilladt i css3.
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 18:49 |
|
On 28-07-2011 19:37, Karl Erik Christensen wrote:
> Hvorfor nu ikke give Steen en chance for selv at løse sit problem?
>
> I stedet for at manipulere med et billedbehandlingsprogram, hvor du gør
> billedet mindre, og så laver margin om det, kunne man resize eks.
> dk2.gif (45x45) til dk2_lille.gif (20x20).
>
> Hvis man har mod til at være lidt fræk, og bruge css3:
>
> .linkholder_dk a {
> background-image: url(img/dk2_lille.gif);
> background-position: center;
> background-repeat: no-repeat;
> text-decoration: none;
> margin: 0;
> padding: 0;
> float: left;
> }
>
> .linkholder_dk a:hover, .linkholder_dk a:focus {
> background-image: url(img/dk2.gif);
> background-repeat: no-repeat;
> }
>
> background-position: center; er tilladt i css3.
>
> Karl Erik.
>
http://webdesign.ranunkelvej.com/flag/flag.html
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 19:03 |
| | |
Birger Sørensen (28-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 28-07-11 19:09 |
|
Karl Erik Christensen tastede følgende:
> On 28-07-2011 19:37, Karl Erik Christensen wrote:
>> On 28-07-2011 18:53, Birger Sørensen wrote:
>>
>>> http://bbsorensen.com/test/steen/
>
> Hva' er den nu af, Birger?
>
> Ser lige at din løsning mangler a:focus !!!!
>
> Fy-Da-Føj-Da
>
> Karl Erik.
Konen kaldte - spisetid, så jeg nåede det ikke.
Er tilføjet..
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Karl Erik Christense~ (28-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 28-07-11 19:27 |
| | |
Steen F. (29-07-2011)
| Kommentar
Fra : Steen F. |
Dato : 29-07-11 01:40 |
|
Den 28-07-2011 18:53, Birger Sørensen skrev:
> http://bbsorensen.com/test/steen/
Du er en knag! Mange tak.
Også tak til Karl Erik - jeg forstår godt pædagogikken i selv at lære,
men jeg var i tidsnød og skulle bare have det strikket sammen hurtigst
muligt. Alternativet ville være, at der ingen rollover effekt var på
flagene. Men jeg synes nu at det er rart at man kan se siden reagerer på
det man foretager sig, så at sige.
Mvh
Steen F.
| |
Karl Erik Christense~ (29-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 29-07-11 03:06 |
|
On 29-07-2011 02:40, Steen F. wrote:
> Den 28-07-2011 18:53, Birger Sørensen skrev:
>> http://bbsorensen.com/test/steen/
>
> Du er en knag! Mange tak.
> Også tak til Karl Erik - jeg forstår godt pædagogikken i selv at lære,
> men jeg var i tidsnød og skulle bare have det strikket sammen hurtigst
> muligt. Alternativet ville være, at der ingen rollover effekt var på
> flagene. Men jeg synes nu at det er rart at man kan se siden reagerer på
> det man foretager sig, så at sige.
>
> Mvh
> Steen F.
Den løsning jeg forsøgte at lede dig frem til, kan du se her:
http://webdesign.ranunkelvej.com/flag/flag_ny.html
Den benytter kun de originale 3 flag - så er du jo for eftertiden fri
for at skulle bøvle med billedbehandling
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Steen F. (10-08-2011)
| Kommentar
Fra : Steen F. |
Dato : 10-08-11 11:39 |
| | |
Birger Sørensen (10-08-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 10-08-11 15:09 |
|
Steen F.:
> Den 28-07-2011 18:53, Birger Sørensen skrev:
> >
>> http://bbsorensen.com/test/steen/
>>
>
> Det fungerer fint, men kan man preloade dem ved denne metode?
>
> Mvh
> Steen
Jeg mener nu ikke det skal være nødvendigt - her tager det mellem 40 og
100ms at ehnte et billede, når det skal bruges.
Og preload er fint nok - når det der preloades bliver brugt. Ellers er
det spild af kode og tid - lidt eller meget.
Ellers kan man preloade med js, eller sætte denne kode ind et eller
andet sted
CSS-class
..preload { display:none; }
I HTML sættes
<img class="preload" src="mit_billede.jpg" alt="">
Det vil hente billedet til cache, men ikke vise det.
Og du kan indsætte så mange elementer du har lyst til...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Kim Ludvigsen (10-08-2011)
| Kommentar
Fra : Kim Ludvigsen |
Dato : 10-08-11 15:20 |
|
Den 10-08-2011 16:08, Birger Sørensen skrev:
> I HTML sættes
> <img class="preload" src="mit_billede.jpg" alt="">
> Det vil hente billedet til cache, men ikke vise det.
> Og du kan indsætte så mange elementer du har lyst til...
Og det bør så gøres sidst i koden, altså lige før </body>,
så det ikke bremser andre elementer.
--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker.php
| |
Birger Sørensen (10-08-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 10-08-11 19:04 |
|
Kim Ludvigsen sendte dette med sin computer:
> Den 10-08-2011 16:08, Birger Sørensen skrev:
>
>> I HTML sættes
>> <img class="preload" src="mit_billede.jpg" alt="">
>> Det vil hente billedet til cache, men ikke vise det.
>> Og du kan indsætte så mange elementer du har lyst til...
>
> Og det bør så gøres sidst i koden, altså lige før </body>, så det ikke
> bremser andre elementer.
Måske...
Ved ikke om det påvirker visningshastighed...
Elementet er skjult, og tager ikke plads i layout, så det bør det
faktisk ikke, som jeg lige ser det.
Jeg kan ikke finde noget der siger om indhold af display:none ændrer
loadrækkefølge - men der er ikke umiddelbart nogen grund til at det
skal sinke.
Har ikke testet - men du kan udmærket have ret. Og eftersom det er
ligegyldigt, er lige før </body> et godt sted at sætte det
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Kim Ludvigsen (10-08-2011)
| Kommentar
Fra : Kim Ludvigsen |
Dato : 10-08-11 23:12 |
|
Den 10-08-2011 20:03, Birger Sørensen skrev:
> Kim Ludvigsen sendte dette med sin computer:
>>
>> Og det bør så gøres sidst i koden, altså lige før </body>,
>> så det ikke bremser andre elementer.
> Ved ikke om det påvirker visningshastighed...
> Elementet er skjult, og tager ikke plads i layout, så det
> bør det faktisk ikke, som jeg lige ser det.
Elementerne hentes i rækkefølge. Du kan evt. lave en prøve
med to meget store billeder, som du indsætter først i koden,
så vil du se, at resten af siden ikke hentes, før de to
billeder er hentet.
> Jeg kan ikke finde noget der siger om indhold af
> display:none ændrer loadrækkefølge - men der er ikke
> umiddelbart nogen grund til at det skal sinke.
Problemet er, at de fleste browsere kun henter to elementer
ad gangen, så med to store billeder, blokerer du for alt
andet indhold. Også selvom billederne ikke vises.
Indsættes de sidst i koden, vil siden blive hentet og vist.
Det vil stadig tage lidt tid, før siden er færdighentet, men
det kan man kun se ved at tjekke statuslinjen eller lægge
mærke til, at reloadknappen ikke vises lige med det samme.
Selve siden vil være færdig.
--
Mvh. Kim Ludvigsen
Hold dit livs drømmeferie i Thailand:
http://rejse-til-thailand.dk
| |
Steen F. (11-08-2011)
| Kommentar
Fra : Steen F. |
Dato : 11-08-11 10:13 |
|
Den 10-08-2011 16:08, Birger Sørensen skrev:
> Jeg mener nu ikke det skal være nødvendigt - her tager det mellem 40 og
> 100ms at ehnte et billede, når det skal bruges.
> Og preload er fint nok - når det der preloades bliver brugt. Ellers er
> det spild af kode og tid - lidt eller meget.
>
> Ellers kan man preloade med js, eller sætte denne kode ind et eller
> andet sted
> CSS-class
> .preload { display:none; }
> I HTML sættes
> <img class="preload" src="mit_billede.jpg" alt="">
> Det vil hente billedet til cache, men ikke vise det.
> Og du kan indsætte så mange elementer du har lyst til...
Jeg siger mange tak. Det hjalp faktisk på visningshastigheden. Nu er
"roll-over"-effekten der med det samme uden forsinkelse.
Du har ret i, at det kun drejede sig om nogle ms, men på min pt.
langsomme 0.9 / 0,4 Mbit forbindelse er det ret tydeligt, og man
mistænker siden for at have en fejl når den ikke reagerer prompte.
Mvh
Steen F.
| |
Birger Sørensen (11-08-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 11-08-11 13:22 |
|
Steen F. har bragt dette til os:
> Den 10-08-2011 16:08, Birger Sørensen skrev:
>> Jeg mener nu ikke det skal være nødvendigt - her tager det mellem 40 og
>> 100ms at ehnte et billede, når det skal bruges.
>> Og preload er fint nok - når det der preloades bliver brugt. Ellers er
>> det spild af kode og tid - lidt eller meget.
>>
>> Ellers kan man preloade med js, eller sætte denne kode ind et eller
>> andet sted
>> CSS-class
>> .preload { display:none; }
>> I HTML sættes
>> <img class="preload" src="mit_billede.jpg" alt="">
>> Det vil hente billedet til cache, men ikke vise det.
>> Og du kan indsætte så mange elementer du har lyst til...
>
> Jeg siger mange tak. Det hjalp faktisk på visningshastigheden. Nu er
> "roll-over"-effekten der med det samme uden forsinkelse.
> Du har ret i, at det kun drejede sig om nogle ms, men på min pt. langsomme
> 0.9 / 0,4 Mbit forbindelse er det ret tydeligt, og man mistænker siden for at
> have en fejl når den ikke reagerer prompte.
>
> Mvh
> Steen F.
;>)
Sidder på noget, der skule være 30/30, men har sjældent mere end 10/10,
undertiden helt ned til 5.
Men det er så også stadig 5 gange så hurtigt.
Faktisk ville det vel så kunne svare sig, at have det ene billede som
baggrund på anchor og det andte liggende i anchoret, men skjule det ved
:hover på anchoret.
Så burde alting også blive læst ind fra starten.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Birger Sørensen (11-08-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 11-08-11 14:04 |
|
Birger Sørensen formulerede Thursday:
> Steen F. har bragt dette til os:
>> Den 10-08-2011 16:08, Birger Sørensen skrev:
>>> Jeg mener nu ikke det skal være nødvendigt - her tager det mellem 40 og
>>> 100ms at ehnte et billede, når det skal bruges.
>>> Og preload er fint nok - når det der preloades bliver brugt. Ellers er
>>> det spild af kode og tid - lidt eller meget.
>>>
>>> Ellers kan man preloade med js, eller sætte denne kode ind et eller
>>> andet sted
>>> CSS-class
>>> .preload { display:none; }
>>> I HTML sættes
>>> <img class="preload" src="mit_billede.jpg" alt="">
>>> Det vil hente billedet til cache, men ikke vise det.
>>> Og du kan indsætte så mange elementer du har lyst til...
>>
>> Jeg siger mange tak. Det hjalp faktisk på visningshastigheden. Nu er
>> "roll-over"-effekten der med det samme uden forsinkelse.
>> Du har ret i, at det kun drejede sig om nogle ms, men på min pt. langsomme
>> 0.9 / 0,4 Mbit forbindelse er det ret tydeligt, og man mistænker siden for
>> at have en fejl når den ikke reagerer prompte.
>>
>> Mvh
>> Steen F.
>
> ;>)
> Sidder på noget, der skule være 30/30, men har sjældent mere end 10/10,
> undertiden helt ned til 5.
> Men det er så også stadig 5 gange så hurtigt.
>
> Faktisk ville det vel så kunne svare sig, at have det ene billede som
> baggrund på anchor og det andte liggende i anchoret, men skjule det ved
> :hover på anchoret.
> Så burde alting også blive læst ind fra starten.
>
> Birger
http://bbsorensen.com/test/steen/index1.html
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Steen F. (11-08-2011)
| Kommentar
Fra : Steen F. |
Dato : 11-08-11 16:06 |
|
Den 11-08-2011 15:03, Birger Sørensen skrev:
> Birger Sørensen formulerede Thursday:
>> Steen F. har bragt dette til os:
>>> Den 10-08-2011 16:08, Birger Sørensen skrev:
>>>> Jeg mener nu ikke det skal være nødvendigt - her tager det mellem 40 og
>>>> 100ms at ehnte et billede, når det skal bruges.
>>>> Og preload er fint nok - når det der preloades bliver brugt. Ellers er
>>>> det spild af kode og tid - lidt eller meget.
>>>>
>>>> Ellers kan man preloade med js, eller sætte denne kode ind et eller
>>>> andet sted
>>>> CSS-class
>>>> .preload { display:none; }
>>>> I HTML sættes
>>>> <img class="preload" src="mit_billede.jpg" alt="">
>>>> Det vil hente billedet til cache, men ikke vise det.
>>>> Og du kan indsætte så mange elementer du har lyst til...
>>>
>>> Jeg siger mange tak. Det hjalp faktisk på visningshastigheden. Nu er
>>> "roll-over"-effekten der med det samme uden forsinkelse.
>>> Du har ret i, at det kun drejede sig om nogle ms, men på min pt.
>>> langsomme 0.9 / 0,4 Mbit forbindelse er det ret tydeligt, og man
>>> mistænker siden for at have en fejl når den ikke reagerer prompte.
>>>
>>> Mvh
>>> Steen F.
>>
>> ;>)
>> Sidder på noget, der skule være 30/30, men har sjældent mere end
>> 10/10, undertiden helt ned til 5.
>> Men det er så også stadig 5 gange så hurtigt.
>>
>> Faktisk ville det vel så kunne svare sig, at have det ene billede som
>> baggrund på anchor og det andte liggende i anchoret, men skjule det ved
>> :hover på anchoret.
>> Så burde alting også blive læst ind fra starten.
>>
>> Birger
>
> http://bbsorensen.com/test/steen/index1.html
>
> Birger
>
Ja, der er flere måder at gøre det på åbenbart.
Du er sgu lidt af en haj til det! Respekt.
Men sålænge løsningen er crossbrowser-kompatibel, så er jeg tilfreds.
Og den første preload er mest gennemskuelig for mig
Jeg takker for hjælpen endnu engang.
Mvh
Steen F.
| |
Rune Jensen (27-07-2011)
| Kommentar
Fra : Rune Jensen |
Dato : 27-07-11 04:45 |
|
On 26 Jul., 20:44, "Steen F." <st...@steenmartin.dk> wrote:
> Den 26-07-2011 09:32, Bertel Lund Hansen skrev:
>
> > CSS
> > .menu a { color: #e00000; text-decoration: underline; }
> > .menu a:hover { color: #06c0bb; text-decoration: none; }
>
> > HTML:
>
> > <div class='menu'>
> > <a href='HisMastersVoice.mpg' title='En gammel indspilning'>Et nummer med Kathleen Ferrier</a>
> > </div>
>
> Mange tak for svaret! Også til de andre der har bidraget.
>
> Kan man gøre det samme med billeder?
> Jeg har et eksempel her, men problemet er, at browseren giver en
> advarsel om Active-X hver gang, og det dur jo ikke: www.steenmartin.dk/flag/
> Som det ses vil jeg gerne have en rollover-effekt.
Hvis nu vi si'r, at Dansk hedder dansk.png og Tysk tysk.png mv. Så
uden JavaScript noget a la
HTML:
<h1>Select language</h1>
<ul id="sel_lang">
<li><img src="dansk.png" id="dansk" alt="Dansk" /></li>
<li><img src="tysk.png" id="tysk" alt="Tysk" /></li>
<li><img src="engelsk.png" id="engelsk" alt="Engelsk" /></li>
</ul>
CSS:
#sel_lang{
list-style-type: none;
}
#sel_lang li{
display: inline
}
#dansk, #tysk, #engelsk{
height: 50px;
width: 50px;
}
#dansk:hover,
#dansk:focus,
#tysk:hover,
#tysk:focus,
#engelsk:hover,
#engelsk:focus{
height: 100px;
width: 100px;
position: absolute;
display: block;
left:-25px;
top: -25px;
}
....ikke afprøvet, men burde virke. Sådan at hvis billede får fokus
eller hovers over, så bliver det større, men påvirker ikke de andre
billeders position.
MVH
Rune Jensen
| |
Rune Jensen (29-07-2011)
| Kommentar
Fra : Rune Jensen |
Dato : 29-07-11 08:14 |
|
On 28 Jul., 19:05, Karl Erik Christensen <karle...@none.invalid.com>
wrote:
> Den løsning jeg forsøgte at lede dig frem til, kan du se her:
>
> http://webdesign.ranunkelvej.com/flag/flag_ny.html
>
> Den benytter kun de originale 3 flag - så er du jo for eftertiden fri
> for at skulle bøvle med billedbehandling
Og hvis nu man forudsætter, den læst af en skærmlæser, så skal img
have en sigende alt (sproget). I princippet, hvis du vil benytte
background-image, så skal du også have en sigende link-tekst ind
imellem <a> og </a>, også det sprog, som der linkes til.
Så vidt jeg kan se, er det Birger, som mangler sigende link-tekst og
din løsning mangler sigende alt.
Man kan nok semantisk bruge både HTML img-løsningen og CSS background-
image, men der er ingen background-image-size i CSS2.1, den kommer
først i CSS3.
http://www.css3.info/preview/background-size/
Så vil man benytte CSS2.1, er det letteste nok stadig at bruge img og
så forstørre den img med CSS ved hover/focus.
PS.: Og så kan man lave den avancerede, hvor man bruger en link-tekst,
som man flytter udenfor synsvidde og placerer img'et eller backbround-
imaget der i stedet. Den bør også kunne gå (det gør den - jeg har
engang med lidt hjælp fra Stig lavet en løsning, som også virkede i
IE6, dog med smileyer, ikke flag).
MVH
Rune Jensen
| |
Karl Erik Christense~ (29-07-2011)
| Kommentar
Fra : Karl Erik Christense~ |
Dato : 29-07-11 15:29 |
|
On 29-07-2011 16:13, Rune Jensen wrote:
> Man kan nok semantisk bruge både HTML img-løsningen og CSS background-
> image, men der er ingen background-image-size i CSS2.1, den kommer
> først i CSS3.
> MVH
> Rune Jensen
Hej Rune.
Jeg er alvorligt bekymret for dit syn
Hvor ser du background-image-size brugt?
I mit første forslag skrev jeg background-position: hvis man havde mod
til at bruge css3.
Den løsning som jeg forsøgte at lede Steen frem til, bruger _ikke_ css3,
men udelukkende "smarte" funktioner fra css2
Den er sgu-da genial
Karl Erik.
--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Birger Sørensen (29-07-2011)
| Kommentar
Fra : Birger Sørensen |
Dato : 29-07-11 15:32 |
|
Rune Jensen formulerede spørgsmålet:
> On 28 Jul., 19:05, Karl Erik Christensen <karle...@none.invalid.com>
> wrote:
>
>> Den løsning jeg forsøgte at lede dig frem til, kan du se her:
>>
>> http://webdesign.ranunkelvej.com/flag/flag_ny.html
>>
>> Den benytter kun de originale 3 flag - så er du jo for eftertiden fri
>> for at skulle bøvle med billedbehandling
>
> Og hvis nu man forudsætter, den læst af en skærmlæser, så skal img
> have en sigende alt (sproget). I princippet, hvis du vil benytte
> background-image, så skal du også have en sigende link-tekst ind
> imellem <a> og </a>, også det sprog, som der linkes til.
>
> Så vidt jeg kan se, er det Birger, som mangler sigende link-tekst og
> din løsning mangler sigende alt.
>
> Man kan nok semantisk bruge både HTML img-løsningen og CSS background-
> image, men der er ingen background-image-size i CSS2.1, den kommer
> først i CSS3.
> http://www.css3.info/preview/background-size/
>
> Så vil man benytte CSS2.1, er det letteste nok stadig at bruge img og
> så forstørre den img med CSS ved hover/focus.
>
> PS.: Og så kan man lave den avancerede, hvor man bruger en link-tekst,
> som man flytter udenfor synsvidde og placerer img'et eller backbround-
> imaget der i stedet. Den bør også kunne gå (det gør den - jeg har
> engang med lidt hjælp fra Stig lavet en løsning, som også virkede i
> IE6, dog med smileyer, ikke flag).
>
>
> MVH
> Rune Jensen
Har opdateret...
Genske enkelt sat teksten i det span der har flaget som baggrund, og
skjult teksten med CSS..
Den bør vist læses af skærmlæsere.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
|
|