Hvordan kode meny, avansert?

[Sk!ppy]

Hei.

 

Jeg skal kode meny til det ene designet jeg har laget.

 

den ser sånn ut:

 

hvordan skal jeg kode den blå/grå saken der, så den funker?

[Wackamole]

Hvordan ville du gjort det normalt?

[Sk!ppy]

Jeg ville ikke klart det, normalt..

 

( men jeg ville starta med en vanlig "bortover" meny tror jeg )

Endret 13. november 2009 av LaCrouX

[Sk!ppy]

Glemte å nevne at jeg vil at den blå greia skal endre bredde , ettersom hva som står der

Endret 13. november 2009 av LaCrouX

[Edorph]

Ta en titt på Sliding Doors-artikkelen hos A List Apart :-)

Endret 13. november 2009 av Edorph

[Sk!ppy]

kommer bare så langt, noen som har noen tips for å komme videre?

[Wackamole]

kode hadde vært kjekt - Eventuelt en live side for og se hva du har gjort.

 

EDIT: Vil også si at denne er feilpostet og skal over i HTML/CSS delen av forumet.

Endret 14. november 2009 av Famen

[Sk!ppy]

Kode er kjekt ja

 

	#menu {
  float:left;
  width:100%;
  background: url("") repeat-x bottom;
  font-size:93%;
  line-height:normal;
  }
#menu ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#menu li {
  float:left;
  background:url("") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
#menu a {
  float:left;
  display:block;
  background:url("") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#menu a {float:none;}
/* End IE5-Mac hack */

#menu a:hover {
  color:#333;
  }

#menu #current {
  background-image:url("images/menuleft.png");
  border-width:0;
  }
#menu #current a {
  background-image:url("images/menuright.png");
  padding-bottom:5px;
  }

 

<div id="menu">
<ul>
<li><a href="">TJENESTER</a></li>
<li id="current"><a href="">PARTNERE</a></li>
<li><a href="">HVA GJØR VI?</a></li>
<li><a href="">KONTAKT OSS</a></li>
<li><a href="">MENYFYLL</a></li>
<li><a href="">MENYFYLL</a></li>
</ul>
</div>

[Wackamole]

	#menu #current {
  background-image:url("images/menuleft.png");
  background-color: #0000FF;
  border-width:0;
  }

 

Vet ikke om denne funker - du kan nå prøve, husk og bytte ut #0000FF med din egen farge slik at den passer.

[Sk!ppy]

Den koden du ga meg der har jeg jo allerede...?

[Wackamole]

ja, men la til background-color. Ikke sikkert det hjelper eller at det er det du ønsker, men er værdt et forsøk inntil CSS guruene på forumet har tid til og hjelpe deg

[Sk!ppy]

Vet ikke helt hvordan det skal hjelpe når jeg vil ha et bilde til å repetere bortover?

[Wackamole]

Det jeg ikke forstår er hvorfor du har laget en LEFT og en RIGHT når du faktisk vil ha HELE bildet til og repetere på den aktive linken?

[Sk!ppy]

Neu, jeg har prøvd å legge til imtrent samme kode , bare med et annet bilde.

[Edorph]

Du må bruke en left og right fordi man i praksis vil ha to bakgrunnsbilder som glir over hverandre (som to butikkdører, derav Sliding Doors-analogien) alt ettersom hvor bredt innholdet er.

 

Kan nesten se ut som begge bakgrunnsbildene dine bare er ~10px i bredden? Husk at det ene må være minst like bredt som det bredeste menyelementet. Du skal altså ikke repetere noen av bakgrunnsbildene.

[Sk!ppy]

Ok, men om jeg da f.eks legger på den delen som skal repetere, ca 50px av den på vær side, Vil den da overgå på den motsatte siden?