Gå til innhold

Få lenker til å passe saman med bilete.

Arne

Av Arne
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Even.

Even.

Skrevet
Skrevet

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å :)

Kim T

Kim T

Skrevet
Skrevet

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

Arne

Skrevet
  • Forfatter
Skrevet

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

Kim T

Skrevet
Skrevet

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

Arne

Skrevet
  • Forfatter
Skrevet (endret)

Takk, det verka.

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

Eg har eit bilete:

post-91359-1146061376_thumb.jpg

 

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 av Fjott
Kim T

Kim T

Skrevet
Skrevet

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 :)

arne_meny_01.gif

 

arne_meny_02.gif

arne_meny_03.gif

arne_meny_04.gif

arne_meny_05.gif

arne_meny_06.gif

 

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

Arne

Skrevet
  • Forfatter
Skrevet

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

Arne

Skrevet
  • Forfatter
Skrevet

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

jfw69

jfw69

Skrevet
Skrevet
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

Arne

Skrevet
  • Forfatter
Skrevet

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

Kim T

Skrevet
Skrevet (endret)

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 av kimthoma
Kim T

Kim T

Skrevet
Skrevet

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

Arne

Skrevet
  • Forfatter
Skrevet

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.

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...