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

Alignment problems

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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"
Jul 20 '05 #2

P: n/a
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!
Jul 20 '05 #3

P: n/a
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/
Jul 20 '05 #4

P: n/a
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.
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.