I want to align a list of links in the footer of my website, but no matter what I try, it doesn't seem to align in the center of the footer (Like in the w3schools footer for example).
I have tried using display: block, display: inline-block, text-align: center and others but no matter what I do I can never seem to get it right.
CSS:
footer ul {
list-style: none;
text-align: center;
}
footer div {
margin: 0 auto;
display: inline-block;
}
footer {
margin-left: 25%;
}
HTML:
<footer>
<div>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Vine</li>
</ul>
</div>
<div>
<ul>
<li>YouTube</li>
<li>Twitch</li>
<li>Mobcrush
<li>SoundCloud</li>
</ul>
</div>
<div>
<ul>
<li>GitHub</li>
<li>Stack Overflow</li>
<li>Pastebin</li>
<li>Curse</li>
</ul>
</div>
<div>
<ul>
<li>~</li>
<li>~</li>
<li>~</li>
<li>~</li>
</ul>
</div>
</footer>
Any help would be great, thanks!
Just use display:flex; on the footer.
footer ul {
list-style: none;
text-align: center;
}
footer div {
margin: 0 auto;
display: inline-block;
}
footer {
display:flex;
}
<footer>
<div>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Vine</li>
</ul>
</div>
<div>
<ul>
<li>YouTube</li>
<li>Twitch</li>
<li>Mobcrush
<li>SoundCloud</li>
</ul>
</div>
<div>
<ul>
<li>GitHub</li>
<li>Stack Overflow</li>
<li>Pastebin</li>
<li>Curse</li>
</ul>
</div>
<div>
<ul>
<li>~</li>
<li>~</li>
<li>~</li>
<li>~</li>
</ul>
</div>
</footer>
footer {text-align: center;}
footer div { display: inline-block; }
Is that you want to accomplish?
Try Display Table
footer ul {
list-style: none;
text-align: center;
}
footer div {
margin: 0 auto;
display: table;
}
footer {
margin-left: 25%;
}
If you set the width of your footer element to 50% (25% left margin + 50% width leaves an effective 25% right margin, thus centering the footer itself first) and set the text-align of the footer element to center, it will center the footer divs how you want. Note, however, that this sets the text-alignment of the child elements to center as well, but in this case that appears to be what you want.
footer {
margin-left: 25%;
width:50%;
text-align: center;
}
Related
I would like this code to resemble the bottom of Google's homepage. It is still listing vertically, even with "inline". I want each three "lists" to be next to each other horizontally on the left and right side of the screen.
#HTML
<footer>
<div class="footer">
<ul style="width:10%; float:left;list-style-type:none;">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul style="width:10%; float:right;list-style-type:none;">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</div>
</footer>
#CSS
.footer li{
display:inline;
}
You should remove the width on your uls. See this codepen. Floating elements will take the width of all their children. By wrapping them in an element that take 10% of the width, they don't have enough space to stay on the same row.
You could use display: flex; on the .footer DIV, with settings as below
.footer ul {
list-style-type: none;
padding: 0;
}
.footer li {
display: inline-block;
}
.footer {
display: flex;
justify-content: space-between;
}
<footer>
<div class="footer">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</div>
</footer>
I'm diving into the footer of this site for the first time, and I need to place 3 titles with phone numbers below horizontally.
I have
HTML:
<div class="phone-container">
<div class="float-left">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
CSS:
#phone-container{
width: 100%;
}
#phone-left {
float:left;
width: 33%;
}
#phone-center {
float:left;
width: 33%;
}
#phone-right{
float:left;
width: 33%;
}
This is giving me all the items vertically listed towards the left, if someone knows what error I'm making or a better way to arrange these I'd love the help!
There's a few things going on here. First, you're styling the ID #phone-container rather than a class like you've written in your HTML, so your parent element is not getting the width: 100% rule applied to it.
Second, the #phone-left, #phone-center, and #phone-right IDs are not included in your HTML. Since these all have the same rules, I would make them all one class, .phone.
Check out the demo on Codepen.
HTML:
<div class="phone-container">
<div class="phone">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<div class="phone">
<ul>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<div class="phone">
<ul>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
CSS:
body{
margin: 0;
padding: 0;
}
.phone-container {
width: 100%;
}
.phone {
float: left;
width: 33.3%;
}
This is how I'd go about it. But I have issues with floats and clearing them.
ul {
list-style: none;
display: inline-block;
width: 33%;
padding: 0;
text-align: center;
}
<div class="phone-container">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
You can also put
.phone-container{
font-size: 0;
}
But then you'll need to put font sizes on your h3 and anchors. Once you do this you'll be able to set
ul{
width:33.3333333%;
}
And they should be evenly spaced out.
Also your HTML is not valid - you have unclosed divs.
There's a few items to note:
1. Your id tags were not linked to the HTML elements. They need to be linked, as demonstrated below, for the styling/positioning to take effect.
2. The *, :before, :after code is for normalizing between browser behavior and for removing the extra margin that is added by default. (This allows for the 3 x 33% phone numbers to all fit on one row.
3. list-style-type: none; removes the list bullet points. You can remove the entire rule if it is something you would like to keep.
4. I've also went ahead and centered the phone numbers for you with text-align: center;.
You can see all the code, as well as how it looks like in a browser below.
In any case, if your links still need to be positioned at the bottom, you can either choose to append them to the end of your document, or position: fix; it to bottom of the viewport.
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#phone-container{
width: 100%;
}
#phone-left {
text-align: center;
float:left;
width: 33.3%;
}
#phone-center {
text-align: center;
float:left;
width: 33.3%;
}
#phone-right{
text-align: center;
float:left;
width: 33.3%;
}
<div class="phone-container">
<div>
<ul id='phone-left'>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul id='phone-center'>
<li><h3>Phone Central<h3></li>
<li>888-888-8888</li>
</ul>
</div>
<ul id='phone-right'>
<li><h3>Phone East<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
Here is a fix for you-
HTML-
<div class="phone-container">
<div class="float-left">
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
<ul>
<li><h3>Phone West<h3></li>
<li>888-888-8888</li>
</ul>
</div>
</div>
CSS-
* {
margin: 0;
padding: 0;
}
#phone-container, .float-left {
width: 100%;
float: left;
}
#phone-container ul, .float-left ul {
float: left;
width: 33%;
display: block;
text-align: center;
}
#phone-container ul li, .float-left ul li {
display: inline-block;
}
I'm trying to right-align the nav without using float. I read somewhere online that I could set the parent element to text-align: right, but that didn't work when I tried it. I appreciate any help for what I know is an easy problem but one that has confounded me most of the day.
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav {
display: inline-block;
}
nav li {
display: inline;
}
<header>
hi
<nav>
<ul>
<li>Home
</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</header>
https://jsfiddle.net/a6a367vp/
The solution is that you have to add text-align: right; to the parent element which is the header.
header {
text-align: right;
...
}
Then add display: inline-block; to the children (nav) and the children will be aligned right.
Another solution would be to set a width to nav and a:
header nav {
with: 80%;
}
header a {
width: 20%;
}
header nav ul {
text-align: right;
}
header nav ul li {
display: inline-block;
}
if you want the nav to move to the right, simple method is float:right but since you don't want to use this then text-align:right would place it on right if nav has 100% width for that row.
Therefore, you can do either of these two things.
right now using CSS you can make
nav{width:98%; text-align:right};
or for better results, use JS
var anchorTopWidth = $("a").width() / $('a').parent().width() * 100;
requiredWidth = 100-anchorTopWidth;
$('nav').css({'width': requiredWidth+'%', 'text-align':'right'});
Fiddle: https://jsfiddle.net/a6a367vp/3/
One possible and recommended solution is as follows:
Put the <nav> in a <div> element and then use the text-align property for the specified div. like this:
Html:
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
CSS:
.nav_menu{
text-align: right;
}
Update:
Put the <a> tag in another div and then specify the width for the selected divs. Your final code should be like this:
HTML:
<header>
<div class="atag_div">
hi
</div>
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav li {
display: inline;
}
.atag_div{
width: 20%;
display: inline-block;
}
.nav_menu{
width: 78%;
display: inline-block;
text-align: right;
}
jsfiddle:
https://jsfiddle.net/pokies/7Lnfq7es/
I have a footer in my webpage which nests 3 divs with twitter bootstraps span4 class. I want to have the 'Connect With Us' the same distance from the right as the 'Contact Us' header is from the left and the 'Useful Links' in the middle with all the text for each div left justified underneath.
This is what I have so far:
You can see that Contact Us is closer to the left edge than Connect With Us is from the right edge.
I have tried using text align for the headers which works however the list items below do not left align with the elements.
Here is an image which shows what it is like with the text-align on the headers. You can see that they are laid out as I want but the content below them is not left aligned with them:
Here is the HTML for the footer:
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div class="span4" id="leftFooter">
<h5><b>Contact Us</b></h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4" id="middleFooter">
<div class="middle"><h5><b>Useful Links</b></h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul> </div>
</div>
<div class="span4" id="rightFooter">
<h5><b>Connect With Us</b></h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li>
</ul>
</div>
</div>
</div>
</footer>
Here is the CSS for the footer:
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftFooter {
color: #ccc2a0;
padding-left: 50px;
}
#middleFooter {
color: #ccc2a0;
/* text-align: center; */
}
#rightFooter {
padding-right: 50px;
/*text-align: right; */
color: #ccc2a0;
}
#rightFooter li {
padding-top: 5px;
}
.follow { line-height: 19px; }
Can anyone help?
Thanks
EDIT:
Here are the changes I made to the right footer:
<div class="span4" id="rightFooter">
<div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
<ul>
<div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li> </div>
<div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li> </div>
</ul>
</div>
CSS:
.trow {
display: table-row;
background-color: green;
margin-right: 0;
}
.tcell {
display: table-cell;
background-color: green;
}
.trow h5 {
display: table-row;
background-color: yellow;
}
and here is what it looks like with the rows and cells coloured:
You can use display: table-cell to make the block behave as table cells, which can style further to make them the same width.
You can also float the blocks or use display: inline-block and give each block a third of the width, but when zooming you may get rounding errors that can cause the last block to jump to the next line. When the block behave like table-cells, you don't have that problem.
I renamed some of your CSS ids and removed some markup in your HTML like the b tag (not sure why you were using that). Your ampersand & should be &.
Added a couple DIVs .outer and .inner that center the contents of the second .span4 but maintain the left alignment. The main thing there is the float: left; on .outer which sets the width of .outer to it's content. You could also use display: inline-block; instead of float: left;. .outer is moved left 50% of it's container and then .inner is moved right 50% of it's container (.outer). In the end it ends up in the center of .span4.
For the third .span4 we added a DIV with the class .pull-right which is from your Twitter Bootstrap that floats things to the right. This sets everything to the right side of the third .span4 without re-aligning your text.
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#contact-us {
padding-left: 50px;
}
.outer {
position: relative;
left: 50%;
float: left;
}
.inner {
position: relative;
right: 50%;
}
#connect-with-us {
padding-right: 50px;
}
#connect-with-us li {
padding-top: 5px;
}
#connect-with-us a {
padding-left: 5px;
}
.follow {
line-height: 19px;
}
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div id="contact-us" class="span4">
<h5>Contact Us</h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4">
<div class="outer">
<div class="inner">
<h5>Useful Links</h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
</div>
<div id="connect-with-us" class="span4">
<div class="pull-right">
<h5>Connect With Us</h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px">Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px">Twitter</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
The <nav> should be aligned to the left, below the logo and slogan. However, despite attempting to do so with both margin and padding it remains above the logo and centered on the page. Any help with how to rectify this is greatly appreciated.
HTML
<header>
<div id="logo">
<img src="img/logo.png" alt="GEC logo" />
</div>
<div id="slogan">
<h1>Revolutionizing Potential</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Coaching Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
CSS
/* Header */
header {
margin-top: 95px;
}
#logo {
float: left;
}
#slogan {
float: right;
margin-top: 90px;
}
nav ul li {
display: inline;
float: left;
}
nav ul li a {
padding-right: 20px;
}
nav ul li:last-child {
padding-right: 0;
}
To your CSS add:
nav {
clear:both;
}
jsFiddle example
First off what I always do is to give all elements default widths and hights.
The nav is an inline element and not a block.
to refrain from using clear fixes you should put a div element around the logo and the slogan.
like this:
HTML
<header>
<div id="header_top">
<div id="logo">
<img src="img/logo.png" alt="GEC logo" />
</div>
<div id="slogan">
<h1>Revolutionizing Potential</h1>
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Coaching Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Now you can just give the header_top div a display block and a overlfow:hidden.
That will give make the header_top div grow with its content.
Now giv you nav a display:block style and it is done
I tested it local on my notebook and it worked like a charm :)
add:
CSS
#header_top{
display: block;
overflow: hidden;
}
nav{
display: block;
}