471,605 Members | 1,503 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Unintentional Nesting?

Hey all,

I centered a image in the middle of the page using this code, works great:

Expand|Select|Wrap|Line Numbers
  1. .header img {
  2.   margin: 0px 0px 0px 0px;
  3.   position: absolute;
  4.   left: 50%;
  5.   margin-left: -300px;
  6.   top: 50%;
  7.   margin-top: -300px;
  8.   border: 1px solid #660000; 
  9.   }
So then, I want to display a line of text underneath it, so that stays centered underneath the header image. I thought this code would work, but it doesn't,

Expand|Select|Wrap|Line Numbers
  1. .contact p {
  2.   margin: 0px 0px 0px 0px;
  3.   position: absolute;
  4.   left: 50%;
  5.   margin-left: -300px; 
  6.   top: 70%;
  7.   margin-top: -300px; 
  8.   }  
It seems like even though I have closed out the first div, and moved onto a different div the browsers are still trying to put the text inside the first div, on top of the image? Why would it do that?? The first div is closed out.

Here is my HTML

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>List Enterprises</title>
  4. <link href="style.css" rel="stylesheet" type="text/css">
  5. </head>
  7. <body>
  8. <div class="header"><img src="center.jpg"></div>
  9. <div class="contact"><p>contact info: Trevor List | <a href="mailto:trevor@listenterprises.com">trevor@listenterprises.com</a> | 614.563.5789</p></div>
  11. </body>
  12. </html>
Aug 15 '07 #1
2 1047
7,435 Expert 4TB
Remember that absolutely positioned elements are removed from the normal flow and are positioned relative to the next positioned element. <body> in this case. So if both divs were positioned at top:0, they would overlap.

Also, you have multiple positioning for the same element. You set margins to zero but then immediately give them a negative margin. You also set top to some number like 50% but that's going to throw things way off to the side. (haven't played with this).
Aug 15 '07 #2
Thanks, that helps some.

Is there any way for me to make the contact information relative to the bottom of the picture?

Here is the site BTW -


As you can see, my contact info is all over the place.
Aug 15 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Wolfgang Schwanke | last post: by
8 posts views Thread by Hardrock | last post: by
5 posts views Thread by jack | last post: by
4 posts views Thread by kl.vanw | last post: by
12 posts views Thread by TristaSD | last post: by
6 posts views Thread by stephen.cunliffe | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.