I am trying to build a website, and in my footer section I am facing an issue that, I can't properly position my tag below the social media icons, and also cannot position the li elements "terms of use","content guidelines","report error" in a horizontal style.also i cannot remove the underline on the li after removing the text decor,and cannot remove the bullets from the li elements..pls help
footer
{
width: 100%;
background-color: #2d2d2d;
padding: 80px 0px;
}
footer h2 {
font-size: 16px;
color: #a1a1a1;
text-transform: uppercase;
margin-top: -20px;
margin-bottom: 25px;
margin-left: 20px;
}
h2 {
font-size: 20px;
font-family: 'Gothic-Bold';
font-weight: normal;
position:sticky;
margin-bottom: 20px;
}
* {
padding: 0px;
margin: 0px;
}
.ft-quick-links
{
float:left;
width:400px;
}
.ft-quick-links ul li{
float:left;
margin-right:6px;
margin-bottom:20px;
margin-left: 5px;
list-style: none;
padding-right: 5px;
}
.ft-quick-links li a{
padding: 8px 15px;
font-size: 13px;
color: #959595;
background:#202020 ;
text-decoration: none;
margin-bottom: 30px;
}
.ft-quick-links li a:hover{
background:#171717;
}
.footer-btm-wrapp{
width:100%;
display:table;
background:#1b1b1b;
}
.ft-btm-left {
float:left;
}
.ft-btm-left ul li{
float:left;
margin-right:40px;
}
.ft-btm-left ul li a{
font-size:12px;
color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
text-decoration:none;
}
.footer-btm-wrapp .wrapper{
padding:20px 0px;
}
.ft-social ul li{
float: right;
padding-right: 20px;
padding-top: 15px;
list-style: none;
}
.footer-btm-wrapp .wrapper{
padding:8px 0px;
list-style: none;
}
.copy-rights p{
color:#959595;
font-size:13px;
list-style: none;
margin-bottom: 10px;
padding: 60px 20px 10px;
float:right;
text-align:right;
list-style: none;
}
.wrapper{
width:1100px;
margin:0px auto;
position:relative;
}
.ft-lines{
font-size: 12px;
color: #5f5f5f;
list-style: none;
margin-bottom: 10px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet"type="text/css" href="foot1.css">
<footer>
<div class="wrapper">
<div class="ft-quick-links">
<h2>Quick Links</h2>
<ul class="clearfix">
<li>About</li>
<li>Media</li>
<li>Feedback</li>
<li>Privacy policy</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="ft-social">
<ul class="clearfix">
<li><img src="images/yt.png"/></li>
<li><img src="images/ig.png"/></li>
<li><img src="images/twit.png" /></li>
<li><img src="images/fb.png" /></li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="ft-lines">
<ul class="clearfix">
<li>Terms of Use</li>
<li>Content Guidelines</li>
<li>Report error </li>
</ul>
<div class="copy-rights"><p> © 2017 Rodeo labs. All rights reserved</p>
</div>
</div>
</div>
</footer>
</body>
</html>
I hope this code will be useful to you
footer
{width: 100%;background-color: #2d2d2d;/* padding: 54px 0px; */display: flex;height: 6vmin;}
footer h2 {
font-size: 14px;
color: #a1a1a1;
text-transform: uppercase;
}
h2 {
font-size: 20px;
font-family: 'Gothic-Bold';
font-weight: normal;
/* position:sticky; */
}
.ft-quick-links
{
display: flex;
align-items: center;
}
.ft-quick-links a{
padding: 5px;
font-size: 13px;
color: #959595;
background:#202020;
text-decoration: none;
/* margin-bottom: 30px; */
}
.ft-quick-links a:hover{
background:#171717;
}
.footer-btm-wrapp{
width:100%;
display:table;
background:#1b1b1b;
}
.ft-btm-left {
float:left;
}
.ft-btm-left a{
font-size:12px;
color:#5f5f5f;
}
.ft-btm-left a:hover{
text-decoration:none;
}
.ft-social i{
float: right;
padding-right: 20px;
padding-top: 15px;
list-style: none;
}
.copy-rights p{
color:#959595;
font-size:13px;
list-style: none;
text-align:right;
list-style: none;
}
.ft-lines{
/* font-size: 12px; */
color: #5f5f5f;
/* list-style: none; */
/* margin-bottom: 10px; */
text-decoration: none;
}
<footer>
<div class="ft-quick-links">
<h2>Quick Links</h2>
About
Media
Feedback
Privacy policy
</div>
<div class="ft-quick-links">
<img src="images/yt.png">
<img src="images/ig.png">
<img src="images/twit.png">
<img src="images/fb.png">
</div>
<div class="ft-quick-links">
Terms of Use
Content Guidelines
Report error <!--
-->
</div>
<p> © 2017 Rodeo labs. All rights reserved</p>
</footer>
Try adding the top 2 div.wrapper inside a div and style it. According to what you have done in styling, the third div.wrapper is inserted inside the top to in the DOM.
As well add bottom div.wrapper (which contains the divs for the three links and the copyrights) in a different context and do the stylings respectively.
If you're doing this for practice that's fine.
This code that you have written needs more improvement. In production code, this is not the recommended way of writing the code. Please follow some guidelines. Googling 'HTML and CSS best practices guidelines' will help you.
PS - Didn't edit your code since it needs a re-engineering.
.ft-lines{
font-size: 12px;
margin-top: 25px; /*positioning li elements "terms of use","content guidelines","report error"*/
}
.ft-lines li {
list-style: none; /*remove bullets*/
display: inline; /*display in horizontal line li elements*/
margin: 0 10px 0 10px; /*add spaces between links*/
}
.ft-lines a {
text-decoration: none; /*removes underline on links*/
color: #959595;
}
.ft-lines a:hover {
text-decoration: underline; /*adds underline on links*/
}
jus remove your .ft-lines and add mine
hope this helped.
Try following in your css. I have added some comments.
.ft-lines ul li{
list-style: none;
display: inline-block; # This will display li side by side
padding-right: 10px; # add for have a bit of space
}
.ft-lines ul li a {
text-decoration: none;
}
.ft-lines {
clear: both; # to clear the floating elements
float: right;
}
You are not using any framework like bootstrap or foundation. So, first of all, make a proper design of footer layout.
For example -
<ul class="demo">
<li>demo1</li>
<li>demo2</li>
<li>demo3</li>
</ul>
To remove bullet from li use -
ul.demo li
{
list-style-type:none;
}
To remove text-decoration from a use -
.demo li a
{
text-decoration:none;
}
Related
I'm trying to make a simple responsive navigation but i can't seem to eliminate the spaces inbetween the links. Any help would greatly be appreciated.
This is my code:
css:
.nav{
width:100%; text-align:centre; margin:0 auto;max-width:1010px;
}
.nav ul{
line-height:50px;
}
.nav li{
display:inline; list-style-type: none;border-right:#333333 1px solid;
}
.nav li:hover{
}
.nav a{
text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
}
.nav a:hover{
color:#c00;background:#999999;
}
html:
<div class="nav"><!-- nav -->
<span class="menu-button"></span>
<ul class="clearfix menu">
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/nav-->
With CodeRomeos answer, most of the spacing/padding was removed but there was still some spacing between the links. From your request to eliminate the spacing between the links then the below solution will completely remove spacing (although it would look better IMO with at least some padding between links).
.nav {
width: 100%;
text-align: centre;
margin: 0;
max-width: 1010px;
}
.nav ul {
line-height: 16px;
}
.nav li {
display: inline;
list-style-type: none;
border-right: #333333 1px solid;
margin: 0;
padding: 0;
float: left;
}
.nav a {
text-decoration: none;
color: #000;
font-family: sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.nav a:hover {
color: #c00;
background: #999999;
}
<div class="nav">
<span class="menu-button"></span>
<ul class="clearfix menu">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
I just switched your css a bit from display: inline to float: left for the li tags. Hope it helps, though float may not be the best approach here.
.nav li {
display: inline;
}
to
.nav li {
float: left;
}
http://codepen.io/anon/pen/OyVLOK
As in your css there is padding defined 10px.
.nav a{
text-decoration:none; padding:10px 5px; color:#000; font-family: sans-serif;
}
set it to
.nav a{text-decoration:none; padding:10px 2px; color:#000; font-family: sans-serif;}
Hope this help you.!
I'm sure there is probably a simple solution to this problem but I can't seem to figure this out. I'm in the process of learning front end web development and am building this website just as a project. Anything I've been trying doesn't seem to work.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>FatHead | Blog</title>
<link href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS:
/***********************************
LOGO
***********************************/
.header{
background-color: skyblue;
margin:0;
padding:0;
width: 100%;
}
.logo{
text-align: left;
display: block;
margin:0 15px 15px 15px;
}
#logo-large{
display: inline;
font-size: 3em;
font-weight: 200%;
font-family: 'Dosis' , sans-serif;
}
#logo-small{
display: inline;
font-weight:0;
font-size: 3em;
font-family: 'Dosis' ,sans-serif;
}
/************************************
NAVIGATION
************************************/
.nav ul{
list-style-type:none;
display: block;
padding: 5px;
margin: 5px;
text-align: center;
}
.nav ul li{
display: inline;
padding: 5px 15px;
}
.nav ul li a{
text-decoration: none;
padding: 5px;
color:black;
font-family: 'Muli', sans-serif;
font-size: 1.25em;
}
.nav ul li a:active, .nav ul li a:hover{
background-color: deepskyblue;
color: white;
}
body{
margin:0;
padding:0;
}
Firstly, I think your mark-up is slightly incorrect for this scenario as you have wrapped your nav in the logo div. Also, I would suggest adopting HTML 5 standards for your mark-up:
HTML:
<header>
<h1 id="logo-large">FAT</h1>
<h1 id="logo-small">HEAD</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Categories</li>
</ul>
</nav>
<header>
NAV CSS:
nav{
display:inline;
float:right;
}
nav ul{
list-style:none;
}
nav ul li{
display:inline-block;
}
See fiddle demo for example: Demo
You can do something like this:
#import url("http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic");
/***********************************
LOGO
***********************************/
.header{
background-color: skyblue;
margin:0;
padding:0;
width: 100%;
}
.logo{
text-align: left;
display: block;
margin:0 15px 15px 15px;
overflow: hidden;
}
#logo-large{
font-size: 3em;
font-weight: 200%;
font-family: 'Dosis' , sans-serif;
float: left;
}
#logo-small{
font-weight:0;
font-size: 3em;
font-family: 'Dosis' ,sans-serif;
float: left;
}
/************************************
NAVIGATION
************************************/
.nav ul{
list-style-type:none;
display: block;
padding: 5px;
margin: 5px;
text-align: center;
float: right;
}
.nav ul li{
display: inline;
padding: 5px 15px;
}
.nav ul li a{
text-decoration: none;
padding: 5px;
color:black;
font-family: 'Muli', sans-serif;
font-size: 1.25em;
}
.nav ul li a:active, .nav ul li a:hover{
background-color: deepskyblue;
color: white;
}
body{
margin:0;
padding:0;
}
<div class="header">
<div class="logo">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Categories</li>
</ul>
</div>
<h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
</div>
</div>
Just add the code below to your CSS.
CSS
.logo > .nav{
display:inline-block;
}
DEMO
I have a horz nav bar at the top of my website that has 7 text links & 6 bullets between the text links. Is there a way to evenly space out the text links & bullets horz across the nav bar. I tired it with the following code, all works well except the bullet spacing is weird and off. Much appreciated for some help on this. Here is the code I have.
Here is a link to my code on fiddle: http://jsfiddle.net/mountart/bdzcv/
<style type="text/css">
div#container{
width:1020px;
}
div#container ul {
display:table;
width: 100%;
margin:0px 0px;
padding-left:0px;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul li {
display:table-cell;
height:20px;
line-height:20px;
width:14.285%;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
padding:0px 0px;
text-align: center;
border-right:none;
}
div#container ul li:last-child {
border-right:none;
}
div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
div#container li.headerbullet
{
float:left;
display:inline-block;
width:auto;
margin-left:5px;
margin-right:0px;
height:20px;
line-height:20px;
}
div#container li.headerbullet img
{
margin-top:10px;
}
</style>
<div class="clear"></div>
<div id="container">
<ul>
<li>ARTS & ENTERTAINMENT</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>TECHNOLOGY</b></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>AUTO</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>SPORTS</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>NEWS BRIEFS</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>GREEN ECONOMY</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li><a rel="nofollow" href="http://www.hirediversity.com" target="_blank">CAREER NEWS</a> </li>
</ul>
</div><hr style="margin-top:4px"/>
Let's clean up some of that HTML and CSS :)
We can create the bullets using just the li parents for each link. The padding on #container li will space out the bullets evenly, however large of a gap you want.
Updated
The menu is centred by the combination of margin: auto; and a fixed width (in this case - width: 776px;.
Have a fiddle!
HTML
<div id="container">
<ul>
<li>
ARTS & ENTERTAINMENT
</li>
<li>
TECHNOLOGY
</li>
<li>
AUTO
</li>
<li>
SPORTS
</li>
<li>
NEWS BRIEFS
</li>
<li>
GREEN ECONOMY
</li>
<li>
CAREER NEWS
</li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#container {
overflow: hidden;
}
#container ul {
margin: 10px auto;
width: 776px;
border-bottom: dotted 1px #CCC;
overflow: auto;
padding: 0 0 10px;
}
#container li:first-child {
list-style: none;
margin: 0 0 0 18px;
}
#container li {
float: left;
font-family:"Arial Narrow", Arial, sans-serif;
font-size: 0.8em;
padding: 0 30px 0 2px;
}
#container a:link {
color: #000;
text-decoration: none;
}
#container a:hover {
color: #F00;
text-decoration: underline;
}
You can justify your list elements by making you ul have text-align: justify. Then, make an :after element that has a width: 100% to trick it into thinking there is another line.
See here: (Sorry, I removed some of your CSS to make it easier to read.)
http://jsfiddle.net/ECf2u/
div#container{
width:1020px;
}
div#container ul {
width: 100%;
text-align: justify;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul:after {
content: "";
width: 100%;
display: inline-block;
}
div#container ul li {
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
text-align: center;
display: inline-block;
position: relative;
}
div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
Here is a simpler solution, using CSS3 flex.
It fully-justifies the menu items, distributing the space evenly around the bullets.
I couldn't figure out how to do the bullets without the extra empty <li><\li> elements.
Link to CodePen
.menu { font: 14px "Arial Narrow", Arial, sans-serif; list-style-type: none; padding:3px }
.menu a { color: black; text-decoration: none }
.menu a:visited, .menu a:active { color: #666 }
.menu a:hover { color: #c00 }
.menu { display:flex; justify-content:space-between; border: 1px solid black; border-width: 1px 0 }
.menu li:empty:after { content:"\2022" }
<ul class="menu">
<li>ARTS & ENTERTAINMENT</li><li></li>
<li>TECHNOLOGY</li><li></li>
<li>AUTO</li><li></li>
<li>SPORTS</li><li></li>
<li>NEWS BRIEFS</li><li></li>
<li>GREEN ECONOMY</li><li></li>
<li>CAREER NEWS</li>
</ul>
This is the image I want to make the : Journal Timeline and Gallery Text on the middle please help me guys... how to make it center align
#pages ul{
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
list-style-type: none;
border:5px solid;
border-radius:15px;
width: 700px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
border-color: white;
}
#pages ul li {
display: inline-block;
margin-left: 45px;
}
#pages ul li a{
text-decoration: none;
color: white;
}
.home_icon{
padding-top: 3.5px;
}
thats the code for CSS
<div id="pages">
<ul>
<li><img class = "home_icon" src="img/home_icon.png"></li>
<li>JOURNAL</li>
<li>TIMELINE</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
Please I need the explanation and codes :) thank you
Use vertical-align:middle; in your <li>'s CSS:
#pages ul li {
display: inline-block;
margin-left: 45px;
vertical-align:middle;
}
JSFiddle Example
I'm trying to add space between a bottom border line and my <li> item but no luck.
My code:
<div class="menuwrap">
<div class="menu">
<ul>
<li>Home
</li>
<li>Query
</li>
<li>Reports
</li>
</ul>
</div>
</div>
CSS styles:
.menu {
color: #000;
background: #FFF;
}
.menu ul {
list-style: none;
display: inline;
float: left;
padding-left: 40px;
margin-top: 90px;
}
.menu li {
float:left;
margin-left:10px;
}
.menu li a:hover {
padding: 0 10px 0 10px;
font-size: xx-large;
border-bottom: 1px solid white;
border-spacing: 20px;
}
.menu li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: large;
}
.menuwrap {
overflow:hidden;
}
I tried couple of different things, but nothing worked so far. border-spacing is not doing what I want. I tried padding-bottom and that also didn't work. Can someone tell me how to achieve that? I want a space between the "li" item and its border-bottom.
Adding a padding-bottom or margin-bottom seems to be working.
li:hover{
padding-bottom: 10px;
}
Here's a FIDDLE
or
li:hover{
margin-bottom: 10px;
}
Here's a FIDDLE
Update: After reading your comment and having a look at the fiddle you provided, I've created one which does what you are trying to do. It's different from the code you provided but it's easier to read and you can modify it according to your needs
.menu{
list-style-type: none;
}
.menu li{
display: inline-block;
*display: inline;
zoom: 1;
margin: 10px;
}
.menu li a{
text-decoration: none;
color: #000;
border-bottom: 2px solid #000;
padding-bottom: 30px;
}
.menu li a:hover{
font-size: 2em;
font-weight: bold;
}
FIDDLE
I guess you didn't give your styles. padding-bottom works. Please check http://jsfiddle.net/VZCrq/8/