Solved

DIV Question

Posted on 2008-10-12
9
251 Views
Last Modified: 2010-04-09
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
Comment
Question by:azyet24
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 22697878
can you please try to add ;

 display:block;

 To #t1headerlogo , if it doesnt work than add ;
 
  clear:both;
0
 

Author Comment

by:azyet24
ID: 22698076
Nope, my top image (images/t1_02.jpg) is still shifted down and t1headerlogo like it's staticly in place.
0
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 22698097
  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
 

Author Comment

by:azyet24
ID: 22698131
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:azyet24
ID: 22698135
Basically it is doing this:
-------------------------------------------master----------------------------------------------------
                                                      ---logo ---
-------------------------------------------header-----------------------------------------------------

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

Expert Comment

by:Rapturer
ID: 22699051
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
 

Author Comment

by:azyet24
ID: 22699065
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
 
LVL 1

Accepted Solution

by:
Rapturer earned 500 total points
ID: 22699125
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22699312
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now