Very new to front-end. I'm designing my site with the Skeleton Responsive Framework and I'm having trouble getting my footer nav to center in the mobile layout. It currently aligns to the left.
I assume I'm targetting something incorrectly. Can anyone help?
Here is the code I am using:
<div class="band bottom">
<footer class="container last">
<hr>
<div class="sixteen footer-nav">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
<div class="eight columns credit">
<p>© 2013 Jacob Taylor</p>
</div>
</footer> <! --- End Container --->
</div> <! --- End Band --->
And here is the CSS for both the desktop and mobile versions respecitvely:
/* Footer */
.bottom footer {
font-size: 12px;
}
div.footer-nav ul,
div.footer-nav ul li {
margin: 0px;
}
div.footer-nav ul li {
display:inline;
float: left;
position: relative;
}
div.footer-nav ul li a {
display:inline-block;
padding: 0px 21px 21px 0px;
color: #2f3239;
text-decoration: none;
}
div.footer-nav ul li a:hover {
color: #2f3239;
text-decoration: underline;
cursor: pointer;
}
div.credit {
text-align: right;
}
/* Footer */
footer.last,
div.credit,
div.footer-nav {
text-align: center;
}
div.footer-nav ul {
text-align:center;
}
Remove the .sixteen class from .footer-nav and set it to something less than 100% i.e. ten perhaps and add margin: 0 auto to .footer-nav
Looking at your code it looks like you are trying to use a 16 column object for the list. Reduce the number of columns to something less than twelve columns. And make sure you are using the class "columns" to get the grid working.
<div class="band bottom">
<footer class="container last footer">
<hr>
<div class="twelve columns footer__links">
<ul class="nav--footer">
<li>Home</li>
<li>Contact</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
<div class="four columns">
<div class="credit">© 2013 Jacob Taylor</div>
</div>
</footer>
</div>
On another note, Your css seems very verbose and obfuscated. Take a look at a refactored version of your css and markup. Ideally we want to avoid any extra descendant selectors and calling out unqualified element e.g "div.class_name" when writing a rule.
.footer {
font-size: 12px;
}
.footer__links {
text-align: center;
}
.nav--footer{
margin: 0;
padding: 0;
display: inline;
}
.nav--footer li {
display:inline;
margin-right: 4em;
}
.nav--footer a {
text-decoration: none;
color: #2f3239;
}
.nav--footer a:hover {
color: #2f3239;
text-decoration: underline;
cursor: pointer;
}
.credit {
text-align: right;
}
Related
How do I make the spaces between my links in my navbar wider? I am trying to make a website for my production company.
I want Home to be on far left, Portfolio to be on the left, Contact on the right, and About on far right.
body {
margin: 0;
}
.header {
Color: #FFFFFF;
background-color: #000000;
padding: 50px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<div class="header">
<h1>Sphinx Productions</h1>
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
<ul style="font-size:20px">
</ul>
You need to use display: flex and justify-content: space-between. This page is required reading regarding flex boxes.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
display: flex;
justify-content: space-between;
}
li {
}
li a {
display: block;
color: white;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<div class="header">
<h1>Sphinx Productions</h1>
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
Just give padding in li in style.css
Like
li {
padding : 10px;
}
I would use CSS grid (flexbox is also an option), which will allow you to organize your links into 4 columns.
Create a div and set its display to grid:
HTML
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: 20% 30% 30% 20%;
}
Change the grid-template-columns as needed to get the right spacing. You can adjust column-gaps and more, just look up the documentation.
body {
margin: 0;
}
.header {
Color: #FFFFFF;
background-color: #000000;
padding: 50px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
li:nth-child(3),
li:nth-child(4){
float: right;
}
<div class="header">
<h1>Sphinx Productions</h1>
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
What is nth-child()?
nth-child() is a pseudo-class css selector that selects a child and styles it using the css you put in.
For example:
<body>
<p>This is the first child of the body tag</p>
<p>This is the second child</p>
<p>This is the third child(selected)</p>
<p>This is the fourth and last child</p>
</body>
p:nth-child(3){
-----
}
The nth-child() takes one argument and that is what child will be selected.
What about float?
This is a property that will move elements to the position you input. It will stay structured with the rest of the elements.
for example:
<p>first and second child will be selected</p>
<p>----me----</p>
<p> not me </p>
p:nth-child(1),
p:nth-child(2){
float: right;
}
They will go to the right, but it won't overlap or do anything crazy.
I've been trying to get all those elements on the same grey background but I don't know why the header and navigation bar are separated, and the logo not being on top of the grey background.
The code:
.header {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
margin:0;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #111;
}
<div>
<h2 class = "header" >Personal Portal</h2>
</div>
<div>
<div>
<nav>
<a> <img src="logo.png" alt="Logo" style="float:right; position:relative; "> </a>
<ul id = "navigation">
<li><a class="active" href="Home.htm">Home</a></li>
<li>Opened Tickets</li>
<li>FAQ</li>
<li>Stats</li>
</ul>
</nav>
</div>
<div>
<div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> Logged in as </div>
This is a very beginner-style question but I can't find the answers I want. Any help is appreciated thank you!
You could try something like this:
<div style="background-color: #666; height: 50px">
<nav style="clear: both">
<ul id = "navigation">
<li><a class="active" href="Home.htm">Home</a></li>
<li>Opened Tickets</li>
<li>FAQ</li>
<li>Stats</li>
</ul>
<h2 class = "header" >Personal Portal</h2>
<div class="rightInfo">
<div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF">
Logged in as
</div>
<a>
<img src="logo.png" alt="Logo" style="float:right; position:relative; ">
</a>
</div>
</nav>
.header {
background-color: #666;
text-align: center;
font-size: 35px;
color: white;
float: left;
display: inline-block;
margin-top: 0;
}
.rightInfo{
float: right;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
float: left;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #111;
}
Your three display elements should have a common parent, otherwise, they will not display as you want them to, except if you use position: absolute to position them (I would not recommend that)
To complete the previous answer (regarding the question why the title and nav bar are separated). You have placed those elements in separate divisions each with its own background color. You could correct the situation by removing the margin between them, but: if you want two (or more) things to be on a common background, it is best to set that background on a common parent.
Also, in any case when you're wondering why the browser rendered your code as it did: ask the browser. Press Ctrl-Shift-I (works on Chrome, Chromium and Firefox). It will show you all the applied styles (and exactly where they came from), plus the element size, padding, borders and margins.
I am having a problem making my logo and links align vertically. I have tried to achieve this using inline block and vertical-align set to middle but it didn't work.
I know I can achieve this using flex box. But I don't want to use flex box. And if I must use flex, is flex box better in achieving proper alignment?
Please any help will be appreciated.
.header {
padding: 20px;
background: #000;
color: #fff;
}
.logo,
ul {
display: inline-block;
vertical-align: middle;
}
ul {
list-style: none;
float: right;
}
ul li {
display: inline-block;
}
<div class="header">
<div class="logo">XCode</div>
<ul>
<li>Account settings</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div>
In many browsers, the ul element comes with default top and bottom margins.
Chrome:
Those margins are throwing off the vertical centering. Just remove them.
.header {
padding: 20px;
background: #000;
color: #fff;
}
.logo, ul {
display: inline-block;
vertical-align: middle;
}
ul {
margin: 0; /* NEW */
list-style: none;
float: right;
}
ul li {
display: inline-block;
}
<div class="header">
<div class="logo">XCode</div>
<ul>
<li>Account settings</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div>
In some browsers, the <ul> element has margin by default.
Try
ul {
list-style: none;
float: right;
margin: 0;
}
to remove the default margins.
ul {
list-style: none;
float: right;
margin:0 auto;
}
margin:0 auto; will help you to set the ul element in vertically align.
.header {
padding: 20px;
background: #000;
color: #fff;
}
.logo,
ul {
display: inline-block;
vertical-align: middle;
}
ul {
list-style: none;
float: right;
margin:0 auto;
}
ul li {
display: inline-block;
}
<div class="header">
<div class="logo">XCode</div>
<ul>
<li>Account settings</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div>
You might check out Bulma, specifically their Level attribute. This uses flexbox in the background, but you don't have to learn it- just the easy-to-use classes!
<!-- Main container -->
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">Content</p>
</div>
</div>
<!-- Right side -->
<div class="level-right">
<p class="level-item">More Content</p>
<p class="level-item"><a class="button is-success">New</a></p>
</div>
</nav>
margin: 0; will help you.
ul {
list-style: none;
float: right;
margin: 0;
}
https://jsfiddle.net/n0o915w3/1/
I searched Stack overflow and google and tried all the suggestions to getting my h1 and nav on the same line. I tried inline, inline-block, setting the header itself to 100%. It's just not aligning. On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning. here's my code
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
float: left;
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav li{
float: right;
display: inline-block;
color: #ffffff;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2
<p>Today's Try It Recipe!<p>
</div>
</div>
display: flex; justify-content: space-between; will put them on the same line and separate them with the available space.
.header {
background-color: #00001a;
padding: 0 1em;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
}
.header h1 {
color: #ffffff;
font-size: 15px;
}
.nav li {
color: #ffffff;
display: inline-block;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
Put the heading and the navigation in their own containers. Float one left, the other right, and make sure to clear them afterwards.
header {
background-color: #00001a;
padding: 0px 10px;
box-sizing: border-box;
}
h1 {
color: white;
margin: 5px 0;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
color: white;
margin-left: 20px;
}
<header>
<div class="left">
<h1>
EaTogether
</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</div>
<div class="clear"></div>
</header>
Note: I've changed "Togeter" to "Together", assuming it was a typo.
I am not sure if you want this thing but I just gave a try,
For this, set float:right to ul element and not on li elements.
Since you want to align h1 and li content set line-height to 0.5 for ul element
please check this fiddle: https://jsfiddle.net/hz0104mp/
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</div>
</div>
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav ul{
float:right;
line-height:0.5;
}
.nav li{
display: inline-block;
color: #ffffff;
}
I like the flexbox method mentioned by #Michael Coker but here's a solution using floats as the OP attempted to do.
You were on the right track but might have been applying some of your CSS to the wrong elements for the wrong reasons.
On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning.
The reasons for this are not obvious until you break things down. The reason this happens is because float: right is applied to each element separately and in the order they appear in the markup, not as a whole. The browser will float Home as far to the right as it can. After that, it will move About as far to the right as it can. Rinse and repeat for any other li.
I rectified this by floating the ul instead of individual li and setting those to display: inline;. Floating the li to the left would also work.
header {
padding: 0 0.5rem;
height: 40px;
color: #ffffff;
background-color: #00001a;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header h1 {
margin: 0;
font-size: 15px;
display: inline-block;
}
header h1,
.nav li {
line-height: 40px;
}
.nav {
float: right;
}
.nav li {
padding: 0 0 0 0.25rem;
display: inline;
}
<header>
<h1>Eat Together</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</header>
<main>
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</main>
Please note that I took a few liberties with your markup to help provide an example of how it can be more semantic and achieved with less markup (along with a few choice styles to make it a little more "pretty").
My Css menu is fine when I first set it then when I close I10 and re-open the menu is vertical. Have a look at my code.
/** MENU */
#menu {
overflow: hidden;
background: #101010;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0px 40px 0px 40px;
line-height: 70px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 200;
color: rgba(255,255,255,0.5);
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: rgba(255,255,255,0.8);
}
#menu .current_page_item a {
}
#menu .last {
border-right: none;
}
Please let me know where I am going wrong.
The HTML:
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Investment Services</h1>
</div>
<div id="social">
<ul class="contact">
</ul>
</div>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>Procedures</li>
<li>Task Rota</li>
<li>Docs & Links</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
</div>
</div>
In cases like this, <ul> typically isn't the problem - it's the <li>
You'll be better using something like this to create a horizontal menu:
ul {
display: block
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
float: left;
}
Update
According to this JSFiddle, your menu is displayed horizontally?
Try this if your problem is not yet solved:
Give an Id for your "ul" which is inside the 'menu' div and then try the following class:
For suppose the ID of ur 'ul' is 'myUl'
#myUl li
{
display: inline;
}
Because li items need to be aligned horizontally and to be followed after their parent element while giving class name. Here the parent element will be ul but not the div