CSS Forum

**angele803** · 10-06-2005, 12:49 AM

I am working on this site for my mom. Right now it is pretty roughly coded with a table layout. I had to get something up on the site quick for her. Anyway, I want to edit this to use CSS for the layout. I think I can do it except for one part. The 4 buttons at the top have me puzzled. How can I layout the top part using CSS? The site is http://www.kindletheflamecandles.com/
I have used CSS to layout my personal site ( www.decoratemyweb.com ) and I think laying out my moms site will be similar. I just cant get past the problem of setting up those buttons.
Thanks in advance for any help!

**howardroark** · 10-06-2005, 01:14 AM

Nice design for your mom's site

What's the problem with those buttons? Just use absolute positioning...

**celticbrue** · 10-06-2005, 05:22 AM

Hi there,

Try this code - I have fudged the div widths a bit to make it work in IE, but it seems okay on my set-up in both IE6 and Firefox 1.0.

HTML - make sure the code for the image tabs is all on one line or IE will add spaces!

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<title>September.jpg</title>

<link rel="stylesheet" type="text/css" href="kf1.css" />

</head>

<body>

<div id="container">

  <div id="logo"><a href="http://www.kindletheflamecandles.com"><a href="http://www.kindletheflamecandles.com"><img name="logo" src="images/logo.jpg" width="332" height="70" border="0" alt=""></a></div>

  <div id="abovetabs"></div>

  <div id="tabs"><img name="tab1" src="images/tab1.jpg" width="103" height="32" border="0" alt=""></a><a href="/scentList.html"><img name="tab2" src="images/tab2.jpg" width="100" height="32" border="0" alt=""></a><a href="/orderForm.pdf"><img name="tab3" src="images/tab3.jpg" width="100" height="32" border="0" alt=""></a><img name="tab4" src="images/tab4.jpg" width="106" height="32" border="0" alt=""></div>

  <div id="headerbar"><img name="headerBar" src="images/headerBar.jpg" width="741" height="30" border="0" alt=""></div>

  <div id="leftpanel"><img name="mainPic" src="images/mainPic.jpg" width="400" height="305" border="0" alt=""></div>
  <div id="rightpanel"><img name="newScents" src="images/newScents.jpg" width="341" height="305" border="0" alt=""></div>

  <div id="footer"><img name="footer" src="images/footer.jpg" width="741" height="33" border="0" alt=""></div>

</div><!-- end container div -->

</body>

</html>

CSS Code:

Code:

body {
      background:#fff;
      text-align:center;
      } html>body {font-size:85%;}

#container { width:744px; margin-left:auto; margin-right:auto; text-align:center;}

#logo { width:332px; height:70px; float:left;}

#abovetabs { height:38px; }

#tabs { float:left; width:412px; height:32px;} 

#headerbar { clear:both; width:744px; }

#leftpanel { float:left; width:400px; height:305px;}

#rightpanel { background:#fff; }

#footer { clear:both; width:741px; }

I'm sure someone can do it tidier, but it's still pretty lean like this. Hope it helps.

Regards
Ian

**angele803** · 10-06-2005, 04:44 PM

Thank you guys!
Thank you so much Celticbrue for working out all that code. I am at my job right now so I cant try it out, but as soon as I get home I will. This helps me out sooooo much!