Button Pictures

**maxiscool** · Sep 27, 2007 07:40

Here is my attempt at making my navigation into buttons. It is not really working- only part of the button is showing up. How do I make it so that the button retains its whole 112x30 size?

Code:

body {
  font-family: Veranda, Hevletica;
  line-height: 125%;
  padding: 15px;
  background: url(pawz.gif);
}


p { 
  font-size: "small"
  color: #DCDCDC;
  margin: 20px;
}

#tagline p {
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-weight: bold;
  color: #00B2EE;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding-top: .2em;
  padding-left: .8em;
  margin: 0;
  background-color: #E6E8FA;
}

h1,h2,h3 {
  font-family: "Trebuchet MS", Hevletica, Arial;
  color: #5E2605;
}


h1 {
  font-family: "Trebuchet MS", Hevletica;
  font-size: x-large;
  color: #5E2605;
  padding-top: 2em;
  padding-bottom: .2em;
  padding-left: .4em;
  margin: 0;
  background: url(header.png) repeat-y center;
}


a {
  font-weight: bold;
  color: #FFFFFF;
}


a:link {
  color: #000000;
}

a:visited {
  color: #003F87;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: #82CFFD;
}

#navigation ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

#navigation ul li {
  display: inline;
}

#navigation ul li a {
  text-decoration: none;
  padding: .2em 1em;
  background: url(buttons/home_button.png);
}

#navigation ul li a:hover {
  background: url(buttons/home_button_pushed.png);
}
/*
This stuff has to do with absolute positioning! Oh joy!
*/


#navigation, #bodycontent, #header, #tagline {
  position: absolute;
}

#navigation {
  top: 8.2em;
}

#bodycontent {
  left: 2em;
  top: 10em;
}

#header, #tagline, #sitebranding {
 width: 100%;
}

**Siebird** · Sep 27, 2007 08:25

Try this:

#navigation ul li a {
width: 112px;
height: 30px;
text-decoration: none;
padding: .2em 1em;
background: url(buttons/home_button.png);
}

**DaveWoods** · Sep 27, 2007 08:50

You'll need a display: block or a float applying to that code asiewe61 as width and height won't be applied to any inline element

**Siebird** · Sep 27, 2007 08:52

Oops, Thanks

**abilstein** · Sep 27, 2007 08:54

Keep in mind that some dimensional properties do not apply to inline elements. So height and vertical padding/margins will be ignored. The height in your case should be dictated by the font-size and line-height properties.

There is an inline-block display value, but it is not supported across all browsers.

**maxiscool** · Sep 27, 2007 17:55

The thing is, I want it to be inline. How do I do that and make it compatible?

**DaveWoods** · Sep 28, 2007 00:54

Could you provide your HTML along with your CSS and I'll take a look.

**maxiscool** · Sep 28, 2007 07:02

Here it is. I took out all of the names, because for now, this project is a bit of a secret!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Index</title>

<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />

<link href="favicon.ico" rel="SHORTCUT ICON" />


<link href="style1.css" rel="stylesheet" type="text/css" />

<!--[if IE]>

<link href="iestyle1.css" rel="stylesheet" type="text/css" />

<![endif]-->


</head>

<body>
<div id="header>

<div id="sitebranding">

<h1></h1>

</div>

<div id="tagline">

<p>Tagline</p>

</div>

</div> <!--end of header div-->

<div id="navigation">

<ul>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
        <li><a href="#">1</a></li>
	<li><a href="#l">2</a></li>
        <li><a href="#">3</a></li>
</ul>

</div> <!--end of navigation div-->

<div id="bodycontent">

<p>

<div align="center">

   <img src="ANIGPUP.GIF" class="images" height="160" width="150" style="text-align: center;" /><br />

    </div> 

<p>If you are interested in securing your own thing, go to the <a href="get.html">"1"</a> page</p>

<p>Here are some sample items:<br />

   <a href="#">link name</a><br />

</p> 

</div>

</body>

</html>

**DaveWoods** · Sep 28, 2007 07:46

Thanks, it's a bit difficult to see without the images, but you should be able to give it the appearance of it displaying inline just by floating the element.

Try replacing the these two styles with this code.

Code:

#navigation ul li {
  display: inline;
}
#navigation ul li a {
  width: 112px;
  height: 30px;
  text-decoration: none;
  background: url(buttons/home_button.png);
display: block;
}

If you need any padding on this then I'd apply it in a fixed amount of pixels seeing as it's an image and any padding applied in em to this is likely to cause problems.

It depends on the circumstances but I'd usually only apply padding or margin's to text that is going to be changing size and therefore the gaps around or between text need to be relative to it's surroundings.

Hope that helps.

User Tag List

Thread: Button Pictures

Thread Tools

Display

Button Pictures

Bookmarks

Bookmarks

Posting Permissions