I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.
Related
Background:
I have created a ul menu that contains 2 divs -> one div for the icon, second div for the text. Reason for the divs is that I want the text to be neatly vertically aligned, which otherwise wouldn't be the case.
Problem:
I managed to make the whole second div clickable with display: block; but I struggle to expand the link beyond the div so that it stretches over the entire li, i.e. also covers the first div.
Attempts:
I already tried using Bootstrap's .stretched-link on the href tag (see first link) and setting position: relative; to all divs and li. However, this didn't work.
Question:
Is it somehow possible to expand the link across the entire li, while keeping the divs to neatly align?
Note:
(a) I'm aware that one work-around would be to place the href tag around the li, but I understand this isn't good practice anymore.
(b) Just to show the alignment problem, I have created a second JSfiddle, when the divs are removed.
JSfiddle
(1) divs included, but icon div not clickable: https://jsfiddle.net/AlphaX/z5f60m23/11/
(2) divs removed and whole li is clickable, but text isn't vertically aligned because font awesome icons have different widths by default: https://jsfiddle.net/AlphaX/89a1x7gs/2/
Just do your second approach, with the <a> wrapping the <i> and the span, and add some additional style rules:
li i {
width: 20%;
display: inline-block;
}
I edited your Fiddle too: https://jsfiddle.net/uxnfvzyc/1/
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
I have a peculiar issue with CSS -- the 'VPS Plans' div and 'Features' div should be floated together and line up at the bottom. Unfortunately, unless I adjust the size of the Features div to 460px, it kicks down to the next line and I can't figure it out.
The page can be seen here.
Thanks!
Everything is looks good, you need to add display: inline-table; for below CSS.
The element will displayed as an inline-level table
ul.vt li.vt-line-header {
display: inline-table; //----Add this to your CSS
}
Hope you understand.
When I resize the browser window my navigation bar div drops below the search box div.
How can I stop the nav bar moving and keep it in the same place? The footer behaves itself and its structured in the same way?
Here's a link...
http://www.signport.co.uk/test/asg_template3.html
Thanks!
This happens because your menu does not have a width specified. Whereas you footer behaves because it has a width specified( div with id footerleft)
I'm testing on Chrome now, removing the width:100% you have set on the navigation bar div (wrapper_menu_full class) seems to do the trick. This 100% refers to its size compared to the containing div (#mainmenu3).
If this still doesn't work on IE7, try setting both divs inside #mainmenu3 to display:inline, although now I'm testing on Chrome it doesn't seem to make any difference.
REPLACE YOUR CSS
#mainmenu3 {
height: 150px;
line-height: 20px;
list-style-type: none;
overflow: hidden;
width: 100%;
}
YOU WILL GET THE DESIRE OUTPUT
You're using floated elements on both divs (searchfilter and menu).
When you are using the floated elements, and the width of the last of the floated element exceed parent's width, it goes moves to the next line (belov).
Put this into your css to make it work as you want:
#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}
i want to know that what is the difference in css properties of LI and UL that makes a menu vertical and horizantal.
Vertical would be the default.
For positioning of li's horizontally you would set them to either float or display: inline.
However if you want to go the display: inline route keep in mind that inline elements cannot have a set size.
There is also display: inline-block, but I don't think IE supports it.