Problem med rollover i css

[Doffar]

Hallo,

 

prøve å få til en rollover som viser et bilde et annet sted på siden enn akkurat der linken er. Jeg får til å vise bilde på den andre plssen, men linken blir også flyttet til den plassen slik at da er ikke musen over og bilde forsvinner. Så blir linken flyttet tilbake og da er musen over og bildet vises igjen. Bildet og linken går fram og tilbake fra utgangsplass til der jeg har plassert rolloverbildet.

Koden jeg har for øyeblikket er:

a:hover {
display:block;
width:250px;
height:236px;
background:url(http://www.ustabil.net/Bilde-4.jpg) no-repeat;
position:absolute; top:100px; left:100px;}

 

Noen som ser problemet?

 

Et annet spørsmål jeg har er om det går an å få til en slik rollover uten å bruke position:absolute? For jeg bruker midstilt side og da blir rolloveren flyttet på når skjermen er større/mindre og det er ganske bu.

 

mvh Doffar

[FrodeNilsen]

Du har jo beskrevet hvordan ting fungerer, og skal fungere, i detalj. Hva er det du trenger hjelp til?

 

Skal du vise en ekstra lenke ett annet sted?

 

Frode

[Doffar]

Problemet kommer i FireFox. Da flimrer bildet som jeg bruker som rollover. Og det virker som om dette skjer fordi linker som man holder over flyttes til det stedet jeg har satt i position absolut, og så flyttes den tilbake til opprinnelsesstedet. Så skjer dette fram og tilbake med tidels sekund mellomrom. Og jeg forstår ikke hvordan jeg skal få bildet til å bare stå i ro uten å flimre.

 

Og så lurer jeg på om det er mulig å få til noe tilsvarende uten å bruke position:absolute. Fordi position:absolute byr på problemer når skjermstørrelsen forandres.

[FrodeNilsen]

Problemet kommer i FireFox.

...

Og så lurer jeg på om det er mulig å få til noe tilsvarende uten å bruke position:absolute. Fordi position:absolute byr på problemer når skjermstørrelsen forandres.

 

Hvor kommer ikke problemet?

 

Igjen, du har ikke beskrevet hva du er på jakt etter! Hva skal skje med lenken du har musen over? Den skal fremdeles vise, skal den ikke?

 

I og med at du ikke kan ha nøstende lenker, og du skal ha hoover på en lenke, så forstår jeg ikke hva du vil. Du kan benytte rollover på ett span-element, men da må du jo kose deg med IE etterpå.

 

Frode

[PHPdude]

Teorien du kommer med i første innlegget om hvorfor flimringen oppstår er egentlig helt riktig.

"a" og "a:hover" sikter altså til akkurat det samme elementet, så du kan ikke bruke ":hover" til å "splitte" opp får å vise innhold på to forskjellige steder.

 

Den eneste rene løsninga jeg ser er "generated content" fra CSS2 og CSS2.1:

a:hover::after {
content: ' ';
background:url(http://www.ustabil.net/Bilde-4.jpg);
position:absolute;
width:250px;
height:236px;
top:10px;
left:10px;
}

 

Dette virker å gjøre akkurat hva du trenger. Problemet er nettleser-støtten: I IE6/IE7 er det bare å glemme, det er en siste del av CSS2.1 som Firefox ikke støtter (før 3.1 som kommer nå), men Opera og Safari/WebKit fungerer. IE8 skal også komme til å fungere.

 

Det beste er antagelig en kombinasjon med litt JS-kode for nettleserne som ikke har støtten.

[FrodeNilsen]

...

Det beste er antagelig en kombinasjon med litt JS-kode for nettleserne som ikke har støtten.

 

Tja. Dette kan løses med hover på elementer også, og da kan funksjonaliteten disables for dinosaur nettlesere.

 

Problemet blir fort om man skal sette inn innhold fra CSS, eller om CSS skal sensure bort innhold, men vi snakker da filosofi og struktur, ikke teknikk. Personlig er jeg lite tilhenger av innhold i CSS, med mindre den er av ren formaterings format.

 

Designmessig så har man alltid mange ideer som ikke lar seg implementere, og mange av dem er ikke så briljante som man først tenkte seg. Ideen i denne tråden vil jeg karakterisere som en slik idee. Brukere vil ikke like pop-up-lenker som det her er foreslått, særlig når dette assosieres med reklame. Hvorfor skal dette øke brukeropplevelsen eller navigerbarhet? For ordens skyld så er jeg ett oppkom av ubrukelige ideer, og er stolt av det. Det er den eneste måten å komme med virkelig gode ideer.

 

Rent teknisk så vil ikke bakgrundsbilder skalere, med mindre du benytter CSS3. Hvis forskjellige lenker skal ha forskjellige bilder, så må hver lenke kodes for dette idividuelt i CSS. Det blir fort også problemer med samhørighet ved bruk av drop down eller pop-ups, noe som kan føre til use-case trøbbel. Hvis man i tillegg må lage scripts for nettlesere med dårlig støtte, så burde man begynne å vurdere om dette har noe for seg.

 

Frode

[PHPdude]

...

Det beste er antagelig en kombinasjon med litt JS-kode for nettleserne som ikke har støtten.

 

Tja. Dette kan løses med hover på elementer også, og da kan funksjonaliteten disables for dinosaur nettlesere.

Ikke uten å forsøple markup-koden, eller?

 

Problemet blir fort om man skal sette inn innhold fra CSS, eller om CSS skal sensure bort innhold, men vi snakker da filosofi og struktur, ikke teknikk. Personlig er jeg lite tilhenger av innhold i CSS, med mindre den er av ren formaterings format.

Hovedsaklig mener jeg at navnet "Generated Content" kun er en teknisk detalj, for i praksis lager man ikke innhold, men bare "flytter" allerede eksisterende innhold. "Generated Content" er veldig praktisk i flere situajoner, og det er langt viktigere enn om konsptet også kan misbrukes.

 

Designmessig så har man alltid mange ideer som ikke lar seg implementere, og mange av dem er ikke så briljante som man først tenkte seg. Ideen i denne tråden vil jeg karakterisere som en slik idee. Brukere vil ikke like pop-up-lenker som det her er foreslått, særlig når dette assosieres med reklame. Hvorfor skal dette øke brukeropplevelsen eller navigerbarhet? For ordens skyld så er jeg ett oppkom av ubrukelige ideer, og er stolt av det. Det er den eneste måten å komme med virkelig gode ideer.

 

Rent teknisk så vil ikke bakgrundsbilder skalere, med mindre du benytter CSS3. Hvis forskjellige lenker skal ha forskjellige bilder, så må hver lenke kodes for dette idividuelt i CSS. Det blir fort også problemer med samhørighet ved bruk av drop down eller pop-ups, noe som kan føre til use-case trøbbel. Hvis man i tillegg må lage scripts for nettlesere med dårlig støtte, så burde man begynne å vurdere om dette har noe for seg.

 

Du drar fram praktiske problemer jeg ikke kan sluke uten en begrunnelse, men generelt tror jeg vi er veldig enige. Når noe blir for klønete å lage, så er det bedre å bruke tida til andre forbedringer. Og "fancy" ting er veldig sjeldent av noen reel verdi for brukerne, og dermed ofte kun til irritasjon.

[FrodeNilsen]

...

Du drar fram praktiske problemer jeg ikke kan sluke uten en begrunnelse, men generelt tror jeg vi er veldig enige. Når noe blir for klønete å lage, så er det bedre å bruke tida til andre forbedringer. Og "fancy" ting er veldig sjeldent av noen reel verdi for brukerne, og dermed ofte kun til irritasjon.

 

Håper du tar dette riktig!

 

Personlig har jeg ikke benyttet dette med å sette inn innhold fra CSS til annet enn til å endre liste tegn og liknende. Jeg hadde satt veldig pris på om du kunne vise eksempler der du ser nytten av dette. Jeg er ikke ute etter noen diskusjon, snarere at jeg gjerne vil forstå hva dette kan brukes til konstruktivt.

 

At man roter til markup ved å legge inn kode som css skal "sensurere" gjør koden mer rotete. Helt klart. Hvis man lager en nøstet navigeringsmeny så blir den koden knotete, for eksempel. Når man benytter CSS til sensur, så endrer man jo innholdet. CSS2.1 og enda mer CSS3 støtter mer dynamisk innhold og formatering, noe som er problematisk for ett skarpt skille mellom innhold og formatering.

 

Personlig skiller jeg mellom selve innholdet på siden, og alt krims kramset rundt innholdet. Krims kramset kan være krysslenke lister, bannere, osv. Jeg har litt problemer med å se at krims kramset kan skilles skarpt mellom innhold og formatering, men jeg mener at selve innholdet i stor grad kan skilles fra formatering.

 

En side som er formatert for en 24" skjerm, og har innhold deretter, kan ikke enkelt formateres for en mobiltelefon. Innholdet må også endres.

 

Frode