SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Button Pictures

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button Pictures

    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%;
    }
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

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

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, Thanks

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Austin
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is, I want it to be inline. How do I do that and make it compatible?
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you provide your HTML along with your CSS and I'll take a look.

  8. #8
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •