Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Need some help with CSS code

  1. #1
    Join Date
    Mar 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Need some help with CSS code

    I have this at the bottom of a page as the "footer"...

    But for some reason the black background doesn't extent to the bottom of the page and leaves a empty space.

    How would I get it to extend height wise all the way to the bottom without having any space in between the end of the page?






    css in head:
    ==============

    #footer {
    float: left;
    height: 30px;
    width:100%;
    background-color: #000000;
    font-family:"Times New Roman",Georgia,Serif; color: #ffffff; font-size: 14px; padding-top:0px; padding-right:0px;


    .bottomnav {
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    padding-left:390px;

    }

    .bottomnav div {
    float: left;
    padding: 15px;




    code on the page:
    ==============


    <div id="footer">
    <div class="bottomnav">
    <div><a href="#" class="link2">Home</a></div> <div><a href="#" class="link2">About</a></div> <div><a href="#" class="link2">Contact</a></div> <div><a href="#" class="link2">Pricing</a></div> <div><a href="#" class="link2">Shop</a></div> </a></div>
    </div>


    --- and here is where theres a empty space ---

    </BODY>
    </HTML>
    Last edited by galina; 06-26-2010 at 09:22 PM.

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    If you post the entire code of the page it may be easier to help. That way i could try it in my browser.

    right now it looks like the last </a> does not have an opening tag. But that may not be the main problem

  3. #3
    Join Date
    Mar 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sure try this


    =========


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <title>R</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    
    
    
    <style type="text/css">
    
    
    /* BASE LINKS */
    a {outline: none;}
    a:link, a:active, a:visited {text-decoration: underline; color: #FFFFFF; }
    a:hover {text-decoration: none;}
    
    .class2 A {outline: none;}
    .class2 A:link, a:active, a:visited {text-decoration: underline; color: #FFFFFF; }
    .class2 A:hover {text-decoration: none;}
    
    /***** Global Settings *****/
    
    html, body {
    border:0;
    margin:0;
    padding:0;
    background-color:#ffffff;
    }
    
    .pagebg {
    
             background-image:url('bgrs.jpg');
    
    }
    body,td,th {
    
    }
    .text {color: #000000; font-size: 14px; padding-left:0px; padding-right:0px; font-family:"Times New Roman",Georgia,Serif; line-height:15px;}
    
    .testtext {color: #E8EAEC; font-size: 12px; padding-left:4px; padding-right:4px; line-height:110%; }
    
    .title {color: #8DA2D0; font-size: 14px; padding-left:0px; padding-right:0px; }
    
    .box {color: #000000; font-size: 12px; padding-left:0px; padding-right:0px;}
    
    
    
    #footer {
    float: left; /* Just to contain the floated image. You can replace with 
    your preferred float containment method if you like. */
    height: 30px;
    width:100%;
    background-color: #000000;
    font-family:"Times New Roman",Georgia,Serif; color: #ffffff; font-size: 14px; padding-top:0px; padding-right:0px;
    
    
     }
             
    .bottomnav {
    font-family: Verdana; 
    	font-size: 12px;
    	font-weight: bold; 
    	color: #FFFFFF;
    	text-decoration: none;
     padding-left:390px;
    
    }
    	
    .bottomnav div {
    float: left;
    text-align:center;
    padding: 15px;
    
    }
    
    
    .development {
             background-image:url('images/contact_14.jpg');
       
       }
             
    .convert {
             background-image:url('images/contact_17.jpg');         
    
    }
    
    .newsbg {
             background-color:#090E13;
          }
    
    .contbg {
             background-color:#090E13; 
    }
    
    
    p
    {
    
    margin-top:5px;
    margin-bottom:0px;
    
    
    }
    
    .container{
    padding-left:250px;
    padding-top:10px;
    }
    
    label{
    float: left;
    width: 120px;
    font-weight: bold;
    }
    
    textarea{
    width: 180px;
    height: 22px;
    background-color:#000000;
    background-image:url('textbg.jpg');
    margin-bottom: 5px;
    color:#ffffff;
    font-family:"Times New Roman",Georgia,Serif;
    font-size:14px;
    }
    
    textarea{
    width: 632px;
    height: 174px;
    background-image:url('textbg.jpg');
    font-family:"Times New Roman",Georgia,Serif;
    font-size:14px;
    
    }
    
    .inputbg{
    width: 180px;
    height: 29px;
    background-image:url('textbg.jpg');
    font-family:"Times New Roman",Georgia,Serif;
    color:#ffffff;
    font-size:14px;
    
    }
    
    
    .boxes{
    width: 1em;
    }
    
    
    clear{
    clear: right;
    }
    
    
    float{
    float: right;
    }
    
    
    </style>
    
    
    </HEAD>
    
    
    
    
    
    
    <BODY>
    
    <table width="1117" align=center cellpadding="0" cellspacing="0" class="pagebg">
      <tr>
        <td valign="top"><table width="1117" cellpadding="0" cellspacing="0">
          <tr>
    		<TD>
    			<IMG SRC="images/contact_01.jpg" WIDTH=538 HEIGHT=140 ALT=""></TD>
    		<TD COLSPAN=8>
    			<IMG SRC="images/contact_02.jpg" WIDTH=579 HEIGHT=140 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=9>
    			<IMG SRC="images/contact_03.jpg" WIDTH=1117 HEIGHT=37 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=2 ROWSPAN=2>
    			<IMG SRC="images/contact_04.jpg" WIDTH=565 HEIGHT=245 ALT=""></TD>
    		<TD COLSPAN=2>
    			<IMG SRC="images/contact_05.jpg" WIDTH=124 HEIGHT=51 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/contact_06.jpg" WIDTH=100 HEIGHT=51 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/contact_07.jpg" WIDTH=104 HEIGHT=51 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/contact_08.jpg" WIDTH=107 HEIGHT=51 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/contact_09.jpg" WIDTH=83 HEIGHT=51 ALT=""></TD>
    		<TD ROWSPAN=6>
    			<IMG SRC="images/contact_10.jpg" WIDTH=34 HEIGHT=549 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=6>
    			<IMG SRC="images/contact_11.jpg" WIDTH=518 HEIGHT=194 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=3 ROWSPAN=3>
    			<IMG SRC="images/contact_12.jpg" WIDTH=603 HEIGHT=182 ALT=""></TD>
    		<TD COLSPAN=5>
    			<IMG SRC="images/contact_13.jpg" WIDTH=480 HEIGHT=68 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=5 class="development" WIDTH=480 HEIGHT=64 valign=top>
    			
    			<table width="480" cellpadding=0 cellspacing=0>
    			<tr>
    			<td class="text">
    bla bla bla bla
    			
    			</tr>
    			</table>
    			</td>
    			
    			
    			
    	</TR>
    	<TR>
    		<TD COLSPAN=5>
    			<IMG SRC="images/contact_15.jpg" WIDTH=480 HEIGHT=50 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=3>
    			<IMG SRC="images/contact_16.jpg" WIDTH=603 HEIGHT=122 ALT=""></TD>
    			
    		<TD COLSPAN=5 class="convert" WIDTH=480 HEIGHT=122 valign=top>
    			<table width="480" cellpadding=0 cellspacing=0>
    			<tr>
    			<td class="text">
    bla bla bla bla
    			</tr>
    			</table>
    			</td>
    			
    			
    	</TR>
    	<TR>
    		<TD COLSPAN=9>
    			<IMG SRC="images/contact_18.jpg" WIDTH=1117 HEIGHT=88 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=9>
    			<IMG SRC="images/contact_19.jpg" WIDTH=1117 HEIGHT=58 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=538 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=86 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=100 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=104 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=107 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=83 HEIGHT=1 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
    	</TR>
    </TABLE>
    
    
    <div class="container">
    <form action="webformmailer.php" method="post">           
                        
            
                      
    <span class="text">Your E-mail:<br>
    <input type="text" name="email" class="inputbg">
    
    <br>
    
    <span class="text">Your Name:</span><br>
    <input type="text" name="name" class="inputbg">
    
    <br>
    
    <span class="text">Company:</span><br>
    <input type="text" name="company" class="inputbg">
    
    <br>
    
    <span class="text">Your Phone:</span><br>
    <input type="text" name="phone" class="inputbg">
    
    <br>
    
    <span class="text">Your ICQ#:</span><br>
    <input type="text" name="name" class="inputbg">
    
    <br><br>
    
    <span class="text">Your message:</span><br>						
    <textarea class="textarea" name="info" id="info"></textarea>
    
    <br>
    
    <center><input type="image" src="button.jpg" alt="Send Now!"></center>
    </form>
    </div>
    
    
    <div id="footer">
    <div class="bottomnav">
    <div><a href="index.html" class="link2">Home</a></div> <div><a href="join.php" class="link2">About</a></div> <div><a href="#" class="link2">Contact</a></div> <div><a href="#" class="link2">Pricing</a></div> <div><a href="#" class="link2">Shop</a></div>
    
    </BODY>
    </HTML>
    Last edited by djr33; 06-27-2010 at 11:58 AM. Reason: Use [code]....[/code] tags!

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Ok I see your page now. There's a black background on the body going all the way to the bottom in my browsers ( FF3.6 , IE8). A couple of </div> 's are missing at the bottom.
    Not sure i understand how you need it to look. ?? Did you try to increase the height of the footer ?

  5. #5
    Join Date
    Mar 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    No its not a black background. It's one strip of black horizontally across the bottom. Make the page background white and you'll see it...

    I need the black strip to go to the bottom of the page without any space between it and the bottom like there is now.

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    How does it look for you if you delete the footer height: 30px

  7. #7
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    try to add
    form{ margin:0; padding:0}
    and change the footer css to
    Code:
    #footer {
    float: left; 
    width:100%;
    background-color: #000000;
    font-family:"Times New Roman",Georgia,Serif; 
    color: #ffffff; 
    font-size: 14px; 
    padding-top:0px;
    padding-right:0px;
    }
    and tell me how that looks

  8. #8
    Join Date
    Mar 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Doesn't do anything. The space is still there.

  9. #9
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi Galina, I can't seem to get further with it. All those tables freak me out. You might want to try the validator and see if it gives you a clue. Also you could post a link to the site in case someone else want's to give it a go.

  10. #10
    Join Date
    Mar 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I fixed it by putting the form inside of a table..

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
  •