• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1774
  • Last Modified:

DIV format

I have not used divs much at all so this may be a simple question although I have spent to much time on it thus far.

 In simplified form here is what I am trying to accomplish.

 3 to 8 columns from left to right. in each column having 48 rows. able to have content in a div float above a specific coumn and start at any row secified and stop at any row in that cell.

 I thought i could just set the x, y, width and hieght of the floating div although I can't get it to work.

any thoughts

<div id="wrapper">
  <div id="a1" style="width:200px;">
    <div id="a1_h1" style=" background-color:#0099FF">111</div>
    <div id="a1_h2" style="background-color:#FFFF99">222</div>
    <div id="a1_h3" style=" background-color:#0099FF">333</div>
    <div id="a1_h4" style="background-color:#FFFF99">444</div>
    <div id="a1_h5" style=" background-color:#0099FF">555</div>
    <div id="a1_h6" style="background-color:#FFFF99">666</div>
    <div id="a1E1" style="position: relative;z-index: 0; left:0px; top:5px;"> LEFT FLOAT</div>
  </div>
  <div id="a2" style="width:200px;">
    <div id="a2_h1" style=" background-color:#00CC66">111</div>
    <div id="a2_h2" style="background-color:#CC6666">222</div>
    <div id="a2_h3" style=" background-color:#00CC66">333</div>
    <div id="a2_h4" style="background-color:#CC6666">444</div>
    <div id="a2_h5" style=" background-color:#00CC66">555</div>
    <div id="a2_h6" style="background-color:#CC6666">666</div>
    <div id="a2E1" style="position: relative;z-index: 0; left:0px; top:5px;"> RIGHT FLOAT</div>
  </div>
</div>

Open in new window

0
JsonTerre1
Asked:
JsonTerre1
  • 4
  • 4
1 Solution
 
abelCommented:
If all the code you are using is the above code, then you will need a bit more on it. You say floating div, what's the CSS that is attached to the above? If not or nothing, then the divs are not yet floating. If you have some more CSS, can you show that, please?
0
 
abelCommented:
Here's your code amended such that it has become a whole page. For easiness, I added classes, because if you want to go on with these unique IDs it will become hard to manage. I named the classes rabel, row, cell, so you understand what  the meaning of the styles on those classes is, but you can choose any name.

Note that floating divs can give quite some compatibility problems and can be hard to get and keep right. Below is a simple working example. Make sure that the width of each cel matches the width of that column.

The example is not perfect, but it gives you a good starting point.


