CSS Playing Up...

[rokape]

Hi All,

I am in the process of rebranding my web hosting business and I have come accross a problem with some CSS...

I haven't got around to cross rowser testing it yet, I will do that once I know what I want it to look like :P

Ok, on this page: http://b-digital.biz/templates/newbrand/template.php

At the bottom, I have my final footer with my logo in grayscale. Now, to get it there I have had to use line breaks (I know it's not right, and I don't want to use them) to fix the design. The logo seems to jump up, along with any other content in that div.

It jumps up, and leaves like a 500px margin on the left. Now, this isn't because there is a 500px CSS Margin, but from what it looks like, there is a div there in the way. But I canot for the life of me find it or work out what the problem is.

The link below is to a version without the line breaks so you can see what happens, along with some "CONTENT, CONTENT" to show you how it is wrapping the text.

http://b-digital.biz/templates/newbrand/template_error.php

Please help me! I just don't know what to do, I'm sure it's just something simple!

Regards,

Josh

[Veneficae]

Your 'footer' is already position: relative;, so you've done part of the work needed, :).

#businessdetails img.logo{ /* Give the logo the class in case you put other images in later */
position: absolute;
bottom: 0px;
left: 0px;
}

Adjust the 'bottom' and 'left' positions to your liking. Hopefully that should work, if not, I'll be hanging around.

[rokape]

Thanks for your quick reply!

I've tried that but it still doesn't work. It seems to go to the bottom of another div, not the body or footer. Also now, the HR seems to float to the right...

I have done it on the template.php file for you to see...

Thanks,

Josh

[Veneficae]

You just want it at the bottom left, right? If you put it inside the <div id="footercontent_left">, under the </form> it'll sit underneath the search bar, at the bottom left. From there you could just increase the height of the #footercontent_left, and do some positioning.

[rokape]

I'm not a CSS Guru & this is the most complicated CSS website I have created... I'm pretty sure I applied it properly, but can you have a look to see if I used it properly?

I am a PHP Dev, & not as nifty with CSS as I would like to be.

The code:

#businessdetails img.logo /* Give the logo this class, in case you put other images in later */
{
	position: absolute;
	bottom: 0px;
	left: 0px;
}

Is applied to the logo...

This is on this page:

http://b-digital.biz/templates/newbrand/template.php

Thanks for your help,

Josh

[Veneficae]

It's at the bottom left for me now, in both Chrome and Firefox. You should be able to remove that CSS class now that it's in the footercontent_left div, and it should sit under the form in IE. Let me know when that's done and I'll take another peek.

[rokape]

Hmm. On my Mac, Firefox it shows in my screenshot.

Any other ideas? :(

[Veneficae]

Is that with the test class removed from the image, and the image being moved into the <div id="footercontent_left">, underneath the closing form tag? I've done that on my local copy and in IE8, Firefox and Chrome it's underneath the search bar...

My exact local code for the footercontent_left (the style with the border: solid 1px red; is just for testing the positioning, and can be removed):

<div id="footercontent_left">
<h3>Signup to our Newsletter</h3>
<p>Enter your email address to receive tips &amp; tricks from our tech team.</p>
<form id="form1" name="form1" method="post" action="">
  <label>
    <input type="text" name="email" id="sub_email" />
  </label>
  <label>
    <input type="submit" name="button" id="sub_btn" value="Submit" />
  </label>
</form>

<img src="/templates/newbrand/images/footer_logo.jpg" width="250" height="58" style="border: solid 1px red;"/>
</div>

[rokape]

But I need the logo to be below the other text...

I am using a HR, but I would like that to be a border of a DIV, but I cannot get the DIV to be relatively below the other 3 sections there (Form, Facebook & Links)

Also, I want to have text next to the image, but I can't do that until I sort this DIV out... :(

Here is a screenshot of what I am aiming for. :)

Thanks again.

[MidiMagic]

A footer is not provided for in html/xhtml/css.

All attempts to make one fail, because all of the methods rely on the characteristics of one particular monitor size.

Just put it at the bottom of your content, and don't waste time trying to exactly fill a screen. I have never seen anyone do it in a way that worked on all browsers and screen sizes.

A script is needed to do it, and the script language needed is not cross-browser compatible. Firefox and IE have different proprietary functions. There is no DOM function that works on all systems.

[rokape]

Ok, but I just want it to be 'below' the other divs but it wouldn't go...

[Veneficae]

What's the deadline on the website? I'm finding it hard to pick apart due to how it's all constructed, so I was going to make up a quick 'barebones' template you can follow and put all your content into.

[rokape]

It's my own website and its deadline is when it's ready! No rush. I just wanted to rebrand & focust on web hosting and I needed a more suitable design for it. I have almost done it if you check it out now:

http://b-digital.biz/templates/newbrand/template.php

[Veneficae]

Nice, :). Technically putting the image where 'right' is might do it, but the structure of the code is a bit much. I'll pass you my template code shortly so you can see how far <div>s can go without repetition.

I had a look at your CSS/HTML - you've a devil of a lot of presentational markup there. It looks far more complicated than it needs to be - too many divs and classes. Personally I leave the markup as clean as possible and leave the heavy lifting (complexity) to the CSS.

There's also a LOT of relative positioning going on. That will complicate things if the bounding element is mistaken.

//I assume you want the image inside and on the bottom left of the #footer div. You've set the height to 175px - so it won't fit!

How about this:

#footer
{
	background-color: #231F20;
	background-image: url(/templates/newbrand/images/footer_logo.jpg);
	width: 100%;
	height: 240px;
	background-position: 7px 170px;
	background-repeat:no-repeat; 
}

OK, it's a background image - does it have to be clickable?

[Veneficae]

Well, I've made the template code, and everything seems to appear fine IE6 to 8, Firefox, and Chrome. I've also attached an image I used for the body of the website which you'll need to download. I re-used the header logo for the footer logo, so you'll have to change that.

In the meantime, here's the code (quite a bit). If anyone wants to clean it up a bit they're welcome to, it's almost midnight here so I'll be leaving shortly.

Place the CSS in a style.css or equivalent, and link within the <head> and </head> tags.

* { /* Global reset of padding and margins */
	margin: 0px;
	padding: 0px;
}

body {
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Set the font family for the website */
	font-size: 12px; /* Set a global font size */
	background: url(images/body_bk.jpg) top left repeat-x;
	background-color: #231f20;
}

#container {
	width: 900px;
	height: 600px;
	background-color: #f9f9f9;
	position: relative;
	margin: 0px auto; /* Margin: Shortform for Up and Down = 0px, and Left and Right = auto */
}
#header {
	position: relative; /* Lets objects be placed absolute within */
	width: 100%;
	height: 89px;
	background-color: #565656;
	border-bottom: solid 1px #ffffff;
}

#header img {
	position: absolute;
	top: 15px;
	left: 0px;
	border: 0px;
}

#header #menu {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 600px;
	margin-top: 30px;
}

#menu ul li {
	display: inline; /* Align list items horizontally. */
	text-align: center;
}

#menu ul li a:link, #menu ul li a:visited, #menu ul li a:hover {
	display: block;
	float: left; /* Enables list items to stack horizontally... swore I usually didn't need it... */
	height: 23px;
	padding-top: 7px;
	width: 100px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
}

#menu ul li a:hover {
	border: solid 1px #ffffff;
	height: 22px;
	width: 98px;
	padding-top: 6px;
}

#menu ul li a.home {
	width: 54px;
}

#menu ul li a.home:hover {
	width: 52px;
}

#menu ul li a.login {
	color: #00ccff;
}

#image_thing {
	height: 25px;
	padding: 10px 0px 3px 10px; /* Padding: Up, Right, Down, Left */
	background-color: #444444;
	color: #ffffff;
	border-bottom: solid 10px #003366;
}

#content {
	height: 300px; /* Temporary height, just to see the footer */
	padding: 10px;
	background-color: #f7f7f7;
}

#footer {
	position: relative;
	height: 225px;
	background-color: #231f20;
}

#footer_left {
	position: absolute;
	top: 10px;
	left: 10px;
	color: #ffffff;
	height: 125px;
	width: 300px;
	border-right: dashed 1px #ffffff;
}

#footer_left h3, #footer_right h3 {
	font-size: 10px;
	color: #6a6a6a;
	margin-bottom: 15px;
}

