Search code examples
htmlcssfooter

HTML CSS footer design issue

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

current model

required model

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><a href="#">About</a></li>
			<li><a href="#">Media</a></li>
			<li><a href="#">Feedback</a></li>
			<li><a href="#">Privacy policy</a></li>
			</ul>
		</div>
	</div>
		<div class="wrapper">
		<div class="ft-social">
    		<ul class="clearfix">		
     		
			
			<li><a href="http://www.youtube.com"><img src="images/yt.png"/></a></li>
			<li><a href="http://www.instagram.com"><img src="images/ig.png"/></a></li>
			<li><a href="http://www.twitter.com"><img src="images/twit.png" /></a></li>
			<li><a href="http://www.facebook.com"><img src="images/fb.png" /></a></li>
	
			</ul>
		</div>
		</div>
			<div class="wrapper">
			<div class="ft-lines">
			<ul class="clearfix">
				<li><a href="#">Terms of Use</a></li>
				<li><a href="#">Content Guidelines</a></li>
				<li><a href="#">Report error </a></li>
	</ul>	
				<div class="copy-rights"><p> ©  2017 Rodeo labs. All rights reserved</p>
			</div>
	</div>
	</div>
	</footer>
	
	</body>
</html>

Solution 

  • .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.