I feel as if I have tried everything from text-align center to margin:0 auto with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...
Here is my code
<style type="text/css">
.header {
height: 40px;
background: #000;
width: 100%;
}
.header ul {
list-style-type: none;
}
.header li {
float: left;
line-height: 40px;
}
.header li a {
color: #FFF;
padding: 0 18px;
height: 40px;
}
</style>
<div class="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Services</li>
<li>Rates</li>
<li>Reviews</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
This works without having to define a set width.
ul {
display: table;
margin: 0 auto;
}
If you want to get rid of the left-side padding, thus genuinely centering the list, add:
padding-left: 0;
This should fix it for you.
ul {
display: inline-block;
margin: 0 auto;
}
If that doesn't work for you then give the UL a set width i.e.
ul {
width: 300px;
margin: 0 auto;
}
Related
I am trying to make horizontal navigation bar and right now my div navigation bar doesn't use max-width: 1200px which is set on <body> so my unordered list isn't floated to the right of the screen. Adding width: 100% or inherit to navigation does not help, width 100% is way more than my max-width.
body {
margin: 0 auto;
max-width: 1200px;
font-family: Helvetica, Arial;
background-color: #F7F7F7;
}
#wrapper {
position: relative;
z-index: 0;
margin: 1% 4% 2%;
padding: 1rem;
}
#navigation {
position: fixed;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation li {
float: right;
}
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>Projects
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I moved your max-width to your #navigation element, and set it to 100% width.
Also I moved your padding down to your ul element.
Here's the updated fiddle.
#navigation {
position: fixed;
max-width:1200px;
width:100%;
border: 1px solid red;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
padding: 1rem;
}
I think maybe the position fixed makes the div ignore the parent elements max-width
Been trying to get this to work for a while now. I'm trying to create the menu for my new site, Ive set up the nav, ul, and li tags. Naturally, I have the actual buttons slightly larger than the text displaying, and I wish to have the A fill out the LI tag.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
padding: 0 50px 0 50px;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
I feel like ive tried everything in:
How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
Stretching <a> tag to fill entire <li>
Expand an <a> tag to fill the space
and I really feel like my code should give the same result. Can someone please point out what mistake I've made?
You had the right idea by adding display:block on the anchors, however the padding on your list item was affecting the result. Move that padding onto the anchors and you're all set.
nav {
width: 100%;
min-width: 800px;
background-color: #EDEDED;
}
nav a {
color: #000;
text-decoration: none;
height: 100%;
width: 100%;
display: block;
padding: 0 50px 0 50px;
box-sizing:border-box;
}
nav ul {
list-style: none;
margin: auto auto auto 10vw;
height: 2em;
display: block;
}
nav ul li {
display: inline-block;
background-color: #DEDEDE;
vertical-align: middle;
height: 2em;
line-height: 2em;
}
nav ul li:hover {
background-color: #FF0000;
}
<nav>
<ul>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
<li><a href='index.php'>Home</a>
</li>
</ul>
</nav>
Remove the padding from the ul li:
nav ul li {padding:0px;}
If necessary add it to the nav ul li a:
nav ul li a {padding:0px 50px;}
Having problems centering a ul horizontally within a div. The list doesn't contain any text, just images.
I'm using the list to display social media icons in the footer of my website.
Thought it would be easy enough to do but I've I've exhausted all methods I can think of, can anyone help? I'm probably missing the obvious :/
HTML
<div class="container">
<div id="footer">
<div id="social_media">
<ul>
<li class="youtube">
</li>
<li class="flickr">
</li>
<li class="googleplus">
</li>
<li class="linkedin">
</li>
</ul>
</div>
</div>
CSS
.container {
margin: auto;
max-width: 700px;
width: 700px;
}
#footer {
border:1px solid #000;
height:100px;
}
#social_media {
width: 100%;
display: block;
float:left;
}
#social_media ul {
display: block;
float:left;
padding: 0;
margin: 10px auto;
}
#social_media li {
list-style: none;
background: #000;
margin: 0 10px;
}
#social_media li a, #social_media li {
width: 44px;
height: 44px;
display: block;
float: left;
}
#social_media ul li.youtube {
background-position: -88px 0;
}
#social_media ul li.flickr {
background-position: -132px 0;
}
#social_media ul li.googleplus {
background-position: 0 0;
}
#social_media ul li.linkedin {
background-position: -44px 0;
}
http://jsfiddle.net/SZ27u
You could set text-align:center on the parent, .container, and then remove width:100% and float:left on #social_media, and change display: block to display:inline-block.
jsFiddle example
.container {
margin: auto;
max-width: 700px;
width: 700px;
text-align: center;
}
#social_media {
display:inline-block;
}
You can do this with a technique called shrink wrapping. This will also work with multiple floated children. The relevant styles are:
#footer > div {
float: right;
position: relative;
left: -50%;
}
#social_media {
position: relative;
left: 50%;
}
http://jsfiddle.net/SZ27u/2/
FIDDLE
So you have to define a width for the margin: auto; to work. This is a good way to do what you want.
#social_media ul {
display: block;
padding: 0;
margin: auto;
width: 256px;
}
Another option assumes you know what the width iof the UL should be based on the width of your LI's. It also assumes that setting a specific width for the element is ok based on your template.
Simply change these bits of CSS to the following:
(deleted the float and added width and overflow)
#social_media ul {
display: block;
overflow: hidden;
width: 256px;
padding: 0;
margin: 10px auto;
}
http://jsfiddle.net/SZ27u/3/
I've got a list here for my page's footer, that I want displayed horizontally.
But because I've turned it into an inline list to go horizontally, the background images get cut off vertically. The biggest one is 27px high.
So I'm stuck.. I know why the following is doing what it's doing. But how do I get around it?
Here's the html:
<div id="footer">
<ul>
<li id="footer-tmdb">Film data courtesy of TMDB</li>
<li id="footer-email">Contact Us</li>
<li id="footer-twitter">Follow Us</li>
</ul>
</div>
and the CSS:
#footer ul {
height: 27px;
}
#footer ul li {
display: inline;
list-style: none;
margin-right: 20px;
}
#footer-tmdb {
background: url('../images/logo-tmdb.png') no-repeat 0 0;
padding-left: 140px;
}
#footer-email {
background: url('../images/icon-email.png') no-repeat 0 3px;
padding-left: 40px;
}
#footer-twitter {
background: url('../images/icon-twitter.png') no-repeat 0 0;
padding-left: 49px;
}
Here's what it looks like:
As you can see, half of the images are cut off.
The simpler the solution, the better, please.
#footer ul li {
display: block;
float: left;
height: 27px;
list-style: none;
margin-right: 20px;
}
Use inline-block
#footer li {
height: 27px;
display: inline-block;
}
Try this:
#footer ul {
overflow: auto
}
#footer ul li {
display: block;
list-style: none;
margin-right: 20px;
float: left;
}
Try this:
#footer li,
#footer ul {
height: 27px;
}
Have a Navbar <div>, inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar)
I looked on Google and this site and I couldn't find exactly what I was looking for.
What I want is to be able to keep my current style (using <li> with <a>'s inside), and I want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div>).
Anyways, if that doesn't make sense let me know, currently they are just left aligned...here's what I have:
HTML:
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
CSS:
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
I can also include my .navbar a{} if that is necessary.
I am very new to CSS so go easy, also I did look all over SO and Google first and couldn't find anything quite like this (although maybe since I am new I don't realize it's the same).
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this, go ahead and link/post that instead, but I would prefer this way as it makes most sense to me.
This allows a widthless centered dynamic ul if you don't want to specify 90% width:
<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->
Tested in IE6, FX 3.
EDIT: Alternate style without the extraneous element:
<!doctype html>
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->
The proper way to do this these days is to just use Flexbox:
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
You can use text-align:fixed to do this with just a few lines of CSS, no extra markup.
See my answer here: https://stackoverflow.com/a/15232761/87520
<ul>
<li>Home</li>
<li>Discounts</li>
</ul>
<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 }
</style>
Basically comes down to add text-align: center to the ul and display: inline-block to the li's.
This seems to do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</body>
</html>
Are you looking for something like this:?
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.navbar li{
display:inline;
line-height:30px;
}
.navbar li a { padding:.4em 5em;}
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
you can use "display: table" and "display: table-cell"
the code is cleaner and the li width isn't hardcoded:
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
padding: 0px;
display: table;
table-layout: fixed;
width: 100%;
}
.navbar li{
padding: 2px;
display:table-cell;
width: 50px; /* just for the browser to get idea that all cells are equal */
text-align: center;
border: 1px solid #FF0000;
}
http://jsfiddle.net/dchwv6qn/1/
you need to define a fixed width for your container .
for example:
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
if you want to keep your bg color of .navbar, stick with 100%, remove float left from li and style it like this->
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
width: 800px;
overflow: hidden;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
marign: 0 auto;
}
Well ive try'd every thing, nothing is working so if you have the same problem, then i would recommend you use tables and td's to align them, still works properly.