Hjelp med oppbygning av meny og runde kanter

[Pilot_]

Heisann

 

Har nettopp mekka sammen en skisse i Photoshop, og holder nå på å kode sammen det hele. Menyen min ser slik ut:

 

Det jeg lurer på er hvordan jeg skal gjøre dette her. Tenkte å sette det opp i en liste og definere bakgrunnsbilde på knappene, så har jeg en hover-effekt som blir byttet ut med den andre knappen. Skal jeg la teksten på knappene bli på bildene, eller skal jeg legge tekst over dem i HTML? Lurer også på hvordan jeg kan få til de runde kantene på hver side på en fornuftig måte. Er det noen som kan hjelpe meg litt på vei her?

[j--]

Du er inne på det riktige.

1) Om du velger å legge teksten i selve bildet så husk å fortsatt la teksten ligge i HTML-en, slik at det er navigerbart for folk som har en utdatert nettleser/bruker noe tekstbasert

2) Om du lager ett bilde (med dobbel høyde av hva en enkelt knapp vil være i høyde) og har lar den øverste delen av bildet være hvordan knappene dine skal se ut til vanlig, mens den nederste er hover-statusen til knappen, vil de som navigerer i menyen slippe å se det blinker i den tiden det tar å laste ned "hover-status"-bildet. Bildet skifter du bare plassering på i CSS-en ved hover.

[Pilot_]

Ja ok, jeg tror jeg skjønner hva du mener. Men hvordan skal menyen plasseres i forhold til hjørnene? Jeg regner med hjørnene må løses ved å sette inn bilder. Skal jeg da lage en avlang (rektangulær) div og dermed floate knappene og hjørnene på plass? Det virker for meg dømt til å aldri fungera optimalt i flere nettlesere.

[Pilot_]

Nå har jeg prøvd meg litt frem, men det blir ikke helt sånn som jeg vil.

 

CSS

body {
margin: 0px;
padding: 0px;
background-image: url("bilder/bakgrunn.png");
background-repeat: repeat;
text-align: center;
}

a {
display: block;
}

#wrapper {
margin: 0 auto;   
text-align: left; 
background-color: #f1f1f1;
width: 670px;
height: auto; 
}

#meny ul {
list-style: none;
margin    : 0;
background: url("bilder/knapp.png") left no-repeat;
}

#meny li {
float: left;
}

 

HTML

<div id="wrapper">

	<div id="meny">  
   <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
       <li><a href="#">Link 4</a></li>
   </ul> 
   <p>
   Tekst her
   </p>
   </div>

</div>

</body>

 

http://img215.imageshack.us/img215/4575/sidesv3.th.jpg

Hva gjør jeg feil?

 

Ønsker som sagt at det skal bli sånn som på bildet over, med avrundede hjørner.

Endret 14. april 2008 av Brød

[kenneth_sport]

Den enkleste ville vel bare vært å tegne hele knappen med tekst og bilde i ett og så bare bruke noe effekt på bildene.

 

For eksmpel slik en ser litt ned på denne siden. Hele scriptet finner du her.

 

Om du ikke vil bruke JS så kan du bruke CSS slik som Hilde88 sa.

 

På eksempelet ditt stusser jeg litt på hva du vil. For eksempel hvorfor er ikke bildet under li og ikke ul. Kan være det er jeg som misforstår. Får heller ikke opp bildet.

Endret 14. april 2008 av kenneth_sport

[Haraldson]

For noe tull, kenneth_sport. JS skal ikke brukes til presentasjonelle ting så lenge tilsvarende støttes helt fint av CSS.

 

En enkel kode som baserer seg på en listebasert meny (for så vidt lik den du har i eksempelet ditt), Brød:

<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

ul#menu {
width: 500px;
float: right;
clear: both;
}

ul#menu li {
float: left;
display: inline;
height: 28px;
}

ul#menu li a {
background: url(menu-item.png) 0 0 no-repeat;
display: block;
float: left;
width: 103px;
height: 28px;
margin: 0 2px 0 0;
line-height: 28px;
outline: none;
text-align: center;
color: #FFF;
text-decoration: none;
}

ul#menu li a:hover {
background-position: 0 -28px;
}

 

Bildet i ul#menu li a inneholder mørk grønn 'normal state' øverst, lysere blågrønn 'hover state' nederst. Hver del er 28px høy, menu-item.png er 103x56px til sammen.

 

Mer forståelig?

Endret 14. april 2008 av Haraldson

[Pilot_]

Så der ja, dette ble bra! Tusen takk Haraldson.

 

Men så var problemet de runde hjørnene. Slik jeg har forstått det er ikke det mulig å få til runde hjørner med CSS på en fornuftig måte (?), og da må jeg til med bilder. Skal jeg sette de som background og/eller benytte z-index? Og hvordan posisjonere?

[Pilot_]

Hvordan få et bilde til å overgå en div? Som dere ser på bildet, blir hjørnene ødelagt fordi det ligger en border på wrapperen, men hvis bildet i bunnen hadde komt over, hadde man ikke sett det. Prøvde å sette z-index: -1; på wrapperen og z-index: 1; på bildet, men fortsatt ingen forandring.