Solved

DIV Question

Posted on 2008-10-12
9
255 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
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 

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
 

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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
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…

809 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