PDA

Click to See Complete Forum and Search --> : A few CSS questions

tommywds
06-16-2007, 06:46 AM
Hi there Guys

Hoping that someone can answer a few questions I have. A couple are really easy but one I think is a little more tricky!

What is the difference between calling a div as an ID or a CLASS???

I'm trying to layout the following page (excuse the colours, just there to make the divs visible. I want the ad div to be 10 px from the top and right of the content div. Please could someone tell me what i'm doing wrong.

Thanks!

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

#content
{
width: 800px;
background: #999999;
}

#menu
{
width: 100%;
background: #FF0000;
height: 30px;
}

#story
{
width: 80%;
background: #FFFFFF;
}

#ad
{
background: #FF9900;
width: 100px;
height: 45px;
position: relative;
top: 10px;
right: 10px;
}

</style>

</head>

<body>

<div id="content">

<div id="menu">
Menu 1 | Menu 2 | Menu 3
</div>

<div id="story">This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. This is my really long boaring story to go on the home page. Blah blah blah. </div>

<div id="ad">
Ad here
</div>

</div>

</body>
</html>
tommywds
06-16-2007, 06:49 AM
Sorry should also have said I want the ad html code at the bottom of the page so if a browser does not support css it does not get in the way.

Thanks!
Fang
06-16-2007, 07:40 AM
ID v CLASS (http://www.tizag.com/cssT/cssid.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
/*<![CDATA[*/
#content {
width: 800px;
background: #999999;
position:relative;;
}
#menu {;
width: 100%;
background: #FF0000;
height: 30px;
}
#story {
width: 80%;
background: #FFFFFF;
}
#ad {
background: #FF9900;
width: 100px;
height: 45px;
position:absolute;
top:0;
right:0;
margin:10px 10px 0 0;
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<div id="menu">Menu 1 | Menu 2 | Menu 3</div>
<div id="story">This is my really long boring story to go on the
home page. Blah blah blah. This is my really long boring story
to go on the home page. Blah blah blah. This is my really long
boring story to go on the home page. Blah blah blah. This is my
really long boring story to go on the home page. Blah blah blah.
This is my really long boring story to go on the home page. Blah
blah blah. This is my really long boring story to go on the home
page. Blah blah blah. This is my really long boring story to go
on the home page. Blah blah blah. This is my really long boring
story to go on the home page. Blah blah blah. This is my really
long boring story to go on the home page. Blah blah blah. This
is my really long boring story to go on the home page. Blah blah
blah. This is my really long boring story to go on the home
page. Blah blah blah. This is my really long boring story to go
on the home page. Blah blah blah.</div>
<div id="ad">Ad here</div>
</div>
</body>
</html>
WebJoel
06-16-2007, 09:50 AM
....#menu {;
width: 100%;
background: #FF0000;
height: 30px;
}.... A typographical error, I'm sure. :)
tommywds
06-16-2007, 11:16 AM
Thanks for all your help!

Will give that a go!