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/
Related
Currently im making a wordpress page, and i want to add these small author cards (pic related), which i can't seem to align side by side.
i figured that the margin is what restricts me from doing so.
The boxes are composed of shortcode. and i made my own div in my stylesheet to resize the width to 50%. However these author boxes are within a container, that sets a fixed margin, so if i for example try to float the boxes respectively left and right, they still align on top of each other.
Furthermore i tried adding individual div tags to my boxes, in order to css my way out of it, however still no luck.
Is there a way in which i can override the original margin?
Apply this CSS --
.author-shortcodes {
display:inline-block;
}
This will make those 2 boxes to stay next to each other. If applying this CSS does not really override, use 'display:inline-block !important;' instead.
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 got a navigation menu as image. I made a nav div with the image as background and a fixed width and height. Now in the little boxes under the lines I want nav links. So what I did is I made multiple divs in the nav div and positioned them in the little boxes. So they are all positioned perfectly inside firefox but, unfortunately in other browsers like chrome they have different positions (nothing extreme, but they arent perfectly aligned in the little boxes).
What I thought was that whenever you have a certain fixed height and width of the container div. The margins of the child divs will be the same on all browsers and screen sizes as they will always be the same size. How is this possible and what would be the best options to make this nav menu possible?
Try use this http://www.image-maps.com/ ... image maping tool lets you to set link coordinates.
If you know where these boxes are located pixel-wise in the background image, you could absolute position the nav divs and get them precisely where you want using top and left based on pixels of the parent div (with the image) instead of using margins.
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.