Menu bar and changing styles with fixed position?

Discussion in 'HTML' started by Eric Pinnell, Feb 24, 2004.

  1. Eric Pinnell

    Eric Pinnell Guest

    I've tried setting up a menu bar using position:fixed, by
    defining a paragraph of style "menubar". However, some of the lines I
    want to use a different style.
    I thought that by using "Span" I would be able to change the
    style, but it still remains the same as menubar. WTF is going on?


    Eric Pinnell

    (Author, "Claws of The Dragon", "The Omega File")

    For a preview, see: http://www.ericpinnell.com and click on "books"
    Eric Pinnell, Feb 24, 2004
    #1
    1. Advertising

  2. Eric Pinnell

    Els Guest

    Eric Pinnell wrote:

    > I've tried setting up a menu bar using position:fixed, by
    > defining a paragraph of style "menubar". However, some of the lines I
    > want to use a different style.
    > I thought that by using "Span" I would be able to change the
    > style, but it still remains the same as menubar. WTF is going on?
    >
    >
    > Eric Pinnell
    >
    > (Author, "Claws of The Dragon", "The Omega File")
    >
    > For a preview, see: http://www.ericpinnell.com and click on "books"


    In that file I can't find any <span> attributes within the
    <p class="menubar"> ...
    What did you try? If you post the code or upload it and give
    a url, people could see what's wrong.
    Besides, all the &nbsp; is quite unnecessary.
    You can style them with css very easily.


    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Feb 24, 2004
    #2
    1. Advertising

  3. Eric Pinnell

    Eric Pinnell Guest

    On Tue, 24 Feb 2004 19:51:00 +0100, Els <>
    wrote:

    >In that file I can't find any <span> attributes within the
    ><p class="menubar"> ...
    >What did you try? If you post the code or upload it and give
    >a url, people could see what's wrong.
    >Besides, all the &nbsp; is quite unnecessary.
    >You can style them with css very easily.


    Sorry, but I created a special test page called:

    www.ericpinnell.com/testpage.shtml

    I've tried using <Div> with <span> and <p> with <span>, to no
    effect. I assumed that if you use a <div> or a <p> with <span>, then
    the <span> would use the default style for the entire <div> or <p>,
    except where those properties were different from the new style.

    My styles are defined as follows:

    ..menutxt {
    position:fixed;
    left:0;
    top:0;
    float:left;
    font-size:10pt;
    font-family:arial;
    text-align:left;
    text-indent:0px;
    background-color:black;
    color:white;
    width:240px;
    height:100%;
    margin-left:0;
    margin-top:0;
    margin-bottom:0;
    padding:0;
    overflow:scroll
    }
    ..menutxt a:link:hover {color:red}
    ..menutxt a:link {color:yellow}
    ..menutxt a:visited {color:pink}
    ..menutxt a:visited:hover {color:red}


    ..menuhead (
    position:fixed;
    float:left;
    font-size:12pt;
    background-color:eek:live;
    color:white;
    text-align:center;
    }

    I wrote a <div class="menutxt">, with some <span class="menuhead">
    for variety. It all ends up being the default "menutxt" style.




    Eric Pinnell

    (Author, "Claws of The Dragon", "The Omega File")

    For a preview, see: http://www.ericpinnell.com and click on "books"
    Eric Pinnell, Feb 24, 2004
    #3
  4. Eric Pinnell

    Els Guest

    Eric Pinnell wrote:
    > On Tue, 24 Feb 2004 19:51:00 +0100, Els <>
    > wrote:
    >
    >>What did you try? If you post the code or upload it and give
    >>a url, people could see what's wrong.

    >
    > Sorry, but I created a special test page called:
    >
    > www.ericpinnell.com/testpage.shtml
    >
    > I've tried using <Div> with <span> and <p> with <span>, to no
    > effect. I assumed that if you use a <div> or a <p> with <span>, then
    > the <span> would use the default style for the entire <div> or <p>,
    > except where those properties were different from the new style.
    >
    > My styles are defined as follows:
    >
    > .menutxt {
    > position:fixed;
    > left:0;
    > top:0;
    > float:left;
    > font-size:10pt;
    > font-family:arial;
    > text-align:left;
    > text-indent:0px;
    > background-color:black;
    > color:white;
    > width:240px;
    > height:100%;
    > margin-left:0;
    > margin-top:0;
    > margin-bottom:0;
    > padding:0;
    > overflow:scroll
    > }
    > .menutxt a:link:hover {color:red}
    > .menutxt a:link {color:yellow}
    > .menutxt a:visited {color:pink}
    > .menutxt a:visited:hover {color:red}
    >
    >
    > .menuhead (
    > position:fixed;
    > float:left;
    > font-size:12pt;
    > background-color:eek:live;
    > color:white;
    > text-align:center;
    > }


    Found it :)
    I fiddled and changed things and made it work, but couldn't
    find out why your styles for .menuhead aren't working.
    But I know why :) -> look at the ( behind .menuhead... and
    change it to { :)

    Besides that, you might want to change the order of your
    link styles, to, link, visited, hover, active.
    And don't style the text in pt, but in em, so IE can scale
    the size too.
    Also you can take out position:fixed from the styles for
    both .menutxt and .menuhead, as it doesn't combine with
    float:left. And take out float:left from the .menuhead
    styles, 'cause it messes up the menu :)

    You might want to wrap the remaining menu-items in <span
    class="sub"> and add to the stylesheet something like
    ..sub {
    position:relative;
    left:1em;
    }

    hmm.. that's all, I think ;-)
    Apart from thinking it doesn't look good to have the olive
    background on the .menuhead items....


    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Feb 24, 2004
    #4
  5. Eric Pinnell

    Eric Pinnell Guest

    On Tue, 24 Feb 2004 21:47:55 +0100, Els <>
    wrote:

    >
    >Found it :)
    >I fiddled and changed things and made it work, but couldn't
    >find out why your styles for .menuhead aren't working.
    >But I know why :) -> look at the ( behind .menuhead... and
    >change it to { :)


    There's a down side to having a high res monitor. It makes round
    brackets look like {. And here I was thinking that <style> support was
    busted. Arrrgh!

    >Besides that, you might want to change the order of your
    >link styles, to, link, visited, hover, active.


    I left them in as a legacy from the original code. It's easy enough
    to fix.

    >And don't style the text in pt, but in em, so IE can scale
    >the size too.


    Will do.

    >Also you can take out position:fixed from the styles for
    >both .menutxt and .menuhead, as it doesn't combine with
    >float:left. And take out float:left from the .menuhead
    >styles, 'cause it messes up the menu :)


    What I've done is use a <div class=menubar"> and define the menubar
    as floating. Since <span> only alters the specified characteristics,
    it means that the entire div will be floated left, etc, etc, except
    for color changes.

    >
    >You might want to wrap the remaining menu-items in <span
    >class="sub"> and add to the stylesheet something like
    >.sub {
    > position:relative;
    > left:1em;
    >}
    >
    >hmm.. that's all, I think ;-)
    >Apart from thinking it doesn't look good to have the olive
    >background on the .menuhead items....


    I've run into a small problem. The background color doesn't stretch
    across the entire paragraph for menuhead. Further, trying to center
    the text within the paragraph doesn't work.


    Eric Pinnell

    (Author, "Claws of The Dragon", "The Omega File")

    For a preview, see: http://www.ericpinnell.com and click on "books"
    Eric Pinnell, Feb 25, 2004
    #5
  6. Eric Pinnell

    Els Guest

    Eric Pinnell wrote:

    >>Also you can take out position:fixed from the styles for
    >>both .menutxt and .menuhead, as it doesn't combine with
    >>float:left. And take out float:left from the .menuhead
    >>styles, 'cause it messes up the menu :)

    >
    >>You might want to wrap the remaining menu-items in <span
    >>class="sub"> and add to the stylesheet something like
    >>.sub {
    >> position:relative;
    >> left:1em;
    >>}
    >>
    >>hmm.. that's all, I think ;-)
    >>Apart from thinking it doesn't look good to have the olive
    >>background on the .menuhead items....

    >
    > I've run into a small problem. The background color doesn't stretch
    > across the entire paragraph for menuhead. Further, trying to center
    > the text within the paragraph doesn't work.


    If you set a width to .menuhead (240px would be good),
    things will probably change ;-)
    But I think it would look odd, if you leave the .sub items
    left aligned then, so you might wanna do the same to those.



    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Feb 25, 2004
    #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. Matt
    Replies:
    0
    Views:
    3,525
  2. John Hann
    Replies:
    0
    Views:
    6,042
    John Hann
    Aug 21, 2004
  3. Eric Pinnell

    Menu bars and position fixed

    Eric Pinnell, Mar 7, 2004, in forum: HTML
    Replies:
    1
    Views:
    1,113
  4. Matt
    Replies:
    9
    Views:
    70,765
  5. Matt
    Replies:
    9
    Views:
    528
    kaeli
    Aug 23, 2004
Loading...

Share This Page