Menu bar and changing styles with fixed position?

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

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 -

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 {colorink}
..menutxt a:visited:hover {color:red}


..menuhead (
position:fixed;
float:left;
font-size:12pt;
background-colorlive;
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 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 {colorink}
> .menutxt a:visited:hover {color:red}
>
>
> .menuhead (
> position:fixed;
> float:left;
> font-size:12pt;
> background-colorlive;
> 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 -

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