Få lenker til å passe saman med bilete.

Arne · 25. april 2006

Hei!

Det er ein ting innan webdesining som eg ser mange sider har.

Eit eksempel er pa denne sida: http://www.requiemclan.com/bilder/Kims_hjemmeside/index.html

Det eg meiner er lenkene nedanfor headeren.

Kan nokon forklare meg korleis eg kan gjere det på f. eks. dette?

http://arneweb.com/temp2

Det er på inga måte meininga å kopiere sida til Kim, poenget er å lære teknikken.

Set pris på svar.

Even. · 25. april 2006

Tenker du på selve bildene eller på kodingen. Hvis det er bildene tar du bare å lager dem transparente og floater dem med css.

Kan legge ut et eksempel når jeg kommer hjem, men er på jobb nå

Arne · 25. april 2006

Hehe, takk.

Tenkte igrunnen på alt.

Kan du forklare litt grundigare når du kjem heim?

Kim T · 25. april 2006

Kan gi deg en kort forklaring på hvordan jeg har gjort det siden du viser frem mitt eksempel.

Det jeg har gjort er å sette opp en "unordered list" med 5 lister inni seg. Disse har jeg satt til "display inline". Det fører til at listene kommer etter hverandre horisontalt istedetfor vertikalt som er standard.

I listene legger jeg til "linker". Ved hjelp av CSS så "stiler" jeg linkene med bakgrunnsbilder. En link har 3 "tilstander" active, link og hover. Jeg vil at ha en ønsket hover effekt som da er "gradient". Dette er ikke noe annet enn et bilde med en "gradient" på. De andre 2 tilstandene er like. Dermed vil bakgrunnsbildet på linken flytte på seg når du drar musen over linken. Får å få en bedre beskrivelse på dette kan du ta en titt på denne siden.

Linker med "rollovereffekt"

Arne · 25. april 2006

Takk, skal kikke på det i morgon tidleg. (Må gå og "lalle" no)

Så eg kan eigentleg berre ta eit bilete som eg 600px og dele det opp i ønska anntal biter? Goodie, goodie!

Veit de om ein måte eg kan dele opp eit bilete i x antal like store biter?

Kim T · 25. april 2006

Hvis du bruker photoshop til å lage designet ditt i, så er det en innebygd funksjon som kalles for "slice". Der kan du velge det området som du skal bruke til meny. Deretter kan du dele den slicen i så mange like store deler som du vil med å høyreklikke og velge "divide slice"

Arne · 26. april 2006

Takk, det verka.

Eg lurar litt, er det mogleg å gjere det slik slik som dette:

Eg har eit bilete:

Du ser sikkert at nederst er fargen rundt bokstavane bleika.

Kan eg bruke dette biletet til å dele opp, og korleis kan eg gjere det?

Kunne du tenke deg å vise meg litt? Btw, bra den linken, men i mitt tilfelle var det litt vanskeleg.

Endret 26. april 2006 av Fjott

Kim T · 26. april 2006

Nå vet jeg ikke hvordan du hadde tenkt deg oppdelingen men her kommer da et eksempel....

Dette bildet trenger du ikke bruke siden det er kun bakgrunnsfargen til menyen

Er ingenvits for meg å forklare hvordan du gjør det når det finnes så mange plasser på nettet med beskrivelse. Så her kommer det en link til det.

Hvordan slice et bilde...

Arne · 26. april 2006

Takk, held på og arbeider no.

Slik gjer eg det:

Slicer opp i 5 like deler. Då eg det enkelt å bruke marquee-tool og paste og lage nytt bilete.

Skal straks starte å kode!

Arne · 26. april 2006

Trur eg treng litt hjelp med koden.

Her er koden:

HTML:

<html>
<head>
<title>Prosj. 1 </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="skye_top">
<ul>
   <li class="hjem"><a href="#">f</a></li>
<li class="lenker"><a href="#">f</a></li>
<li class="ommeg"><a href="#">f</a></li>
<li class="bilder"><a href="#">f</a></li>
<li class="gb"><a href="#">f</a></li>
</ul>



</div>








</div>
</body>
</html>

CSS:

* {
 padding: 0;
 margin: 0;
 }

body {
    background: url(bg2.gif);
 background-repeat: repeat x;
margin: 0 auto;
text-align:center;
 }
div.container {
 border-right: solid #a2a6a8 1px;
 border-left: solid #a2a6a8 1px;
 width: 600px;
 height: 600px;

background: url(container_bg.gif);
background-repeat: repeat-x;
}
div.skye_top {
        width: 600px;
  height: 200px;
  background-color: #a3fe4b;
  }
li {
display: inline;
}
li.home a {
     background: url(menu/1_home.gif) no-repeat;
  }
li.home  a:hover {
background: url(menu/hover_1.gif) no-repeat;
}
li.lenker a {
     background: url(menu/2_lenker.gif) no-repeat;
  }
li.lenker  a:hover {
background: url(menu/hover_2.gif) no-repeat;
}
li.ommeg  a {
     background: url(menu/3_ommeg.gif) no-repeat;
  }
