I have a navigation list
<div id='nav'>
<ul>
<li>Home</li>
<li>Products</li>
<li>Sign up</li>
<li>Cart</li>
</ul>
</div>
and I already make the style of the "a" elements by CSS, 25px tall and 100px wide and give the background colour,
#nav li a {
height: 25px;
width: 100px;
display: block;
text-align: center;
background-color:#FFE9BA;
}
but I still want the whole navigation span the width of the page, how can I do this? Thanks！
Something like this?
Added the following CSS
#nav {
text-align: center;
background-color:#FFF9CA;
}
#nav li {
display: inline-block;
}
Thanks, it works a little bit, and if I add float:left; in the #nav li
#nav li { display: inline-block; float:left;}
then looks does not change anything.
Without using ul, I changed to use table and it fix the problem, it looks easier for me.
Anyway, thanks for helping.
Related
I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.
Here is my code:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><span>Om kampanjen</span></div></li>
<li id="node_id_65"><div><span>Fakta om inneklima</span></div></li>
<li class="lastli" id="node_id_66"><div><span>Statistikk</span></div></li>
</ul>
<!-- Top menu content: END -->
</div>
UPDATE
I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion.
But the list items are still floated left within the ul.
Do I need Javascript to accomplish this?
From http://pmob.co.uk/pob/centred-float.htm:
The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.
Code
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
<ul>
<li>Button 1</li>
<li>Button 2's a bit longer</li>
<li>Butt 3</li>
<li>Button 4</li>
</ul>
</div>
This works for me. If I haven't misconstrued your question, you might give it a try.
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1 </li>
<li>Amazon 2 </li>
<li>Amazon 3</li>
</ul>
</div>
With CSS3 flexbox. Simple.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
This is the simplest way I found. I used your html. The padding is just to reset browser defaults.
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64">
<div><span>Om kampanjen</span>
</div>
</li>
<li id="node_id_65">
<div><span>Fakta om inneklima</span>
</div>
</li>
<li class="lastli" id="node_id_66">
<div><span>Statistikk</span>
</div>
</li>
</ul>
<!-- Top menu content: END -->
</div>
Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Try this:
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
Do it like this :
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
And the CSS:
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}
Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.
It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
Demo - http://codepen.io/grantex/pen/InLmJ
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Menu</li>
<li>Others</li>
</ul>
</div>
.navigation {
max-width: 700px;
margin: 0 auto;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 10px;
width: 100%;
}
Omg so much cleaner.
Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.
To align text and inline level elements within a block level element use text-align:center;. So all together something like...
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
... should work.
The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...
ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods
(".").
I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)
/*ul wrapper*/
.gallery_wrapper{
width: 958px;
margin: 0 auto;
}
/*ul list*/
ul.gallery_carrousel{
display: inline-block;
margin: 0 auto;
}
.contenido_secundario li{
float: left;
}
i use jquery code for this. (Alternative solution)
$(document).ready(function() {
var margin = $(".topmenu-design").width()-$("#topmenu").width();
$("#topmenu").css('margin-left',margin/2);
});
div {
text-align: center;
}
div ul {
display: inline-table;
}
ul as inline-table fixes the with issue. I used the parent div to align the text to center.
this way it looks good even in other languages (translation, different width)
#Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.
[it was set up using robusto's sample code]
HTML:
<div id="centerDiv">
<ul class="centerUL">
<li><img src="http://placehold.it/200x150> </li>
<li><img src="http://placehold.it/200x150"> </li>
<li><img src="http://placehold.it/200x150"></li>
</ul>
</div>
CSS:
div#centerDiv {
width: 700px;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
}
.centerUL li {
display: inline;
text-align: center;
}
ul{margin-left:33%}
Is a decent approximation on big screens. Its not good, but a good dirty fix.
What worked for me was just setting the li item's display property to inline-flex:
li {
display: inline-flex;
}
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
You may choose to add justify-content: center to the lis, and padding: 0 to the ul to straighten things out.
.topmenu-design
{
display: inline-table;
}
That all!
I have a similar problem found here - Using :after to clear floating elements
and its demo solution:
http://jsfiddle.net/EyNnk/1/
However it still does not solve my situation:
What I m trying to do is to pass background of ul to li, by using float ul as well.
As a result I have no way to clear float except to add a div outside ul to clear the float. Is there a better way?
HTML
Text Before
<ul class="wrapper">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li style="background:#555">test4</li>
</ul>
Text After
Here is an updated problem:
http://jsfiddle.net/EyNnk/456/
What I m trying to get is that:
"Text Before" should be before the ul
and "Text After" should be after the ul
Thanks all for the solution, the best goes for connexo:
ul: display:table-cell for above/below
ul: display:inline-block for before/after
no need to float, so that there is no need to clear float, the less the better
Instead of float: left;, use display: inline-block; on your ul.wrapper.
https://jsfiddle.net/EyNnk/460/
For new lines between elements, use display: table-cell; for your ul.wrapper. Instead of making your li { float: left; }, use display: inline-block;. To avoid unwanted whitespace issues, set the parent's font-size: 0; and reset to the font-size you need on the li.
https://jsfiddle.net/EyNnk/464/
See Brett DeWoody's comment. In case you wish you place <ul> element inline between these texts, you could place them in its container. For example, let it sit in the span like this:
<p>Text Before</p>
<ul class="wrapper">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li style="background:#555">test4</li>
</ul>
<p>Text After</p>
CSS:
.wrapper {
list-style-type: none;
display: inline-block;
background: #888;
}
.wrapper li {
float: left;
padding: 10px;
}
.wrapper:after {
content: '';
display: block;
clear: both;
}
See fiddle: http://jsfiddle.net/EyNnk/462/
Remove float:left; from ul , Li
and add display:inline-block;
If you want the before and after text to be to the left/right of the <ul> add display:inline-block to .wrapper.
.wrapper {
list-style-type: none;
background: #888;
display:inline-block;
}
Here's a demo.
If you want the before and after text to be on the top/bottom of the <ul> adddisplay:blockto the.wrapper`.
.wrapper {
list-style-type: none;
background: #888;
display:block;
}
Here's a demo.
Try this
div{
background: #888;
}
.wrapper {
list-style-type: none;
background: #888;
display:inline-block;
padding:0;
margin:0;
}
.wrapper li {
float: left;
padding: 10px;
}
.wrapper:after {
content: '';
display: block;
clear: both;
}
<div>
Text Before
<ul class="wrapper">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li style="background:#555">test4</li>
</ul>
Text After
</div>
This question already has answers here:
How do I justify a horizontal list?
(10 answers)
Closed 7 years ago.
I have used the code from this question to create a horizontal menu where each item is evenly spaced.
Here is my version:
<div id="navigation">
<ul>
<li class="first">
Home
</li>
<li>
About us
</li>
<li>
What we cover
</li>
<li>
Monitoring agencies
</li>
<li>
Publishers
</li>
<li>
News
</li>
<li>
Contact us
</li>
<span></span>
</ul>
</div>
And the CSS:
#navigation {
text-align: justify;
}
#navigation ul span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
#navigation ul {
display: inline;
list-style: none;
}
#navigation ul li {
display: inline
}
#navigation ul li a {
display: inline;
border-right: solid 1px #ccc;
}
#navigation ul li.last a {
border-right: none;
}
Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?
Here is a fiddle.
I've added an answer here.
Hack Using Extra Elements for the Spacer Motif
Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/
Consider the following HTML:
<div id="navigation">
<ul class="navigation">
<li class="first">
Home
</li>
<li class="spacer-motif">|</li>
<li>
About us
</li>
<li class="spacer-motif">|</li>
...
<li class="spacer-motif">|</li>
<li>
Contact us
</li>
</ul>
</div>
I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).
The CSS is as follows:
#navigation {
padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
display: table;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: table-cell;
text-align: center;
width: 1%; /* force cell to shrink-to-fit text */
outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
width: 10%; /* force spacers to take up a lot of space */
outline: none;
}
#navigation ul li a {
white-space: pre;
}
The layout is based on using table display types.
For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.
For li, use display: table-cell and text-align: center.
The trick is to force the table cells to shrink-to-fit the text labels by
setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force
the spacers to expand (evenly) to fill up the line.
To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).
Cleaning Up The Semantics
The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.
The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.
However, if the elements are a problem, they could be inserted using jQuery or JavaScript.
IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7
here take a look at this fiddle HERE
I made some small adjustments. I changed display:inline; to float:left; and centerd the text.
The space is coming from the 5px padding i gave to the
ul li a
I would use display: table on ul and display: table-cell on li for this.
and even padding on both sides for the a tag
Depending on the spacing your after, something like this should work:
#navigation ul li a {
padding-right: 10px;
}
Change the 'px' value to your needs.
You can try something like this:
#navigation ul li a {
display: inline;
margin-right: -14px;
padding-right: 14px;
border-right: solid 1px #ccc;
}
But it might not be cross-browser.
http://jsfiddle.net/gjFYf/2/
I found that padding-right: 30px; in #navigation ul li a worked nicely.
I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.
New styles...
#navigation ul li.line {
display: inline-block;
*display: inline;
zoom: 1;
width: 1px;
background-color: #ccc;
height: 24px;
position: relative;
top: 5px;
}
#navigation ul li a {
display: inline;
line-height: 36px;
height: 36px;
text-decoration: none;
font-size: 18px;
color: #14328C;
font-weight: bold;
}
New Html snippet...
<li>
Publishers
<li class="line" />
</li>
It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.
Its also now semantically incorrect.
Fiddle.
Here's my (abstracted) css and HTML:
#primary-menu{
text-align: center;
margin: 20px 0;
}
#primary-menu li{
list-style-type:none;
display: inline;
margin: 8px;
padding: 5px 30px;
}
#primary-menu ul{
padding: 20px 0px;
}
<div id="primary-menu">
<ul id="main-menu">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
I've tried putting #primary-menu a{display:block;} and taking out display: inline; and adding in float:left; in #primary-menu li but then the list shifts down the page and moves outside of the containing div, plus it doesn't seem like it keeps the <a> streached after I put float:left; in.
Another option I know of would be to change the list to look like <li>one</li> but I wouldn't really want to do this because (apart from it feeling very hacky) this list is being created by Drupal and I wouldn't really know how to do this without having to learning how the API works, which doesn't seem worth it for this one problem.
All help would be welcome. Thanks.
If I get it right, then you just have to remove the padding from the li element and add it to the a. Also you have to change the display type:
#primary-menu li{
list-style-type:none;
display: inline-block;
margin: 8px;
}
#primary-menu li a {
padding: 5px 30px;
display:block;
}
See: http://jsfiddle.net/v6ZFx/
ids should be unique. use classes instead.
never place a block element in an inline element.
li { display: inline-block; width: auto; padding: 0}
Now you can set the width of a_s to the full size. Or set the width on the li elements.
I am making one simple horizontal menu with CSS and simple unordered list. The HTML of the menu is following:
<div id="navigation">
<div id="nav-holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
And CSS is as follows:
#navigation
{
display: table;
height: 35px;
width: 100%;
#position: relative;
overflow: hidden;
background: Black;
}
#nav-holder
{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#navigation ul
{
#position: relative;
#top: -50%;
}
#navigation ul li
{
float: left;
}
#navigation ul li a
{
padding: 5px 10px;
margin-left: 2px;
background-color: Red;
text-decoration: none;
font-family: Verdana;
color: White;
}
I want the menu to have a 2px margin around all of the link elements.
The problem I am facing is that while it renders itself fine in IE with all of the rights margins but both Chrome and Firefox (both are latest) are having the following issues:
The problem does not seem to be related to only this particular implementation but Ive seen it rise up from veertically centering the links with line heights and so on too.
I would like to find a way to have all of the margins to look the same or some way to avoid this problem all-together.
Basically, I got this thing sorted out. I set the same line-height and height attribute to all of the following: ul, li, nav holder. I did it because when it was not done, all of these were rendered differently from browser to browser.
In addition, I removed the positionings, vertical alignings, hav-holder div entirely and then some.
try
display: inline-block;
for your #nav-holder