Absolute positioning not relative to containing element?

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

 
<body>
 
<!--To provide a white box background to the core page-->

<div id="container">
 
<div id="header">
 
    <img src="images\image1.jpg" alt="image1" />

    <img src="images\image2.gif" alt="image2" />

    <img src="images\image3.jpg" alt="image3" />
 
    <div id="headertext">

        <p>text to go over image in header</p>

    </div>
 
    <div id="topnav">

        <ul>

            <li><a href="index.html">Home</a></li>

            <li><a href="tips.html">Tips</a></li>

            <li><a href="contact.html">Contact</a></li>

        </ul>

    </div>
 
<!--end of "header" div-->

</div>
 
<!--various other divs contained by a "content" div and a "footer" div-->
 
<!--end of "container" div-->

</div>
 
</body>

Etc.
----------------------

Expand|Select|Wrap|Line Numbers

 
body {

    color: #000000;

    background-color: #EAEAEA;

    font-family: Arial, sans-serif;

    font-size: 0.8em;

    /* to make the container centre in IE 5 and lower */

    text-align: center;

    }
 
#container {

    background-color: #FFFFFF;

    width: 730px;

    /* to re-set text to left alignment after implementing IE fix to body above */

    text-align: left;

    /* to centre the container for browsers other than IE 5 and lower */

    margin-left: auto;

    margin-right: auto;

    }
 
#header {

    width:100%;

    }
 
#headertext {

    position: absolute;

    top: 35px;

    right: 35px;

    color: #FFFFFF;

    font-weight: bold;

    font-size: 1.5em;

    }
 
#topnav {

    width: 100%;

    background-color: #EAEA00;

    margin-left: 0;

    padding-top: 3px;

    padding-bottom: 3px;

    }
 
#topnav ul li  {

    display: inline;

    list-style-type: none;

    padding: 3px;

    }

__________________

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

Subscribe Post Reply

3099

drhowarddrfine

7,435

Expert 4TB

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

nonsensitor

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

Similar topics

Relative Absolute Position

by: Ken Kast | last post by:

Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...

Javascript

Absolute positioning--what am I missing

by: Harlan Messinger | last post by:

What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...

HTML / CSS

position:absolute implementation seems to contradict W3C definition

by: Harald Kirsch | last post by:

In the W3C document about CSS2, I read at http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position the following: absolute The box's position (and possibly size) is specified with the...

HTML / CSS

No browser supports CSS2 / position:absolute?

by: Peter Pfannenschmid | last post by:

Hello experts, I would be very grateful if you would have a look at the following URL: http://www.omeganet.de/test.html The html file and the associated style have been validated...

HTML / CSS

absolute div in table cell

by: Robert | last post by:

Hi, I am trying to add a background to a cell that contains multiple horizontal coloured layers on top of eachother. I managed to do this in IE, but firefox displays something very different...

HTML / CSS

Dynamic width of absolute positioned element

by: mike eli | last post by:

Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so...

Javascript

position:absolute relative to parent or to window?

by: Gert Brinkmann | last post by:

Hello, as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an absolute positioned block element is positioned relative to its parent element. This is told in the german...

HTML / CSS

absolute, relative, not set, static positioning ??????

by: Rob R. Ainscough | last post by:

I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web...

ASP.NET

absolute positioning

by: Mark | last post by:

hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img...

HTML / CSS

Access Europe meeting on Wed 2 August - An Access Developer Guide to creating applications in Blazor

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

Speedup your spring application

by: linyimin | last post by:

Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...

General

Steps manually installing IntelliJ IDEA.

by: erikbower65 | last post by:

Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...

General

Development of Funny H5 Game - Toy Claw

by: kcodez | last post by:

As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...

HTML / CSS

Python code for finding the longest common subsequence

by: Rina0 | last post by:

I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...

Python

To verify entry of a dropdown

by: DJRhino | last post by:

Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...

Microsoft Access / VBA

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

How does React native implement an English player?

by: lllomh | last post by:

How does React native implement an English player?

Mobile Development

Windows 11 and Access Combo Box Issue

by: DJRhino | last post by:

Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

Microsoft Access / VBA