<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        div.table {
        }
        div.row {
            width: auto;
            clear:both;
        }
        div.cell {
            width: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="wrapper" class="table">
      <div id="a1" class="row">
        <div id="a1_h1" class="cell" style=" background-color:#0099FF">111</div>
        <div id="a1_h2" class="cell" style="background-color:#FFFF99">222</div>
        <div id="a1_h3" class="cell" style=" background-color:#0099FF">333</div>
        <div id="a1_h4" class="cell" style="background-color:#FFFF99">444</div>
        <div id="a1_h5" class="cell" style="background-color:#0099FF">555</div>
        <div id="a1_h6" class="cell" style="background-color:#FFFF99">666</div>
        <div id="a1E1" class="cell" style="background-color:#0099FF">777</div>
      </div>
      <div id="a2" class="row">
        <div id="a2_h1" class="cell"  style=" background-color:#00CC66">111</div>
        <div id="a2_h2" class="cell"  style="background-color:#CC6666">222</div>
        <div id="a2_h3" class="cell"  style=" background-color:#00CC66">333</div>
        <div id="a2_h4" class="cell"  style="background-color:#CC6666">444</div>
        <div id="a2_h5" class="cell"  style=" background-color:#00CC66">555</div>
        <div id="a2_h6" class="cell"  style="background-color:#CC6666">666</div>
        <div id="a2E1" class="cell"  style="background-color:#0099FF">777</div>
      </div>
    </div>
</body>
</html>

Open in new window

0
 
JsonTerre1Author Commented:
I may have not been very clear on my explaining. Attached is an image of what i am trying to attemp.

I would like Div tags to make my columns and rows which are always the same size. Then have the ability to have another div expand the hieght and over lap row by starting on any row and ending on any row.

If you view the jpg you will see what i mean.

thank you much.
j
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JsonTerre1Author Commented:
For some reason the file did not attach. Here a link to the image:

http://test.lantraxarc.lantraxuat.com/Div_Test.jpg
0
 
abelCommented:
Ok, I changed it in such a way that you can add any amount of DIVs to the rows/cells, and those extra DIVs.

The solution will work on compliant browsers, IE8, Opera, Safari and FireFox. IE7 and lower will have problems with it and those you can only solve with javascript. The IE7 problem is the z-index. Either place all the absolute positioned divs at the end, or use a javascript to loop through the absolute positioned divs and give them a higher z-index. Jquery or Prototype javascript libraries can help you with that.

<!DOCTYPE html PUBLIC 
	"-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>test</title>
	<style type="text/css">
		div.table {
		}
		div.row {
			width: auto;
			clear:both;
			position:relative;
		}
		div.cell {
			width: 80px;
			float: left;
		}
	</style>
</head>
<body>
	<div id="wrapper" class="table">
	  <div id="a1" class="row">
		<div id="a1_h1" class="cell" style=" background-color:#0099FF">111</div>
		<div id="a1_h2" class="cell" style="background-color:#FFFF99">222</div>
		<div id="a1_h3" class="cell" style=" background-color:#0099FF">333</div>
		<div id="a1_h4" class="cell" style="background-color:#FFFF99">444</div>
		<div style="position:absolute;z-index:1000;left:20px;top:10px;width:50px;height:80px;background-color:Fuchsia;opacity:0.8;">FLOAT</div>
		<div id="a1_h5" class="cell" style="background-color:#0099FF">555</div>
		<div id="a1_h6" class="cell" style="background-color:#FFFF99">666</div>
		<div id="a1E1" class="cell" style="background-color:#0099FF">777</div>
	  </div>
	  <div id="a2" class="row">
		<div id="a2_h1" class="cell"  style=" background-color:#00CC66">111</div>
		<div id="a2_h2" class="cell"  style="background-color:#CC6666">222</div>
		<div id="a2_h3" class="cell"  style=" background-color:#00CC66">333</div>
		<div id="a2_h4" class="cell"  style="background-color:#CC6666">444</div>
		<div id="a2_h5" class="cell"  style=" background-color:#00CC66">555</div>
		<div id="a2_h6" class="cell"  style="background-color:#CC6666">666</div>
		<div style="position:absolute;left:80px;top:10px;z-index:1000;width:30px;height:60px;background-color:Fuchsia;opacity:0.8;">FLOAT</div>
		<div id="a2E1" class="cell"  style="background-color:#0099FF">777</div>
	  </div>
	  <div id="Div1" class="row">
		<div id="Div2" class="cell"  style=" background-color:#00CC66">111</div>
		<div id="Div3" class="cell"  style="background-color:#CC6666">222</div>
		<div id="Div4" class="cell"  style=" background-color:#00CC66">333</div>
		<div id="Div5" class="cell"  style="background-color:#CC6666">444</div>
		<div id="Div6" class="cell"  style=" background-color:#00CC66">555</div>
		<div id="Div7" class="cell"  style="background-color:#CC6666">666</div>
		<div id="Div8" class="cell"  style="background-color:#0099FF">777</div>
	  </div>
	</div>
</body>
</html>

Open in new window

0
 
JsonTerre1Author Commented:
abel,

this is very close to what i am looking for. The last thing that it is not doing is placing the div X Y relative to the wrapper DIV.  So FLOAT 1 and FLOAT 2 are setting the X Y to the actull <div id="wrapper" class="table"> div.

That way I never have to worry about the browser window. the coordinates are always based on teh wrapper div. Is this possible. I am soooo green at DIVs it is not funny.

thank you again.
j
<div id="wrapper" class="table">
	  <div id="a1" class="row">
		<div id="a1_h1" class="cell" style=" background-color:#0099FF">111</div>
		<div id="a1_h2" class="cell" style="background-color:#FFFF99">222</div>
		<div id="a1_h3" class="cell" style=" background-color:#0099FF">333</div>
		<div id="a1_h4" class="cell" style="background-color:#FFFF99">444</div>
		<div id="a1_h5" class="cell" style="background-color:#0099FF">555</div>
		<div id="a1_h6" class="cell" style="background-color:#FFFF99">666</div>
		<div id="a1E1" class="cell" style="background-color:#0099FF">777</div>
	  </div>
	  <div id="a2" class="row">
		<div id="a2_h1" class="cell"  style=" background-color:#00CC66">111</div>
		<div id="a2_h2" class="cell"  style="background-color:#CC6666">222</div>
		<div id="a2_h3" class="cell"  style=" background-color:#00CC66">333</div>
		<div id="a2_h4" class="cell"  style="background-color:#CC6666">444</div>
		<div id="a2_h5" class="cell"  style=" background-color:#00CC66">555</div>
		<div id="a2_h6" class="cell"  style="background-color:#CC6666">666</div>
		<div id="a2E1" class="cell"  style="background-color:#0099FF">777</div>
	  </div>
	  <div id="Div1" class="row">
		<div id="Div2" class="cell"  style=" background-color:#00CC66">111</div>
		<div id="Div3" class="cell"  style="background-color:#CC6666">222</div>
		<div id="Div4" class="cell"  style=" background-color:#00CC66">333</div>
		<div id="Div5" class="cell"  style="background-color:#CC6666">444</div>
		<div id="Div6" class="cell"  style=" background-color:#00CC66">555</div>
		<div id="Div7" class="cell"  style="background-color:#CC6666">666</div>
		<div id="Div8" class="cell"  style="background-color:#0099FF">777</div>
	  </div>
 
 
		<div style="position:absolute;z-index:1000;left:20px;top:10px;width:50px;height:80px;background-color:Fuchsia;opacity:0.8;">FLOAT 1</div>
 
		<div style="position:absolute;left:80px;top:10px;z-index:1000;width:30px;height:60px;background-color:Fuchsia;opacity:0.8;">FLOAT 2</div>
 
	</div>

Open in new window

0
 
abelCommented:
> So FLOAT 1 and FLOAT 2 are setting the X Y to the actull..snip.. wrapper..snip...
no, not really, it is relative to the row div. You didn't paste the code correctly if that happens. To make them relative to the row, you need the position:relative on the parent div, which is, indeed, the row. If you want them relative to the cell, you need to place the absolutely positioned div inside the cell and give the div.cell a style for position:relative.

Check the code you implemented and look for that line position:relative. It is a CSS rule that if you absolutely position a div it will take the parent element that has any (except static) type of positioning.

-- Abel --
0
 
JsonTerre1Author Commented:
abel,
What is missing is the ability to overlap a complete column. For instance... a single div overlapping the entire 2222 column on all rows. In this URL http://test.lantraxarc.lantraxuat.com/Div_Test.jpg you can see what I mean. For some reason I can only get the div to hover over an entire row.

Can you show me how this can be done. I've been looking on the net and messing with the markup for some time with no results.

j
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now