Jump to content

fly-out menu with CSS? (also expandable list)


brynn

Recommended Posts

Please don't use relative positioning for indentation. Instead, set the margin and padding for all ul and li elements to 0px. Then correct one or the other (usually padding) for specific selectors. The reason is that different browsers create the indentation in different ways. Note that you can also control (in a general way) where how the bullet is positioned.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Oh ok. I was just about to report that the relative position worked. Rats!

 

Ok, I have a couple of questions. I have margin and padding set to 0 using the body selector. I guess that only applies to the whole body, and not to other specific selectors?

 

Does setting the margin and padding to 0 override the normal indentation that ul creates? I'll try it here in a second. But I have 1 more question first.

 

You said

 

Note that you can also control (in a general way) where how the bullet is positioned.

 

How can I do that? Did you mean using margin and padding?

Link to comment
Share on other sites

Well, technically I was using it to override indentation, rather than create it. But I did like you suggested for the ul ID, instead of relative position, and it worked quite well. Thank you very much for that :)

 

However, there was another place where I used relative positioning to override indentation, and it won't work in that case.

 

Here's the situation: At the bottom of my list are a couple of footnotes. At first, they were outside of the 2nd level uls, but still inside the 1st level uls, using span tags. But since I need them to collapse with the items in the list, I had to put them inside the 2nd level ul. That caused it to look like the footnote (starting with an asterisk, because I wanted avoid having to code the superscript number) was another list item in the 2nd level. But I wanted it to look more like a list item in the 1st level. So I used the relative position to move it over.

 

But if I use margin and padding, it still keeps the footnote looking like the last item in the 2nd level list. If you understood that explanation, do you think it will be ok to use relative positioning? Or is there another way to do that as well?

 

Edit

Ooohhh....maybe, I could write another ul, and put the span tag with the footnote in there, instead of li. Then 0 margin and padding should work.... I'll try ....

 

Edit #2

Oh, but that will create a ID inside a tag which uses the same ID. Because if I add another ul tag (which will be span id0), I'll have to enclose that ul tag, together with the original ul, inside another single ul tag with id0. I wonder if that might cause the world to explode...??? Heck, after the day I've had, what do I have to lose, lol!!

Edited by brynn
Link to comment
Share on other sites

ul and li have a default margin, padding and in some browsers text-dent, so you have to zero all of these for ul and li and not forgetting list-style-type where you set it to none.

ul, li {margin:0; padding:0; text-indent:0; list-style-type:none;}

to zero all padding, margins for all elements use universal selector

* {margin:0; padding:0;}

which should be placed at the top of your css styling sheet. but you WILL have to reset these to your specification example p, h1 to h6, else these will merge into one large block of text.

p {margin: 0.9em 0;}
Link to comment
Share on other sites

dsonesuk, sorry for the delay in responding. I don't understand which comment or question of mine that your last comments are answering. And part of that is my own fault for asking so many questions. So I apologize for that.

 

When do I need to make margin, padding, text-indent 0, and list-style-type: none?

 

Since the next thing you said was about the universal selector, you must mean "always"?

 

And why would I need to set new margins for p and h1 to h6? Do they also come with some sort of unwritten default margin, which the universal selector for margin/padding eliminates?

 

And if I've guessed and concluded and inferred correctly on all that, why in the world do we have to eliminate all the margins and paddings and everything else, just to set them all again, somewhere else? Why doesn't setting a margin on a particular selector automatically overwrite any previously unwritten margin?

 

I'm especially concerned about setting the list-style-type to none, because the list-styles are important to this page.

 


 

Then there's something else I wanted to report, in case someone else might search this out, in the future. Going back up to my reply #24, where I had used <ul id="first"> and < ul id="second"> -- later on, I decided that since I was using them so often, maybe I should make them a class. And I did that successfully, for the most part.

 

But somewhere down the road, I noticed that I had lost the circle bullets, for the 2nd level list items, which this hidden-checkbox-form-code technique, apparently naturally creates. And I really needed those circle bullets, for the same reason I had created the custom bullet images (list-style-image:url('url'); ) i.e. just to help identify certain categories of items, within the list. (Basically, it lets me avoid a 3rd level of nested list.) So after a very long troubleshooting session, I discovered that using class with the ul tag, instead of id, causes the traditional filled in kind of bullet, instead of the circle bullet.

 

I don't understand why that happens. Maybe it's something unique to the form code, or the label or input tags, or style. Or maybe one of you wiser, and much more experienced web designers know why that happens? I guess it's not terribly important, now that I solved the problem. But as I said, I wanted to mention it, in case someone else searches out this topic, so they'll know what to do, if they have the same problem. :)

 


 

Thanks again for your ever-faithful support :D

Link to comment
Share on other sites

