Meny i CSS

estigma · 28. desember 2004

Jeg trenger litt hjelp med å lage koden til en meny i CSS.

Menyen skal bare være 7 bilder som ligger under hverandre UTEN noen mellomrom mellom bildene. Bildene skal også være clickbare.

Disse bildene skal ligge inne i en DIV id-tag

Noen som har tid til å skrive en liten kode til dette? Jeg har sittet en stund å får det ikke til. Prøvd ved bruk av DIV's, prøvde også med liste fra CSS, men fikk ikke helt til det eller.

ER happy for all hjelp!

Andreaz_ · 28. desember 2004

hva mener du med at disse bildene skal være klikkbare?

- Skal det være en hyperlink?

Alle bilene skal være inni én <div> til sammen eller?

<div class="meny">
<a href="#"><IMG scr="ditt bilde" /></a>
<a href="#"><IMG scr="ditt bilde" /></a>
...
</div>

.meny {padding: 0; margin:0; border:hidden }

et tappert forsøk... Jeg har ikke hodt på så lenge. Kommer sikkert et bedre forslag opp

Endret 28. desember 2004 av Dasse

Scelus · 28. desember 2004

Har aldri hørt om <url>-taggen.

Prøv heller denne:

<div id="meny">
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
...
</div>

Foreslår også at du tar en titt på Listamatic for flere (og bedre) metoder å lage en meny på.

Endret 28. desember 2004 av Scelus

estigma · 28. desember 2004

Har aldri hørt om <url>-taggen.

Prøv heller denne:
<div id="meny">
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
...
</div>
Foreslår også at du tar en titt på Listamatic for flere (og bedre) metoder å lage en meny på.

Jeg får fortsatt mellomrom mellom bildene ved koden

CSS:

.meny { padding: 0; margin: 0; border: 0; }

HTML:

</div>

sjekk http://www.legendelys.com/dummy/

for HTML

og http://www.legendelys.com/dummy/styles.css

for CSS

Andreaz_ · 28. desember 2004

Har aldri hørt om <url>-taggen.

hehe.. ler meg skakk ihjel... jeg er litt trøtt i dag :hm:

edit: sto opp klokken 13.30 eller noe, 10 eller heller min ting

Endret 28. desember 2004 av Dasse

Mads-b · 28. desember 2004

når det står ID i HTML må det stå # i CSS

<div id="meny">
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
...
</div>

#meny {padding: 0; margin:0; border:hidden }

estigma · 28. desember 2004

når det står ID i HTML må det stå # i CSS

<div id="meny">
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
<a href="#"><img src="ditt bilde" alt="alternativ tekst" /></a>
...
</div>

#meny {padding: 0; margin:0; border:hidden }

Ok, men hjalp jo ikke noe... får fortsatt mellomrom mellom bildene

PoleCat · 28. desember 2004

Dere tar alle feil, dette er ikke rette måten å gjøre dette på.

Hva skal vi ha? En meny.

Hvordan bør vi sette opp en meny? Ved hjelp av en uordnet liste.

Skal vi bruke <img>-taggen til dette? Det skal vi selvsagt ikke.

Det er en stor fordel med å sette opp menyen i en uordnet liste, sett bort fra at det faktisk er det riktige, nemlig at vi får tre forskjellige elementer å leke oss med.

La oss ta HTML-delen til en random meny først:

<ul>
 <li><a href="#">Dette</a></li>
 <li><a href="#">er</a></li>
 <li><a href="#">en</a></li>
 <li><a href="#">meny</a></li>
 <li><a href="#">satt</a></li>
 <li><a href="#">i en</a></li>
 <li><a href="#">liste</a></li>
</ul>

Enkelt og greit, helt uten styling.

Først av styler vi for eksempel selve listen, som er <ul>-elementet. Det kan kanskje være greit å gi det hele en id (#), for at dette kun skal påvirke menyen vår, og ikke alle lister.

Vi gir da listen en id i HTML:

<ul id="meny">
...
</ul>

...for så å style den i CSS. La oss si at bildene du skal bruke i menyen alle er 200px brede, da kan vi like så godt sette bredden på listen, alle andre blokker innenfor denne listen vil da også arve dette. Vi setter også list-style:none for å slippe standard bullets på li-ene.

ul#meny {
 width: 200px;
 list-style: none;
}

Av en eller annen grunn legger IE til "vertikal-whitespace" mellom vertikale listeelementer, heldigvis finnes det en enkel fiks for dette.

ul#meny li {
 display: inline;
  float: left;
}

Begge disse verdiene er der kun for IE, om de trenger nærmere forklaring så spør.

Vi har da kommet frem til lenkene i listen, som alle skal være forskjellige. Først skriver vi en fellesregel for alle lenkene, før vi legger til klasser og legger bildene til klassene. Bildevisningen er basert på min artikkel om bilde-erstatning. Jeg har her tatt utgangspunkt i at knappene dine er 20px høye, husk å endre begge verdier dersom du endrer høyden.

ul#meny li a {
 display: block;
 overflow: hidden;
 padding: 20px 0 0 0;
 height: 0 !important;
 height /**/ : 20px;
}

Klasser:

a.dette { background-image: url(dette.png); }
a.er { background-image: url(er.png); }
a.en { background-image: url(en.png); }
a.meny { background-image: url(meny.png); }
a.satt { background-image: url(satt.png); }
a.i_en { background-image: url(i_en.png); }
a.liste { background-image: url(liste.png); }

Deretter legger vi klassene til i HTML:

