[CSS] Help me with a simple script

axas · Jan 9, 2011

Okay, so basicly

I just want different images on each link.

HTML

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<title>PixGames.net</title>
</head> 
<body>
<body bgcolor ="#000000">
<div class ="center">

  <div id="menu">
    <a href="index.html" title="Home" class="active"></a>
    <a href="index.html" title="Item guides"></a>
    <a href="index.html" title="Gallery"></a>
    <a href="index.html" title="Projects"></a>
    <a href="index.html" title="Journal"></a>
  </div>




</div>

</body>
</html>

CSS

PHP:

body {
  margin: 20px;
  text-align: center;
  font-family: verdana, arial, sans-serif;
  font-size: 0.62em;
  color: #666;
  background-color: #EEE;
}

#menu {
  text-align: center;
  margin-bottom: 20px;
}

#menu a {
  padding: 6px 140px 48px 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #666;
  background: url(images/buttons/hero_guides-inactive.gif) no-repeat top center;

}

#menu a:hover, #menu a.active {
  background: url(images/buttons/hero_guides.gif) no-repeat top center;
}

Cykotitan · Jan 9, 2011

Instead of div, why not just use <table> or <img> ?

Or you want to do it through CSS?

axas · Jan 9, 2011

Cykotitan said:
Instead of div, why not just use <table> or <img> ? Or you want to do it through CSS?

well, i've got a set of coloured images aswell, which they become when you hover over grayscale ones. unless there's a way to do this kind of stuff with html =p

Chris · Jan 9, 2011

Add class="home", class="heroes" or whichever item you are referring to in your HTML~

Code:

#menu a { 
  padding: 6px 140px 48px 20px; 
  text-decoration: none; 
  text-transform: uppercase; 
  color: #666; 
  background-repeat: no-repeat;
  background-position: top center;
}

#menu a.home {
   background: url(images/buttons/home.gif);
}
#menu a.home:hover {
   background: url(images/buttons/home.gif);
}

#menu a.heroes {
   background: url(images/buttons/hero_guides-inactive.gif);
}
#menu a.heroes:hover {
   background: url(images/buttons/hero_guides.gif);
}

#menu a.items {
   background: url(images/buttons/item_guides-inactive.gif);
}
#menu a.items:hover {
   background: url(images/buttons/item_guides.gif);
}

#menu a.videos {
   background: url(images/buttons/videos-inactive.gif);
}
#menu a.videos:hover {
   background: url(images/buttons/videos.gif);
}

axas · Jan 9, 2011

Chris said:

Add class="home", class="heroes" or whichever item you are referring to in your HTML~

Code:

#menu a { 
  padding: 6px 140px 48px 20px; 
  text-decoration: none; 
  text-transform: uppercase; 
  color: #666; 
  background-repeat: no-repeat;
  background-position: top center;
}

#menu a.home {
   background: url(images/buttons/home.gif);
}
#menu a.home:hover {
   background: url(images/buttons/home.gif);
}

#menu a.heroes {
   background: url(images/buttons/hero_guides-inactive.gif);
}
#menu a.heroes:hover {
   background: url(images/buttons/hero_guides.gif);
}

#menu a.items {
   background: url(images/buttons/item_guides-inactive.gif);
}
#menu a.items:hover {
   background: url(images/buttons/item_guides.gif);
}

#menu a.videos {
   background: url(images/buttons/videos-inactive.gif);
}
#menu a.videos:hover {
   background: url(images/buttons/videos.gif);
}

Works perfect, thanks.

edit: can't seem to be able to make some space between those buttons now >_<
Just keeps copying them over

padding: 6px 160px 30px 0px;

Chris · Jan 9, 2011

Brilliant, now go make some more minecrafting videos lmao

Chris · Jan 10, 2011

Try using margin rather than padding

EDIT:
Also please change all of the background: parts to background-image: rather than just background (not the ones in the main class). My bad.

And my comment regarding the videos, it was not in any way sarcastic. I feel that it may have been interpreted as such.

axas · Jan 10, 2011

Chris said:
Try using margin rather than padding

EDIT:
Also please change all of the background: parts to background-image: rather than just background (not the ones in the main class). My bad.

And my comment regarding the videos, it was not in any way sarcastic. I feel that it may have been interpreted as such.

All works good now

Anyways, planning on refreshing, or making a new series sometime this week. My english kinda slows down the speeches though ._.

Chris · Jan 10, 2011

Your English is fine mate, I haven't had any issues whatsoever understanding you.

[CSS] Help me with a simple script

axas

Well-Known Member

Cykotitan

Experienced G'

axas

Well-Known Member

Chris

Inactive

axas

Well-Known Member

Chris

Inactive

Chris

Inactive

axas

Well-Known Member

Chris

Inactive

Similar threads