#footer_left #form1 {
	padding-top: 10px;
}

#footer_left #form1 input.text {
	width: 200px;
}

#footer_center {
	position: absolute;
	top: 10px;
	left: 325px;
	height: 125px;
	padding: 0px 5px; /*Padding: Shortform for Top and Bottom = 0px, Left and Right = 5px */
	border-right: dashed 1px #ffffff;
}

#footer_center ul {
	list-style-type: none;
}

#footer_center ul li a {
	display: block;
	height: 30px;
	width: 80px;
	padding-top: 12px;
	text-align: left;
	padding-left: 45px;
	color: #4683c6;
	text-decoration: none;
	border-bottom: 1px solid #333;
}

#media_fb
{
	background: url(images/facebook.jpg) left no-repeat;
}

#media_tw
{
	background: url(images/twitter.jpg) left no-repeat;
}

#getquote
{
	background: url(images/getquoteicon.jpg) left no-repeat;
}

#footer_right {
	position: absolute;
	top: 10px;
	left: 475px;
	height: 130px;
	width: 100%;
}

#footer_right ul {
	list-style-type: none;
	width: 130px;
}

#footer_right ul li a {
	display: block;
	height: 18px;
	padding-top: 3px;
	color: #4683c6;
	padding-bottom: 3px;
	border-bottom: solid 1px #333333;
	text-decoration: none;
}

#footer_right ul li a:hover {
	color: #ffffff;
}

#footer_left img {
	position: absolute;
	bottom: -50px;
	left: 0px;
	border: 0px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" rev="stylesheet" />
</head>
<body>
<div id="container">
 	<div id="header">
	<a href="#"><img src="images/top_logo.png" alt="Homepage" /></a>
	<div id="menu">
		<ul>
			<li><a href="#" class="home">Home</a></li>
			<li><a href="#">What We Do</a></li>
			<li><a href="#">How We Do It</a></li>
			<li><a href="#">What We Use</a></li>
			<li><a href="#">Speak To Us</a></li>
			<li><a href="#" class="login">Client Login</a></li>
		</ul>
	</div>
	</div>
	<div id="image_thing">
	Image thing...
	</div>
	<div id="content">
	This &lt;div&gt; will stretch down depending on how much content is inside.
	</div>
	<div id="footer">
		<div id="footer_left">
			<h3>SIGNUP TO OUR NEWSLETTER</h3>
			<p>
				Enter your email address to receive tips &amp;<br/> tricks from our tech team.
			</p>
			<form id="form1" name="form1" method="post" action=""> 
			  <label> 
				<input class="text" type="text" name="email" id="sub_email" /> 
			  </label> 
			  <label> 
				<input type="submit" name="button" id="sub_btn" value="Submit" /> 
			  </label> 
			</form>
			<a href="#"><img src="images/top_logo.png" alt="Homepage" /></a>
		</div>
		<div id="footer_center">
			<ul> 
				<li id="media_fb"><a href="#">Facebook</a></li> 
				<li id="media_tw"><a href="#">Twitter</a></li> 
				<li id="getquote"><a href="#">Free Quote</a></li> 
			</ul>
		</div>
		<div id="footer_right">
			<div style="float: left; margin-right: 10px;">
			<h3>About us</h3>
			<ul> 
				<li><a href="#">What our clients say</a></li> 
				<li><a href="#">Our Equipment</a></li> 
				<li><a href="#">About us</a></li> 
				<li><a href="#">Our promise to you</a></li> 
			</ul> 
			</div>
			<div style="float: left; margin-right: 10px;">
				<h3>Our Services</h3>
				<ul>
					<li><a href="#">Web Hosting</a></li>
					<li><a href="#">Web Design</a></li>
					<li><a href="#">PHP Development</a></li>
					<li><a href="#">Email Services</a></li>
				</ul>
			</div>
			<div style="float: left;">
				<h3>Other Stuff</h3>
				<ul>
					<li><a href="#">Client Login</a></li>
					<li><a href="#">Register a domain</a></li>
					<li><a href="#">Promotions</a></li>
					<li><a href="#">Terms of business</a></li>
				</ul>
			</div>
		</div>
	</div>
 </div>
</body>
</html>