Problem med CSS rollover

Tha_Zaynt · 17. oktober 2004

har litt problemer med å få en CSS-rollover til å se ut som jeg vil. Fikk det ikke til på tross av at jeg brukte copy -> paste metoden på denne tutorialen. På min meny blir det et lite mellomrom mellom linkene på noen steder, bare se her

Hvis noen har en forklaring på hvorfor det er slik , blir jeg veldig taknemmelig

her er koden :

<html>
<head>
<title>menytest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
	#navcontainer ul
	{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	#navcontainer a
	{
		display: block;
		color: #FFF;
		background-color: #036;
		width: 9em;
		padding: .2em .8em;
		text-decoration: none;
	}

	#navcontainer a:hover
	{
		background-color: #369;
		color: #FFF;
	}

</style>
</head>

<body>

<div id="navcontainer">
<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>

</ul>
</div>

</body>
</html>

PS: Har prøvd

*{
margin: 0;
padding: 0;
}

Smeltelim · 17. oktober 2004

det er padding: .2em .8em i #navcontainer a som gjør dette, fjerner du den så fungerer det ordentelig, du kan bruke kommandoen padding-left for å få teksten litt vekk fra den venstre kanten..............

når du skriver padding uten å skrive om det er top, right, bottom eller left så vil den ta det første sifferet å sette den til top, det neste sifferet å sette den til right osv.

Haraldson · 17. oktober 2004

Zed: Koden han har setter 0.2em oppe og nede og 0.8em til sidene, det er ingenting galt i å gjøre det slik.

Tha_Zaynt · 17. oktober 2004

gjorde som zed sa, det fungerte fint det..

Smeltelim · 17. oktober 2004

Zed: Koden han har setter 0.2em oppe og nede og 0.8em til sidene, det er ingenting galt i å gjøre det slik.

sorry, my bad. men det fungerer når man fjerner padding delen av koden.........

Haraldson · 17. oktober 2004

Mulig det skaper problemer med em som enhet. At det er vanskelig å regne ut for nettleseren eller noe. :shrug:

Tha_Zaynt · 17. oktober 2004

Prøvde å legge til bilde som bakgrunn i stdet, men jeg er ganske ny i CSS, så det skar seg seff.

for demo se her

<html>
<head>
<title>menytest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css" media="screen">
       *{
	margin: 0;
	padding: 0;
	}

	#menu ul{   
	list-style-type: none;
	}

    #menu li{
	margin-top: 2px;
	display: block;
	padding: 8px;
	}

	#menu a{
		background: url(images/link.png) no-repeat;
	    height: 30px;
	    width: 151px;
		text-decoration: none;
	}

	#menu a:hover{
	    background: url(images/linkhover.png) no-repeat;
	    height: 30px;
	    width:151px;
	}

</style>

</head>

<body>

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

</ul>
</div>

</body>
</html>

hva har jeg gjort feil her da?

Endret 17. oktober 2004 av Tha_Zaynt

Tha_Zaynt · 17. oktober 2004

ingen som vet?

Lokaltog · 17. oktober 2004

ingen som vet?

Hvis noen hadde visst hadde de sikkert svart.

Bumping av tråder skal unngås, men i nødsfall kun 2 ganger, hver gang minimum 5 dager etter siste post.

Tha_Zaynt · 17. oktober 2004

har nesten fått det til nå, men jeg lurer på en ting...hvordan forandrer jeg posisjonen på teksten uten å forandre på posisjonen på bildet? Det er nemlig bare det som mangler..

se hvordan det ser ut nå her

her er koden:

<html>
<head>
<title>menytest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
       *{
	margin: 0;
	padding: 0;
	}

	body{
	margin: 2em;
	}

	#menu ul{   
	list-style-type: none;
	}

    #menu li{
	margin-top: 2px;
	margin-right: 10px;
	padding-right: 10px;
	}

	#menu a{
background: url(images/link.png) no-repeat;
display: block;
width: 151px;
height: 30px;
overflow: hidden;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #94A2BC;
	}

	#menu a:hover{
background: url(images/linkhover.png) no-repeat;
width: 151px;
height: 30px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #96777A;
	}

</style>
</head>

<body>

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

</ul>
</div>

</body>
</html>

Endret 17. oktober 2004 av Tha_Zaynt

PoleCat · 17. oktober 2004

 #menu a{
background: url(images/link.png) no-repeat;
display: block;
width: 151px;
height: 25px !important;
height /**/ : 30px;
padding: 5px 0 0 0;
overflow: hidden;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #94A2BC;
}

#menu a:hover{
background: url(images/linkhover.png) no-repeat;
color: #96777A;
}

Sånn f.eks.

Lokaltog · 17. oktober 2004

Har du prøvd å kjøre vertical-align:middle;text-align:center i a-elementet i CSS'en?

Hvis det ikke funker kan du alltids legge teksten i et tomt span-element for så å posisjonere det.

Edit: ja, eller slik PoleCat foreslår.

Endret 17. oktober 2004 av Lokaltog

Tha_Zaynt · 17. oktober 2004

funket det ja..tack så mycket

Tha_Zaynt · 17. oktober 2004

så var det å få menyen inn i resten av designet da...ser helt rart ut slik det er nå bare se her

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nisselink</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<h1>Nisselink</h1>
<div id="menu">
<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>

</ul>
</div>
 <div id="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse porttitor 
   lacus quis velit. Maecenas libero nisl, ornare nec, lobortis at, convallis 
   nec, orci. Donec euismod imperdiet nisl. Curabitur porta. Cras ac lacus. Mauris 
   leo pede, rutrum et, mattis quis, dictum vitae, nunc. Vivamus non tortor quis 
   orci aliquet dictum. Nam eget felis nec leo blandit congue. Donec malesuada 
   ipsum. Curabitur non ligula. Vestibulum diam quam, dictum a, ultricies in, 
   dignissim quis, libero. Cras vitae purus. Pellentesque tempor lacus ut orci. 
   Mauris non dolor pellentesque lacus adipiscing lacinia. Integer arcu diam, 
   congue eget, scelerisque et, cursus at, metus. Morbi dolor arcu, semper aliquam, 
   dignissim nec, sodales vel, purus. Nullam rhoncus. Donec auctor ornare neque.
   <p>Curabitur auctor, arcu in suscipit lobortis, orci orci laoreet mauris, 
     sed eleifend turpis velit vitae odio. Vestibulum mollis adipiscing urna. 
     Praesent posuere, ipsum id scelerisque condimentum, erat tortor euismod 
     tellus, a tempor augue sem ornare nisl. Curabitur ante wisi, molestie a, 
     ullamcorper eget, sodales et, dolor. Nam sed est. Praesent id sem fringilla 
     nibh ullamcorper nonummy. Suspendisse potenti. Nulla adipiscing odio in 
     elit. Etiam malesuada. Suspendisse potenti.</p>
   <p>Cras mi erat, tempus eget, imperdiet quis, vestibulum sed, odio. Nunc et 
     metus. Aenean urna dolor, aliquam a, vulputate at, ullamcorper quis, nulla. 
     Fusce vitae enim. Praesent orci. Vestibulum ante ipsum primis in faucibus 
     orci luctus et ultrices posuere cubilia Curae; In vulputate mi ut arcu. 
     Curabitur congue, wisi et sollicitudin faucibus, ipsum mi mollis dolor, 
     eu semper pede augue vel massa. Fusce eu ipsum. Vestibulum dignissim metus 
     ac est. Duis dignissim ligula nec dolor.</p>
   <p>Suspendisse rutrum dignissim mauris. Duis magna nibh, consequat nec, porttitor 
     eget, vulputate id, nulla. Sed ultrices, purus et viverra tempus, odio wisi 
     facilisis purus, ac lobortis tortor sapien sed tellus. Proin lacus. Nunc 
     malesuada, sapien sed molestie ultrices, wisi mauris iaculis neque, a tempor 
     nunc lacus eu leo. Nulla et odio. Etiam pharetra, sem quis venenatis consectetuer, 
     est tellus interdum arcu, in iaculis quam odio in odio. Nulla ut enim a 
     wisi suscipit dignissim. Nunc malesuada, sem quis placerat tincidunt, tellus 
     arcu eleifend urna, eu lobortis arcu ipsum sit amet elit. Integer auctor 
     arcu ut nisl. In et ante. Nunc tincidunt aliquet magna. </p>
 </div>
</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}

body {
 background: url(images/back.png);
 text-align:center;
}

html, body {
 height: 100%;
}

div#wrap {
 min-height: 97%;
 height: auto !important;
 height: 97%;
 background: url(images/background.png) repeat-y;
 width: 704px;
 margin: 0 auto;
 padding: 20px 20px 0 20px;
}

h1 {
 width: 704px;
 height: 151px;
 background: url(images/top.png) no-repeat;
 margin: 0 auto;
 text-indent: -9999px;
 font-size: 1px;
}

p {
margin-top: 15px;
}

div#content {
padding: 0 35px 10px 20px;
border-left-width: 1px;
border-left-color: #B8C0D4;
margin-left: 182px;
border-left-style: solid;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #999999;
line-height: 170%;
}
div#menu ul{   
list-style-type: none;
}
 
div#menu li{
margin-top: 2px;
margin-right: 10px;
padding-right: 10px;
}
 	
div#menu a{
background: url(images/link.png) no-repeat;
display: block;
width: 151px;
height: 25px !important;
height /**/ : 30px;
padding: 7px 0 0 20px;
overflow: hidden;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #94A2BC;
}

Noen ideer om hvordan jeg får menyen til å passe inn med resten av designet?

Endret 17. oktober 2004 av Tha_Zaynt

Wizendraw · 17. oktober 2004

Nå er ikke jeg noen guru på dette, men jeg regner med at du må sette display:inline; på meny og innhold.

EDIT: Også tror jeg float:left er nødvendig i tillegg.

Endret 17. oktober 2004 av WizendraW

Tha_Zaynt · 17. oktober 2004

Eneste som mangler nå, er plasseringen av teksten..vil at den skal være litt lengere til venstre, nå er den nesten midtstilt..

