Knapper og funksjoner

Knapper og funksjoner

Innleggav srb » tir 10.06.2008 12:00

Hvordan bør jeg angripe dette layoutet for å lage et funksjonelt knappe/meny opplegg... =-O


Bilde

og

Bilde
medlem i 141 måneder
 

Re: Knapper og funksjoner

Innleggav OlafG » fre 13.06.2008 21:11

Ved å bruke lister. Såfremt du ikke skal ha noe fancy-smancy animasjon. Du slicer opp menyen slik at hver knapp er et bilde så lager du en liste og gir hvert listeelement en egen id/klasse. Deretter må du skrive en liten bit CSS for hvert listeelement, der må du skrive at f.eks listeelementet "hjem" skal ha "hjem.png" som en ikkerepeterende bakgrunn.

Si i fra om du ikke skjønner.
medlem i 155 måneder
 

Re: Knapper og funksjoner

Innleggav ArneArts » fre 13.06.2008 21:26

Enig med OlafG. Slik ville jeg gjort det:

HTML for menyen:
Kode: Merk alt
<ul id="meny">
  <li id="meny-hjem"><a href="url"><span>Hjem</span></a></li>
  <li id="meny-studio"><a href="url"><span>Studio</span></a></li>
  etc...
</ul>


CSS:
Kode: Merk alt
#meny {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

#meny li, #meny li a {
  display: block;
  width: 175px;
  height: 40px;
}

#meny li a span {
  display: none;
}

#meny-hjem   { background: url(hjem.png) no-repeat; }
#meny-studio { background: url(studio.png) no-repeat; }


På denne måten vil det bli tekstlinker i tekstbaserte nettlesere og skjermlesere etc, men fine bildelinker i nettlesere med CSS-støtte.

Brukerens avatar
medlem i 187 måneder
 

Re: Knapper og funksjoner

Innleggav srb » man 16.06.2008 15:56

Hjertelig takk! Veldig bra.

Men, jeg har studert på dette, hvordan få knappene til å stemme med teksten ved siden av.
Dersom den er lagt inn i selve illustrasjonen. Jeg har forsøkt med padding, uten å få det til.
medlem i 141 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Google [Bot]