Gå til innhold

CSS rollover spørsmål

Tha_Zaynt

Av Tha_Zaynt
i Programmering og webutvikling

Anbefalte innlegg

Tha_Zaynt

Tha_Zaynt

Skrevet
Skrevet

får ikke CSS-rolloveren min til å funke helt. Prøvde å følge modellen som PoleCat viste i denne tråden, men uten hell..Noen som kan se hvor feilen ligg?

 

BTW; Jeg er ganske ny i CSS

 

html-kode

<html>
<head>
<title>zaynt.shyper.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="menu">
 <ul>
   <li><a class="index" href="#"></a></li>

 </ul>
</div>

</body>
</html>

 

CSS

div#menu ul {
list-style: none;

}

div#menu ul li {
display: inline;
float: left;
}

div#menu li a {
display: block;
height: 31px;
background-repeat: no-repeat;
}

div#menu li a:hover {

}

.index {
background-image: url(images/indexhover.png);
width: 128px;
height: 31px;
}

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
gozzer

gozzer

Skrevet
Skrevet (endret)

Det er jo ikke bare i FF det er noe alvorlig galt med menyen. Det ville vært mer korrekt å si at IE er den eneste det ser riktig ut i :)

 

Uansett, problemet ditt kommer av at IE og resten av verden har forskjellige marginer når det kommer til lister (bl. al). Du kan nok løse problemet ved å rette litt på marginene og/eller flytte punktene en eller to pixler til høyre/venstre (relativt). Dette kan noen ganger "sparke" IE litt i stumpen.

 

Utover det, har du en skrivefeil i css-filen din.

 

Der du prøver så sette 

margin-left: -40px;

 

Setter du

margin-lesft: -40px;

 

Retter du opp denne, vil nok punktene flytte seg noe til venstre.

 

Edit: Hvorfor bruker du forresten liste i menyen? Utover at det er litt "uvanlig", ser det også ut til at Opera sliter med å vise bakgrunnsbildene dine.

Endret av gozzer
Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet (endret)

Du må følge innlegget mitt til punkt og prikke, det fungerer dårlig om man fjerner noen egenskaper. Heller spør om det er noen av egenskapene du ikke forstår.

 

EDIT:

div#menu ul {
list-style: none;
position: absolute;
height: 31px;
overflow: hidden;
}

div#menu ul li {
display: inline;
float: left;
}

div#menu li a {
display: block;
overflow: hidden;
padding: 31px 0 0 0;
height: 0 !important;
height /**/ : 31px;
background-repeat: no-repeat;
}

div#menu li a:hover {
background-position: 0 -31px;
}

.index {
background-image: url("images/indexhover.png");
width: 128px;
}

 

<div id="menu">
   <ul>
        <li><a class="index" href="index.php">Home</a></li>
      </ul>
</div>

Endret av PoleCat
Lenke til kommentar
Tha_Zaynt

Tha_Zaynt

Skrevet
  • Forfatter
Skrevet (endret)

synes fortsatt den ser rar ut...

link

 

CSS

body {
background-color: #F3F3F3;
}
.top {
background-image: url("images/header.png");
background-repeat: no-repeat;
height: 134px;
width: 722px;
}
div#menu ul {
list-style: none;
position: absolute;
height: 31px;
overflow: hidden;
}

div#menu ul li {
display: inline;
float: left;
}

div#menu li a {
display: block;
overflow: hidden;
padding: 31px 0 0 0;
height: 0 !important;
height /**/ : 31px;
background-repeat: no-repeat;
}

div#menu li a:hover {
background-position: 0 -31px;
}

.index {
background-image: url("images/indexhover.png");
width: 128px;
}
.aboutme {
background-image: url("images/aboutme.png");
width: 118px;
}

.friends {
background-image: url("images/friends.png");
width: 114px;
}

.guestbook {
background-image: url("images/guestbook.png");
width: 119px;
}
.gallery {
background-image: url("images/gallery.png");
width: 122px;
}

.links {
background-image: url("images/links.png");
width: 121px;
}
.bunn {
background-image: url("images/bunn.png");
background-repeat: no-repeat;
height: 54px;
width: 722px;
}
.container {
background-image: url("images/container.png");
background-repeat: repeat-y;
height: auto;
width: 722px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666666;
}

 

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>zaynt.shyper.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="top"></div>
<div id="menu">
 <ul>
   <li><a class="index" href="#">Home</a></li>
   <li><a class="aboutme" href="#">About me</a></li>
   <li><a class="friends" href="#">Friends</a></li>
   <li><a class="gallery" href="#">Gallery</a></li>
   <li><a class="guestbook" href="#">Guestbook</a></li>
   <li><a class="links" href="#">Links</a></li>
 </ul>
</div>

<div class="container">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consectetuer
   euismod leo. Morbi commodo feugiat quam. Maecenas id purus id enim tristique
   pharetra. Nunc ultricies diam. Sed et libero at felis dignissim hendrerit.
   Praesent ultricies magna. Proin quis nisl non urna molestie consectetuer.
   Maecenas nonummy tempor est. Sed eleifend augue sed massa. Nullam ipsum. Lorem
   ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy erat vitae
   lectus. Pellentesque a leo a sapien dapibus sagittis. Sed mauris justo, porttitor
   ac, porttitor a, euismod sit amet, nisl. Aenean laoreet accumsan libero. Nulla
   facilisi. Sed porta dolor vel nisl. Nam molestie porta lorem. Phasellus at
   mi. Integer blandit felis non lacus. Nam ultricies euismod sapien. Pellentesque 
   tempor. Aliquam id urna. Suspendisse nulla urna, gravida vitae, porttitor
   sed, iaculis vitae, pede. Pellentesque </p>
 lacus lacus, varius convallis, euismod id, pharetra sed, lorem. Sed urna
   sapien, porta sed, iaculis ut, tincidunt eget, justo. Fusce nunc. Ut wisi.
   Praesent rhoncus mollis libero. Mauris sit amet ligula at pede elementum aliquet.
   Etiam leo turpis, ultricies sed, feugiat vel, dignissim non, sapien. Fusce
   imperdiet. Pellentesque mollis. Lorem ipsum dolor sit amet, consectetuer adipiscing
   elit. Suspendisse turpis wisi, sollicitudin quis, porttitor sit amet, ultrices
   gravida, magna. Donec pretium nulla tincidunt orci. Nam pretium eros at quam.
   Fusce sapien ligula, rutrum lacinia, commodo at, hendrerit viverra, mauris.
   Curabitur ac diam et felis accumsan tempor. Etiam pulvinar facilisis felis.
   Suspendisse potenti. Quisque in risus ac nunc sagittis consectetuer. Donec
   malesuada nulla ac metus.
</div>
<div class="bunn"></div>
</body>
</html>

Endret av Tha_Zaynt
Lenke til kommentar
Tha_Zaynt

Tha_Zaynt

Skrevet
  • Forfatter
Skrevet (endret)

Fjernet position: absolute og rettet opp banen til bildet, men menyen er fortsatt litt feilplassert.. :hmm:

 

Fikset litt på margin , så det ser menyen ser bra ut i firefox nå, men i IE blir den plassert litt for langt til høyre..får vel bare lage et eget stilark for IE. I opera er det verre, ialle fall i 7.54 for der loades iikke bildene..det merkelige er at det faktisk funker i 7.2x.

 

div#menu ul {
margin-left: -40px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
list-style: none;
height: 31px;
overflow: hidden;
}

Endret av Tha_Zaynt
Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet (endret)

div#menu li a {

display: block;

overflow: hidden;

margin-left: -40px;

margin-right:0px;

margin-top:0px;

margin-bottom:0px;

padding: 31px 0 0 0;

height: 0 !important;

height /**/ : 31px;

background-repeat: no-repeat;

}

 

WTF? :blink:

 

EDIT: Legg til

* {
margin: 0;
padding: 0;
}

 

i toppen av stilarket, for å fjerne margin/padding på alt det ikke er definert for, kanskje det er det som gjør det.

Endret av PoleCat
Lenke til kommentar

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