Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10

Thread: Some CSS Help?

  1. #1
    Member frazzle's Avatar
    Join Date
    Jun 2005
    Location
    Glasgow, Scotland
    Posts
    39
    Member #
    10256
    Hi.. I've been having some problems with my first CSS layout site. The problem main appears in firefox. I have a main content containter and a side bar container. Once I add my body background I seem to get a line of the background at the bottom of the sidebar. if i try to add a <br> or a <p> the same problem occurs to the content container. I've included 2 images. The first showing the problem, the 2nd showing the full thing. Any suggestions or help are welcome. Thanks
    Attached Images Attached Images
    Rough Cut Reviews - http://www.roughcutreviews.com

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hard to tell from that, do you mean the footer should be flush up against the sidebar bottom?

    Post code?

  4. #3
    Member frazzle's Avatar
    Join Date
    Jun 2005
    Location
    Glasgow, Scotland
    Posts
    39
    Member #
    10256
    well.. that would be good too but as long as the bit of background doesnt appear under the white box that ould be great.. heres me code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Westmains Boarding Kennels - Home</title>
    <meta http-equiv="Content-Language" content="en-us" />

    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />

    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />

    <meta name="author" content="Enlighten Designs" />

    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    margin-top: 0px;
    margin-bottom: 0px;
    }
    -->
    </style></head>

    <body>

    <div id="page-container">


    <div id="header">
    <h4><a href="#">Home</a> |
    <a href="#">Accomodation</a> |
    <a href="#">Conditions</a> |
    <a href="#">Services</a> |
    <a href="#">Staff</a> |
    <a href="#">Tariff</a> |
    <a href="#">Testimony</a> |
    <a href="#">Contact </a></h4>
    </div>


    <div id="sidebar-a">
    <div class="padding">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    </p>
    </div>
    </div>


    <div id="content">
    <div class="padding">
    <h2>Welcome</h2>
    <p><strong>Westmains Boarding Kennels</strong>, since opening in 1999, has been a happy holiday home for many dogs. Set in a countryside environment it is an ideal site for walking and caring for your pets. We pride ourselves in being dog lovers and expert care is provided for all dogs alike. </p>
    <p><strong>Westmains Boarding Kennels</strong> is licensed by South Lanarkshire Council, this means high standards and conditions must be met, ensuring your pet has a safe and hygienic environment in which to board. </p>
    <p>Linda, owner and manager, has over 20 years experience with animals. She specialises in breeding and showing Bernese Mountain Dogs. If you have any questions or would like to book your dog in for a holiday please contact us. </p>
    <p>From a day away to a longer stay your dog will enjoy a holiday in this caring establishment.
    <br />
    <br />
    <br />
    <br />
    </p>
    </div>
    </div>



    <div id="footer">
    <div id="altnav">
    <a href="#">Home</a> |
    <a href="#">Accomodation</a> |
    <a href="#">Conditions</a> |
    <a href="#">Services</a> |
    <a href="#">Staff</a> |
    <a href="#">Tariff</a> |
    <a href="#">Testimony</a> |
    <a href="#">Contact Us<br />
    </a>Copyright &copy; Westmains Boarding Kennels </div>
    Designed by <a href="http://www.roughcutreviews.com/">Craig Friel</a></div>

    </div>


    </body>
    </html>

    also heres the css:

    #page-container {
    width: 760px;
    margin: auto;
    text-align: left;
    }

    body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #666666;
    background: #4B651B;
    text-align: center;
    background: #ffffff
    url(../images/background.jpg);
    }


    .hidden {
    display: none;
    }



    #header {
    height: 150px;
    background: #ffffff
    url(../images/header_home.jpg);
    }

    #header a {
    color: #ffffff;
    text-decoration: none;
    }

    #header a:hover {
    color: #225236;
    }

    #sidebar-a {
    float: right;
    width: 280px;
    background: #ffffff
    url(../images/boxes.jpg) no-repeat;
    line-height: 18px;
    }

    #sidebar-a .padding {
    padding: 25px;

    }

    #content {
    margin-right: 280px;
    line-height: 18px;
    background: #ffffff;
    }

    #content .padding {
    padding: 25px;
    }

    #footer {
    clear: both;
    height: 40px;
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 10px;
    color: #c9c9c9;
    border-top: 1px solid #efefef;
    padding: 13px 25px;
    line-height: 18px;
    background: #123436

    }

    #footer #altnav {
    width: 400px;
    float: right;
    text-align: right;
    }


    #footer a {
    color: #c9c9c9;
    text-decoration: none;
    }

    #footer a:hover {
    color: #225236;
    }


    h1 {
    margin: 0;
    padding: 0;
    }

    h4 {
    margin: 0;
    padding: 0;
    float: left;
    margin-top: 4px;
    padding-left: 4px;
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #ffffff;

    }


    #content h2 {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    }

    #content p {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    }


    thanks
    Rough Cut Reviews - http://www.roughcutreviews.com

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Can you please upload it somewhere, so we can firebug the thing?
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Member frazzle's Avatar
    Join Date
    Jun 2005
    Location
    Glasgow, Scotland
    Posts
    39
    Member #
    10256
    Rough Cut Reviews - http://www.roughcutreviews.com

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I didn't test anything myself ... but try these changes first (in blue):

    #page-container {
    background-color: #FFFFFF;
    width: 760px;
    margin: auto;
    text-align: left;
    }


    #content {
    margin-right: 280px;
    line-height: 18px;
    background-color: #FFFFFF;
    }


    It all has to do with the height of the two columns. When the heights are
    not equal, it pushes down the footer and exposes background in the other
    column.

    If this doesn't work, you might need to combine the two columns into
    another <div> <div id="wrapper"> ... then specify #wrapper background
    color to be #FFFFFF and the other two <div>'s to be background-color: transparent;


  8. #7
    Member frazzle's Avatar
    Join Date
    Jun 2005
    Location
    Glasgow, Scotland
    Posts
    39
    Member #
    10256
    tried the first thing but had no effect. Not really sure how to do the second part as when it comes to css I'm still learning. Most of it so far has been put together using tutorials. Could u by any chance explain this a little further for me?
    Rough Cut Reviews - http://www.roughcutreviews.com

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    See the attached files.

    "test.html" is your index file with a new div added.
    A "wrapper" to enclose the other two divs.

    "master.css" is your CSS stylesheet file with the
    "wrapper" div and a few changes to the others.
    (background color set to transparent so that they
    will take on the background color of #wrapper)

    Here is the CSS file:
    Code:
    html, body {
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 12px;
    	color: #666666;
    	background: #4B651B;
    	text-align: center;
    	background: #ffffff
    	            url(../images/background.jpg);
    	margin: 0px auto;
    }
    
    #page-container {
    	background-color: transparent;
    	width: 760px;
    	margin: auto;
    	text-align: left;
    }
    
    #wrapper {
    	width: 760px;
    	margin: auto;
    	background-color: #ffffff;
    }
    
    .hidden {
    	display: none;
    }
    
    
    
    #header {
    	height: 150px;
    	background: #ffffff
    	            url(../images/header_home.jpg);
    }
    
    #header a {
    	color: #ffffff;
    	text-decoration: none;
    }
    
    #header a:hover {
    	color: #225236;
    }
    
    #sidebar-a {
    	float: right;
    	width: 280px;
    	background: #ffffff
    	            url(../images/boxes.jpg) no-repeat;
    	line-height: 18px;
    }
    
    #sidebar-a .padding {
    	padding: 25px;
    	
    }
    
    #content {
    	margin-right: 280px;
    	line-height: 18px;
    	background-color: transparent;
    }
    
    #content .padding {
    	padding: 25px;
    }
    
    #footer {
    	clear: both;
    	height: 40px;
    	font-family: Tahoma, Arial, Helvetica, Sans-serif;
    	font-size: 10px;
    	color: #c9c9c9;
    	border-top: 1px solid #efefef;
    	padding: 13px 25px;
    	line-height: 18px;
    	background: #123436
    
    }
    
    #footer #altnav {
    	width: 400px;
    	float: right;
    	text-align: right;
    }
    
    
    #footer a {
    	color: #c9c9c9;
    	text-decoration: none;
    }
    
    #footer a:hover {
    	color: #225236;
    }
    
    
    h1 {
    	margin: 0;
    	padding: 0;
    }
    
    h4 {
    	margin: 0;
    	padding: 0;
    	float: left;
    	margin-top: 4px;
    	padding-left: 4px;
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 12px;
    	color: #ffffff;
    
    }
    
    
    #content h2 {
    	margin: 0;
    	padding: 0;
    	padding-bottom: 15px;
    }
    
    #content p {
    	margin: 0;
    	padding: 0;
    	padding-bottom: 15px;
    }


  10. #9
    Member frazzle's Avatar
    Join Date
    Jun 2005
    Location
    Glasgow, Scotland
    Posts
    39
    Member #
    10256
    excellent stuff! thank you so much. works a treat. Just trying now to get my head around what you done!!
    Rough Cut Reviews - http://www.roughcutreviews.com

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    ___/\_________________________________________________ _________
    : Your "page container" and "content" (2 separate divs) are now contained
    : within "wrapper". They both have a transparent background, so the
    : background of "wrapper" shows up beneath both of those. If either one
    : of those grow taller than the other, "wrapper" will be forced to expand.
    :_________________________________________________ _____________

    <div id="wrapper">

    <div id="page-container">
    stuff
    </div>

    <div id="content">
    stuff
    </div>

    </div>



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com