Yes! all browsers have default margins, padding, text-indent and even font-family BUT! they are not the same within each of these browser, IE (well used too, don't know about IE10) for example seems to place its total margin height to top, while other browsers place them equally divided top and bottom, the result in a page in IE is that the text always looks like it start with larger gap at top compared to other better browsers.

 

Now if you want to add specific margins and padding to each of these elements to overwrite the default individually, go ahead, I'm sure you'll lots of fun doing so...not! or just set all to zero and add your own, when and where required, as when you create new pages you will know they will be almost exactly the same in ALL browsers, you won't have to worry about any elements that you have not used before, having default margins and padding you have not already allowed for beforehand.

Link to comment
Share on other sites

Ok. Ok, so I set the universal selector for margin and padding to 0, and then add margin and padding wherever I might need it. So.....since I had already been assuming they were already starting with 0, pretty much all I have to do for margin and padding is set it universally to 0, and all the margin and padding that I've already set, will do what I already expected them to do. Correct?

 

But I'm a bit confused by text-indent. Oh wait, no, I just found it. If I'm not using text-indent anywhere, do I still need to set it to 0 too? Oh ok, you already answered that. Well, when you say "ul and li have a default margin, padding and in some browsers text-dent,..." you're saying that some browsers use text-indent instead of padding and/or margin? Do you know which browsers? Could this be skip-able? Although, I suppose it's not so hard to do..... Ok, so done with that, unless I said something wrong.

 

The part that really worries me is the list-style-type setting to none. Is it a similar kind of thing, where some browsers have certain styles set by default? So that setting to none, is really the same as setting the margin and padding to 0? Where I've already been assuming there were no defaults, and I was setting it originally myself?

 

Oh whew! If I understand all that correctly, all you're saying is to set everything to 0 or none at the beginning. And I don't have to re-do anything I've already done? I just need to add those 4 things? Can I use the universal selector for all 4 things?

 

Thanks again :)

 

Edit -- And also, do I put it in the body selector?

Edited by brynn
Link to comment
Share on other sites

Normally you would use list-style-type: none to remove for menu navigation only, you would use a class our id ref identify it as a menu listing and remove the bullets from this specific unordered list only. Also i would never use the bullets if i needed something like that, i would use a background image applied to a span given display: block, as you have more control of design and positioning that way.

Link to comment
Share on other sites

Update: Still struggling. But maybe if someone could explain this.

.menu :hover > a {color:#fff; background:#949e7c;}

Is that a correct selector (.menu :hover > a)? It must be, since their page does work. And I am still very new to CSS. But I surely don't recall a ">" in the CSS tutorials. I know ">" more as part of the tag, than part of the style.

 

 

 

A greater than symbol (>) in a css stylescheet selects the immediate child elements.

 

Here's an example:

<body>  <div class='box'>    <div>This is the First Child        <div>This is the Second Child</div>    </div>  </div></body>

and you have a selector:

body {background:white;font-size:16px;}.box > div { background:black;font-size:30px; }

Only the div immediately after the .box class will have the black background and font size of 30 pixels- the div inside that div, however, will inherit the background color specified elsewhere

Link to comment
Share on other sites

Thanks for explaining that Dreadful_Code. I ended up not using that particular code, but the 'greater than' symbol also is used in the code I'm using now. So it's helpful to know how it works.

 

dsonesuk, I'm not sure if I understand your last message. I'm not using this expandable list for basic site navigation.....although it is for navigation, in the end, I suppose, since the list items are links (they are 99% outside links). Once I open my site, I'll put a link to this page, so you can finally see what I've been working on.

 

I was really shocked at how many different styles and variations of menus are available, after seeing the site that Diedre's Dad linked me to. I guess it would be possible to apply all kinds of fancy styles to my simple lists. It could probably be made to look like the flyout menus that I was looking at earlier (except they wouldn't fly out). But since I'm doing this mostly on my own, I really need to keep it simple. And since they really are lists, the bullets aren't out of place.

 

Actually the contents of this page will change over time. I expect I'll be editing at least twice a year. So maybe once I'm more comfortable with html, I'll go for a more polilshed look.

 

Anyway, I tried using the universal selector for margin and padding, but it messed up the whole page. I'll have to go in and put custom margin and padding for a LOT of things. But even without the universal margin and padding, the page looks ok in both Firefox and IE. Until I decide whether to get extra browsers, and which ones, I'll have to rely on friends to check it out in other browsers. I really don't expect to be doing much of this, in the future -- just the occassional webpage, now and then.

 

Anyway, thanks to everyone who has helped me with this. I should be good to go, from now. Although, you never know. I might have to dig up this topic after a while. But hopefully it's finally ready to be closed. Thanks again :D

 

PS -- I'm going to tweak this topic title slightly, since the subject changed from flyout menu to expandable list.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...