link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nisselink</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="menu">
<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>

</ul>
</div>
<h1>Nisselink</h1>

 <div id="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse porttitor 
   lacus quis velit. Maecenas libero nisl, ornare nec, lobortis at, convallis 
   nec, orci. Donec euismod imperdiet nisl. Curabitur porta. Cras ac lacus. Mauris 
   leo pede, rutrum et, mattis quis, dictum vitae, nunc. Vivamus non tortor quis 
   orci aliquet dictum. Nam eget felis nec leo blandit congue. Donec malesuada 
   ipsum. Curabitur non ligula. Vestibulum diam quam, dictum a, ultricies in, 
   dignissim quis, libero. Cras vitae purus. Pellentesque tempor lacus ut orci. 
   Mauris non dolor pellentesque lacus adipiscing lacinia. Integer arcu diam, 
   congue eget, scelerisque et, cursus at, metus. Morbi dolor arcu, semper aliquam, 
   dignissim nec, sodales vel, purus. Nullam rhoncus. Donec auctor ornare neque.
   <p>Curabitur auctor, arcu in suscipit lobortis, orci orci laoreet mauris, 
     sed eleifend turpis velit vitae odio. Vestibulum mollis adipiscing urna. 
     Praesent posuere, ipsum id scelerisque condimentum, erat tortor euismod 
     tellus, a tempor augue sem ornare nisl. Curabitur ante wisi, molestie a, 
     ullamcorper eget, sodales et, dolor. Nam sed est. Praesent id sem fringilla 
     nibh ullamcorper nonummy. Suspendisse potenti. Nulla adipiscing odio in 
     elit. Etiam malesuada. Suspendisse potenti.</p>
   <p>Cras mi erat, tempus eget, imperdiet quis, vestibulum sed, odio. Nunc et 
     metus. Aenean urna dolor, aliquam a, vulputate at, ullamcorper quis, nulla. 
     Fusce vitae enim. Praesent orci. Vestibulum ante ipsum primis in faucibus 
     orci luctus et ultrices posuere cubilia Curae; In vulputate mi ut arcu. 
     Curabitur congue, wisi et sollicitudin faucibus, ipsum mi mollis dolor, 
     eu semper pede augue vel massa. Fusce eu ipsum. Vestibulum dignissim metus 
     ac est. Duis dignissim ligula nec dolor.</p>
   <p>Suspendisse rutrum dignissim mauris. Duis magna nibh, consequat nec, porttitor 
     eget, vulputate id, nulla. Sed ultrices, purus et viverra tempus, odio wisi 
     facilisis purus, ac lobortis tortor sapien sed tellus. Proin lacus. Nunc 
     malesuada, sapien sed molestie ultrices, wisi mauris iaculis neque, a tempor 
     nunc lacus eu leo. Nulla et odio. Etiam pharetra, sem quis venenatis consectetuer, 
     est tellus interdum arcu, in iaculis quam odio in odio. Nulla ut enim a 
     wisi suscipit dignissim. Nunc malesuada, sem quis placerat tincidunt, tellus 
     arcu eleifend urna, eu lobortis arcu ipsum sit amet elit. Integer auctor 
     arcu ut nisl. In et ante. Nunc tincidunt aliquet magna. </p>
 </div>
</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}

body {
 background: url(images/back.png);
 text-align:center;
}

html, body {
 height: 100%;
}

div#wrap {
 min-height: 97%;
 height: auto !important;
 height: 97%;
 background: url(images/background.png) repeat-y;
 width: 704px;
 margin: 0 auto;
 padding: 20px 20px 0 20px;
}

h1 {
 width: 704px;
 height: 151px;
 background: url(images/top.png) no-repeat;
 margin: 0 auto;
 text-indent: -9999px;
 font-size: 1px;
}

p {
margin-top: 15px;
}

div#content {
padding: 0 35px 10px 20px;
border-left-width: 1px;
border-left-color: #B8C0D4;
margin-left: 182px;
border-left-style: solid;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #999999;
line-height: 170%;
}
div#menu ul{   
margin-top: 155px;
list-style-type: none;
float: left;
display: inline; 
}
 
div#menu li{
margin-top: 2px;
}
 	
div#menu a{
background: url(images/link.png) no-repeat;
display: block;
width: 151px;
height: 25px !important;
height /**/ : 30px;
padding: 7px 0 0 0px;
overflow: hidden;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #94A2BC;
}

div#menu a:hover{
background: url(images/linkhover.png) no-repeat;
color: #96777A;
}

Forslag?

joe45 · 17. oktober 2004

Den bugger skikkelig i IE. Menyen kommer før header. Er det menyteksten som skal til venstre?

Tha_Zaynt · 17. oktober 2004

OOps..har ikke gidda å sjekke den i IE...men det er menyteksten som skal litt mer til venstre ja..

joe45 · 17. oktober 2004

Prøv

div#menu li{
margin-top: 2px;
text-align: left;
}

Tror denne div har arvet stylingen fra body som er center.

Tha_Zaynt · 17. oktober 2004

nope..skjedde ikke noe..

Problem med CSS rollover

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