Currently I am working on a maintenance of website and I'm stuck with an problem, the problem is like that: I have to redesign the menu bar of the website. Previously in the menu bar there are 6 menus but now there are only 5 menus in it. I have to delete one menu item from the bar. I simply deleted that row from the list items of the menu bars. In the previous designed they used the display property of css to create the blocks but after deleting the one menu the space for one menu item is left, while i like to increse the width of the menu bar.
Without seeing the code, it is hard to say.
However, in your stylesheet you can adjust the width for the list items as such
.menu li{width:35px;}
To figure out how much to adjust, take the width of the last element and divide by 5 (the number of the remaining list elements).
So, if your width was 50px, add 10px to the element style so that each of the remaining elements covers the width of your previous list-item.
Maybe a brute way to this but it actually works great:
Use table instead of list. I use this with some padding offset because spaces between cells are linear based on cell content size and padding gives you constant minimal space between menu elements.
Another way is to use block elements and CSS display:table and table-cell but remember IE7 does not know these ones.
Benefits: no Javascript
If the menu item <li> has a fixed width, then the total width of the menu divided by 5 gives the width of the each menu item. check in the css for the tag "li" or the class specified for li. then change the width of that to the new width
Related
Menu width is set to 80% and centered. What I would like to happen is for the menu to be as responsive as other page elements, i.e. adjust it's size/width until the screen is a specific size (say 1200px or so), then split in half. When the screen width hits 910px or below, the menu collapses into a hamburger. That works correctly. What doesn't work correctly is that the slightest adjustment in screen size causes one or more of the "li" items to drop down a row. Is there a way to force the "li" menu to split in half (after the 4th item) at a certain screen size? I have tried many different combinations of ul li:nth-child(4) a commands, but nothing seems to have any effect.
On the appropriate screensize, set the .nav li width: 25% and float: left. Make your .nav a display:block
Make sure you clear the floats with a clear:both element, or a clearfix on the container.
I take it you want the buttons to always be in equal rows?
A simple approach for just a single split would be to put the buttons in to two divs with display:inline set, and use nonbreaking spaces to separate the buttons. That way, there is no breakpoint within the div so insufficient width should force the whole second div onto a new line.
Or, I could suggest splitting the buttons into two divs with default display:inline css, and if a split is needed on the basis of viewport width, then change the display property of one to block with js. That will force the rest onto a new line. Not tried it but in principle it should work.
As an interesting alternative, you can it seems separate the items with br tags which have display:none set. In which case they do nothing. Changing that to display:block activates the br, forcing a newline. I'm not sure if this is approved css but it works in FF and Chrome.
Scary subject, BTW. Had me cowering under the desk. ;)
I have a div element that is supposed to be a horizontal main menu. I used a ul and its lis as menu items. lis are inline-block so they make a horizontal menu. I set the div's width to 100 percent but I didn't set any height for the div, so its height is defined by its paddings, borders and contents. Now I want to fix its height to whatever it is (without directly defining), so I can use overflow to hide overflowed menu items on smaller screen sizes. I think it would be good for responsive designs. Can it be done with pure CSS?
Currently, as I make the browser's width smaller, menu items pile up, make more than 1 row of menu items and force the div's height to fit. I want to see only the first row of menu items.
You can ensure the contents of the div stay on one line using the css
white-space: nowrap;
If you want multiple lines, you can do something like
max-height: 3em; (or whatever value is appropriate)
Beware of how the overflowing content looks as it spills out of the element, it may abruptly clip out of view and look a bit nasty. If it is just text you can use
text-overflow: ellipsis;
But if you are dealing with actual elements, it's more complex! It's possible to create nice fades using only css and pseudo elements though, that's what I would do.
I got an issue position a div element within a page. My problem is that I have a navigation bar with a hierarchical 3-level menu. When I open some of the 3rd level menus the element containing the items goes below the page height. I'd like to keep this element in the page area, maybe moving the top position, so the user can keep use it without scrolling (that is also problematic).
You could see an example here: http://www.frankydev.com/mitoweb/
Many thanks.
I see it even happens on large screens.
Limit the height of the 3rd menu div with max-height, say 300px and then add overflow-y:scroll;. This will add an up-down scroll bar to the 3rd menu element and it looks relatively nice.
Or change all your font size and spacing to allow more room.
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
I am new to css and I have a menu bar that I am working on however I am having a problem with one of the menu ("LINKS") items. If you roll over the Links menu item your notice I have three boxes there that I am trying to separate into there own area. Right now they are over lapping each other. Could you please tell me what I am doing wrong?
I have tried margin-left and padding-left and I find that they either move the box further to the right or widen the box more. But they don't space them out.
You can find the menu bar here: http://jsfiddle.net/vtjPR/
The three boxes (div.col_1) have a set width of 125px. However, within the boxes are the link lists (ul.blackbox) with a defined width of 150px. Also, its list items have a defined width of 130px.