---

Jeg forsøger at lave en menu vha. css, hvor der er en knap-effekt
vha. et billede bag hvert menupunkts tekst.

Jeg kan sagtens få billedet ind, og det skifter også ved mouse
over.

Problemet er, at der kun vises så meget af billedet, som det
enkelte menupunkts tekst rækker, uanset at jeg sætter width i
koden. Dvs. at knapperne får forskellig længde...

Jeg har sat mit CSS ind nedenfor.

Siden der bruger css'et har jeg lagt på
http://www.webnestor.dk/driller
Her kan I se, at jeg i det nederste punkt i min tabel har jeg
ladet knap-teksten være så lang, at hele billedet kommer med, så
I kan se hvordan det skulle se ud, hvis det altså virkede...

- Gode ideer til hvad jeg kan gøre anderledes er velkomne!

Med venlig hilsen
Mette

Fra mit CSS:

#hovedmenu a {
   font-family: verdana, helvetica, sans-serif, Arial;
   font-size: 12px;
   font-weight: bold;
   color: #FAD167;
   background-image: url(images/knap.gif);
   line-height: 28px;
   padding-top: 5px;
   padding-left: 5px;
   text-decoration: none;
   margin: 0px;
   padding-right: 2px;
   padding-bottom: 2px;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 1px;
   border-top-color: #999999;
   border-left-color: #999999;
   background-repeat: no-repeat;
}
#hovedmenu a:hover {
   font-family: verdana, helvetica, sans-serif, Arial;
   font-size: 12px;
   font-weight: bold;
   color: #FAD167;
   background-image: url(images/knap-over.gif);
   line-height: 28px;
   padding-top: 5px;
   padding-left: 5px;
   text-decoration: none;
   margin: 0px;
   padding-right: 2px;
   padding-bottom: 2px;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 1px;
   border-top-color: #999999;
   border-left-color: #999999;
   background-repeat: no-repeat;
}


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Mette Juul wrote:

> Problemet er, at der kun vises så meget af billedet, som det
> enkelte menupunkts tekst rækker, uanset at jeg sætter width i
> koden. Dvs. at knapperne får forskellig længde...

Tilføjer du display:block; og den ønskede bredde (width) til din #hovedmenu
a, vil dit problem være løst.


> border-top-width: 1px;
> border-right-width: 0px;
> border-bottom-width: 0px;
> border-left-width: 1px;

Kan skrives sammen i en linje:

border-width: 1px 0 0 1px;

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

Erik Ginnerskov skrev:

> Tilføjer du display:block; og den ønskede bredde
> (width) til din #hovedmenu a, vil dit problem være
> løst.

Ikke helt, jeg ville også give den højde (height), da
images/knap.gif er 120 x 25. Her driller line-height:
28px; bare, fjerner man den ser det fint ud.

Så kommer det næste, images/knap-over.gif er kun
21px i højden. De to gif-filer bør have samme højde.

--
Allan Vebel
http://html-faq.dk

---

1000 tak for hjælpen - display:block; - udvirkede mirakler, og
ja, efter at have givet de to grafikker samme størrelse går det
jo (igen) som en leg :)

Fortsat god aften,

Mvh. Mette
www.webnestor.dk

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials