Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem with floating I think

    Hi guys I wonder if you can help me out with a bit of code for my website, its not live yet but here's the code and an screen shot of the site. I hope this is enough to go on as I can't make it live as of yet.

    The problem is as follows, on the right hand side I have an image called #shadowedgepageright and it is supposed to display the same as #shadowedgepage but doesn't i think that something is blocking it to do with a float maybe but I can't be sure.

    Image :

    Full size image: http://img156.imageshack.us/img156/7200/problemv.png

    Code html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta name="description" content="">
    		<meta name="keywords" content="">
    		<meta name="author" content="">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="StyleSheet" href="styles.css" type="text/css">
    	</head>
    
    	<body background="images/backgroundimage.jpg">
        	<div id="firstpixeltop"></div><!-- part 1 of the 2px line at the top of page -->
            <div id="secondpixeltop"></div><!-- part 2 of the 2px line at the top of page -->
            <div id="wrapper"><!-- content wrapper for page -->
            	<div id="shadowedgepage"></div><!-- left shadow of white page background down sides -->
                <div id="page"></div><!--white page css white background -->
                	<div id="navigationandlogo"><!-- holds nav logo and call us -->
                    <div id="callus"><!-- call us holder and 2px line between call us and nav -->
                    	<div id="teleimage"></div><!--holds the call us number image -->
                        <div id="1pxbelcall"></div><div id="2pxbelcall"></div><div id="navigation">
                        
                        <ul id="navlist">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">HGV License</a></li>
    <li><a href="#">Theory Test</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About</a></li>
    </ul></div>
    
                        
                        </div>
                    	<div id="logo"></div><!-- logo -->
                    </div><!--logo holder -->
     <div id="bannerholder">             
    <div id="bannerimage"></div></div>
                <div id="shadowedgepageright"></div><!-- left shadow of white page background down sides -->
            </div>
        </body>
        </html>
    Code CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #firstpixeltop {
    	height:1px;
    	width:auto;
    	background-color:#dae7f9;
    	background-repeat:repeat-x;}
    	
    #secondpixeltop {
    	height:1px;
    	width:auto;
    	background-color:#b6bac0;
    	background-repeat:repeat-x;}
    	
    /*Content Wrap For Website*/  
    #wrapper {width:1031px;
    	height:1031px;
    	margin: 0 auto;} 	
    	
    #shadowedgepage {
    	width:8px;
    	float:left;
    	height:628px;
    	background-image:url(images/leftshadowborder.jpg);
    	background-repeat:repeat-y;}
    	
    #page {
    	background-color:#f4f4f4;
    	float:left;
    	width:1015px;
    	overflow:hidden;
    	height:1px;
    	background-repeat:repeat-x;}
    	
    #navigationandlogo {
    	width:1015px;
    	float:left;
    	height:126px;
    	}
    	
    #logo {
    	background-image:url(images/logo.jpg);
    	
    	width:369px;
    	height:118px;
    	padding-top:10px;}
    	
    #callus {
    	width:646px;
    	float:left;
    	background-color:#f4f4f4;
    	margin-left:369px;
    	height:69px;}
    	
    /*navigation button attributes*/
    	
    a {
    	font:normal 13px Arial;
    	color:#747d86;
    	font-size:14px;
    	font:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	background-color:f4f4f4;
    	text-decoration:none;
    	text-transform:uppercase;
    	padding-right:30px;
    	float:left;}
    	
    a:hover {font:normal 13px Arial;
    	color:#000000;
    	font-size:14px;
    	background-color:f4f4f4;
    	font:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-transform:uppercase;
    	text-decoration:none;
    	padding-right:30px;
    	float:left;}
    	
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    background-color:f4f4f4;
    }
    
    #navigation {
    	padding-left:30px;
    	padding-top:15px;
    	width:616px;
    	height:47px;
    	background-color:#f4f4f4;}
    
    /* end -navigation button attributes - end */
    	
    #teleimage {
    	background-image:url(images/callus.jpg);
    	margin-left:66px;
    	width:336px;
    	height:66px;}
    	
    #1pxbelcall {
    	height:1px;
    	width:487px;
    	margin-left:67px;
    	background-color:#e3e3e3;}
    	
    #2pxbelcall {
    	height:1px;
    	width:487px;
    	margin-left:67px;
    	background-color:#fafafa;}
    	
    #bannerimage {
    	background-image:url(images/bannerimage.png);
    	width:962px;
    	margin-left:27px;
    	float:left;
    	background-color:#f4f4f4;
    	height:420px;}
    	
    #bannerholder {width:1015px;
    float:left;
    height:420px;
    background-color:#f4f4f4;
    }
    	
    #shadowedgepageright {
    	float:left;
    	width:8px;
    	height:528px;
    	background-image:url(images/rightshadowborder.jpg);
    	background-repeat:repeat-y;}

    Any help would be much appreciated, Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello groundzeroginge,
    It's always easier to solve problems involving images when you give a link. You should test it live anyway, give us a link to the test site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's the link managed to upload it with the help of a friend to his server,

    http://richbros.co.uk/test/hgvtraining/

    Also there is a spammer above your post, I'm not sure how to go about informing admin or mods.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Try re-arranging your floated borders like this -
    Code:
        	<div id="firstpixeltop"></div><!-- part 1 of the 2px line at the top of page -->
            <div id="secondpixeltop"></div><!-- part 2 of the 2px line at the top of page -->
            <div id="wrapper"><!-- content wrapper for page -->
            	<div id="shadowedgepage"></div><!-- left shadow of white page background down sides -->
                <div id="shadowedgepageright"></div><!-- left shadow of white page background down sides -->
                <div id="page"></div><!--white page css white background -->
                	<div id="navigationandlogo"><!-- holds nav logo and call us -->
                    <div id="callus"><!-- call us holder and 2px line between call us and nav -->
                    	<div id="teleimage"></div><!--holds the call us number image --><div id="navigation">
                        
                        <ul id="navlist">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">HGV License</a></li>
    <li><a href="#">Theory Test</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About</a></li>
    </ul></div>
    
                        
                        </div>
                    	<div id="logo"></div><!-- logo -->
                    </div><!--logo holder -->
     <div id="bannerholder">             
    <div id="bannerimage"></div></div>
            </div>
    And make your CSS look like this -
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #firstpixeltop {
    	height:1px;
    	width:auto;
    	background-color:#dae7f9;
    /*background-repeat:repeat-x;*/
    }
    	
    #secondpixeltop {
    	height:1px;
    	width:auto;
    	background-color:#b6bac0;
    /*background-repeat:repeat-x;*/
    }
    	
    /*Content Wrap For Website*/  
    #wrapper {
    /*height:1031px;*/
    	width:1031px;
    	margin: 0 auto;
    overflow: auto; /*to clear the floats*/
    } 	
    	
    #shadowedgepage {
    	width:8px;
    	float:left;
    	height:628px;
    	background-image:url(images/leftshadowborder.jpg);
    /*background-repeat:repeat-y;*/
    }	
    #shadowedgepageright {
    float: right;
    	width:8px;
    	height:628px;
    	background-image:url(images/rightshadowborder.jpg);
    /*background-repeat:repeat-y;*/
    }
    	
    #page {
    	background-color:#f4f4f4;
    /*float:left;
    width:1015px;*/
    margin: 0 8px;
    	overflow:hidden;
    	height:1px;
    	background-repeat:repeat-x;}
    	
    #navigationandlogo {
    /*float:left;
    width:1015px;*/
    margin: 0 8px;
    	height:126px;
    	}
    	
    #logo {
    	background-image:url(images/logo.jpg);
    	
    	width:369px;
    	height:118px;
    	padding-top:10px;}
    	
    #callus {
    	width:646px;
    	float:left;
    	background-color:#f4f4f4;
    	margin-left:369px;
    	height:69px;}
    	
    /*navigation button attributes*/
    	
    a {
    	font:normal 13px Arial;
    	color:#747d86;
    	font-size:14px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	background-color:#f4f4f4;
    	text-decoration:none;
    	text-transform:uppercase;
    	padding-right:30px;
    	float:left;}
    	
    a:hover {font:normal 13px Arial;
    	color:#000000;
    	font-size:14px;
    	background-color:#f4f4f4;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-transform:uppercase;
    	text-decoration:none;
    	padding-right:30px;
    	float:left;}
    	
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    background-color:#f4f4f4;
    }
    
    #navigation {
    	padding-left:30px;
    	padding-top:15px;
    	width:616px;
    	height:47px;
    	background-color:#f4f4f4;}
    
    /* end -navigation button attributes - end */
    	
    #teleimage {
    	background-image:url(images/callus.jpg);
    	margin-left:66px;
    	width:336px;
    	height:66px;}
    	
    #bannerimage {
    	background-image:url(images/bannerimage.png);
    	width:962px;
    	margin-left:27px;
    	float:left;
    	background-color:#f4f4f4;
    	height:420px;}
    	
    #bannerholder {
    /*float:left;
    width:1015px;*/
    margin: 0 8px;
    height:420px;
    background-color:#f4f4f4;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    groundzeroginge (06-14-2010)

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Amazing man thanks so much, its totally fixed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •