Why isn't column 6 floating next to the other 5 columns???
Here's the html:
<div id="a_2">
<div class="a_2_1">
</div>
<div class="a_2_2">
</div>
<div class="a_2_3">
</div>
<div class="a_2_4">
</div>
<div class="a_2_5">
</div>
<div class="a_2_6">
</div>
</div>
and the css:
* html #a_2 {
margin-top: -1px;
float: left;
}
.a_2_1 {
background: url(../images/2_1.gif);
width: 24px;
height: 103px;
float: left;
}
.a_2_2 {
background: url(../images/2_2.gif);
width: 236px;
height: 103px;
float: left;
}
.a_2_3 {
background: url(../images/2_4.gif);
width: 126px;
height: 103px;
float: left;
}
.a_2_4 {
background: url(../images/2_5.gif);
width: 360px;
height: 103px;
float: left;
}
.a_2_5 {
background: url(../images/2_6.gif);
width: 34px;
height: 103px;
float: left;
}
.a_2_6 {
background: url(../images/2_7.gif);
width: 24px;
height: 103px;
margin-left: 776px;
}
* html .a_2_6 {
margin-top: -103px;
}
I can't figure out why I have to use the last bit of code "* html....margin-top: -103px;" to get the image 2_7.gif to the position where it's supposed to be. The image is 103px in height so I am basically moving it up.
Why isn't it floating next to the other 5 columns???
ThxThis might be one of IE's rouding errors. Try increasing the left margin.Thx, increasing the left didn't work. It drops the last div down 103px if I don't use the negative margin.
I'm sure it's clear as to what I am trying to do here, I am doing it the right way??
I'm trying to change a site that uses tables for image placement to CSS. The div's and css I show above is the second row of the page. Each row has different numbers of columns. the first and third rows have 3 columns but row 2 has 6.
What's the best way to get alot of pictures to line up beside each other??
Thx...I'm sure it's clear as to what I am trying to do hereThat may not be a good assumption.Have you tried floating ".a_2_6" left?cmon Ray - if I thought anyone could see what I am doing it's you!!!
Six columns, specified widths and hieghts, images as backgrounds....hmmmmm!
maybe your right, that could be anything, lol!yes, i tried to float it left but then it appears on the left side and still 103px below the rest of the row.Without knowing the width of #a_2, I don't think we can do much more to help.
Which browsers are you testing in anyway?sorry, i am testing IE 6 and FF (the newest one) IE is the one throwing the problems of course - FF displays fine as the code is.
the width of a_2 and all rows is 800px
if the width's don't add up right now it may be that I have been trying everything I know to make IE put the image where it goes and I have adjusted every number at least twice.
<!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" xml:lang="en" lang="en">
<head><title>table to css...</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"css_style/styles.css" type="text/css" />
</head>
<body>
<div id="in_center">
<div id="a_1">
<div class="a_1_1">
</div>
<div class="a_1_2">
</div>
<div class="a_1_3">
</div>
</div>
<div id="div_clear"></div>
<div id="a_2">
<div class="a_2_1">
</div>
<div class="a_2_2">
</div>
<div class="a_2_3">
</div>
<div class="a_2_4">
</div>
<div class="a_2_5">
</div>
<div class="a_2_6">
</div>
</div>
<div id="div_clear"></div>
</div>
</body>
</html>
and the css
body {
background: url(../images/bg.gif);
}
#in_center {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
border: 1px solid blue;
}
#div_clear {
clear: both;
}
#a_1 {
}
.a_1_1 {
background: url(../images/1_2.gif);
width: 34px;
height: 18px;
float: left;
margin-left: 20px;
}
* html .a_1_1 {
margin-left: 10px;
}
.a_1_2 {
background: url(../images/1_3.gif);
width: 692px;
height: 18px;
float: left;
}
.a_1_3 {
background: url(../images/1_6.gif);
width: 34px;
height: 18px;
float: left;
}
* html #a_2 {
margin-top: -1px;
}
.a_2_1 {
background: url(../images/2_1.gif);
width: 24px;
height: 103px;
float: left;
}
.a_2_2 {
background: url(../images/2_2.gif);
width: 236px;
height: 103px;
float: left;
}
.a_2_3 {
background: url(../images/2_4.gif);
width: 126px;
height: 103px;
float: left;
}
.a_2_4 {
background: url(../images/2_5.gif);
width: 360px;
height: 103px;
float: left;
text-align: right;
}
.a_2_5 {
background: url(../images/2_6.gif);
width: 34px;
height: 103px;
float: left;
}
.a_2_6 {
background: url(../images/2_7.gif);
width: 24px;
height: 103px;
margin-left: 776px;
}
* html .a_2_6 {
margin-top: -103px;
}Those widths add up to 804px.
Do you really need all of those images to be separate?
I suggest that you read these:
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.htmlwell">http://www.positioniseverything.net/eas ... g.htmlwell</a><!-- m -->, i guess not all of them need to be seperate. I have a page that is all tables and nested tables and nested tables........
I am trying to transform it into css so I have the images all spliced up because they went into <td>'s all over the place making the picture complete.
This is my first attempt at transforming tables into css and it's pretty difficult - FF shows the pics like they're supposed to be but it's IE that's messing it up - guess I should get used to that, huh!
I haven't read csscreator - but I have been all through PIE without any answers. Oh well, I'll just keep trying - i know there is a simple solution to changing a table layout into css, I just don't know what it is, yet!
going to csscreator - brbI just used this a_2 selector and dumped that last * html style entirely and it seemed to work fine.
#a_2 {
margin-top: -1px;
float: left;
}you know i tried that before Ray and it didn't work but it does now so I must have had a typo or something - i may not have gotten everything else back to where it was supposed to be first. either way, that fixed it - thanks alot
Kravvitz - it's 802px,
thx for the help
Here's the html:
<div id="a_2">
<div class="a_2_1">
</div>
<div class="a_2_2">
</div>
<div class="a_2_3">
</div>
<div class="a_2_4">
</div>
<div class="a_2_5">
</div>
<div class="a_2_6">
</div>
</div>
and the css:
* html #a_2 {
margin-top: -1px;
float: left;
}
.a_2_1 {
background: url(../images/2_1.gif);
width: 24px;
height: 103px;
float: left;
}
.a_2_2 {
background: url(../images/2_2.gif);
width: 236px;
height: 103px;
float: left;
}
.a_2_3 {
background: url(../images/2_4.gif);
width: 126px;
height: 103px;
float: left;
}
.a_2_4 {
background: url(../images/2_5.gif);
width: 360px;
height: 103px;
float: left;
}
.a_2_5 {
background: url(../images/2_6.gif);
width: 34px;
height: 103px;
float: left;
}
.a_2_6 {
background: url(../images/2_7.gif);
width: 24px;
height: 103px;
margin-left: 776px;
}
* html .a_2_6 {
margin-top: -103px;
}
I can't figure out why I have to use the last bit of code "* html....margin-top: -103px;" to get the image 2_7.gif to the position where it's supposed to be. The image is 103px in height so I am basically moving it up.
Why isn't it floating next to the other 5 columns???
ThxThis might be one of IE's rouding errors. Try increasing the left margin.Thx, increasing the left didn't work. It drops the last div down 103px if I don't use the negative margin.
I'm sure it's clear as to what I am trying to do here, I am doing it the right way??
I'm trying to change a site that uses tables for image placement to CSS. The div's and css I show above is the second row of the page. Each row has different numbers of columns. the first and third rows have 3 columns but row 2 has 6.
What's the best way to get alot of pictures to line up beside each other??
Thx...I'm sure it's clear as to what I am trying to do hereThat may not be a good assumption.Have you tried floating ".a_2_6" left?cmon Ray - if I thought anyone could see what I am doing it's you!!!
Six columns, specified widths and hieghts, images as backgrounds....hmmmmm!
maybe your right, that could be anything, lol!yes, i tried to float it left but then it appears on the left side and still 103px below the rest of the row.Without knowing the width of #a_2, I don't think we can do much more to help.
Which browsers are you testing in anyway?sorry, i am testing IE 6 and FF (the newest one) IE is the one throwing the problems of course - FF displays fine as the code is.
the width of a_2 and all rows is 800px
if the width's don't add up right now it may be that I have been trying everything I know to make IE put the image where it goes and I have adjusted every number at least twice.
<!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" xml:lang="en" lang="en">
<head><title>table to css...</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"css_style/styles.css" type="text/css" />
</head>
<body>
<div id="in_center">
<div id="a_1">
<div class="a_1_1">
</div>
<div class="a_1_2">
</div>
<div class="a_1_3">
</div>
</div>
<div id="div_clear"></div>
<div id="a_2">
<div class="a_2_1">
</div>
<div class="a_2_2">
</div>
<div class="a_2_3">
</div>
<div class="a_2_4">
</div>
<div class="a_2_5">
</div>
<div class="a_2_6">
</div>
</div>
<div id="div_clear"></div>
</div>
</body>
</html>
and the css
body {
background: url(../images/bg.gif);
}
#in_center {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
border: 1px solid blue;
}
#div_clear {
clear: both;
}
#a_1 {
}
.a_1_1 {
background: url(../images/1_2.gif);
width: 34px;
height: 18px;
float: left;
margin-left: 20px;
}
* html .a_1_1 {
margin-left: 10px;
}
.a_1_2 {
background: url(../images/1_3.gif);
width: 692px;
height: 18px;
float: left;
}
.a_1_3 {
background: url(../images/1_6.gif);
width: 34px;
height: 18px;
float: left;
}
* html #a_2 {
margin-top: -1px;
}
.a_2_1 {
background: url(../images/2_1.gif);
width: 24px;
height: 103px;
float: left;
}
.a_2_2 {
background: url(../images/2_2.gif);
width: 236px;
height: 103px;
float: left;
}
.a_2_3 {
background: url(../images/2_4.gif);
width: 126px;
height: 103px;
float: left;
}
.a_2_4 {
background: url(../images/2_5.gif);
width: 360px;
height: 103px;
float: left;
text-align: right;
}
.a_2_5 {
background: url(../images/2_6.gif);
width: 34px;
height: 103px;
float: left;
}
.a_2_6 {
background: url(../images/2_7.gif);
width: 24px;
height: 103px;
margin-left: 776px;
}
* html .a_2_6 {
margin-top: -103px;
}Those widths add up to 804px.
Do you really need all of those images to be separate?
I suggest that you read these:
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.htmlwell">http://www.positioniseverything.net/eas ... g.htmlwell</a><!-- m -->, i guess not all of them need to be seperate. I have a page that is all tables and nested tables and nested tables........
I am trying to transform it into css so I have the images all spliced up because they went into <td>'s all over the place making the picture complete.
This is my first attempt at transforming tables into css and it's pretty difficult - FF shows the pics like they're supposed to be but it's IE that's messing it up - guess I should get used to that, huh!
I haven't read csscreator - but I have been all through PIE without any answers. Oh well, I'll just keep trying - i know there is a simple solution to changing a table layout into css, I just don't know what it is, yet!
going to csscreator - brbI just used this a_2 selector and dumped that last * html style entirely and it seemed to work fine.
#a_2 {
margin-top: -1px;
float: left;
}you know i tried that before Ray and it didn't work but it does now so I must have had a typo or something - i may not have gotten everything else back to where it was supposed to be first. either way, that fixed it - thanks alot
Kravvitz - it's 802px,
thx for the help