|
|
|
|
Thread title: I hate CSS -.- |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
03-21-2005, 02:38 AM
|
#1
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
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.
|
|
03-21-2005, 06:34 PM
|
#2
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
Please??? I need some help ASAP.
|
|
03-21-2005, 08:02 PM
|
#3
|
Status: Junior Member
Join date: Mar 2005
Location: Belgium
Expertise:
Software:
Posts: 67
|
You're using way to much divs and inline styles in my opinion.
Anyway, I changed the width of the #right div from 267px to 265px which did the trick for me.
|
|
03-21-2005, 09:31 PM
|
#4
|
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
Posts: 2,246
|
yeah that usually happens when two children div get too close to the parent's width. i'm still not sure why it's so, but if the parent is 500, the two inside it can't be 250 and 250.
|
|
03-21-2005, 09:55 PM
|
#5
|
Status: Request a custom title
Join date: Jan 2005
Location: UK
Expertise:
Software:
Posts: 1,216
|
It looks alright to me, has it been fixed?
|
|
03-21-2005, 09:56 PM
|
#6
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
Thanks for leading me in the right direction. The problem was that the welcome and mission boxes PLUS the margins I had set PLUS the width of the column was 2 px to large for the container.
http://www.stenson.biz/121CA/
Problem resolved!
|
|
04-02-2005, 04:59 PM
|
#7
|
Status: I'm new around here
Join date: Mar 2005
Location:
Expertise:
Software:
Posts: 19
|
CSS2 came out
CSS2 came out...
|
|
04-03-2005, 03:44 AM
|
#8
|
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
Posts: 445
|
I'm too lazy to read your source
|
|
04-03-2005, 04:41 AM
|
#9
|
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
Posts: 275
|
This was fixed a while ago.. no need to keep posting in this thread.
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|