huh, det blir fel? [CSS/HTML]

2011-03-05 22:37

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

huh, det blir fel? [CSS/HTML]

Hej!

Jag håller på att lära mig CSS och sen lite mer html (kan sådär halvmycket)
Problemet nu när jag håller på att göra en navigationsdel eller vad man ska kalla det är att texten ska ändra färg när man håller musen över länken (a:hover). Tyvärr gör den inte det... Jag försöker lära mig olika sätt att göra just navigationsdelen och till det här använde jag denna guide(att använda en bild till hela navigationen).

Koden:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel=stylesheet href="style.css" type="text/css" media=screen>
	<title>Phroggyy</title>
</head>

<body bgcolor="4b4b4b">
<center>
<img id="banner" src="images/banner.png">
<ul id="nav">
<li id="nav-01"><a href="#"><span>Startsida</span></a></li>
<li id="nav-02"><a href="#"><span>Om Oss</span></a></li>
<li id="nav-03"><a href="#"><span>Kontakt</span></a></li>
<li id="nav-04"><a href="#"><span>Forum</span></a></li>
<li id="nav-05"><a href="#"><span>Events</span></a></li>
</ul>
</center>
</body>
</html>

jag vet att <center> är lite dumt att använda men hittar inget bra sätt

style.css

#nav {
background:url("images/navbar.png") no-repeat;
width:855px;
height:50px;
margin:0;
padding:0;
}

#nav span {
display:none;
}

#nav li, #nav a {
height:100px;
display:block;
}

#nav li {
float:left;
list-style:none;
display:inline;
}

#nav-01 {width:174px;}
#nav-02 {width:175px;}
#nav-03 {width:175px;}
#nav-04 {width:154px;}
#nav-05 {width:177px;}

#nav-01 a:hover {background:url("images/navbar.png") 0px-50px no-repeat;}
#nav-02 a:hover {background:url("images/navbar.png") -348px-50px no-repeat;}
#nav-03 a:hover {background:url("images/navbar.png") -697px-50px no-repeat;}
#nav-04 a:hover {background:url("images/navbar.png") -1048px-50px no-repeat;}
#nav-05 a:hover {background:url("images/navbar.png") -1356px-50px no-repeat;}

#banner {
width:855px;
height:150px;
}

någon som kan hitta felet? om ni vill kan jag lägga upp det så ni kan se det

Tack på förhand!

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-03-05 23:44

Permalänk

Perg

Medlem

Registrerad: Dec 2002

●

Du saknar mellanslag mellan x- och y-koordinaterna i hover-sektionen.

Rapportera Redigera

Citera flera Citera

2011-03-06 00:03

Permalänk

Palmie

Hedersmedlem ★

Plats: 127.0.0.1
Registrerad: Apr 2009

●

*Trådtiteln förbättrad*

Tänk på att göra titlar som väl beskriver det tråden handlar om.

Rapportera Redigera

Citera flera Citera

2011-03-06 00:26

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av Perg:

Du saknar mellanslag mellan x- och y-koordinaterna i hover-sektionen.

Gå till inlägget

Ah tack så mycket

EDIT: Vet du något bra sätt att centrera allt då? utan center tag alltså

Skrivet av Palmie:

*Trådtiteln förbättrad*

Tänk på att göra titlar som väl beskriver det tråden handlar om.

Gå till inlägget

Hade precis tänkt anmäla och fråga om ni kunde ändra den

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-03-06 16:56

Permalänk

zillio

Medlem

Plats: Södertälje
Registrerad: Mar 2008

●

du kan göra det i CSS-filen.

#DIV {
margin: 0 auto;
}

då blir den centrerad.

Visa signatur

Köp ny mus för 800:- JA, du kommer bli GRYM på cs och sätta huvudskott hela tiden. Du får heller ALDRIG ont i leder.
Eller är det bara så att e-pen*** förlängs om du har en dyrare mus?

Rapportera Redigera

Citera flera Citera

2011-03-06 17:03

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av zillio:

du kan göra det i CSS-filen.

#DIV {
margin: 0 auto;
}

då blir den centrerad.

Gå till inlägget

fast då behöver jag ju en div...

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-03-06 17:11

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av phroggyy:

fast då behöver jag ju en div...

Gå till inlägget

Nej.

#nav {
  /* ... */
  display: block;
  margin: 0 auto;
}

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2011-03-06 18:29

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av You:

Nej.

#nav {
  /* ... */
  display: block;
  margin: 0 auto;
}

Gå till inlägget

men jag skulle väl ändå kunna sätta allt i en div eller klass så att jag får allt centrerat? vill ju ha mer än nav i mitten

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-03-06 20:04

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av phroggyy:

men jag skulle väl ändå kunna sätta allt i en div eller klass så att jag får allt centrerat? vill ju ha mer än nav i mitten

Gå till inlägget

Ja, men du måste inte. Dessutom är det ofta onödigt. Kan man åstadkomma samma sak med mindre HTML så ska man oftast göra det.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2011-03-06 22:58

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av You:

Ja, men du måste inte. Dessutom är det ofta onödigt. Kan man åstadkomma samma sak med mindre HTML så ska man oftast göra det.

Gå till inlägget

det funkar inte. Använder en div för att få allt centrerat.

har alltså

<div id="div">

och

#div {
margin: 0 auto;
}

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-03-07 00:11

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av phroggyy:

det funkar inte. Använder en div för att få allt centrerat.

har alltså

<div id="div">

och

#div {
margin: 0 auto;
}

Gå till inlägget

Du måste ge din div en fast bredd. Ge den ett ordentligt ID när du ändå är igång.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

huh, det blir fel? [CSS/HTML]

huh, det blir fel? [CSS/HTML]

Externa nyheter

Spelnyheter från FZ