CSS Help

Luckyrare · 21-04-2006, 01:50 PM

Okay I am quite a newbie when it comes to CSS... But I want to get good at it, so the best way it to make a site coded in css x) I have done most of it

www.losh.co.uk

Where it has a image and vital hosting... It looks wrong in my default browser (Firefox) ... Images/text float over the borders. But when I use IE it looks how I want it to be.

I am using in my css...

Code:

#left {
float:left;
}
#right {
float:right;
}

Please view source on losh.co.uk...

Thanks,
Luckyrare

craigg. · 21-04-2006, 02:00 PM

Its maybe because you don't have it in the "body" section?

Try this mate;

<!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>The tutorial site - Losh.co.uk</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">
<img src="./images/banner.gif" height="100" width="200" />
</div>
<div id="navig">
<span id="navigheader">Losh</span><br />
<img src="/images/navage.gif" /><a href="index.php" target="_self">Home</a><br />
<span id="navigheader">Tutorials</span><br />
<img src="/images/navage.gif" /><a href="#" target="_self">PHP</a><br />
<img src="/images/navage.gif" /><a href="#" target="_self">CSS</a><br />
<img src="/images/navage.gif" /><a href="#" target="_self">HTML</a><br />
</div>
<div id="adverts" align="center">
<p><img src="./images/css_valid.png" /></p>
<p><img src="./images/php_powered.png" /></p>
</div>
<div id="main">
<div id="border">
<div id="left"><img src="./images/vitalhosting.png" />
</div>
<div id="right">
<a href="http://www.vitalhosting.co.uk" target="_blank">Vital Hosting</a><br />
Need a cheap, trustworthy hosting site? Reseller plans starting from £1! We recommend Vital Hosting!
</div>
</div>
</div>
</body>
</html>

- Craig

Luckyrare · 21-04-2006, 02:23 PM

Woops... That won’t make any difference but thanks for pointing that out.

Mentor · 21-04-2006, 05:09 PM

floating something detcaches it form the fixed layout, so it wont cause a div to fill out, useing the text-align insted should fix that

craigg. · 21-04-2006, 05:17 PM

I've just had a play around with it, and I think all the div's inside the div's were messing it up. I have tested it in opera, and it works fine for me;

<!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>The tutorial site - Losh.co.uk</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="header"><img src="./images/banner.gif" height="100" width="200" /></div>
<div id="navig">
<span id="navigheader">Losh</span><br />
<img src="/images/navage.gif" /> <a href="index.php" target="_self">Home</a><br />
<span id="navigheader">Tutorials</span><br />
<img src="/images/navage.gif" /> <a href="#" target="_self">PHP</a><br />
<img src="/images/navage.gif" /> <a href="#" target="_self">CSS</a><br />
<img src="/images/navage.gif" /> <a href="#" target="_self">HTML</a><br />
</div>
<div id="adverts" align="center">
<p><img src="./images/css_valid.png" /></p>
<p><img src="./images/php_powered.png" /></p>
</div>
<div id="main">
<div id="border">
<img src="./images/vitalhosting.png" />
<div id="right"></div>
<a href="http://www.vitalhosting.co.uk" target="_blank">Vital Hosting</a><br />
Need a cheap, trustworthy hosting site? Reseller plans starting from £1! We recommend Vital Hosting!</div>
</div>
</body>
</html>

Luckyrare · 21-04-2006, 07:47 PM

Okay I have had a play around with text-align, its just about how I want it.
Thanks Mentor

~~Sygon.~~ · 21-04-2006, 08:10 PM

I like the domain lol its cool, and i like the buttons on vitalhosting =]

Mentor · 21-04-2006, 08:24 PM

May want to keep the valid this and that buttons till it becomes true thogh

http://jigsaw.w3.org/css-validator/v...ww.losh.co.uk/

Luckyrare · 21-04-2006, 08:49 PM

Thanks sygon my mate made them x)

Mentor -> Thanks for the link, had one error in. Thanks dude

Thread: CSS Help

Thread Tools

CSS Help

Posting Permissions