li.ommeg  a:hover {
background: url(menu/hover_3.gif) no-repeat;
}
li.bilder a {
     background: url(menu/4_bilder.gif) no-repeat;
  }
li.bilder  a:hover {
background: url(menu/hover_4.gif) no-repeat;
}
li.gb a {
     background: url(menu/5_gb.gif) no-repeat;
  }
li.gb  a:hover {
background: url(menu/hover_5.gif);
}

Her kjem den: http://arneweb.com/temp2

Kim T · 26. april 2006

Et eksempel på hvordan det kan gjøres

Ta se på css filen så kan du leke og sammenligne litt....

CSS filen

jfw69 · 26. april 2006

Trur eg treng litt hjelp med koden.

Her er koden:

HTML:

<html>
<head>
<title>Prosj. 1 </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="skye_top">
<ul>
   <li class="hjem"><a href="#">f</a></li>
<li class="lenker"><a href="#">f</a></li>
<li class="ommeg"><a href="#">f</a></li>
<li class="bilder"><a href="#">f</a></li>
<li class="gb"><a href="#">f</a></li>
</ul>



</div>








</div>
</body>
</html>

CSS:

* {
 padding: 0;
 margin: 0;
 }

body {
    background: url(bg2.gif);
 background-repeat: repeat x;
margin: 0 auto;
text-align:center;
 }
div.container {
 border-right: solid #a2a6a8 1px;
 border-left: solid #a2a6a8 1px;
 width: 600px;
 height: 600px;

background: url(container_bg.gif);
background-repeat: repeat-x;
}
div.skye_top {
        width: 600px;
  height: 200px;
  background-color: #a3fe4b;
  }
li {
display: inline;
}
li.home a {
     background: url(menu/1_home.gif) no-repeat;
  }
li.home  a:hover {
background: url(menu/hover_1.gif) no-repeat;
}
li.lenker a {
     background: url(menu/2_lenker.gif) no-repeat;
  }
li.lenker  a:hover {
background: url(menu/hover_2.gif) no-repeat;
}
li.ommeg  a {
     background: url(menu/3_ommeg.gif) no-repeat;
  }
li.ommeg  a:hover {
background: url(menu/hover_3.gif) no-repeat;
}
li.bilder a {
     background: url(menu/4_bilder.gif) no-repeat;
  }
li.bilder  a:hover {
background: url(menu/hover_4.gif) no-repeat;
}
li.gb a {
     background: url(menu/5_gb.gif) no-repeat;
  }
li.gb  a:hover {
background: url(menu/hover_5.gif);
}

Her kjem den: http://arneweb.com/temp2

5993475[/snapback]

Er ikke fullt så dreven med html enda, men får ikke coden til å virke slik jeg ønsker. Hvordan binder jeg linkene til gå til områder på den samme siden (som den egentlig er til)? kommer bare til toppen av siden på alle linkene :hmm:

Arne · 27. april 2006

Tusen takk, Kimthoma!

Viss eg skal leggje lenker til, kva gjer eg då?

Kim T · 27. april 2006

Da legger du bare en link i listen.....


<ul>
<li id="hjem"><a href="index.html"></a></li>
<li></li>
</ul>

Arne · 27. april 2006

Eg tenkte på CSS'en.

Arne · 30. april 2006

Takk for hjelp, eg har no fått til hover-effekt.

Men, dette er det merklegaste eg har sett.

Som du sikkert ser, er hover'en til "hjem" - "gjestebok"!

Kva kan det bety? Skjekk CSS'en, det er ikkje noko feil der, trur eg.

Kim T · 30. april 2006

Ser feilen din Hvis du retter oppe nederst på CSS stilarket til der står det følgende:

#hjem a:hover {
background: url(menu/hover_5.gif) no-repeat;
}

Denne regner jeg meg egentlig skal være slik:

#gb a:hover {
background: url(menu/hover_5.gif) no-repeat;
}

Du har sikkert bare glemt å forandre id'en siden du sikkert har copy pastet. Da blir det både hover på gjestebok og hjem tenker jeg...

EDIT: Grunnen til at du får gjestebok sin hover er fordi du har satt opp en "ny" hover stil på #hjem. Det betyr det samme som at du skriver "over" den som du allerede har satt. Derfor blir det slik...

Endret 30. april 2006 av kimthoma

Arne · 30. april 2006

Takk, dette blei jo bra, eller kva?

Kim T · 30. april 2006

Du bør se litt på den linken jeg gav deg. Der lærer du hvordan du unngår å laste bilder hvergang du tar en "hover" med musen. Da lastes bildene inn når du laster inn websiden. I tillegg synes jeg kanskje fonten som du har brukt kunne ha vært penere. Men du lærer av dette og vil sikkert finne ut av det selv...

I tillegg ser det ut som menyen er noen få pixler bredere enn selve siden. Eller du kanskje mangler border på gjestebok bildet?

Arne · 30. april 2006

Ja, men fonten passar med fonten eg skal breuke på sida.

Eg forstod ikkje heilt kva du meinte med at menyen er for stor.

Eg veit ikkje om eg missforstod deg, men eg har ikkje border på nokon av bileta.

Få lenker til å passe saman med bilete.

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer