Solved

Stacking DIV's on top of each other  - most fluid way

Posted on 2008-10-09
7
3,000 Views
Last Modified: 2012-08-14
I am wondering what is the best method to stacking DIV's on top of each other. I have read some info on some forums about it, but nothing really helped. My HTML looks like:

<img src="images/card.png" alt="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" title="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" width="779" height="507" border="0" class="top_layer" />
            
            <div class="bottom_layer">
                  <p>Here is my content.</p>
            </div>

i have my page being centered using margin:0 auto; and am not sure on how I can get it right behind the other one.

Thoughts?

Thank you in advance,

Ryan
img.top_layer{

	z-index:1;

}

div.bottom_layer{

	z-index:0;

	background-image:url(images/card-info.png);

	background-repeat:no-repeat;

	height:465px;

	width:709px;	

}

Open in new window

0
Comment
  • 4
  • 3
7 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 22684734
z-index only applies to positioned elements.  One of them needs to be absolutely positioned and the other need to be also or have position:relative.

P.S. Are you sure that you're using the alt attribute appropriately? Does it really say that in the image?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 22686242
So in the long run, it does need absolute? Yeah, my image does say that, haha.. thank you! :)

What should I do because wont it appear different on different browsers because of resolution?
0
 
LVL 42

Expert Comment

by:David S.
ID: 22687269
While the ways to center non-absolutely positioned elements are better, there is a way to center an absolutely positioned element. For more information see: http://www.dynamicsitesolutions.com/css/center-element/
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.

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 22690077
I took a look at the earlier, then came back read it again and worked it in to my code, but my image doesn't seem like it is in the center, the front image that is. My css for it is:

div.top_layer{
      position:absolute;
      width:779px;
        margin-left: auto;
       margin-right: auto;
       text-align: left;
      z-index:1;
}

And HTML:

      <div class="top_layer">
                  <img src="images/card.png" alt="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" title="my name is ryan coughlin and im a web and graphic designer, this is what I do. im good at php, css, xhtml, javascript. and yes, im for hire" width="779" height="507" border="0" />
            </div>
            
            <div class="bottom_layer">
                  <p>This is the kind of stuff I like to do.</p>
            </div>

You can go to ryancoughlin.com to check it out for a live example, also I am in FF 3.0/Mac Leopard

Thank you for your help.

Ryan
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 22690497
Sorry. I should have been more specific. Auto margins don't work in absolutely positioned elements, so you need to use the first technique shown on that page.

Try this:

div.top_layer {

  left: 50%;

  margin-left: -385px;

  position: absolute;

  text-align: left;

  width: 779px;

  z-index: 2;

}

div.bottom_layer {

  background-image: url(../images/card-info.png);

  background-repeat: no-repeat;

  border: 1px solid red;

  height: 420px;

  margin: 0 auto;

  padding: 40px;

  width: 640px;

  z-index: 1;

}

Open in new window

0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 22778962
Nice! So this "should" center it 50% absolutely?

Thanks again!

Ryan
0
 
LVL 42

Expert Comment

by:David S.
ID: 22781044
You're welcome.

Yes, that's how to center absolutely positioned elements.
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

Suggested Solutions

Title # Comments Views Activity
get multiple images to align right 5 44
FIELDSETs and LEGENDs in email markup 1 13
bootstrap footer centering and expand problems 7 29
Not seen Link button 5 17
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 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

17 Experts available now in Live!

Get 1:1 Help Now