SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,642
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    extend the background

    I'm trying to figure out how to extend the background of the selected tab in the m,enu so that a border doesn't appear below it i it looks like an open tab?

    http://coronadosandman.com/index.html
    Thanks...
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You have a couple of errors in your HTML, plus it could use some streamlining, but basically since you are clearing floats with overflow hidden, even if you were using the correct method, the bg would not be visible outside its container, so a different overall method is necessary.

    try this:


    Code:
    body {
    background: #195905; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
    
    }
    #wrapper {
    	width: 980px;
    	border:1px solid black;
    	margin:30px auto;	
    	background-image:url(../images/Untitled-1_03.gif);
    	background-repeat:repeat;
    }
    header {
    display:inline-block;
    width:100%;
    border-bottom:1px solid #000;
    vertical-align: bottom;
    	
    }
    
     #letterpress  {
    	margin-top:0;
     	text-align:center;
    	font-size:60px;
    	padding-top:1em;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	color: #195905;
    	text-transform: uppercase;
    	text-shadow: 0px 2px 1px #bbbaba;
    }
    .mattblacktabs {
    margin :0  0 -1px 10px ;
    padding: 0;
    float:left;
     font: bold 12px Verdana;
    list-style-type: none;
     	border-right: 1px solid black;  
     	border-bottom: 1px solid black;  
     	border-top: 1px solid black;  
      }
    
    .mattblacktabs li{
    float:left;
    
    }
    
    .mattblacktabs li a{
    text-decoration: none;
    display:inline-block;
    margin: 0;
    padding: 7px 8px; /*padding inside each tab*/
    color: black;
    background: #0ff; /*background of tabs (default state)*/
    border-left: 1px solid black;
    border-right: 1px solid white; /*right divider between tabs*/
    
    }
    .mattblacktabs li a.current {
    border-bottom:1px solid #32f32e;
    margin-bottom: -1px;
    background: #32f32e;
     }
    .mattblacktabs li a:visited{
    color: black;
    }
    
    .mattblacktabs li a:hover, .mattblacktabs li.selected a{
    background: #32f32e; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
    }
    
    #content {
    	background-color:#32f32e;
    	min-height: 500px;
    	padding:50px 15px;
      }
    h2 {
    	font:28px "Copperplate Gothic Bold", Veranda;
    	text-align:center;
    	margin-top:0;
    	padding-top:25px;
    	text-transform:uppercase;
    }
    
    p {
    	font:16px "Copperplate Gothic Bold", Veranda;
    	margin:10px 20px;
    }
    .shadow {
    box-shadow: 7px 7px 8px #818181;
    -webkit-box-shadow: 7px 7px 8px #818181;
    -moz-box-shadow: 7px 7px 8px #818181;
     width:500px; 
     height:650px; 
     padding:5px; 
     background:white; 
     border: 1px solid black; 
     margin:0 auto;
     filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
    }
    Code:
    <div id="wrapper">
    	<header>
    		<h1 id="letterpress">Coronado Sandman</h1>
             <ul class="mattblacktabs">
    	        <li><a class="current" href="index.html">Home</a></li>
    	        <li><a href="about.html">Gallery</a></li>
    	        <li><a href="media.html">Shop</a></li>
            </ul>
         </header>
    
       <div id="content">
       		<div class="shadow"> <img src="images/sandman.jpg" width="500" height="638"></div>
         </div>
    </div>
    Last edited by dresden_phoenix; Mar 23, 2013 at 15:08. Reason: updated the CSS fo FF 3.5!

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,642
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    thanks
    "Oh, and Jenkins--apparently your mother died this morning."


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
  •