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/
Related
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
i have a small issue with my header, i added a media query which make it taller when the window is reduced in width but it's actually overlapping my container.
I try to add another media query in order to lower the top position of the container but it doesn't work
https://jsfiddle.net/Ltqsjhbz/1/
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: black;
background-position: center;
height: 200px;
color: white;
}
#menu li {
display: inline;
}
#media screen and (max-width: 600px) {
#menu li {
display: block;
margin: 30px;
}
header {
height: 400px;
}
#container {
position: absolute;
top: 400px;
}
}
#menu a {
background-color: #00BFFF;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 40px 4px;
}
#menu a:hover {
background-color: #0489B1;
}
h1,
h2,
nav {
text-align: center;
margin: 30px;
}
h3,
form,
footer {
text-align: center;
}
#container {
position: absolute;
top: 200px;
left: 0px;
}
.fig {
display: block;
margin: auto;
}
<header>
<h1>Title</h1>
<h2>title</h2>
<nav>
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
<div id="container">
<img class="fig" src="https://www.organicfacts.net/wp-content/uploads/2013/05/watermelon2.jpg" alt="figure 1">
</div>
Move your base style properties for #container above the media query, now the media query should override the base styles properly.
https://jsfiddle.net/Ltqsjhbz/2/
Your problem here is that the mediaqueries get parsed by the browser before the css styles that are general. Just put the mediaqueries at the bottom of the page.
I'm trying to center my list with images inside a div. This is what I'm getting (icons way too small and not centered).
this is the css ive got and the html
<div id="social">
<ul>
<li><img src="img/footertwitter.png" alt="placeholder+image"></li>
<li><img src="img/footerfacebook.png" alt="placeholder+image"></li>
<li><img src="img/footeremail.png" alt="placeholder+image"></li>
</ul>
</div>
#social {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
}
#social ul {
/*margin: 0 0 3em 0!important;*/
padding: 0!important;
}
#social ul li {
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
}
In your rule for the ul consider setting the display property to block and the margins to auto. If I understand correctly what you're trying to accomplish, that should center things for you while retaining the margins you assigned.
The updated CSS would look like:
#social
{
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
}
#social ul
{
padding: 0;
margin:auto;
display: block;
}
#social ul li
{
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
}
This fiddle shows the changes in action. Hope that helps.
You can simply increase the icon size according to your need:
social ul li img {
width:50px;
height:50px;
}
Give a fixed width to ul and then put it in the center using the following code:
social ul {
width:300px; /*Example*/
display:block;
margin:0 auto;
}
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;
}
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;
}