 | |
Menu is not overlapping content area and width of menu is not accomodating width of its content
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Menu is not overlapping content area and width of menu is not accomodating width of its content -
10-14-2007
, 08:09 PM
#2
| ||||
| ||||
|
|
Hi again folks. I have a couple of issues now. |
but if you're game I am.
Quote:
|
I am not sure why I can't get my menu to overlap the content area. I tried using z-index. The effect I want occurs in Firefox but not IE. |
know, it seems like I just told you that recently, like yesterday).
I'm not sure what you mean by content area. I guess you mean the mostly
empty div#contentcontainer.
Trying to use absolute positioning and z-index is often a sign of trying
too hard to do the wrong thing. Anyway, I believe your z-index won't
apply where you've got position:relative.
But this may well not be a CSS question at all, since your menu doesn't
"drop down" at all without JS turned on. (Which raises the problem of
how people without JS will navigate to pages in the drop-down links.)
But there's an error in your JS, namely:
Error: EventCache is not defined
Source File: http://theamazing.onlinewebshop.net/cakes/js.js
Line: 142
Also, your event-cache.js contains just three lines of acual script, if
you count the closing brace at the end as the third line. The rest of
the file is mostly markup (for something). See my "simplicity" comments
below.
Your markup includes a <div id="containerfx">, which contains further
nested divs. The applicable CSS seems to be merely:
#containerfx { width: auto; height: auto; }
which I believe to be the defaults anyway. I'll bet you can remove the
div and rule from the markup and CSS respectively.
Which brings me to the topic of simplicity and maintainability. Wouldn't
you be clearer on what's going on if, e.g., you didn't have declarations
for body set in three different rules? (BTW, line-height: 1px; is pretty
silly.) And get rid of all the commented-out stuff. Keep a copy of the
style.css file if you insist, but for your working file (and especially,
for the one you're posting for others to analyze and help debug), get
rid of all extraneous stuff.
After you've declared zero margin and padding for every HTML element you
can think of in the first rule, you hack desperately and superstitiously
with stuff like
ul.slidingmenu,
ul.slidingmenu ul,
ul.slidingmenu li,
ul.slidingmenu a {
padding: 0;
margin: 0;
display: inline; }
and
ul.slidingmenu li {
list-style-type: none;
position: relative;
padding-left:0; padding-right:0;
margin-left:0; margin-right:0; }
and several other variations of ul.slidingmenu selectors. Stop it.
Either get rid of all the CSS and only add the rules you understand and
can show that you need, or go shopping for ready-made menus on the 'Net,
like at Listamatic <http://css.maxdesign.com.au/listamatic/index.htm> (I
also recommend their Selectutorial pages). Or if you insist on using JS,
search for "suckerfish" or "son of suckerfish", to find e.g.
<http://www.htmldog.com/articles/suckerfish/dropdowns/>
Quote:
|
The other issue that I am having is that my drop down menu's width does not accomodate for the width of the content within the menu. (I am getting two lines for a menu entry when I just want one) |
In any case, I'm too tired and you've got too many rules for me to tell
what width restriction(s) might be applying here. Maybe if you add
padding:.5em; to the ul.slidingmenu li ul li rule, but then again, maybe
that's not the best or even a useful solution. Maybe you just need
in your multi-word list items.
Quote:
|
The url to the page is http://theamazing.onlinewebshop.net/cakes/ |
ZZZzzz
--
John
You might get more help with a real newsreader and real newsserver.
The UIP: http://improve-usenet.org/
#3
| |||
| |||
|
|
Terry wrote: Hi again folks. I have a couple of issues now. Hi again yourself. I'm really tired, so I probably shouldn't be posting, but if you're game I am. I am not sure why I can't get my menu to overlap the content area. I tried using z-index. The effect I want occurs in Firefox but not IE. Validate your CSS:http://jigsaw.w3.org/css-validator/ (although you know, it seems like I just told you that recently, like yesterday). I'm not sure what you mean by content area. I guess you mean the mostly empty div#contentcontainer. Trying to use absolute positioning and z-index is often a sign of trying too hard to do the wrong thing. Anyway, I believe your z-index won't apply where you've got position:relative. But this may well not be a CSS question at all, since your menu doesn't "drop down" at all without JS turned on. (Which raises the problem of how people without JS will navigate to pages in the drop-down links.) But there's an error in your JS, namely: Error: EventCache is not defined Source File:http://theamazing.onlinewebshop.net/cakes/js.js Line: 142 Also, your event-cache.js contains just three lines of acual script, if you count the closing brace at the end as the third line. The rest of the file is mostly markup (for something). See my "simplicity" comments below. Your markup includes a <div id="containerfx">, which contains further nested divs. The applicable CSS seems to be merely: #containerfx { width: auto; height: auto; } which I believe to be the defaults anyway. I'll bet you can remove the div and rule from the markup and CSS respectively. Which brings me to the topic of simplicity and maintainability. Wouldn't you be clearer on what's going on if, e.g., you didn't have declarations for body set in three different rules? (BTW, line-height: 1px; is pretty silly.) And get rid of all the commented-out stuff. Keep a copy of the style.css file if you insist, but for your working file (and especially, for the one you're posting for others to analyze and help debug), get rid of all extraneous stuff. After you've declared zero margin and padding for every HTML element you can think of in the first rule, you hack desperately and superstitiously with stuff like ul.slidingmenu, ul.slidingmenu ul, ul.slidingmenu li, ul.slidingmenu a { padding: 0; margin: 0; display: inline; } and ul.slidingmenu li { list-style-type: none; position: relative; padding-left:0; padding-right:0; margin-left:0; margin-right:0; } and several other variations of ul.slidingmenu selectors. Stop it. Either get rid of all the CSS and only add the rules you understand and can show that you need, or go shopping for ready-made menus on the 'Net, like at Listamatic <http://css.maxdesign.com.au/listamatic/index.htm> (I also recommend their Selectutorial pages). Or if you insist on using JS, search for "suckerfish" or "son of suckerfish", to find e.g. http://www.htmldog.com/articles/suckerfish/dropdowns/ The other issue that I am having is that my drop down menu's width does not accomodate for the width of the content within the menu. (I am getting two lines for a menu entry when I just want one) See my comments above. In any case, I'm too tired and you've got too many rules for me to tell what width restriction(s) might be applying here. Maybe if you add padding:.5em; to the ul.slidingmenu li ul li rule, but then again, maybe that's not the best or even a useful solution. Maybe you just need in your multi-word list items. The url to the page ishttp://theamazing.onlinewebshop.net/cakes/ Yeah, yeah, we've heard *that* before. ;-) ZZZzzz -- John You might get more help with a real newsreader and real newsserver. The UIP:http://improve-usenet.org/ |
I did not mean to bother you.
I did try to validate my css and noticed the errors but did not know
how to handle so I decided that I would try to do so later.
The menu that I am trying to use is one that I adapted from one that
appeared in a book (DHTML Utopia). It stated that the menu would
degrade gracefully in the case that javascript was disabled.
I will make a much better attempt to clean up my css.
I was wondering if you think that it might not be working based on
those clipping values that are used in the javascript.
Thanks,
Terry
#4
| |||
| |||
|
|
Thanks for getting back to me John. I did not mean to bother you. I did try to validate my css and noticed the errors but did not know how to handle so I decided that I would try to do so later. The menu that I am trying to use is one that I adapted from one that appeared in a book (DHTML Utopia). It stated that the menu would degrade gracefully in the case that javascript was disabled. |
do people particularly need to see the dropdown details. They
work badly even with 'javascript on' on my machine, slow and
clunky and somehow only intermittently?)
If users are interested in looking further, they will. You can
interest them in what you do outside of menu items on the page
itself. By using describing the various things they can go to,
you can provide links in context.
Why all the convoluted mark up and css for such a basically
regular and straightforward site? Have you not enough to do
making cakes? Forget about relative positioning and z-indexing
and sliding this or that, leave behind all that stuff about text
popping up and obscuring other boxes with text, with menus
growing em style and bursting all over the whole design (have you
seen what happens when you alt shift + or alt + or whatever you
do in Windows to enlarge text in FF (on a Mac it is command +)?
I think you better contact Farmer Joe here in Australia. He
thinks website making is like baking cakes and he would not be
pleased if you were to try to bake a simple cake in some overly
complicated way.
--
dorayme
#5
| |||
| |||
|
|
In article 1192415553.988710.123... (AT) k35g2000prh (DOT) googlegroups.com>, Terry <w... (AT) rogers (DOT) com> wrote: Thanks for getting back to me John. I did not mean to bother you. I did try to validate my css and noticed the errors but did not know how to handle so I decided that I would try to do so later. The menu that I am trying to use is one that I adapted from one that appeared in a book (DHTML Utopia). It stated that the menu would degrade gracefully in the case that javascript was disabled. What is it that attracts you to such a thing for your site? Why do people particularly need to see the dropdown details. They work badly even with 'javascript on' on my machine, slow and clunky and somehow only intermittently?) |
The client that I am creating the site for saw a menu on another site
and wanted it on hers so I was trying to oblige.
Quote:
|
If users are interested in looking further, they will. You can interest them in what you do outside of menu items on the page itself. By using describing the various things they can go to, you can provide links in context. Why all the convoluted mark up and css for such a basically regular and straightforward site? Have you not enough to do making cakes? Forget about relative positioning and z-indexing and sliding this or that, leave behind all that stuff about text popping up and obscuring other boxes with text, with menus growing em style and bursting all over the whole design (have you seen what happens when you alt shift + or alt + or whatever you do in Windows to enlarge text in FF (on a Mac it is command +)? No I have not seen what would happen if the text was enlarged. |
Quote:
|
I think you better contact Farmer Joe here in Australia. He thinks website making is like baking cakes and he would not be pleased if you were to try to bake a simple cake in some overly complicated way. |
Thanks,
Terry
#6
| |||
| |||
|
|
Anyway, I believe your z-index won't apply where you've got position:relative. |
except static should work with z-index.
I notice the OP uses "z-index: 1100". The actual value used for z-index
is a good indication of the author's frustration. Usually 1 will do, or
perhaps a range from -2 to 2 for a document with a lot of unusual
stacking.
#7
| |||
| |||
|
|
The other issue that I am having is that my drop down menu's width does not accomodate for the width of the content within the menu. (I am getting two lines for a menu entry when I just want one) |
specification there: inline containing blocks.
I've not found any browser that gets those quite right. See
http://www.tidraso.co.uk/misc/inline-cb.html.
The question in this case is how wide are those inline containing
blocks, since they determine the available width for the popups. They
should be only the width of their contents, so if "Wedding Cakes I" is
wider than "Wedding Cakes", which it is, the box gets its available
width and the line is broken between "Cakes" and "I".
You could add white-space: nowrap to the styles for the <ul>, but that
probably won't work in IE. Or I suppose use instead of " " for
the spaces in the menu text.
You might be better to make the menu headings float: left rather than
display: inline. It won't be so easy to get them centered if you do but
you might have fewer problems with stacking and positioning.
I'm not sure you need that z-index in theory even in Firefox (although
it gets it wrong if you don't), although I may not have looked closely
enough at what's going on.
#8
| |||
| |||
|
|
On 2007-10-15, Terry <w... (AT) rogers (DOT) com> wrote: [rehttp://theamazing.onlinewebshop.net/cakes/] The other issue that I am having is that my drop down menu's width does not accomodate for the width of the content within the menu. (I am getting two lines for a menu entry when I just want one) You're relying on a very tricky (and rather absurd) part of the specification there: inline containing blocks. I've not found any browser that gets those quite right. Seehttp://www.tidraso.co.uk/misc/inline-cb.html. The question in this case is how wide are those inline containing blocks, since they determine the available width for the popups. They should be only the width of their contents, so if "Wedding Cakes I" is wider than "Wedding Cakes", which it is, the box gets its available width and the line is broken between "Cakes" and "I". You could add white-space: nowrap to the styles for the <ul>, but that probably won't work in IE. Or I suppose use instead of " " for the spaces in the menu text. You might be better to make the menu headings float: left rather than display: inline. It won't be so easy to get them centered if you do but you might have fewer problems with stacking and positioning. I'm not sure you need that z-index in theory even in Firefox (although it gets it wrong if you don't), although I may not have looked closely enough at what's going on. |
further.
I did do what the previous poster, dorayme, suggested, and looked at
the menus from
suckerfish. I came across one that looks simple enough.
It is http://www.htmldog.com/articles/suckerfish/bones/
It seems to work properly with Firefox and IE. But not IE7. In IE7
the menu is starting at the right of the calling menu item as opposed
to underneath it as it does in the other browsers.
Do you know off hand would have to be done to get it to work with IE?
I was thinking of perhaps a hack that detects for IE7 and then uses
the same style stuff that is being used for non IE browsers.
Thanks,
Terry
#9
| ||||
| ||||
|
|
On Oct 15, 3:30 am, Ben C <spams... (AT) spam (DOT) eggs> wrote: On 2007-10-15, Terry <w... (AT) rogers (DOT) com> wrote: [rehttp://theamazing.onlinewebshop.net/cakes/] [...] You might be better to make the menu headings float: left rather than display: inline. It won't be so easy to get them centered if you do but you might have fewer problems with stacking and positioning. [...] I did do what the previous poster, dorayme, suggested, and looked at the menus from suckerfish. |
Quote:
|
I came across one that looks simple enough. It is http://www.htmldog.com/articles/suckerfish/bones/ |
Quote:
|
It seems to work properly with Firefox and IE. But not IE7. In IE7 the menu is starting at the right of the calling menu item as opposed to underneath it as it does in the other browsers. Do you know off hand would have to be done to get it to work with IE? |
are position: absolute; left: auto; top: auto.
Making left and top auto for absolutely positioned elements is asking
for trouble. It leads you to a part of the spec that says the browser is
"free to make a guess" at the box's position (CSS 2.1 10.3.7).
Not that IE usually waits to be asked before making a guess at a box's
position.
You could try changing those to left: 0; top; 1em. So long as your menu
items are all on one line, it should be OK.
Otherwise you can put a little wrapper in so you have something like
this:
<li>
Sunfishes
<div style="position: relative">
<ul style="position: absolute; top: 0; left: 0;">
...
</div>
The <div> there locates the popup <ul> underneath the text at the start
of the <li>. It's a more explicit way of doing what top: auto is
supposed to do anyway.
left: auto in this example is just silly-- it should compute to left:0
anyway.
Quote:
|
I was thinking of perhaps a hack that detects for IE7 and then uses the same style stuff that is being used for non IE browsers. |
in both.
#10
| |||
| |||
|
|
On 2007-10-15, Terry <w... (AT) rogers (DOT) com> wrote: On Oct 15, 3:30 am, Ben C <spams... (AT) spam (DOT) eggs> wrote: On 2007-10-15, Terry <w... (AT) rogers (DOT) com> wrote: [rehttp://theamazing.onlinewebshop.net/cakes/] [...] You might be better to make the menu headings float: left rather than display: inline. It won't be so easy to get them centered if you do but you might have fewer problems with stacking and positioning. [...] I did do what the previous poster, dorayme, suggested, and looked at the menus from suckerfish. Good idea. I came across one that looks simple enough. It ishttp://www.htmldog.com/articles/suckerfish/bones/ That is using floats instead of inlines for the containers. It seems to work properly with Firefox and IE. But not IE7. In IE7 the menu is starting at the right of the calling menu item as opposed to underneath it as it does in the other browsers. Do you know off hand would have to be done to get it to work with IE? I can only guess as I don't have IE, but I notice that the popup <ul>s are position: absolute; left: auto; top: auto. Making left and top auto for absolutely positioned elements is asking for trouble. It leads you to a part of the spec that says the browser is "free to make a guess" at the box's position (CSS 2.1 10.3.7). Not that IE usually waits to be asked before making a guess at a box's position. You could try changing those to left: 0; top; 1em. So long as your menu items are all on one line, it should be OK. Otherwise you can put a little wrapper in so you have something like this: li Sunfishes div style="position: relative" ul style="position: absolute; top: 0; left: 0;" ... /div The <div> there locates the popup <ul> underneath the text at the start of the <li>. It's a more explicit way of doing what top: auto is supposed to do anyway. left: auto in this example is just silly-- it should compute to left:0 anyway. I was thinking of perhaps a hack that detects for IE7 and then uses the same style stuff that is being used for non IE browsers. Hopefully that won't be necessary and you can find something that works in both. |
By the way are you aware of any free newsgroup clients I am getting a
little tired of using google groups.
Terry
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.