Layout

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • shapper

    Layout

    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:


    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
  • dorayme

    #2
    Re: Layout

    In article
    <faaa921b-db12-4e9a-8990-0053d8f9ce54@i7 6g2000hsf.googl egroups.com>,
    shapper <mdmoura@gmail. comwrote:
    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.

    --
    dorayme

    Comment

    • shapper

      #3
      Re: Layout

      On Jul 30, 4:28 am, dorayme <doraymeRidT... @optusnet.com.a uwrote:
      In article
      <faaa921b-db12-4e9a-8990-0053d8f9c...@i7 6g2000hsf.googl egroups.com>,
      >
       shapper <mdmo...@gmail. comwrote:
      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.
      >
      --
      dorayme
      Thank You!

      Comment

      Working...