If you go to http://www.leapfm.com and scroll down to the footer you'll see that the links are on the right bottom hand side.
How can I put em' in the center?
Please use Firebug or inspect element for easy access to the code.
So I'll start top down from the div class="footer", you'll need to change or add these css properties:
.footer {
display: block;
text-align: center;
width: auto;
}
The li for the links inside footer:
.footer li {
display: inline-block;
}
Then the a tags inside the above li tags:
.footer li a {
display: inline-block;
float: none;
}
Enclose the li-elements properly in a ul, and set margin: 0 auto on it.
Instead of using li-elements as separators, you could use li + li:before { content: "|"; }
Remove the CSS float:right for the class declaration.
.footer a {
float: right; //Remove this
display: block;
margin-right: 5px;
color: black;
}
Try to enclose the <li> tag with <ul>
and after that add this css :
.footer {
display: block;
text-align: center;
}
.footer ul {
margin: 0 auto;
}
.footer li {
float: left;
display: inline-block;
}
Remove float:right; from .footer a and enclose you are li tags with ul
<div class="footer">
<ul>
<li>Submit |</li>
<li class="divider"></li>
<li>FAQ | </li>
<li class="divider"></li>
<li>Contact Us </li>
</ul>
</div>
First of all you should enclose each of these LI's in a UL or OL.
Contrary to what the others have pointed out, you dont need to give the UL/OL a margin of 0 auto because it will already take up the entire space it has. Or give a display:block to the footer and text align. So when you set a text-align:center to the li; they will magically go in the center of the element. No need to center the parent element(the ul).
Also, if you want to do things the right way, get rid of the br tag and use margin or padding to space your way around your layout.
So; all you need to add to your code is this:
ul{
text-align:center;
}
ul li{
display:inline-block;
}
Sorry to put this in an answer. I would have rather be a comment to the top answer. I dont have enough rep for that. Not glory hunting!
Hope this helps
Related
I'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.
here is my code:
CSS:
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>a {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
color:#47c9af;
height:30px;
text-decoration: none;
}
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
HTML:
<div class="container">
<ul class="list">
</li>
<li></li>
<a href='#'><li><h1 >Header Of My Blog </h1></li></a>
<a href='#'><li><p>SubHeader</p></li></a>
<a href='#'><li><h3></h3></li></a>
</ul>
</div>
The result is something like this:
As you can see logo is not in order with other elements, what should i do?
Thanks.
Fixing the Alignment
To fix the alignment you simply need to introduce the vertical-align property to align everything to the top:
.list {
...
vertical-align: top;
}
Making your HTML Valid
A problem with your markup is that ul elements must only contain li children. Your current ul element has a children which have li elements inside them - this is invalid. Wrap your a elements within the li elements instead:
<ul>
<li>
<a></a>
<li>
</ul>
Making your HTML Semantic
You need to ask yourself some questions about your current markup:
What is this a list of? Why are you using the ul element instead of the header element?
Why are you using a p element as a "SubHeader"?
First, let us rearrange your HTML, so the code is valid. A list (ul) has list-items (li). The list items may contain anchors, paragraphs, headings, etc. Not the other way around.
Then we'll need to change the CSS a bit, so the anchors get the right color.
But the most important thing is the vertical alignment of the table-cells. By adding vertical-align to the list items, they'll be in the right alignment.
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>li {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
height:30px;
vertical-align: middle;
}
.list li a {
color:#47c9af;
text-decoration: none;
}
<div class="container">
<ul class="list">
<li><img src="http://placehold.it/150x75" /></li>
<li></li>
<li><h1>Header of my blog</h1></li>
<li>Subheader</li>
<li><h3></h3></li>
</ul>
</div>
You can define your .list>a and img tag vertical-align:top;
.list>a, img{
vertical-align:top;
}
.list > a {
vertical-align: bottom;
}
as you have wrap everything inside the anchor tag, we should target the a tag
here's a Jsfiddle
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
Trying to put menu text right in the middle. No luck so far, and people here proved to be very helpful. :) text align center usually helps with most of the questions that came up here. Didn't help me though. What am i doing wrong?
<header>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
</div>
</header>
#navmenu {
margin-left:auto;
margin-right:auto;
height:60px;
width:836px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline-block;
margin-left:1px;
background-color:#3D3D3D;
width:49%;
height:40px;
color:#FFF
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
If the text will always be on a single line, you can vertically align the text by making the line-height the same height as the container.
Add line-height: 40px to your li:
#navmenu li {
...
line-height: 40px;
}
Did you try by giving table-cell (instead of inline-block) for display property for #navmenu li ?
I believe that will work.
I quickly grabbed this snippet out of one of my css files.
This was used to create a top right corner nav bar.
ul {
position: absolute;
top: 20px;
right: 35px;
}
ul li {
display: inline;
text-transform: lowercase;
text-align: right;
padding-left: 10px;
}
Hope that helps
If you want to center the whole menu container, use position:relative, and than apply the margin:auto property. If you need to center the individual links, i hope giving width and text-align center will surely work, as it is a block. If not, you can always use padding-left and padding-right to achieve that. But the width of the menu items will be scaled according to it's content. One more thing, try giving pixels instead of percentage and check. Hope this helps you.
I have a simple UL navigation menu with width of 1000px:
<ul class="menu">
<li class="first">google</li>
<li>google</li>
<li>google</li>
</ul>
So, how can I set the first element to fit the entire UL width and push the other list items on the right (all LIs should be on the same line - horisontal menu)?
I know I could float:left the first and float:right the rest, but this will reverse the order of the right - floated elements.
I need a quick, CSS only solution, working even in IE6.
Thanks in advance!
UPDATE: To clarify, the first element is a logo, the final result is like the header of 9gag.com except the logo should be on the left and all links to the right.
Logo usually should not be a part of navigation menu. It's more appropriate to mark-up it as header (H1 on home page, and H3 on rest pages).
<h3>MyBrand</h3>
<ul>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
You can use then float: right for your UL list itself to align menu to the right.
See this example, i don't know your menu is dynamic, but if you have a 'width' for other's li's, is more easier
Demo: http://jsfiddle.net/e6SWD/12/
.menu {
margin-left: 84px; /* width others 2 li's */
width: 1000px
}
.menu li {
display: inline;
}
.menu li.first {
display: block;
float: left;
margin-left: -84px; /* width others 2 li's */
width: 100%
}
Now with more clarification:
http://jsfiddle.net/6DkVx/2/
ul {
width: 1000px;
position: relative;
text-align: right;
}
li {
display: inline-block;
}
.first {
position: absolute;
top: 0; left: 0;
}
Just use this CSS
.menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
As stated before separate the logo from the main navigation. Do something like this instead.
<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>
The header div is the wrapping div. You could change this to <header></header> if you want to do HTML5 (this will work in all browsers even old ones).
Then set the width of the logo, you can use a link there aswell. And float the ul and logo to the left.
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }