By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,480 Members | 767 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,480 IT Pros & Developers. It's quick & easy.

Absolute positioning not relative to containing element?

P: 20
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out.

The first problem is that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number should appear in relation to the parent div (#header). However the text appears to be positioned in relation to the screen, not the parent div. Key bits of code as follows:
-----------------
Expand|Select|Wrap|Line Numbers
  1. <body>
  2.  
  3. <!--To provide a white box background to the core page-->
  4. <div id="container">
  5.  
  6. <div id="header">
  7.  
  8.     <img src="images\image1.jpg" alt="image1" />
  9.     <img src="images\image2.gif" alt="image2" />
  10.     <img src="images\image3.jpg" alt="image3" />
  11.  
  12.     <div id="headertext">
  13.         <p>text to go over image in header</p>
  14.     </div>
  15.  
  16.     <div id="topnav">
  17.         <ul>
  18.             <li><a href="index.html">Home</a></li>
  19.             <li><a href="tips.html">Tips</a></li>
  20.             <li><a href="contact.html">Contact</a></li>
  21.         </ul>
  22.     </div>
  23.  
  24. <!--end of "header" div-->
  25. </div>
  26.  
  27. <!--various other divs contained by a "content" div and a "footer" div-->
  28.  
  29. <!--end of "container" div-->
  30. </div>
  31.  
  32. </body>
  33.  
Etc.
----------------------
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     color: #000000;
  3.     background-color: #EAEAEA;
  4.     font-family: Arial, sans-serif;
  5.     font-size: 0.8em;
  6.     /* to make the container centre in IE 5 and lower */
  7.     text-align: center;
  8.     }
  9.  
  10. #container {
  11.     background-color: #FFFFFF;
  12.     width: 730px;
  13.     /* to re-set text to left alignment after implementing IE fix to body above */
  14.     text-align: left;
  15.     /* to centre the container for browsers other than IE 5 and lower */
  16.     margin-left: auto;
  17.     margin-right: auto;
  18.     }
  19.  
  20. #header {
  21.     width:100%;
  22.     }
  23.  
  24. #headertext {
  25.     position: absolute;
  26.     top: 35px;
  27.     right: 35px;
  28.     color: #FFFFFF;
  29.     font-weight: bold;
  30.     font-size: 1.5em;
  31.     }
  32.  
  33. #topnav {
  34.     width: 100%;
  35.     background-color: #EAEA00;
  36.     margin-left: 0;
  37.     padding-top: 3px;
  38.     padding-bottom: 3px;
  39.     }
  40.  
  41. #topnav ul li  {
  42.     display: inline;
  43.     list-style-type: none;
  44.     padding: 3px;
  45.     }
  46.  
__________________

You can probably see I still haven't sorted out how to distribute my menu items across the page, and there seem to be extraneous things in there. For example, I'm not sure why I should need to specify a width of 100% for #header and #topnav in order to get them to stay within the container div; but that appears to be the case. Also I tried using a class (assigned to the para) instead of a whole separate div in order to position the headertext, but that didn't work either and divs seem to be the preferred mode, so I've stuck with that.

Those confusions aside, the key thing is that I don't understand why the headertext's absolute positioning is relative to the screen, rather than relative to the #container (or the #header). Bear in mind that I want the design to work for various screen resolutions (so I can't just adjust the values of the absolute positioning to get it into the right spot).

Hope that all makes sense!
Oct 3 '06 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I'll try and pick my way through this. Remember that absolutely positioning an element means it will be placed relative to the first positioned parent. You have no parents with any positioning so it is placed relative to the html element. If you want it relative to some other element, you must add position:relative to the css of that parent, or containing, element.

I didn't immediately see a reason for 100% width and, yes, you don't need to specify it if you want it to extend the full width of the screen.

You have the slashes going the wrong way on your image pathnames.
Oct 4 '06 #2

P: 20
Remember that absolutely positioning an element means it will be placed relative to the first positioned parent. You have no parents with any positioning so it is placed relative to the html element.
Beautiful, thank you. That answers the question exactly.

I didn't immediately see a reason for 100% width and, yes, you don't need to specify it if you want it to extend the full width of the screen.
No - I only want it (ie the navbar) to extend the width of the parent element (ie the header, which in turn should only extend the width of the container). Have tried removing the 100%s and seems to now be working fine. Must have done something else wrong which has now been removed.

You have the slashes going the wrong way on your image pathnames.
Yes; that's because they're not working the other way around. Something to do with the fact that it's currently a Windows Explorer filepath, not a url?? I assume I may have to change the slashes when I publish.
Oct 4 '06 #3

Post your reply

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