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. ;)
Related
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!!!
So I have two div elements on my page, one directly on top of the other. One has visibility:hidden and the other is visible. I have a button that swaps their visibilities, each time it is clicked the visible div is hidden and the hidden div becomes visible. The divs both have heights which require the browser to be scrolled vertically, however their heights are different. If I make the shorter one the visibile one, I can still scroll as far down as i would be able to if the taller one were visible. So when the shorter div is displayed, there is a bunch of empty space beneath it because you can scroll down far past it. How do I make it so the window will only scroll as far as it needs to display the VISIBLE content? Thanks.
use display:none instead of visibility:hidden. Then if you want to show the hidden div again, just use display:block.
visibility:hidden retains the space used by the div, it just doesn't render it. In contrast, display:none effectively removes the element completely, including the space it would normally occupy.
This ought to help you out. visibility: collapse hides the div completely, while still keeping it on the page. Having them both should solve your problem.
visibility: collapse;
display: none;
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
Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here
Use
#links a {clear:left;float:left}
The float will allow the link to be sized, and the clear will prevent the links from being on the same line.
You may need to add a clear:left to the #links container depending on your design.
EDIT
A little tutorial since you asked:
There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.
Inline elements can't have their width or height styled. Blocks can.
<a> is an inline element. By setting its display to block, you tell it to make a new line every time.
float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.
The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).
You won't need display:block and float: at the same time.
Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).
set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;
display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.
Simply remove that declaration and your problem should be gone.
JSFiddle example
Do you mean something like this:
Foo
width:auto?
Or try
display:inline;
on the links
it shouldnt get the divs width then
I am still trying to get sprites to work right, and continue to be confused, since I can't seem to find an example matching what I want. Basically I have a series of 16x16 icons that need to go in row. I don't seem to be able to find the right element to use and set the background image on.
I have tried divs, and they work in block mode, but not inline mode. I have tried span, a, li and many others. All these set in display:inline don't allow me to set the element width, and so I get a few pixels of background image only. If I put in a few nbsp it will work, but that hardly seems to me to be the right solution.
Is there a URL that has a little series of icons in a line that use sprites for their background images? Preferably elements that I can do :hover on?
If you have to use display:inline then you have to put your elements inside a container. A common example is this:
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
Set the li elements to display:inline and the a elements to display:block. Then you can add a width to the a elements along with the sprite and the li elements force the a elements to sit horizontally.
You can find a tutorial using this method here.
Stackoverflow uses this technique. If you right click on the upvote/downvote arrows, and click view background image (in Firefox) you will be taken to the sprites image. From looking at the source code, they are using spans. You should be able to set the width and height of the span with CSS.
If you want, you can use to use
display: block; float: left;
and the elements will line up as if they are inline. You can then set the height and width with CSS as well.