How to put the text of footer in center and the links of menu in center and next to each other?
See updated code here.
I've wrapped the menu links in another div: display: inline-block with the text-align of the #menu set to center. This centers the three links.
The text in the footer is also centered through text-align: center.
Firstly, it is bad practice to open a new question asking the same thing. Secondly, avoid announcing "My code" unless you wrote the majority of it (this is not the case here). Thirdly, this question does not show much research effort as the footer text-align can easily be searched up.
Footer and Form appearing into each other
I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
@media (max-width: 1000px) {
.content {
width: 46%;
}
}
@media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
@media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
@media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
@media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right"><a href="#about">About Us</a></li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
<a href="/sign__up">About Us</a>
</div>
<div class="footer__link--items">
<a href="/">Contact Us</a>
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
<a href="/">Youtube</a>
</div>
<div class="footer__link--items">
<a href="/">TikTok</a>
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>how to center align two objects on the same line
Not sure why you have so many div nested, which is not needed, you might want to clean up those.
But here is the solution, div are block level element, you need to make sure set it display: inline-block or just use span.
ul has default 40px padding left, need overwrite that too.
set ul li to inline-block will make them in one row
the vertical line can be achieved by border-right: 1px solid #000000;, but make sure you have the following so last item does not have that line at the end.
ul li:last-child {
border-right: none;
}
.td-pb-span td-sub-footer-copy { text-align: center; display: inline-block;}
.td-pb-span td-sub-footer-menu { text-align: center; display: inline-block;}
.td-sub-footer-container td-container-wrap { text-align: center;}
.td-container { text-align: center;}
.inline,.inline * { display: inline;}
.site-name { padding-right: 10px; border-right: 1px solid #000000;}
.inline ul { padding: 0;}
.inline ul li { padding-right: 10px; padding-left: 10px; border-right: 1px solid #000000;}
.inline ul li:last-child { border-right: none;}<div class="td-sub-footer-container td-container-wrap "> <div class="td-container"> <div class="td-pb-row"> <span class="td-pb-span td-sub-footer-copy inline site-name">© 2017 Site Name</span> <div class="td-pb-span td-sub-footer-menu inline"> <div class="menu-td-demo-footer-menu-container"> <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"> <li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li> <li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li> <li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li> <li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li> </ul> </div> </div> </div> </div></div>Footer elements one next to another in bootstrap
It might be helpful to review the bootstrap documentation on the grid system here: bootstrap.com/css
Try this...
<div id="section-footer" class="footer-wrap">
<div class="container footer center">
<div class="row">
<div class="col-md-6">
<h4 class="footer-title"><!-- Footer Title -->
<a class="site-name" href="#"><span></span>Soc</a>
</h4>
<!-- Social Links -->
<div class="social-icons">
<ul>
<li><a href="#"><i class="fa fa-facebook-square"></i>Link</a>
</li>
<li><a href="#"><i class="fa fa-twitter-square"></i>Link</a>
</li>
<li><a href="#"><i class="fa fa-google-plus-square"></i>Link</a>
</li>
<li><a href="#"><i class="fa fa-pinterest-square"></i>Link</a>
</li>
<li><a href="#"><i class="fa fa-flickr"></i>Link</a>
</li>
<li><a href="#"><i class="fa fa-linkedin-square"></i>Link</a>
</li>
</ul>
</div>
<p class="copyright">Soc © 2015</p>
</div>
<div class="col-md-6">
<p class="subscription-success"></p>
<p class="subscription-failed"></p>
<div class="col-md-10 col-md-offset-1 center section-title">
<h3>Subscribe</h3>
</div>
<form id="subscription-form">
<input type="email" name="EMAIL" required="required" placeholder="Email" class="input-email" />
<button type="submit" id="subscription-btn" class="fancy-button button-line button-white large zoom">Reg <span class="icon">
<i class="fa fa-sign-in"></i>
</span>
</button>
</form>
</div>
</div>
</div>
Footer UL won't center
Try apply the .links CSS style properties to the actual <ul> rather than the parent container. The combination of fixed width and auto margin will allow it be centered on the screen. This would also allow you to style the .links container as necessary.
Hopefully this helps.
Thanks!
CSS
.links ul {
list-style: none;
display: block;
margin: 0 auto;
width: 300px;
text-align: center;
}
.links ul li {
display: inline-block;
}
.links ul img {
padding: 2.5% 4%;
height: 40px;
}
HTML
<div class="links">
<ul>
<li><a href="x"><img src="img/mail.png" alt="Email"></a></li>
<li><a href="x"><img src="img/twitter.png" alt="Twitter"></a></li>
<li><a href="x"> <img src="img/tumblr.png" alt="Tumblrn"></a></li>
<li><a href="x"><img src="img/instagram.png" alt="Instagram"></a></li>
<li><a href="x"> <img src="img/linkedin.png" alt="LinkedIn"></a></li>
</ul>
</div>
Text on top of text in css?
Well, it was a bit unresponsive but we will only undress the problem you have. Let's see.
For starters you have to close your elements, just for good practice. Your <footer> could be like this.
<footer>
<ul>
<li>
<a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style='color: #CCCCCC'></i></a></li>
<li>
<a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style='color: #CCCCCC;'></i></a></li>
<li>
<a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style='color: #CCCCCC;'></i></a></li>
</ul>
<ul>
<li><a href="//csgoshuffle.com/status">Status</a></li>
<li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href="//csgoshuffle.com/contact">Contact</a></li>
<li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
I removed the unnecessary div and i split the <ul> in 2 <ul>s, the icons and the text.
Now for the css
Remove the fixed height from <footer>
footer {
width: 100%;
background-color : #212022;
border-top: 1px groove #cc9900;
}
Also, remove floats, and absolute positioning from your icons
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
}
Finally, I made your <ul> displaying as block and removed fixed width
footer ul {
display: block;
list-style:none;
margin:50px auto;
text-align:center;
}
That should auto-align eveything according to your needs, without the need of explicitly position everything for every different display width.
Update you could change margin:50px auto; to margin:0px auto; to get a closer look in what you want
Update 2 as for the hover effect
You should remove the style from your <li> <a>s e.g.
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>
and add it in your css like this
footer ul li a i{
color: #CCCCCC
}
then you just have to change this rule
header ul li a:hover
to this
footer ul li a:hover i
e.g.
header ul li a:hover i{
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
here is the working snippet
.Site { display: flex; min-height: 100vh; flex-direction: column;}
.Site-content { flex: 1;}header { position: fixed; z-index: 10; width: 100%; height: 87px; background-color: #212022; border-bottom:2px groove #cc9900;}main { background-color: #181719;}
.centered { margin: 160px auto; padding:30px 50px; width: 800px; color: #efefef; background: #1c1b1d; border: 1px groove #cc9900;}.centered h2 { text-align:center;}footer { width: 100%; background-color : #212022; border-top: 1px groove #cc9900;}p{ color: white}@font-face { font-family: "csgofontlight" src: url('../fonts/csgofontlight.tff') format('truetype'); }#logo{ width: 520px; height: 80px; background: url<'/StaffPage/img/logo.png'> no-repeat scroll center; margin-top:3px;}#steamlogin{ width: 154px; height: 23px; background: url('/StaffPage/img/steamlogin.png'); margin-top: 34px;}body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px} header ul { list-style:none; margin:33px auto; width:600px; text-align:center;}header ul li{ display:inline-block; margin:10px;}header ul li a { color: #949494; text-decoration : none; font-size : 100%; position: absolute; top: 34px; right: 300px; font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;}header ul li a:hover { color: #E6E6E6;-o-transition: color 0.25s linear;-moz-transition: color 0.25s linear;-khtml-transition: color 0.25s linear;-webkit-transition: color 0.25s linear;-ms-transition: color 0.25s linear;transition: color 0.25s linear;}#howto { position: absolute; top: 34px; right: 400px;}
footer ul { display: block; list-style:none; margin:0px auto; text-align: center;}footer ul li { display:inline-block; margin:10px;}footer ul li a { color: #717171; text-decoration : none; font-size : 100%; font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;}
footer ul li a i{ color: #CCCCCC;}
footer ul li a:hover i{
color: yellow;-o-transition: color 0.25s linear;-moz-transition: color 0.25s linear;-khtml-transition: color 0.25s linear;-webkit-transition: color 0.25s linear;-ms-transition: color 0.25s linear;transition: color 0.25s linear;}h2 { font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif; color: #DDDDDD;}main ul li { font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif; color: #949494; margin: 0 0 10px 0; }<!DOCTYPE html><html><head><title>CSGOShuffle Staff Team</title><link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></head><link rel="shortcut icon" href="/StaffPage/icon.ico" /><body class="Site"> <header> <div class="wrapper"> <div id="logo"></div> <a href="//csgoshuffle.com" id="logo">Range Web Development</a> <div id="steamlogin"></div> <a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a> </div> <ul> <li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li> <li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li> </ul> </header> <main class="Site-content"> <div class="centered"> <h2>STAFF TEAM</h2> <ul> <li>Our mod chimbobway can deal with all missing skins deals , his account link is </li> <h2>Missing Value , here is fix</h2> <ul> <li>Our Mod Chimbobway will add you </li> <li>You will recive a case ID from the mod</li> <li>You Have to provide the mod with screen shots of all the info that he needs</li> <li>All Trades must has Code that the mod gonna give it to you</li> </ul> </div> </main> <footer>
<ul> <li> <a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li> <li> <a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x"></i></a></li> <li> <a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x"></i></a></li> </ul>
<ul> <li><a href="//csgoshuffle.com/status">Status</a></li> <li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li> <li><a href="//csgoshuffle.com/contact">Contact</a></li> <li><a href="//support.csgoshuffle.com/kb">FAQ</a></li> <li><a href="//csgoshuffle.com/tos">Terms of Service</a></li> <li><a href="//store.steampowered.com/">Powered by Steam</a></li> </ul></footer></body>Related Topics
Sass Replicating Nested Selector
Text-Shadow and Box-Shadow While Printing (Chrome)
Which Browsers Still Support CSS Expressions
CSS Div Center Multi-Line Text Vertically and Horizontally with a Background Image
Left/Right Transparent Cut Out Arrow
Stop Firefox Rendering Inline Colours in Rgb() Form
CSS Selector for Only Two Classes and No Others
How to Add Horizontal Scrollbar in a React Bootstrap Table
How to Select <A> Only When There's No Text Around It
How to Set Bootstrap Col for Small Display Sizes
Can CSS: Not Selector Target: Before and: After Selectors
How to Combine Compass with Bless
Input Doesn't Respect Flex Container Width
Why Is Themeprovider (Material UI) Not Working for Me Here
Issue with: Global() CSS-Module Selectors Not Being Pure in Nextjs