PDA

Click to See Complete Forum and Search --> : HELP PLEASE! with margin problem!! =)

DesignIt
11-07-2006, 08:23 PM
Hi everyone!

I am having problems with the below css coding. I can't get the first box to line up. As you can see, it shifts down into the next box.

Any ideas why??

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.content_prdct_str {
width: 322;
height: 261;
padding: 0px;
margin: 0px 0px 0px 10px;
text-align:left;
vertical-align: top;
}

.prdctboxes_str_a {
text-align: left; width: 105px; float: left;
border-top: #B4BBBE solid 1px;
border-left: #B4BBBE solid 1px;
border-right: #B4BBBE dashed 1px;
border-bottom: #B4BBBE dashed 1px; display: inline;
}

.prdctboxes_str_b {
text-align: left; width: 106px; height: 129px; float: left;
border-top: #B4BBBE solid 1px;
border-right: #B4BBBE dashed 1px;
border-bottom: #B4BBBE dashed 1px;
}

.prdctboxes_str_c {
text-align: left; width: 106px; height: 129px; float: left;
border-top: #B4BBBE solid 1px;
border-right: #B4BBBE solid 1px;
border-bottom: #B4BBBE dashed 1px;
}

.prdctboxes_str_d {
text-align: left; width: 105px; height: 129px; float: left;
border-left: #B4BBBE solid 1px;
border-right: #B4BBBE dashed 1px;
border-bottom: #B4BBBE solid 1px;
}

.prdctboxes_str_e {
text-align: left; width: 106px; height: 129px; float: left;
border-right: #B4BBBE dashed 1px;
border-bottom: #B4BBBE solid 1px;
}

.prdctboxes_str_f {
text-align: left; width: 106px; height: 129px; float: left;
border-right: #B4BBBE solid 1px;
border-bottom: #B4BBBE solid 1px;
}

.interiorboxes_str {
text-align: center;
}

.sdboxes_str {
text-align: left; margin: 4px 0px 0px 4px;
}

.prdctlinks_str {
text-align: center; margin: 0px; padding: 0px; height: 19px;
}

a.nav7_str:link {font-style: normal; color: #64686B; text-decoration: underline;}
a.nav7_str:active {font-style: normal; color: #64686B; text-decoration: underline;}
a.nav7_str:hover {font-style: normal; color: #64686B; text-decoration: none;}
a.nav7_str:visited {font-style: normal; color: #64686B; text-decoration: none;}

-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<div class="content_prdct_str">
<div class="prdctboxes_str_a">
<div class="sdboxes_str"><img name="Placeholder_button" src="" width="63" height="11" alt="placeholder_button"></div>
<div class="interiorboxes_str"><img name="Placeholder" src="" width="86" height="95" alt="placeholder"></div>
<div class="prdctlinks_str"><a href="*" class="nav7_str">Title1</a> </div>
</div>

<div class="prdctboxes_str_b">Title2</div>
<div class="prdctboxes_str_c">Title3 </div>
</div>

<div class="content_prdct_str">
<div class="prdctboxes_str_d">Title4</div>
<div class="prdctboxes_str_e">Title5</div>
<div class="prdctboxes_str_f">Title6</div>
</div>
</td>
</tr>
</table>
</body>
</html>
chris_bcn
11-07-2006, 08:55 PM
I'm not sure what you're wanting to do there.

It would be easier to have that as a list and float the li elements I think - do you have amock-up of what it's meant to look like.

What you have is a serious case of divitis - you can't replace <td> with <div> - it doesn't work that way
chris_bcn
11-07-2006, 09:04 PM
I might be missing what you want but :

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
<!--
ul{
list-style: none;
}
li{
display:block;
width:106px;
height:129px;
border:1px dashed #B4BBBE;
float:left;
}
-->
/*]]>*/
</style>
</head>
<body>
<ul>
<li>Title 1
<p>This is text</p>
</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
</ul>
</body>
</html>
DesignIt
11-07-2006, 09:04 PM
I'm not sure what you're wanting to do there.

It would be easier to have that as a list and float the li elements I think - do you have amock-up of what it's meant to look like.

What you have is a serious case of divitis - you can't replace <td> with <div> - it doesn't work that way

Yeah, I typically would have done this type of thing with table elements but I was trying to brake away and use more CSS. If there is a better way of doing it I am all for it. =)

I'm thinking your above response will work, I will give that a try.
chris_bcn
11-07-2006, 09:44 PM
You need to change the way you're looking at web design.

Look at the page and work the best way to put it together.

You need to break it down into it's sections, or divisions.

You need a div to wrap everything in.
then you need a div to hold the header and one to hold the footer.
you need 2 divs for the main content, placed side by side

That will give you your basic structure

<div id="wrapper">
<div id="header">
<ul>
<li><a href="link>Link</a>
etc.
<div>
<div id="content-a">
This is the content on the left
</div>
<div id="content-b">
This is the content on the right">
</div>
<div id="footer">

</div>
</div>

Then you fill in the divs with content. Easier said than done, but that's the basic idea.

Dunno if that was helpful ata ll, but it distracted me from the dull stuff I'm doing at the moment, so it worked for me! :p
DesignIt
11-07-2006, 11:06 PM
yeah, i understand all that. I think trying to get all those boxes lined up using pure css just threw me off. I am going to step away from the comp and look at it fresh later. thanks for the input.