Hjelp til CSS bildemeny

[Garreth]

Jeg har holdt på en stund med css nå, men jeg har aldri laget en css meny med bilder før. Har kun brukt css verdier (uten bilder) til å style menyene mine før.

 

Slik har jeg tenkt at det skal komme til å se ut:

 

 

Jeg har tenkt å prøve meg på det nå, men jeg står fast allerede i begynnelsen. Jeg lurer på om dette er mulig å gjøre det uten å bruke id på LIene. Jeg vil helst ha det slik at det ikke gjør noe om det er 3 eller 6 knapper i menyen, det ser likt ut uansett (utenom at menyen selfølgelig blir større)

 

Jeg tror jeg er litt på vei, men jeg får det ikke helt til slik jeg vil ha det.

 

Nå har jeg satt bildet med bakgrunnsfargen på ul#menu li og så har jeg satt borderen på ul#menu li a , men jeg skulle gjerne ha byttet om på de to slik at jeg kan forandre bakgrunnsfargen på hover. (hover fungerer dårlig på andre enn a-elementet i IE) Når jeg byttet om på de to bildene, så kom ikke borderen fram.

 

Jeg får heller ikke til å begynnelse og slutt bilder på <ul>, kanskje jeg må bruke en div rundt menyen for å klare dette? (altså jeg har begynnelse bildet på div-en og sluttbildet på ul-en.) Jeg må kanskje kutte ned på disse to bildene da knappeteksten ikke klarer å gå over på disse ?

 

Css meny test

 

Begynnelsen:

Slutten:

Bakgrunnsfarge

Bakgrunnsfarge :hover

Border

Har også prøvd meg med en full knapp, men det fungerte dårlig.

 

Setter stor pris på om noen vil hjelpe meg

Endret 29. november 2005 av Garreth

[JonH]

CSS Menyer burde fungere, om man deler opp over flere knapper. Har ikke testet det selv.

[Mads-b]

Hva med No-preload rollovers?

 

EDIT: hvorfor vil du ikke bruke id's? det er jo så mye enklere? Knappene på endene er jo annerledes enn de andre så jeg kjarer ikke å se noen løsning på det utten på bruke pseudokode..

Endret 29. november 2005 av MBaardsgaard

[Garreth]

Det skal brukes i et publiserings system, og derfor blir det veldig krokete å legge til nye knapper. Da må man legge til ID og så må cssen kodes for hver knapp. Jeg vil helst at knappene (bildet) repeteres/dras bortover hvis knappeteksten er lang. Men hvis det ikke er mulig med css i mitt tilfelle, så er det jo litt vanskelig å prøve på dette.

[Lovskogen]

Det er jo bare å lage en standard-knapp, med roll-over. Også legger du vanlig tekst over. Da blir det lett å lage en knapp ekstra, når teksten ikke er inne i bildet.

[Garreth]

Hmm, Si at jeg lager en knapp som er 20px bred. Den passer perfekt om man har knappenavn som er kortere enn 10 bokstaver, men hva skjer når knappeteksten blir større enn det da? Jeg må vel ha et bakgrunnsbilde som kan repeteres uten at det synes? Hvis jeg da lager disse knappene med borders helt i kanten, så vil denne kanten bli repetert i samme knapp.

 

Eller har jeg misforstått alt?

 

Jeg vet at jeg kan bruke "border; " verdien i css, men jeg vil helst ha custom borders slik at det ikke blir så clean.

[haugsand]

Les Sliding doors of CSS.

[Garreth]

Takk. Den så ut som den forklarte det meste.