<ul id="meny">
 <li><a class="dette" href="#">Dette</a></li>
 <li><a class="er" href="#">er</a></li>
 <li><a class="en" href="#">en</a></li>
 <li><a class="meny" href="#">meny</a></li>
 <li><a class="satt" href="#">satt</a></li>
 <li><a class="i_en" href="#">i en</a></li>
 <li><a class="liste" href="#">liste</a></li>
</ul>

Det er en grei regel å legge til

* {
 margin: 0;
 padding: 0;
}

i toppen av stilarket, slik at en styrer alle disse verdiene helt selv.

"Slutt-CSS" vil da se ut for eksempel som dette:

* {
 margin: 0;
 padding: 0;
}

ul#meny {
 width: 200px;
 list-style: none;
}

ul#meny li {
 display: inline;
  float: left;
}

ul#meny li a {
 display: block;
 overflow: hidden;
 padding: 20px 0 0 0;
 height: 0 !important;
 height /**/ : 20px;
}

a.dette { background-image: url(dette.png); }
a.er { background-image: url(er.png); }
a.en { background-image: url(en.png); }
a.meny { background-image: url(meny.png); }
a.satt { background-image: url(satt.png); }
a.i_en { background-image: url(i_en.png); }
a.liste { background-image: url(liste.png); }

Dersom du ønsker :hover på knappene, vil jeg anbefale at du benytter deg av Pixy-style CSS no-preload rollovers, css-output vil da for :hover bli noe ala:

ul#meny li a:hover {
 background-position: 0 -20px;
}

Lykke til.

Endret 28. desember 2004 av PoleCat

huf · 28. desember 2004

Bra at du gidder å bruke tid på å rydde opp i galskapen, PoleCat.

PoleCat · 28. desember 2004

Bra at du gidder å bruke tid på å rydde opp i galskapen, PoleCat.

Har sett meg lei på at folk anbefaler/lærer bort å bruke tomme a-elementer eller andre idiotiske løsninger rundt om på diverse fora.

estigma · 28. desember 2004

Tusen Takk PoleCat!!

Det funka fint i IE men i firefox ble alt bare rot og tull, sjekk:

http://www.legendelys.com/dummy/v2/

PoleCat · 28. desember 2004

Legg til width: 112px; til ul#meny li a så ordner det seg.

Rart at det skulle være nødvendig, kan ha noe med li som inline å gjøre, selv om flytende elementer automatisk blir blokk. :hmm:

estigma · 28. desember 2004

Der ja! Phett!

Du er konge PoleCat! Tusen hjertelig! Utrolig, du har altid svar på det meste

PoleCat · 28. desember 2004

Bare hyggelig.

Nicklas · 28. desember 2004

Endelig! Nå vet jeg hvordan en meny skal lages!

Men hva betyr/gjør disse:

display: inline;

display: block;

overflow: hidden;

height: 0 !important; (Hva gjør "!important" ?)

height /**/ : 20px; (Hvorfor "/**/" ?)

* { (Aldri sett sånn før :hmm: )

ul#meny { (Hvorfor er det sånn "ul" foran? Betyr det at den KUN gjelder for UL taggen?)

PoleCat · 28. desember 2004

Siterer meg selv fra bilde-erstatning:

height

Vi har angitt høyde to ganger. Det er den andre verdien som er mest interessant, og hadde det ikke vært for denne siste, hadde vi ikke behøvd noen høyde-verdi. Det har seg slik at Internet Explorer 5 og lavere ikke legger til padding på bredde/høyde og derfor må vi bruke en liten "hack" for å få alle lesere til å skjønne hva vi egentlig vil. I utgangspunktet skal den prioriterte verdien (!important) tas hensyn til, men av en eller annen grunn forstår ikke Internet Explorer (alle versjoner) dette. For at IE6 også skal ta hensyn til den første verdien, legger vil til "/**/", som egentlig er definisjonen på en kommentar i CSS, slik at IE6 leser fra den første, og IE5 fra den andre. Den siste height-verdien skal samsvare med høyden på bildet som skal brukes som erstatning.

----------

ul# sier at det kun skal gjelde for <ul>-taggen ja,og så blir CSS mer oversiktelig i mine øyne.

----------

Kom forøvrig på hvorfor det krevdes bredde på a-elementet, fordi flytende blokker ikke får 100% bredde automatisk, men får bredden gitt av innholdet i den. Burde jeg selvsagt tenkt på før. :wallbash:

----------

EDIT: * betyr alt. * { margin: 0; } setter margin til 0 på alle elementer.

div * {
 border: 1px solid #000;
}

Sier at alle elementer innefor div skal ha 1px sort border. For eksempel.

Endret 28. desember 2004 av PoleCat

Arve Systad · 28. desember 2004

ul# sier at det kun skal gjelde for <ul>-taggen ja,og så blir CSS mer oversiktelig i mine øyne.

Vil forresten påpeike at det heiter ul-elementet.

Du påvirker faktisk ikkje taggen i det heile tatt

Tag:

<ul>

<li>Lorem ipsum dolor....</li>

<li>Lipsum pipsum!</li>

</ul>

Element:

<ul>

<li>Lorem ipsum dolor....</li>

<li>Lipsum pipsum!</li>

</ul>

Endret 28. desember 2004 av arve87

PoleCat · 28. desember 2004

Whatever, ordla meg feil. Tror de skjønte det.

Logg inn

Meny i CSS

Anbefalte innlegg

estigma

Videoannonse

Andreaz_

Scelus

estigma

Andreaz_

Mads-b

estigma

PoleCat

huf

PoleCat

estigma

PoleCat

estigma

PoleCat

Nicklas

PoleCat

Arve Systad

PoleCat

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer