Menu bar and changing styles with fixed position?

E

Eric Pinnell

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

Els

Eric said:
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.
 
E

Eric Pinnell

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

Els

Eric said:
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....
 
E

Eric Pinnell

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

Els

Eric said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top