Using CSS for best layout - experts help please

Discussion in 'HTML' started by Guest, Nov 30, 2007.

  1. Guest

    Guest Guest

    Hi,

    OK I'll cut right to the example:


    http://62.149.36.16/~generic9/index-plainexaml.htm


    I'm creating the above page, but what I'm trying to acheive is that top
    right nav menu items (Contact Join us etc. ) are to the right most of the
    screen they can be.

    If I add new menu tems to this menu it would be nice if the always stayed on
    one line and always stayed that the final item is on the most right.

    Also the text that says "Another Interactive logo here -..etc." (which will
    probably be replaced by a flash moive). I wanted this placed on the left of
    the content.

    I've tried to be very good with the use of my CSS, but I'm still a newbie
    really but learning.

    Can anyone help?

    Thanks in advance.
    Guest, Nov 30, 2007
    #1
    1. Advertising

  2. Guest

    Els Guest

    news.freedom2surf.net wrote:

    > http://62.149.36.16/~generic9/index-plainexaml.htm


    Since you want to learn, first this:
    The doctype isn't valid.
    You have:
    <!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/DTD/strict.dtd">

    That should be:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Make a habit of checking your code in the validator, and you'll catch
    errors like that easily. With a valid doctype, your pages will have
    more chance of being displayed correctly in different browsers.
    http://validator.w3.org/

    You also forgot the <title> element in the <head>. This is compulsory.

    > I'm creating the above page, but what I'm trying to acheive is that top
    > right nav menu items (Contact Join us etc. ) are to the right most of the
    > screen they can be.


    You floated their container right, but set the text-align to
    "inherit". Apparently it's inheriting 'left'. Set it to 'right'
    instead.

    > If I add new menu tems to this menu it would be nice if the always stayed on
    > one line and always stayed that the final item is on the most right.


    In that case, I think you should not float it to the right with a 50%
    width. As soon as you will have more items than fit in half you page's
    width, it would wrap. (still to the right though, if you use
    text-align:right; on the container)

    > Also the text that says "Another Interactive logo here -..etc." (which will
    > probably be replaced by a flash moive). I wanted this placed on the left of
    > the content.


    You have set text-align:center; on the body, and if you don't change
    that for its children, they will also be centered. If you want that
    line of text to the left (and you probably will want the rest of your
    page's text left-aligned as well), set 'text-align:left;' on the
    container div.(div#mainContent). Then everything will be left aligned,
    except for where you specifically set it otherwise.

    > I've tried to be very good with the use of my CSS, but I'm still a newbie
    > really but learning.


    We've all started as newbies - you'll learn :)

    --
    Els http://locusmeus.com/
    Els, Nov 30, 2007
    #2
    1. Advertising

  3. Guest

    Ben C Guest

    On 2007-11-30, Els <> wrote:
    > news.freedom2surf.net wrote:

    [...]
    >> I'm creating the above page, but what I'm trying to acheive is that top
    >> right nav menu items (Contact Join us etc. ) are to the right most of the
    >> screen they can be.

    >
    > You floated their container right, but set the text-align to
    > "inherit". Apparently it's inheriting 'left'. Set it to 'right'
    > instead.


    And OP will also need to remove "float: left" and "display: block" from
    ..navMiniTopRight a-- at the moment those things are all left floats, so
    they float to the left regardless of text-align.

    He could set them to float: right, but then they'll end up in reversed
    order. Text-align: right and not floated is better, I can't see any
    reason why they need to be floats.
    Ben C, Nov 30, 2007
    #3
  4. Guest

    Els Guest

    Ben C wrote:

    > On 2007-11-30, Els <> wrote:
    >> news.freedom2surf.net wrote:

    > [...]
    >>> I'm creating the above page, but what I'm trying to acheive is that top
    >>> right nav menu items (Contact Join us etc. ) are to the right most of the
    >>> screen they can be.

    >>
    >> You floated their container right, but set the text-align to
    >> "inherit". Apparently it's inheriting 'left'. Set it to 'right'
    >> instead.

    >
    > And OP will also need to remove "float: left" and "display: block" from
    > .navMiniTopRight a-- at the moment those things are all left floats, so
    > they float to the left regardless of text-align.


    Missed that one completely...

    > He could set them to float: right, but then they'll end up in reversed
    > order. Text-align: right and not floated is better, I can't see any
    > reason why they need to be floats.


    I often use floats for them so I can get paddings and margins on them.
    Depends on the required look though. It's indeed not necessary at all
    if it's just a line of links without rollovers or borders or anything.

    --
    Els http://locusmeus.com/
    Els, Dec 1, 2007
    #4
  5. Guest

    Guest Guest

    OK Great input! Thanks.

    Check out the updated.

    http://62.149.36.16/~generic9/index-plainexaml.htm


    Some points:

    1)
    >The doctype isn't valid.

    Hmm, used the dreamweaver default here - Maybe I set something wrong in
    options - I'll check (also I removed the title for brevity but guess I
    should have not done).

    2) when I implemented Els changes only it wokred in IE but not in Firefox.
    When applying Ben C extra changes worked in both. Don't fully understand
    some aspects of how it works yet but repittion and experimentation is the
    key to my learning.

    3) Check out the link above in IE7 and Firfox. Note how the margin around
    the right hand nav menu is bigger in Firefox. What can I do to get a
    consistant display acorss these browsers (and ideally others)


    Any other tips welcome and thank you again for this excellent advise
    Note I also need to implement a right hand section where the main text is so
    do not be suprised if the example contains a new section when you view it.

    Thanks!!
    Guest, Dec 1, 2007
    #5
  6. Guest

    Els Guest

    news.freedom2surf.net wrote:

    > http://62.149.36.16/~generic9/index-plainexaml.htm
    >
    > 1)
    >>The doctype isn't valid.

    > Hmm, used the dreamweaver default here - Maybe I set something wrong in
    > options - I'll check (also I removed the title for brevity but guess I
    > should have not done).


    I don't have Dreamweaver, but I've never heard of it getting the
    doctype itself wrong?

    > 2) when I implemented Els changes only it wokred in IE but not in Firefox.
    > When applying Ben C extra changes worked in both.


    I'm surprised it even worked in IE before you applied Ben's changes, I
    had just missed the left floated elements altogether. Even IE would
    float them left if you told them to...

    > Don't fully understand
    > some aspects of how it works yet but repittion and experimentation is the
    > key to my learning.


    The basis is quite simple though: without any stylerules, everything
    will be left aligned (unless you have set it to right-to-left for
    Arabic or something). There are two ways to alter the position
    horizontally, one is "float", which moves the element that is floated
    to either left or right, depending on the value you gave the float
    property, the other is "text-align" on the *parent* of the element.
    This will only work if the child of that parent is an inline element
    though, or plain text.

    > 3) Check out the link above in IE7 and Firfox. Note how the margin around
    > the right hand nav menu is bigger in Firefox. What can I do to get a
    > consistant display acorss these browsers (and ideally others)


    <ul> and <li> have different default margins and paddings in different
    browsers. Set all padding and margin on both <ul> and <li> to zero,
    then add where you want to add. This will make them show more
    consistently across browsers.

    --
    Els http://locusmeus.com/
    Els, Dec 2, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    688
    clintonG
    Dec 24, 2004
  2. KK
    Replies:
    2
    Views:
    498
    Big Brian
    Oct 14, 2003
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    970
  4. Replies:
    1
    Views:
    553
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    978
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page