...

View Full Version : div ids and classes



lkeane
07-15-2005, 07:25 AM
ok, I'm working on my second table-free site and I seem to have run into some trouble. I am making a website for a friend of mine who illustrates books. It can currently be found here on my website.

I am trying to make an animated border around both sides of the main image. So far, I can get the left border to show up in firefox but nothing in ie. I also have a problem with my footer (temporarily blue) and with images being oddly positioned and resised.

I'm guessing I'm misusing div ids or classes. I got the layout from Eric Costello (http://glish.com/css/) but I really don't know what I'm doing. I could do the whole thing with tables in a few minutes but I really would rather use css. Your help is greatly appreciated.

-Liam

zro@rtv
07-15-2005, 08:19 AM
not excatally sure where to start.

should probably check some intro to css guides.... try google, there's bunches.

this might help, too...
put all images in a folder called images...




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>the new first page</title>
<meta name="description" content="Artist's official website">
<meta name="keywords" content="Patricia Eubank">
<meta name="Author" content="Liam Keane, Siochan.org">
<meta name="Copyright" content="Patricia Eubank">

<style type="text/css">


body {
background:red url(images/bgred3.jpg);
}

#content1 {
background:url(images/star.gif) repeat-y left;
margin:0 auto;
width:750px;
padding-left:25px;
}

#content2 {
background:url(images/star.gif) repeat-y right;
padding-right:25px;
text-align:center;
}

#scroll {
background:url(images/scroll.gif) no-repeat top center;
padding:30px 110px 200px 110px;
text-align:justify;
}

div.w {
float:left;
background:url(images/w.gif);
width:70px;
height:80px;
}

div.w span{
display:none;
}

.stuff {
color:maroon;
}

#footer{
font-size:8pt;
margin:0 auto;
width:750px;
text-align:center;
}


</style>

</head>
<body>

<div id="content1">
<div id="content2">
<img class="dog" src="images/main2.jpg" alt="" border="0" height="700" width="700">


<div id="scroll">

<p class="stuff">
<strong><div class="w"><span>W</span></div>elcome!</strong>
Loremipsum dolor sit amet, consectetuer adipiscingelit. Sed justo sapien,
aliquam eu, posuere vitae, lobortis eget, turpis. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nullam vitae tortor aliquam enim auctor luctus. In augue dolor,
pharetra ut, varius et, lacinia a, felis. Quisque dapibus felis vitae
wisi. Suspendisse ut ipsum.
</p>

</div>
</div>
</div>

<div id="footer"><p>Privacy, Accessibility | <a href="http://siochan.org/">Copyright</a> 2005 Patricia Eubank. All rights reserved. | Design by <a href="http://siochan.org/">Siochan</a>, Hosted by 1&amp;1 | Valid XHTML, CSS</p></div>



</body>

</html>



note:
this probably isnt the MOST ELEGANT OR CORRECT way to do it, and doing it for you inst the best way to learn, but look at the code and see if that clears some things up for you...

...also.... ID is for elements that appear once on a page, classes can appear multiple times. They work for determining the "Specificity" of elements....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum