Layout

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

shapper - 29 Jul 2008 19:03 GMT

Hello,

I am creating the base design of a web site that consists in two
horizontal bars: Navigation and Intro.

"Navigation" will contain the menu.

"Intro" will contain two items: a logo (image) on the left and a
banner (flash) on the right.

In this moment I have the following:
http://www.27lamps.com/Beta/Bar/Bar.html

I am not sure if using a background image is the best way to do
this ...
... it seems to me that since the two bars are two different sections
then I should use two divs.

So the questions I have:

1. Should I use two divs, one for each bar, and setting the line-
height in em instead of using the background image?
2. How to place side by side the logo and the banner and centered them
vertically?
3. I would like the Navigation and the Intro bars to have a minimum
height.

Thanks,
Miguel

Reply to this Message

dorayme - 30 Jul 2008 04:28 GMT

In article
<faaa921b-db12-4e9a-8990-0053d8f9ce54@i76g2000hsf.googlegroups.com>,

> So the questions I have:
>
> 1. Should I use two divs, one for each bar, and setting the line-
> height in em instead of using the background image?

You might as well use two elements. Line height is mainly for text and
it is only sometimes a good idea to give it a unit.

> 2. How to place side by side the logo and the banner and centered them
> vertically?

Placing inline things side by side is achieved by having them fit on one
line. That is their natural way. Otherwise, you can float elements. As
for centering, inline objects are centred by styling the container they
are in with 'text-align: center'. To centre a block element like a div,
specify a width and set the left and right margins to auto.

> 3. I would like the Navigation and the Intro bars to have a minimum
> height.

If you mean this literally, then you can use min-height. If you mean it
more losely, just be sure to set small top margins and paddings and
minimum line heights to get the look you want.

Signature

dorayme

Reply to this Message

shapper - 31 Jul 2008 15:13 GMT

> In article
> <faaa921b-db12-4e9a-8990-0053d8f9c...@i76g2000hsf.googlegroups.com>,
[quoted text clipped - 25 lines]
> --
> dorayme

Thank You!

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

Layout