I hate CSS -.- - Webmaster Forum - Web Design, Programming and SEO forums

03-21-2005, 02:38 AM

stenson

Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:

Posts: 275

iTrader: 1 / 100%

stenson is on a distinguished road

I hate CSS -.-

Please take a look at http://stenson.biz/121CA/

This is what it should look like... http://stenson.biz/for%20sale/121CA.gif

I'm currently using a system of floating DIVs, and it was working out just great until I tried to add in the right collumn. The damned thing just won't go to the top of the page. I've tried everything I can think of, and it won't budge vertically. Please.. Any help you can give me is appreciated more than you can know.

If you're too lazy to view the source, here is my CSS

/* CSS Document */

body {
margin: 0 auto;
text-align: center;
background-color: #B0E902;
font-family: Tahoma;
font-size: 10px;
color: #4A4A4A;
line-height: 18px;
}

.clear {
clear: both;
}

p, h1, h2, h3, img {
padding: 0px;
border: 0px;
margin: 0px;
}

a, a:visited {
color: #808080;
text-decoration: underline;
}

/* Wrapper - Container */
#wrapper {
width: 740px;
background-color: #fff;
background-repeat: repeat-y;
margin: 0 auto;
text-align: left;
}

#main {
float: left;
}

#logo {
float: right;
margin: 0;
}

#nav {
background-image: url(images/nav_bg.gif);
background-repeat: reapeat-x;
width: 471px;
height: 33px;
float: left;
text-align: center;
border-style: solid;
border-color: #FFF;
border-width: 0px 1px 0px 1px;
}

#welcome {
margin: 12px;
background-image: url(images/welcome.gif);
background-repeat: no-repeat;
width: 451px;
height: 112px;
float: left;
display: inline;
}

#mission {
margin: 0px 12px 0px 12px;
background-image: url(images/mission.gif);
background-repeat: no-repeat;
width: 451px;
height: 92px;
float: left;
display: inline;
}

#boxes {
margin-left: 12px;
margin-top: 12px;
width: 449px;
float: left;
display: inline;
}

.boximgs {
padding-top: 11px;
}

.boxcontent {
padding: 11px;
text-align: justify;
}

#box1 {
margin: 0;
background-image: url(images/box_bg.gif);
background-repeat: repeat-y;
width: 208px;
height: 245px;
}

#box2 {
background-image: url(images/box_bg.gif);
background-repeat: repeat-y;
width: 208px;
height: 245px;
}

#right {
width: 267px;
float: right;
display: inline;
}

.rightsection {
background-image: url(images/rt_bg.gif);
background-repeat: repeat-y;
margin: 0;
}

This is my xhtml

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>121CA - Account Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen">
@import url(style.css);
</style>

</head>

<body>
<div id="wrapper">

<div id="main">
<div style="float: left;"><img src="images/header.gif" alt="" /></div>
<div id="nav">
<a href="#"><img src="images/nav_home.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_about.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_services.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_products.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_testimonials.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_contact.gif" alt="" /></a>
</div>

<div id="welcome"><div style="text-align: justify; padding-left: 139px; padding-right: 8px; padding-top: 12px;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p></div></div>

<div id="mission"><div style="text-align: justify; padding-left: 139px; padding-right: 8px; padding-top: 12px;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</p></div></div>

<div id="boxes">

<div style="float: left;">
<div id="box1"><img src="images/casestudy_h.gif" alt="" />
<div class="boximgs"><img src="images/casestudy_img.gif" alt="" /></div>
<div class="boxcontent">Find out how we helped Beach Computers reach their goal of a 25% increase in sales. The
remarkable thing of it all.. is that we made it happen in just one quarter.</div>

</div>
<img style="margin: 0;" src="images/read-it.gif" alt="" />
</div>

<div style="float: left; margin-left: 33px;">
<div id="box2"><img src="images/recentproject_h.gif" alt="" />
<div class="boximgs"><img src="images/casestudy_img.gif" alt="" /></div>
<div class="boxcontent">Find out how we helped Beach Computers reach their goal of a 25% increase in sales. The
remarkable thing of it all.. is that we made it happen in just one quarter.</div>
</div>

<img style="margin: 0;" src="images/read-it.gif" alt="" />
</div>

</div>

</div>

<div id="right">
<img src="images/logo.gif" alt="" />
<div class="leftsection">
<img src="images/news.gif" alt="" />

<div style="padding: 8px;"><p>March 20, 2005
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
</p></div>
</div>

<div class="leftsection">
<img src="images/testimonial.gif" alt="" />
<div style="padding: 8px;"><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
<br /><strong>- Billy Bob Jenkins</strong>
</p></div>

</div>
</div>

<br class="clear" />

</div>
</body>
</html>

Thanks in advance for any advice you might be willing to lend.