Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • Last Modified:

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;">
        <!-- Header Begins -->
        <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.

0
azyet24
Asked:
azyet24
  • 4
  • 2
  • 2
  • +1
1 Solution
 
Ali KayahanFull Stack DeveloperCommented:
can you please try to add ;

 display:block;

 To #t1headerlogo , if it doesnt work than add ;
 
  clear:both;
0
 
azyet24Author Commented:
Nope, my top image (images/t1_02.jpg) is still shifted down and t1headerlogo like it's staticly in place.
0
 
Ali KayahanFull Stack DeveloperCommented:
  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.
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!

 
azyet24Author Commented:
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">
    <!-- Main Container Begins -->
    <div id="main_container" style="background-image: url(images/t1_bg.jpg); background-repeat: repeat-x;">
        <!-- Header Begins -->
         <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>
                <td><img src="images/t1_03.jpg" /></td>
            </tr> -->                
            <tr style="background-image: url('images/t1_04.jpg'); background-repeat:repeat-y">
            <td>                  
             <!-- Navigation Begins -->
            <div id="nav" style="background-image:url(images/t1_nav.gif); background-repeat:repeat;">
                <!--#include file="controls/inc_nav.aspx"-->
            </div>
            <!-- Navigation Ends -->
             <!-- Viewport Begins -->
                <asp:ContentPlaceHolder ID="cph_viewport" runat="server">
            </asp:ContentPlaceHolder>                
            <!-- Viewport Ends -->
                </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>
        <!-- Header Ends -->        
        <!-- Footer Begins -->
        <div id="footer">
            <!--#include file="controls/inc_footer.aspx"-->
        </div>
        <!-- Footer Ends -->
    </div>
    <!-- Main Container Ends -->
    </form>
</body>
0
 
azyet24Author Commented:
Basically it is doing this:
-------------------------------------------master----------------------------------------------------
                                                      ---logo ---
-------------------------------------------header-----------------------------------------------------

Instead of:
-------------------------------------------master----------------------------------------------------
---------------------------------------header logo header----------------------------------------  => logo on top of header image
0
 
RapturerCommented:
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
0
 
azyet24Author Commented:
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?
0
 
RapturerCommented:
AZ-

Of course I don't need to tell someone with your exp. that historically tables do not like divs...they never have behaved very nicely together.

That said...

If I cant talk you into getting rid of the table and just using all div positioning, my next approach would be to first minimize your HTML element in the css to bring your table up to where you want it.

Secondly, I would without hesitation switch to absolute positioning...you are giving hard values to other elements (like the table) then use hard values (or percentages for wildcards)

Is this page live anywhere I can have a look?

-Rapturer






0
 
scrathcyboyCommented:
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.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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