CODEWITHSUNDEEP
htmlcssfooter
user5157559
user5157559

Reputation:

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>

Upvotes: 0

Views: 702

Answers (5)

Algirdas Dabašinskas
Algirdas Dabašinskas

Reputation: 18

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

Upvotes: 0

Harekrishna Murari
Harekrishna Murari

Reputation: 89

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><a href="#">demo1</a></li>
<li><a href="#">demo2</a></li>
<li><a href="#">demo3</a></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;
}

Upvotes: 0

Saiyaff Farouk
Saiyaff Farouk

Reputation: 5633

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.

Upvotes: 1

Shani
Shani

Reputation: 2541

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;
 }

Upvotes: 0

Khoshtarkib
Khoshtarkib

Reputation: 170

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

Upvotes: 1

Related Questions