setting logo/text position with stylesheet

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

danielmcbrearty@gmail.com - 31 Jan 2006 09:58 GMT

Hi

At my site www.engoi.com I have a logo positioned right on the
titlebar, with a "oneliner" (the text next to it) by it. The oneliner
should end close to the logo, as it currently does.

Right now I have a nasty mix of floats and relative offsets to get the
effect I want.

I actually want the one liner ("The Multi Language Vocabulary Learner")
to be multilingual too, meaning it's length will change.

How can I improve this layout so that the right hand side of the text
holds it's correct position with respect to the logo, even the the
actual oneliner changes content?

(Actually all constructive comments on the design and layout of this
site are welcome.)

Thanks

Daniel

Reply to this Message

Els - 31 Jan 2006 10:13 GMT

> Hi
>
> At my site www.engoi.com I have a logo positioned right on the
> titlebar, with a "oneliner" (the text next to it) by it. The oneliner
> should end close to the logo, as it currently does.

No, it doesn't (in Opera). I can see "The Multi Language Vocabulary ".
The word "Learner" hides behind the logo.

> Right now I have a nasty mix of floats and relative offsets to get the
> effect I want.

I won't look in the stylesheet then ;-)

> I actually want the one liner ("The Multi Language Vocabulary Learner")
> to be multilingual too, meaning it's length will change.
>
> How can I improve this layout so that the right hand side of the text
> holds it's correct position with respect to the logo, even the the
> actual oneliner changes content?

I would change your HTML to:
<div id="header">
<h1 id="engoilogo"><img src="../img/engoi.gif" alt="engoi - the
multilanguage vocabulary learner">The Multi Language Vocabulary
Learner</h1>
<div id="membermenu"></div>
<div id="menu"></div>
</div>

and do this in the stylesheet:
h1#engoilogo{
text-align:right;
}
h1#engoilogo img{
float:right;
margin-left:10px;
}
div#membermenu{
clear:both;
}

Signature

Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Jon Anderson - Meeting (Garden Of Geda) / Sound Out The
Galleon

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2006

setting logo/text position with stylesheet