JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
Related
I am making a website's top navigation. There is a margin bug with the menu.
I have defined margin / padding : 0 for list items as well as display: inline-block.
See the demo: http://tinkerbin.com/495Qb956
Basically I want to remove that left/right margin from the list items, and know why this margin is there.
By default display:inline-block take margin from left. Write like this:
.top-right ul {
background:black;
height:43px;
font-size:0;
}
.top-right ul li {
display:inline-block;
border:1px solid red;
margin:0;
padding:0;
font-size:13px;
}
Check this http://tinkerbin.com/YWeV7osy
That room you're seeing are spaces between the blocks. If you remove all white-space between the </li> and <li> you'll see the space disappear. Basically an inline-block will behave like a word in a sentence, and any white-space between two of those blocks will be folded into 1 space char.
One solution is to use floats to make the blocks stick together:
li { float: left; }
You might need to clear the elements that come after such floating elements.
I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
I have a problem with a div in IE7, it's disappearing and I don't understand why.
I already tried to add zoom:1 and overflow: hidden as someone suggested but it is not working.
The div is inside an unordered list (floated left) as the last element, floated right.
This is the HTML
<div id="top_menu">
<ul id="dropmenu">
<li>menu item1</li>
<li>menu item2</li>
...
</ul>
<div class="lang">content</div>
</div><!-- end top menu -->
This is the CSS
#top_menu {width:900px;font-size:13px; }
#top_menu ul#dropmenu {width:630px; height:28px; margin:0px; padding:0px; list-style:none; float:left; }
#top_menu ul#dropmenu li {float:left;display:block;}
.clearfix {display: inline-block;} /* for IE/Mac */
#top_menu .lang { width: 120px; color:#fff; margin:4px 10px 0 0; float: right; }
#top_menu .lang a{ color:#ff8601; }
#top_menu .lang a:hover{ color:#fff; }
Thanks for your help
EDIT: I included the html and removed url to avoid client complaints.
You need to add .clearfix to div#top_menu and add height: 24px; to div.lang
That fixed all the menu problems for me.
edit
...and probably don't use absolute positioning to solve layout issues.
i'm on IE9 now, but putting this site into "Compatibility View" seems to show the issue too.
The last entry in the main menu [ul] seems to extend all the way to the right of the element. This appears in markup before the .lang div so I wouldn't expect it to be covering it up...
Have you maybe tried putting the .lang element into "position:absolute" and then seeing if it shows up, (obviously assuming the parent element of it is positioned relatively). After that maybe try absolute with a top of 20px or so and see if it shows up then.
Good Luck!
UPDATE
Hang on a tick there. your .lang div is inside the [ul] element so is actually incorrectly positioned, since the only element allowed as a child of a [ul] is a [li].
Why not try taking this div out of the list and have it instead, just outside, as a child of the #top_menu element....?
That might work!
Not sure if this is relevant to your situation, but some versions of IE will throw away empty divs; if the div doesn't contain anything, adding something like will force it to exist.
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.
I've coded myself into a CSS corner. I have a list of images that I display next to each other using an unordered list. The unordered list is placed inside a fixed width div, so that each 3 images, the next 3 images will display on the next "row".
Each li in the ul does not just display the image, it displays all kinds of stuff, like so:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<img src="" />
<p>Description</p>
</li>
</ul>
</div>
This works fine in most browsers, except for IE7. IE7 display the images beneath each other instead of next to each other. I know from the classic horizontal menu bar technique that this can be fixed by setting the float to left for the li. This does not work for my situation, because I do not know the height of each li, it depends on content. Wit different heights for each li, some very strange layout situations occur, for example an image sitting on the right of an empty row. Here's a stripped version of my CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Basically, I just want IE7 to listen to me and respect the inline-block statement, which SHOULD display elements next to each other.
Through a bit of smarter Googling I managed to find this entry:
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
zoom:1; and *display: inline; solve this issue. God I hate IE with a passion.