Alignment problems

[Andrew Jocelyn]

Hi

I'm strugleing with laying out a page masthead with an image to the
left and right and some text in the middle and all inline with each
other. Here's my html and css so far:

<style type="text/css">
div#header {
margin: 0 auto;
padding: 0;
width: 100%;
color: #fff;
background: #5A5D5A;
border-bottom: 2px solid #fff;
}

div#header h1 {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width: 33%;
}

div#header a#left-link {
margin: 0;
padding: 0;
float: left;
width: 33%;
}

div#header a#right-link {
margin: 0;
padding: 0;
float: right;
width: 33%;
}
</style>

....html...

<div id="header">
<a href="#" id="left-link">
<img src="/admin/images/empetus-logo.gif" width="182" height="34"
alt="Empetus website" />
</a>

<h1>Admin Area</h1>

<a href="#" id="right-link">
<img src="/admin/images/wrench.gif" width="30" height="30"
alt="Request support" />
</a>
</div>

I've tried a number of methods including float: left and float: right
on the links but I never seem to be able to get the line up I need. Do
I need to wrap each element i.e. the [a href] in divs of their own and
if so what should the css look like?

Many thanks
Andrew

[Lee K. Seitz]

In article <a8**************************@posting.google.com >,
Andrew Jocelyn <an************@empetus.co.uk> wrote:

Hi

I'm strugleing with laying out a page masthead with an image to the
left and right and some text in the middle and all inline with each
other. Here's my html and css so far:

<style type="text/css"> [snip]div#header h1 {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width: 33%;
}
The first thing people here will tell you is to define your font-size
in em of %, not px or pt. This allows people using IE to
automagically resize the text as they need directly from their tool
bar.

[snip]
I've tried a number of methods including float: left and float: right
on the links but I never seem to be able to get the line up I need. Do
I need to wrap each element i.e. the [a href] in divs of their own and
if so what should the css look like?
No. All you need to do is move the right link above the h1 like this:
<div id="header">
<a href="#" id="left-link">
<img src="/admin/images/empetus-logo.gif" width="182" height="34"
alt="Empetus website" />
</a>

<a href="#" id="right-link">
<img src="/admin/images/wrench.gif" width="30" height="30"
alt="Request support" />
</a>
</div>

<h1>Admin Area</h1>

Although the elements are floating left or right, that only sets their
horizontal position. Their vertical position is dependent on their
natural flow in the document. A header (like h1) implies a line
break, so the img after it is moved down some.

I'm still somewhat new at this, so I attempted defining all the
elements as inline to see if that would work, but it didn't in IE6
(Windows).

Oh, and one other thing. You've got to watch your spacing when
putting images in anchors (<a>). When you have newlines between the
anchor begin and end elements and the image, you sometimes get
unwanted space around the image.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
".zihW zeehC stae nataS"
-- "Weird Al" Yankovic, "Nature Trail to Hell"

[Lee K. Seitz]

In article <10*************@corp.supernews.com>, Lee K. Seitz <lkseitz> wrote:

The first thing people here will tell you is to define your font-size
in em of %, not px or pt.

Oops. Make that "em *or* %." Amazing the difference one mistyped
letter makes. 8)

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
'90s flashback: I've fallen, and I can't get up!

[Stephen Poley]

On Thu, 12 Feb 2004 20:50:10 -0000, lkseitz (Lee K. Seitz) .at. hiwaay
@dot@ net wrote:

In article <a8**************************@posting.google.com >,
Andrew Jocelyn <an************@empetus.co.uk> wrote:

I'm strugleing with laying out a page masthead with an image to the
left and right and some text in the middle and all inline with each
other. Here's my html and css so far:

<style type="text/css">

[snip]

div#header h1 {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width: 33%;
}

The first thing people here will tell you is to define your font-size
in em of %, not px or pt. This allows people using IE to
automagically resize the text as they need directly from their tool
bar.

Quibble: this actually helps users of most (all?) graphical browsers,
not just IE, as they don't have to readjust their zoom for every site
they come across. But it's more important for IE users than others.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Eric Bohlman]

Stephen Poley <sb******************@xs4all.nl> wrote in
news:h8********************************@4ax.com:

On Thu, 12 Feb 2004 20:50:10 -0000, lkseitz (Lee K. Seitz) .at. hiwaay
@dot@ net wrote:

The first thing people here will tell you is to define your font-size
in em of %, not px or pt. This allows people using IE to
automagically resize the text as they need directly from their tool
bar.

Quibble: this actually helps users of most (all?) graphical browsers,
not just IE, as they don't have to readjust their zoom for every site
they come across. But it's more important for IE users than others.

That's a little misleading, since users will still have to readjust their
zoom for sites where the author sets their text to a percentage or em value
that's too small. It's specifically an IE bug that makes such adjustment
difficult with pixel-sized text. I just don't want authors to get the
impression that using ems or percents is a license to request microfonts.