...

View Full Version : Problem with floating I think



groundzeroginge
06-11-2010, 02:15 PM
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 : http://img534.imageshack.us/img534/6139/problemz.png

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

Code html:

<!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:

@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. :thumbsup:

Excavator
06-11-2010, 03:05 PM
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.

groundzeroginge
06-11-2010, 03:18 PM
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.

Excavator
06-12-2010, 12:34 AM
Try re-arranging your floated borders like this -

<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 -
@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;
}

groundzeroginge
06-14-2010, 12:00 PM
Amazing man thanks so much, its totally fixed :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum