SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying margins or borders to navigation with background image troubles

    I just can't figure out what I'm doing wrong. I have a vertical list with a background image. I want the text to be centered vertically. I've tried adding padding or margins to the li tag and the a tag. I've tried giving the li tag a fixed height. I've tried using line-height. They just don't turn out right.

    There is some basic idea I'm not getting or not remembering here. I would prefer the button be just as tall as it needs to be to accomodate the text.

    Here's the URL: http://peacefuldriver.net/waterlogix

    HTML
    HTML Code:
    <div id="mainNav">
      <ul>
      <li><a href="index.htm">Home</a></li>
      <li><a href="about.htm">About Waterlogix</a></li>
      
      </ul>
    </div>
    <!--mainNav-->
    CSS with some of my failed attempts.
    Code:
    #main nav ul {
    
    }
    #mainNav ul li {
    	background-image: url(New%20Folder/green_swirl.gif);
    	background-color: #99CC99;
    	background-repeat: no-repeat;
    	list-style-type: none;
    	border-bottom: 1px solid white;
    	height: 50px;
    	line-height: 1em;
    	padding-left: 50px;
    }
    #mainNav li a {
    	color: white;
    	text-decoration: none;
    
    }
    Thanks much.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    #mainNav li a {
    display:block;
    color: white;
    text-decoration: none;
    padding-top:1em;


    }

    or padding-top:10px;

    Display:block; also means the whole coloured block is a link, not just the text

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I would prefer the button be just as tall as it needs to be to
    That will look a little odd with the design of your background image won't it?

    If you are going to have some text on two lines and some on one line then you will have items of different size whatever you do. If you just add padding to the top and bottom as mentioned above then the element will only be as high as it needs to be but that won't coincide with the size of your background image.

    You need to decide exactly what you want it to look like first. It may be that you will need to style some links differently if they are spread over 2 lines.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think Paul is right. I don't know exactly how I want it to look which makes me think this isn't the best option for this design. If I do go with it, I will need to have different styles for links with one line vs. 2 lines of text.

    Thanks for your help.


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
  •