Help with Simple CSS Menu Problem?

Discussion in 'CSS' started by SFNUM8, Feb 15, 2011.

  1. #1
    I have pasted below the CSS and HTML code for a menu. The problem I am having is the #sidebar h3, has a background image(rounded corner). I also have my H3 text writing over top of that background image, which works fine except it writes it at the very top of the image, I need the text to show up in the middle or lower part of the background image. When adding the padding-top: 10px; it moves the text down to where I want it but it also seperates the .sidebarmenu borders leaving a gap between the bottom of H3 and the borders of the sidebarmenu? Any ideas how I can fix this. I know I could ad the text to the image in photoshop, but I would prefer to make it editable in the html




    
    
    #sidebar 
    {
    	width: 175px;
    	float: left;
    	display: inline;
    	padding-right: 10px;
    }
    
    #sidebar h3 {
    	width:175px;
    	height: 27px;
    	display: block;
    	overflow:hidden;
    	background:url('images/sidebarhead.png')  no-repeat left;
    	font-size:14px;
                 [B][COLOR="red"]padding-top: 10px;[/COLOR][/B]}
    
    
    
    
    .sidebarmenu {
    	border-left: solid 1px #d7d7d7;
    	border-right: solid 1px #d7d7d7;
    	border-bottom: solid 1px #ebebeb;
    	background-color: white;
    	padding: 5px;
    }
    
    
    
    .sidebarmenu ul {
    	margin: 0;
    	padding: 0;
    	list-style: square;
    }
    
    
    .sidebarmenu li{
    	margin: 0;
    	padding: 2px 0 0 0px;
    	font-size:14px;
    	border-bottom: 1px solid  #CCCCCC;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	
    }
    
    
    
    
    
    
    Code (markup):
      
    
     <div id="sidebar">
    <h3>TITLE SIDEBAR </h3>
    						
    <div class="sidebarmenu">			
    <ul> 
          <li><a href="../index.html">Link</a></li> 
           <li><a href="../index.html">Link</a></li>
           <li><a href="../index.html">Link</a></li>
     </ul> 
    </div>			
    HTML:

     
    SFNUM8, Feb 15, 2011 IP
  2. jwitt98

    jwitt98 Peon

    Messages:
    145
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try adding
    line-height: 27px
    to your #sidebar h3
     
    jwitt98, Feb 15, 2011 IP
  3. SFNUM8

    SFNUM8 Active Member

    Messages:
    297
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Awesome it worked. Thanks!!
     
    SFNUM8, Feb 17, 2011 IP
  4. WbDev

    WbDev Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    good jwitt98 :)
     
    WbDev, Feb 20, 2011 IP