Layout med CSS

Tweaker

tirsdag, 13. marts 2007, 18:04

det kan gøres ved at "gemme" billedet udenfor siden, eller i et lavere z-index.

en anden ide, hav billedet der hele tiden, med display:none og ved hover fjerner du så display:none.
Dette kræver så bare at bagrunden er det andet billede.

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (13.03.2007, 18:07)

Gå til toppen af siden

Tweaker

tirsdag, 13. marts 2007, 18:08

dette ser også ret brugbart ud.

google giver iøvrigt en masse brugbart.

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (13.03.2007, 18:10)

Gå til toppen af siden

Nerd

tirsdag, 13. marts 2007, 20:22

Altså ja, der findes da mange fine tricks med at gemme billedet, men finder det ikke særlig praktisk, at de popper op i en pærevælling, når ens stylesheet slåes fra.

På den anden side, så skal man også tænke på, hvem som anvender hjemmesiden.

[IMG]http://www.tweak.dk/forum/attachment.php?attachmentid=16090&sid=[/IMG]

Gå til toppen af siden

Tweaker

tirsdag, 13. marts 2007, 20:56

Nej, de har du ret i. Den lækreste (og den der ikke genere uden stylesheet) er at sætte dit "hover" billede som baggrund på elementet, derefter lave din a med det "inaktive" billede og igen a:hover med hover-billede. Herved ligger hover-billedet under det normale og er derfor hentet inden man kører musen hen over det.

Her kan det hele laves med CSS og derved er der ikke nogen gener med CSS slået fra.

/ask

IBM t42 and IBM t23 still alive and kicking

Gå til toppen af siden

Über dork

onsdag, 14. marts 2007, 10:31

Så nu har jeg fået lavet hele siden som til css

Så må jeg til at kigge nærmere på de forskellige ting i menuen.

Tror jeg stiler efter at lave det om til et langt baggrunds billede også laver tekst og hover effekt med ren css i og ingen gfx.

www.fotoklubbenmidtjylland.dk

Nikon D7000 test

Gå til toppen af siden

Nerd

onsdag, 14. marts 2007, 12:40

Faldt lige over dette ultimative link

http://www.alvit.de/handbook/

Ca. det samme som vores sticky, bare MEGET større :boxed:

[IMG]http://www.tweak.dk/forum/attachment.php?attachmentid=16090&sid=[/IMG]

Gå til toppen af siden

Über dork

onsdag, 14. marts 2007, 12:47

Citeret

Originally posted by Macimuz
Faldt lige over dette ultimative link

http://www.alvit.de/handbook/

Ca. det samme som vores sticky, bare MEGET større

Den fik sig lige et bookmark her :))

Btw kommer du snart til foto eller har du helt droppet det

Nikon D7000 test

Gå til toppen af siden

Nerd

onsdag, 14. marts 2007, 12:54

Citeret

Originally posted by _WHAT_

Citeret

Originally posted by Macimuz
Faldt lige over dette ultimative link

http://www.alvit.de/handbook/

Ca. det samme som vores sticky, bare MEGET større

Den fik sig lige et bookmark her

Btw kommer du snart til foto eller har du helt droppet det

Hehe, nej det ligger i baghovedet :razz:

[IMG]http://www.tweak.dk/forum/attachment.php?attachmentid=16090&sid=[/IMG]

Gå til toppen af siden

Über dork

onsdag, 14. marts 2007, 15:25

Sider her og bander en hel del over det lorte system

http://www.fotoklubbenmidtjylland.dk/top_menu_css2.php

Ved at lave menuen om til tekst. Først måtte jeg opgive at bruge text-shadow fordi den stort set kun virker i safari, suk

Men det der er mest træls er sgu at teksten ikke placerer sig ens i IE og FF

osv...

Nikon D7000 test

Gå til toppen af siden

Tweaker

fredag, 16. marts 2007, 13:14

For at vende tilbage med det omkring de "blinkende" baggrunde. En lettere metode vil være bare at have hover-billedet på baggrund og a:hover{background-image:none;}.

/ask

IBM t42 and IBM t23 still alive and kicking

Gå til toppen af siden

Über dork

fredag, 16. marts 2007, 13:21

Citeret

Originally posted by jacobask
For at vende tilbage med det omkring de "blinkende" baggrunde. En lettere metode vil være bare at have hover-billedet på baggrund og a:hover{background-image:none;}.

/ask

Ja så ville man jo komme uden om det blink det giver.

Du har ikke en ide til at fixe placering af den menu...

Nikon D7000 test

Gå til toppen af siden

Tweaker

fredag, 16. marts 2007, 13:31

Citeret

Originally posted by _WHAT_

Du har ikke en ide til at fixe placering af den menu...

jo sikkert, men har slet ikke haft tid til for alvor at se på det de sidste par dage...

En hurtig ide (som ikke er afprøvet).
Placer din hovermenu med margin-top istedet for padding (og lig evt senere den grønne farve i denne div istedet for i banner-billedet).

Jeg er ikke helt 100% sikker, men er der ikke noget med at IE og FF ikke altid er helt enig om padding.

/ask

IBM t42 and IBM t23 still alive and kicking

Gå til toppen af siden

Nerd

fredag, 16. marts 2007, 14:05

Citeret

Originally posted by jacobask

Citeret

Originally posted by _WHAT_

Du har ikke en ide til at fixe placering af den menu...

jo sikkert, men har slet ikke haft tid til for alvor at se på det de sidste par dage...

En hurtig ide (som ikke er afprøvet).
Placer din hovermenu med margin-top istedet for padding (og lig evt senere den grønne farve i denne div istedet for i banner-billedet).

Jeg er ikke helt 100% sikker, men er der ikke noget med at IE og FF ikke altid er helt enig om padding.

/ask

IE 6.0 og nedefter har elendig forståelse for både Margin og Padding eller boxmodellen generelt.

[IMG]http://www.tweak.dk/forum/attachment.php?attachmentid=16090&sid=[/IMG]

Gå til toppen af siden

Über dork

fredag, 16. marts 2007, 14:09

Hvis ie6 ikke engang fatter det så er det imo temmelig ubrugeligt kode da langt største delen af alle brugere på nettet stadig kører med den.

Nikon D7000 test

Gå til toppen af siden

Nerd

fredag, 16. marts 2007, 14:15

Citeret

Originally posted by _WHAT_
Hvis ie6 ikke engang fatter det så er det imo temmelig ubrugeligt kode da langt største delen af alle brugere på nettet stadig kører med den.

Det kan du så takker microsoft for.

Så længe IE6.0 er så udbredt, så er der mange ting man må bøvle med som webudvikler. eller undvære for den sags skyld (eksempelvis ordentlig png-understøttelse :pokey:

)

Eksempelvis, så kan man ikke lave en popup-menu med ren CSS.

[IMG]http://www.tweak.dk/forum/attachment.php?attachmentid=16090&sid=[/IMG]

Gå til toppen af siden

Tweaker

fredag, 16. marts 2007, 16:30

Så blev der lidt tid (om end ikke nok).

Jeg kan ikke helt se hvor det ligger, men af en eller anden årsag ligger din liste ikke inde i div'en i FF.

Jeg har lavet et eksempel (med copy paste fra din), hvor jeg har givet div'en en blå ramme for at kunne se den.

http://askhansen.dk/test

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (16.03.2007, 16:30)

Gå til toppen af siden

Nerd

søndag, 18. marts 2007, 13:55

Citeret

Originally posted by jacobask
For at vende tilbage med det omkring de "blinkende" baggrunde. En lettere metode vil være bare at have hover-billedet på baggrund og a:hover{background-image:none;}.

/ask

Har du egentlig ikke et eksempel på denne løsning ?

[IMG]http://www.tweak.dk/forum/attachment.php?attachmentid=16090&sid=[/IMG]