asked on

DIV Question

I know this is very simple, but it is escaping me how to get this to work. I have a master DIV and then inside it I have a table and several other DIV's. See below:
<div id="main_container" style="background-image: url(images/t1_bg.jpg); background-repeat: repeat-x;">

<div id="t1headerlogo">
<asp:Label ID="lblHeaderLogo" runat="server">Logo here</asp:Label>
</div>
<table width="900px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="images/t1_02.jpg" /></td>
</tr>
......
CSS
#main_container {
      position:relative;
      top:0;
      left:0;
      width:100%;
      height:100%;
}

#t1headerlogo {
      position:relative;
      top:73px;
      left:50px;
      width:272px;
      height:60px;
      margin:0 auto;
text-align: center;
}

===========

I want the t1headerlogo div to be on top of <img src="images/t1_02.jpg" />, but it is not working.

Ali Kayahan

can you please try to add ;

display:block;

To #t1headerlogo , if it doesnt work than add ;

clear:both;

azyet24

ASKER

Nope, my top image (images/t1_02.jpg) is still shifted down and t1headerlogo like it's staticly in place.

Ali Kayahan

I am just not so clear with your issue , if you have any link of kind of photo it would be much more better with providing exact code block.

But you should apply the fixes above with removing position:relative clause.

azyet24

ASKER

No that didn't work and I'm not sure how to expose this to you as it's on my localhost. Here's the full html. This is using ASP.NET Masterpages.

<body>
<form id="form1" runat="server">

<div id="main_container" style="background-image: url(images/t1_bg.jpg); background-repeat: repeat-x;">

<div id="t1headerlogo">
<asp:Label ID="lblHeaderLogo" runat="server">Logo here</asp:Label>
</div>
<table width="900px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="images/t1_02.jpg" /></td>
</tr>

<tr style="background-image: url('images/t1_04.jpg'); background-repeat:repeat-y">
<td>

<div id="nav" style="background-image:url(images/t1_nav.gif); background-repeat:repeat;">

</div>


<asp:ContentPlaceHolder ID="cph_viewport" runat="server">
</asp:ContentPlaceHolder>

</td>
</tr>
<tr><td><img src="images/t1_06.jpg"</td></tr>
</table>
<div id="header">
<asp:ContentPlaceHolder ID="cph_header" runat="server">
</asp:ContentPlaceHolder>
</div>


<div id="footer">

</div>

</div>

</form>
</body>

azyet24

ASKER

Basically it is doing this:
-------------------------------------------master----------------------------------------------------
---logo ---
-------------------------------------------header-----------------------------------------------------

Instead of:
-------------------------------------------master----------------------------------------------------
---------------------------------------header logo header---------------------------------------- => logo on top of header image

Rapturer

Hi Azyet -

I Think this should be an easy one...

To use the type of positioning you want and then order the images/layers...just adjust your z-index in the css:

#t1headerlogo {
position:relative;
top:73px;
left:50px;
width:272px;
height:60px;
margin:0 auto;
text-align: center;
z-index:1000;
}

And/or (if you want) add lesser or negative values to anything you want beneath (-100)

That should fix you up.

Best,

Rapturer

azyet24

ASKER

Rapturer,

This positioned the t1headerlogo down on the page (good), but this layer is still taking a position above the header image:

<div id="t1headerlogo">
<asp:Label ID="lblHeaderLogo" runat="server">Logo here</asp:Label>
</div>
<table width="900px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="images/t1_02.jpg" /></td>
</tr>

How do I get the table to be flush top of browser and still get this lable to lay on top of t1_02.jpg image?

ASKER CERTIFIED SOLUTION

Rapturer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scrathcyboy

Divs with tables inside, then more DIVs inside that -- it doesn't work very well for X-browser compatibility. If you want a DIV layout, delete the table structure and use DIVs and spans all the way through. If you want a table layout, use only a table layout. You can position tables perfectly well without any DIVs. It is a bit harder to position DIVs without any table layout, but people are doing it all the time, every day.

The new browsers like IE7 and FF3 will not render DIV-Table-DIV nested layouts consistently X browser.