SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast pxlblitz's Avatar
    Join Date
    Jul 2004
    Location
    Bay City, MI
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS list menu vertical align

    ARGH..for an hour now, I have sat here with my mind totally blank...

    I have a list menu where I can get seem to get the text to vertical align, and when I mouseover it looks cruddy.



    I am a bit rusty with CSS...

    here's the style sheet stuff:
    Code:
    #mainmenu {
    	background-image: url(images/menubck.jpg);
    	position: relative; top: -50px;
    	vertical-align: middle;
    }
    #mainmenu ul {
    	border:  2px solid #460D0D;	
    	margin: 0; padding: 0px 0px 0px 0px;
    	list-style-type: none;
    }
    #mainmenu a {
    	display: block;
    	width: 120px;
    	height: 35px;
    	
    }
    #mainmenu a:link, #mainmenu a:visited {
    	background-color: #3C0909;
    	text-decoration: none;
    }
    #mainmenu a:hover {
    	background: transparent;
    }
    and the HTML
    Code:
    <!--MAIN CONTENT LEFT COL = << 1 Columns here >> float left-->	
    <div id="mainmenu">
    <img src="images/menuhdr.jpg" alt="Main Menu" />
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
    <img src="images/menuftr.jpg" alt="Main Menu" />
    </div>
    I think I need some suggestions on what to try next. I experimented with padding..margins...etc etc...
    Shawna ~~

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #mainmenu a {
    display: block;
    width: 120px;
    height: 35px;
    line-height: 35px;
    }

  3. #3
    SitePoint Enthusiast pxlblitz's Avatar
    Join Date
    Jul 2004
    Location
    Bay City, MI
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *Hands Egor a beer....*

    thanks!!! Worked like a charm! I should make a habit to utilize more of what CSS has to offer..lol
    Shawna ~~

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Cheers. Yeah another way is to use padding, but that can be a pain in the butt, especially with IE5's box-model problem. I only discovered the line-height trick recently.


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
  •