Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-11-2010, 02:15 PM   PM User | #1
groundzeroginge
New Coder

 
Join Date: Jun 2010
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
groundzeroginge is an unknown quantity at this point
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.
groundzeroginge is offline   Reply With Quote
Old 06-11-2010, 03:05 PM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is offline   Reply With Quote
Old 06-11-2010, 03:18 PM   PM User | #3
groundzeroginge
New Coder

 
Join Date: Jun 2010
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
groundzeroginge is an unknown quantity at this point
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.
groundzeroginge is offline   Reply With Quote
Old 06-12-2010, 12:34 AM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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
Excavator is offline   Reply With Quote
Users who have thanked Excavator for this post:
groundzeroginge (06-14-2010)
Old 06-14-2010, 12:00 PM   PM User | #5
groundzeroginge
New Coder

 
Join Date: Jun 2010
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
groundzeroginge is an unknown quantity at this point
Amazing man thanks so much, its totally fixed
groundzeroginge is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:08 AM.


Advertisement
Log in to turn off these ads.