1. Dator och IT
  2. Systemutveckling

Horisontel meny rollovers

Svara
  • 1
  • 2
2009-03-14, 13:11
  #1
b0rka
Medlem
b0rkas avatar
Hej!

Har googlat en del, och sett ngra enligt mig dligt frklarade artiklar om hur man gr en sn.
r enklare om menyn ligger som en lista.

Jag har gjort en meny i PS som fungerar bra, fast jag vill att mina knappar jag har gjort s bli mycket ljusare nr man hller muspekaren ver dom. Drfr har jag gjort andra knappar i PS som ska visas nr man hller muspekarn ver knappen.

Men hur fr jag detta till att fungera?

r hyffast grn inom webdesign, men har iafall lyckats snickra ihop ett par hemsidor i notepad++ och frsker hlla mig inom strict CSS.

Har givetvis skt forumet, men hittar bara trdar om hur man gr snt vertikalt.

Tacksam fr hjlp!
Citera
2009-03-14, 14:21
  #2
rhdf
Medlem
du mste googlat dligt
finns hur mnga artiklar som helst om hur man bygger horisontella menyer utifrn en lista kolla runt lite p http://www.alistapart.com tex

enkelt sagt s fr man ta och be sina <li> att ligga bredvid varandra
sen lgger man bilden som bakgrund p en a-tagg och den alternativa bilden som bakgrund p a:hover
Citera
2009-03-14, 16:00
  #3
b0rka
Medlem
b0rkas avatar
Jo, s lngt har jag kommit, men det r ju flera olika knappar.. Hur gr jag d?
Citera
2009-03-14, 16:08
  #4
Kausti
Medlem
Kaustis avatar
Citat:
Ursprungligen postat av b0rka
Jo, s lngt har jag kommit, men det r ju flera olika knappar.. Hur gr jag d?

Kod:
#knapp1 {
//vanliga bakgrundsbilden p startknappen
}

#knapp1:hover {
//hover bakgrund p startsideknappen
}

#knapp2 {
//bakgrunden p kontaktsidan-knappen
}

#knapp2:hover {
//hoverbakgrund p kontaktknappen
} 

Och s vidare
Citera
2009-03-14, 16:29
  #5
rhdf
Medlem
vill man gra det nnu "porrigare" S kan du anvnda dig av "CSS-sprites"
d gr du helt enkelt en bild dr du har alla menyknapparna i normal-lge samt "hover" bilden, d behver du bara hmta en bild fr alla knapparna
lite enkelt:
[menyknapparna i normal-lge]
[menyknapparna i hover-lge]

och sen flyttar du runt i den bilden med css, dels en flytt fr varje normalbild, dels ett hopp, sg 30px "ner" fr hover

li a{background-image:url(dinfinamenybild.png)}
li a.first{background-position:0 0;}
li a.first:hover{background-position:0 -30px;}
__________________
Senast redigerad av rhdf 2009-03-14 kl. 16:42.
Citera
2009-03-14, 17:18
  #6
00010000
Medlem
00010000s avatar
Citat:
Ursprungligen postat av Kausti
Kod:
#knapp1 {
//vanliga bakgrundsbilden p startknappen
}

#knapp1:hover {
//hover bakgrund p startsideknappen
}

#knapp2 {
//bakgrunden p kontaktsidan-knappen
}

#knapp2:hover {
//hoverbakgrund p kontaktknappen
} 

Och s vidare
Vilket iofs inte stds av IE6, 7 eller 8.
IE hanterar i princip bara :hover p a-elementet.

Det finns lsningar/work-arounds kring det problemet som t.ex. WhateverHover men jag skulle personligen rekommendera en lsning som inte krver s kallade "fulhack".

Min personliga favorit r css sprites som nmns hr ovan.

T.ex.
http://wellstyled.com/files/css-nopr.../example2.html
http://websitetips.com/articles/css/sprites/
http://www.fiftyfoureleven.com/weblo...s-optimization
http://alistapart.com/articles/sprites/
Citera
2009-03-14, 18:09
  #7
phunque
Medlem
phunques avatar
Citat:
Ursprungligen postat av 00010000
Vilket iofs inte stds av IE6, 7 eller 8.
IE hanterar i princip bara :hover p a-elementet.

Det finns lsningar/work-arounds kring det problemet som t.ex. WhateverHover men jag skulle personligen rekommendera en lsning som inte krver s kallade "fulhack".

Min personliga favorit r css sprites som nmns hr ovan.

T.ex.
http://wellstyled.com/files/css-nopr.../example2.html
http://websitetips.com/articles/css/sprites/
http://www.fiftyfoureleven.com/weblo...s-optimization
http://alistapart.com/articles/sprites/
Som lk p laxen ger anvndandet av sprites ven en annan positiv effekt, nmligen en reduktion av http-requests (givet att man bakar in alla bilder i en) som pverkar nedladdningstiden.
Citera
2009-03-14, 18:51
  #8
Kausti
Medlem
Kaustis avatar
Citat:
Ursprungligen postat av 00010000
Vilket iofs inte stds av IE6, 7 eller 8.
IE hanterar i princip bara :hover p a-elementet.

Det funkar utmrkt fr mig i IE7, Chrome och FF3:

Kod:
<style type="text/css">
#knapp1 {
display: block;
width: 200px; 
height: 100px;
background-image: url('http://bild.se/something.gif');
color: red;
}

#knapp1:hover {
color: green;
background-image: url('http://bild.se/hoverbild.gif');
}

</style>

<a href='#' id='knapp1'>asafssf</a> 
Citera
2009-03-14, 19:40
  #9
00010000
Medlem
00010000s avatar
Citat:
Ursprungligen postat av Kausti
Det funkar utmrkt fr mig i IE7, Chrome och FF3:

Kod:
<style type="text/css">
#knapp1 {
display: block;
width: 200px; 
height: 100px;
background-image: url('http://bild.se/something.gif');
color: red;
}

#knapp1:hover {
color: green;
background-image: url('http://bild.se/hoverbild.gif');
}

</style>

<a href='#' id='knapp1'>asafssf</a> 
Ja det fungerar eftersom det r just ett a-element.
Det var detta element jag skrev att IE stdjer :hover p.
Citera
2009-03-15, 13:02
  #10
b0rka
Medlem
b0rkas avatar
Okej, lste igenom artikeln, och frskte lsa det, men fr det inte att fungera. Det blir bara en bakgrundsbild, inget mer. Inga lnkar eller ngot.

r som sagt, rtt novis, men frsker lra mig.
Finns frmodligen 100 fel, s skratta inte ut mig fr mycket, men jag bifogar koden jag har skrivit, hoppas ni kan hjlpa mig lite.

CSS:

Citat:
#menu li {
list-style: none;
}

#menu li, #menu a {
display: block;
}

#home {left: 0; width: 176px;}
#service {left: 177px; width: 172px;}
#sails {left: 350px; width: 172px;}
#about {left: 524px; width: 172px;}
#contact {left: 697px; width: 172px;}



#home a:hover {background: transparent url(img/Home_Buttom.gif) 0 47px no-repeat;}
#service a:hover {background: transparent url(img/test.gif) -177 -47px no-repeat;}
#sails a:hover {background: transparent url(img/test.gif) -350 -47px no-repeat;}
#about a:hover {background: transparent url(img/test.gif) -524 -47px no-repeat;}
#contact a:hover {background: transparent url(img/test.gif) -697 -47px no-repeat;}


Och hr kommer HTML:

Citat:
<ul id="menu">

<li id="home"><a href="#1"></a></li>
<li id="service"><a href="#2"></a></li>
<li id="sails"><a href="#3"></a></li>
<li id="about"><a href="#4"></a></li>
<li id="contact"><a href="#4"></a></li>
</ul>


Menyn ska vara horisontel, s antar att det ska vara display: inline istllet fr block?

Tack fr all hjlp!
Citera
2009-03-15, 13:52
  #11
rhdf
Medlem
fr att f menyn horisontell s stter du float:left p
HTML-kod: 
#menu li{
float:left}
sen mste du ange storlek p dina a-taggar, jag antar att de r lika stora

HTML-kod: 
#menu a{
height:47px;
width:172px;
}

sen r det vettigt att ha en text i lnken med s att de funkar utan css
HTML-kod: 
#menu a span{display:none;}

<li id="home"><a href="#1"><span>Home</span></a></li>
Citera
2009-03-15, 14:29
  #12
b0rka
Medlem
b0rkas avatar
Fr fortfarande inga klickbara lnkar.

Bara bakgrundsbilden som r i #menu visas

Shr ser min CSS ut

Citat:
#menu {
width: 860px;
height: 47px;
margin: 0px;
padding: 0px;
list-style-type: none;
background: url(img/test.gif)
}

#menu li {
list-style: none;
display: block;
float: left;
}

#menu a {width: 172px; height: 47px; }

#home {left: 0; width: 176px;}
#service {left: 177px; width: 172px;}
#sails {left: 350px; width: 172px;}
#about {left: 524px; width: 172px;}
#contact {left: 697px; width: 172px;}



#home a:hover {background: transparent url(img/Home_Buttom.gif) 0 47px no-repeat;}
#service a:hover {background: transparent url(img/test.gif) -177 -47px no-repeat;}
#sails a:hover {background: transparent url(img/test.gif) -350 -47px no-repeat;}
#about a:hover {background: transparent url(img/test.gif) -524 -47px no-repeat;}
#contact a:hover {background: transparent url(img/test.gif) -697 -47px no-repeat;}

Hr HTML koden

Citat:
<ul id="menu">

<li id="home"><a href="#1"></a></li>
<li id="service"><a href="#2"></a></li>
<li id="sails"><a href="#3"></a></li>
<li id="about"><a href="#4"></a></li>
<li id="contact"><a href="#4"></a></li>
</ul>

Som sagt, bara bakgrundsbilden visas
Citera
Svara
  • 1
  • 2

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in