Rel positioning does/doesn't create positioning context?

#1 July 21st, 2005, 12:52 AM

I'm trying to use a relatively positioned <div> to create a positioning context
for a <p> such that the <p> will render within the <div> near the right edge.

I'm using XHTML 1.0 strict. My page validates in the W3C validator properly.
However, I'm not getting the correct results in IE or Mozilla for the PC.

I put screenshots here:

http://www.somerandomcrap.com/temp/cssscreenshots.htm

The word "Home" is the thing I'm trying to position. It's supposed to be inside
the horizontal blue bar, near the right edge. The blue bar is the <div>.

(I realize "Home" is also blue. I intend to correct that after I solve this
problem.)

Here's an excerpt from the code:

[...]

<body>
<div id="all">
<div style="position: relative;
background-color:#003399;
padding:3px;
margin: 12px 0 0 0;">
<h1 style="margin: 0;
padding: 0;
color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;">
ASA Notes
</h1>
<p style="color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;
position:absolute;
right:4px;">
<a href="/~ethan/meetingnotes/index.htm">Home</a>

</p>
</div>

[...]

Any assistance would be greatly appreciated.

Thanks.

#2 July 21st, 2005, 12:52 AM

DM <elektrophyte-yahoo> wrote:
[color=blue]
> The word "Home" is the thing I'm trying to position. It's supposed to be
> inside the horizontal blue bar, near the right edge. The blue bar is the
> <div>.
> font-size: 12px;">[/color]

Pixels bad :)
http://css-discuss.incutio.com/?page=UsingPixels
[color=blue]
> <p style="color:#ffffff;
> font:Arial, Helvetica, sans-serif;
> font-size: 12px;
> position:absolute;
> right:4px;">
> <a href="/~ethan/meetingnotes/index.htm">Home</a>
> </p>[/color]

So the link is at the left hand end of the <p> (as text-align: left is the
default), and the right edge of the <p> is against the right edge of the
<div>, but the <p> is still width: auto (also the default) so it is as wide
as the <div>. It looks like a simple text-align: right on the paragraph
will do what you want, no need to mess about with positioning.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

#3 July 21st, 2005, 12:52 AM

DM wrote:[color=blue]
> I'm trying to use a relatively positioned <div> to create a positioning
> context for a <p> such that the <p> will render within the <div> near
> the right edge.
>
> I'm using XHTML 1.0 strict. My page validates in the W3C validator
> properly. However, I'm not getting the correct results in IE or Mozilla
> for the PC.
>
> I put screenshots here:
>
> http://www.somerandomcrap.com/temp/cssscreenshots.htm
>
> The word "Home" is the thing I'm trying to position. It's supposed to be
> inside the horizontal blue bar, near the right edge. The blue bar is the
> <div>.
>
> (I realize "Home" is also blue. I intend to correct that after I solve
> this problem.)
>
> Here's an excerpt from the code:
>
> [...]
>
> <body>
> <div id="all">
> <div style="position: relative;
> background-color:#003399;
> padding:3px;
> margin: 12px 0 0 0;">
> <h1 style="margin: 0;
> padding: 0;
> color:#ffffff;
> font:Arial, Helvetica, sans-serif;
> font-size: 12px;">
> ASA Notes
> </h1>
> <p style="color:#ffffff;
> font:Arial, Helvetica, sans-serif;
> font-size: 12px;
> position:absolute;
> right:4px;">
> <a href="/~ethan/meetingnotes/index.htm">Home</a>
>
> </p>[/color]

That Home <p> must either be within the ASA notes block which would have
to be abs. or rel. positioned or you could just make that <a
href="/~ethan/meetingnotes/index.htm">Home</a>
link styled (without a wrapping <p>)like this:

<a href="/~ethan/meetingnotes/index.htm" style="float: right;
padding-right: 4px;">Home</a>

Not tested.

Btw, I agree with what David told you: px for font-size is usually a bad
idea.

W3C Quality Assurance tip for webmasters: Care with font-size
Recommended Practices: Forget <font>, use CSS
"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser). Use relative length units such as percent or
(better) em, (...)"
http://www.w3.org/QA/Tips/font-size

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.3 :)

#4 July 21st, 2005, 12:52 AM

DU wrote:
[color=blue]
> DM wrote:
>[color=green]
>> I'm trying to use a relatively positioned <div> to create a
>> positioning context for a <p> such that the <p> will render within the
>> <div> near the right edge.
>>
>> I'm using XHTML 1.0 strict. My page validates in the W3C validator
>> properly. However, I'm not getting the correct results in IE or
>> Mozilla for the PC.
>>
>> I put screenshots here:
>>
>> http://www.somerandomcrap.com/temp/cssscreenshots.htm
>>
>> The word "Home" is the thing I'm trying to position. It's supposed to
>> be inside the horizontal blue bar, near the right edge. The blue bar
>> is the <div>.
>>
>> (I realize "Home" is also blue. I intend to correct that after I solve
>> this problem.)
>>
>> Here's an excerpt from the code:
>>
>> [...]
>>
>> <body>
>> <div id="all">
>> <div style="position: relative;
>> background-color:#003399;
>> padding:3px;
>> margin: 12px 0 0 0;">
>> <h1 style="margin: 0;
>> padding: 0;
>> color:#ffffff;
>> font:Arial, Helvetica, sans-serif;
>> font-size: 12px;">
>> ASA Notes
>> </h1>
>> <p style="color:#ffffff;
>> font:Arial, Helvetica, sans-serif;
>> font-size: 12px;
>> position:absolute;
>> right:4px;">
>> <a href="/~ethan/meetingnotes/index.htm">Home</a>
>>
>> </p>[/color]
>
>
> That Home <p> must either be within the ASA notes block which would have
> to be abs. or rel. positioned or you could just make that <a
> href="/~ethan/meetingnotes/index.htm">Home</a>
> link styled (without a wrapping <p>)like this:
>[/color]

But it IS within the "ASA notes block" (you mean the <div>, right?). You trimmed
off the closing tag in my code, but the <p> is definitely INSIDE the <div>. Yet
in the browser it renders OUTSIDE the <div>. I can't figure out why.
[color=blue]
> <a href="/~ethan/meetingnotes/index.htm" style="float: right;
> padding-right: 4px;">Home</a>
>
> Not tested.[/color]

I tried it. Like this:

<div style="position: relative;
background-color:#003399;
padding:3px;
margin: 12px 0 0 0;">
<h1 style="margin: 0;
padding: 0;
color:#ffffff;
font:Arial, Helvetica, sans-serif;
font-size: 12px;">
ASA Notes
</h1>
<a href="/~ethan/meetingnotes/index.htm" style="margin: 0; padding:0;font-size:
12px; font-family:Arial, Helvetica, sans-serif;
float:right; padding-right: 4px;">Home</a>
</div>

The "Home" type still winds up outside the blue bar (the <div>), below it to the
right.

Is there a way to achieve this fairly simple result without resorting to a table?

By the way, in case I didn't mention it before, I'm trying to get the title "ASA
Notes" and the word "Home" to line up horizontally, not have one above the
other. That why I'm not just using "text-align: right".

What is Bytes?

Popular Articles