Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
Related
I have a simple structure
<nav>
<span>
A
B
C
<span>
<nav>
and I go Godzilla on the css, e.g.
margin:0px; padding:0px; vertical-align:bottom; box-sizing:border-box;
But no matter what I try there is always this really cool 1px gap at the bottom of the element. Why is it there and how would you make it go away if you were me?
fiddle
One possible solution would be to make the <span> element inline-block. This will remove the gap
EXAMPLE HERE
nav > span {
display: inline-block;
}
Alternatively, a display of block works too. The point is that it is no longer a pure inline element.
I see what you mean, it does appear (on Firefox) without zooming in closely. I believe the problem is the default line-height given to text in browsers, which results in a bit of extra space between text lines.
With some experimentation, I found that adding these styles works:
nav {
font-size:16px; /* Default font size in Firefox, but specify just in case */
line-height:18px;
}
Here's an updated JSFiddle to demonstrate it. Seems to work properly in Firefox and Chrome. Let me know if you have any problems, though. Hope this helps!
I have vertical drop down menu, and I want that the sub menu will be vertical too.
Seemingly, if you set float:left for the sub menu li it should be fine, but the problem is, that the sub menu ul which is nested in li has a width that depends on it's parent (li) width and don't expands enough, so that the lines (li) of sub menu are presented vertically.
You can see an example: http://jsfiddle.net/r6qNJ/
I thought about two solutions:
Solution 1:
Expanding a width of a nested ul to a very big one
ul.sub{width:999px;}
The problem is, that by this way I have to dissable a background and border of a sub menu ul, as it has a non nature width.
An example: http://jsfiddle.net/r6qNJ/1/
Solution 2
Using display:flex property, so that the width of a child element will not depend on it's parent width.
An example: http://jsfiddle.net/r6qNJ/2/
The problem is, that it's not supported in old browsers.
So, what is more elegant and efficient CSS solution you can offer?
(I am looking for a pure CSS solution, without changing HTML, since I am talking about changing in wordpress theme and prefer to make changes only in css files)
You can have this option with white-space:
ul.sub{
position:absolute;
left:0px;
top:100%;
padding:0;
display:inline-block;
white-space:nowrap;
}
ul.sub li{
display:inline-block;
margin-right:-4px;
width:80px;
float:none;
}
The demo http://jsfiddle.net/r6qNJ/23/
I'm trying to use only css to turn a nested div and a normal div into something where the top one can be hovered to view more content without moving all the layout around.
Essentially:
[hover me for more]
[content-that-gets-overlapped-by-hover-content]
or see the nearly-working example on jsfiddle:
http://jsfiddle.net/tchalvakspam/vVgY2/9/
Unfortunately, when you do overflow:visible, it seems to be nearly useless because you can't give the content that overflows any background style, so it remains unreadable.
Is that right, there is no way to give overflow:visible overflowing content a background? If that is the sad state of affairs, what is the shortest amount of changes that could be done to that content to turn it into a readable hover-to-expand section?
Finally found the solution in the form of a sibling selector on the hover to give the next element after the hovered element a margin to take the place of the now-absolute hover element.
http://jsfiddle.net/tchalvakspam/MBcDW/
So the pertinent css becomes:
#fixed-height{
position:relative;
width:100%;
height:1.25em;
overflow:hidden;
background-color:lightblue;
color:red;
z-index:10;
}
#fixed-height:hover{
overflow:visible;
height:auto;
position:absolute;
max-width:20em;
}
#fixed-height:hover + #right-below{
margin-top:1.25em;
}
Please see www.racedayworld.com
The plus sign (which is floated on the right of an accordian div panel) is being pushed down in certain browsers, but shows up fine is others...
I know it's happening in these browsers...
Firefox 3.0.5
IE 7
others?
Any ideas?
Instead of:
#accordion span {
float:right;
}
Get rid of the span. Float the image itself. Use:
#accordion img {
float:right;
display:block
}
Float only floats items above those which follow after in the document order. Try delivering something like this:
<h2><span><img src="plus.gif"/></span> text here </h2>
As others have also mentioned, the SPAN is possibly redundant.
id just make the img part of the background
#accordion h2 img{
position:absolute;
top:0; /* you might need to play with # */
right:0; /* you might need to play with # */
}
#accordion h2{
position:relative;
}
i would also just use JqueryUI's no-theme accordion instead, as it has support for open/active/inactive states/classes.
http://jqueryui.com/demos/accordion/
I have a table inside a couple of nested divs. One column holds an image whose width makes the total width of the page wider than the display and the horizontal scrollbar shows.
This cell is from an asp.net ajax popup (on mouseover) and is hidden via javascript, so the scrollbar isn't needed.
Is there a way via css/xhtml to make it so that the scrollbar doesn't show? I am sure that the width of the table cell is causing the problem because when I remove it, the scrollbar is gone. The image element is nested in a div. I tried overflow: hidden and manipulating the table cell widths - neither worked, at least without altering the widths of the images.
Thanks in advance.
I can't say I'm sure why you'd be getting a scrollbar with overflow:hidden, but here's the trick I use to have mouse-over popups:
HTML:
<div><a href="#" class="showtooltip">Text you want visible at all times. <div
id="tooltip">elements you want for mouse tooltip</div></a>
CSS to format links:
a:link .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:active .{
//CSS
}
Your CSS will likely be the same for all of those next up we need to set the CSS for the tooltip:
a:link .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:visible;
//CSS to properly position and size div
}
a:active . div{
visibility:hidden;
}
You can then have your ajax write to document.getElementById('tooltip')
I should have mentioned the fact that this problem only occurs in IE7 and not in FF3. Anyways, the following link illustrates the bug I ran into. Hope this helps anyone else who runs into this problem.
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/