I have a Radmenu which has 6 buttons in it which need to have equal spacing between them in my horizontal menu. I have managed to get this right using a percentage value but what if someone decides to add another menu button?
Is there a way of aligning my UL menu in the middle of my wrapping DIV and then spacing the buttons equally.
To top this off, the left button needs to be floated left and the rmLast button needs to be floated right, then the buttons needs to be distributed evenly.
Many thanks!
James
This is one of those problems that could be solved with a table in about 20 seconds.
Anyway, the following link might help:
http://joomlapanel.com/joomla-article/joomla-tutorial/247-fixed-a-liquid-columns-with-css-a-jquery-.html
This technique uses a combination or stylesheets and javascript (jQuery) to accomplish this.
Related
With the advent of the 'nav' tag I'm revisiting the creation of a navigation bar. There are many tutorials but they take different approaches and cloud the issue with too much css.
Specifically, I have a 960 width content area and I want to centre the nav buttons within this.
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
If I'm centre-ing the buttons then surely I don't need to 'float' them? Text-align, centre for the ul should do the trick.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
Here's a fiddle with a few examples: http://jsfiddle.net/joplomacedo/ejSby/
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
The nav element is a purely semantic container. In terms of css it behaves as nothing more than a simple block level element like div.
If I'm centering the buttons then surely I don't need to 'float' them? Text-align, center for the ul should do the trick.
If you,re using an ul, like you're saying you do, than you'll need the li's too. The problem is li's have a display of block (actually, not block - list-item. In the ways we're interested in, they behave like block though) - and when you want to put block level elements side by side, then you'll always either need to float them, or change their display to inline (inline-block).
Either 'floats', or 'inline-blocking'. I tend to prefer using the "inline-block technique" for many reasons - one of them is that, centering the blocks, as you want to, is just a matter of setting text-align to center on the parent element.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
It seems simpler to add padding-top & bottom to the nav block, doesn't it?
So again, here's the fiddle: http://jsfiddle.net/joplomacedo/ejSby/
I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie "underneath" the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to "click through" these dropdown divs?
I know that there is "pointer-events:none" But this would seem to disable all clicking on the dropdown menu, which I cannot have.
I've seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don't block divs that are positioned "underneath" so what's the solution here?
Is it something I need to fix with the positioning of my dropdown menus?
Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren't clickable! Then I did "clear:both" and it moved down and finally realized the hidden divs were in the way.
It seems like you're using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.
You should be hiding them differently, with either of the following:
Use visibility: hidden or display: none (if you want to also hide it from screen readers)
Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
This will ascertain that they're still readable by screen readers.
Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.
I have a dynamic sub-menu that gets programmatically constructed in the code behind. Whenever a large amount of items are added, the scroll arrow appears to allow scrolling of the sub-menu, but when it does appear, it also seems to truncate the menu text because the sub-menu width is not correctly sized to accommodate the text.
The problem is not the scrolling itself; that is working the way I want it to. The problem is that the menu width is shortened and this is truncating the menu text when the scrolling arrows are presented for large menus.
This problem seems to be in IE7, because it is working fine in IE6, the width of the menu is of the appropriate size to fit the text. Has anyone experienced this before and how did you fixed it?
you can wrap the menu in a div and set overflow:scroll on that, but that applies to the entire menu, not the drop-down part. You can't change the drop down part on the standard menu, but it you use the CSS Adapters (http://www.asp.net/cssadapters/) you can change the size and scroll capabilities of the drop-down parts. However, this gives the standard scrolling - you see a scroll bar around the section and you have to scroll manually, it's really not a very nice experience. What you probably want is something that gives an arrow at the top/bottom to allow scrolling as you hover over it, to bring the items into view; this cannot be done without rewriting the menu control. If you need this functionality you might be best to look at a third party menu control, or even one of the ajax frameworks which might have something. jQuery...
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)
Can anyone tell me how to fix the DIV Overlap here
http://www.zomghentai.com/daiakuji-episode-7-sub/
The Video Source 1 and Video Source 2 buttons are overlapping on the title bar.
**Note, also, for some reason...if I put float:left; in the span.sources, the hyperlink on the buttons disappear, any thoughts on that?
Edit ** Problem has been fixed. I had to add Float left to a bunch of divs ones after another.
Try to position the two buttons relatively