Solved

DIV Question

Posted on 2008-10-12
9
252 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

863 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

21 Experts available now in Live!

Get 1:1 Help Now