I need help formatting the footer for my website. I am new to CSS and I cannot figure out how to get the text for the Copyright to sit underneath of the icons. I tried tweaking by altering the height of the footer and the best I can get is the text to the left or right of the icons. Any help would be appreciated.
CSS Style Sheet:
body {
margin: 0;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50px;
height: 50px;
margin-top: 11px;
}
.navBar {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
margin-top: 61px;
text-align: center;
}
.navBar a {
display: inline-block;
width: 10%;
color: black;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
body.services a.services,
body.ourstory a.ourstory {
border-bottom: 1.5px solid black;
}
.header {
position: fixed;
background-color: white;
width: 100%;
height: 80px;
}
.p3 {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 105%;
font-weight: 300;
line-height: 1.8em;
}
.p4 {
color: black;
text-align: center;
padding-left: 200px;
font-family: 'Poppins';
font-size: 100%;
font-weight: 300;
line-height: 1.8em;
}
HTML Document:
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
margin-bottom: 100px;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
Code change on .copyright and .navbarSocialMedia CSS. Mainly to change the position on .copyright and align the bottom of .navbarSocialMedia.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
/* display: block;*/
/* Add fixed position */
position: fixed;
bottom: 0;
left: 50%;
/* margin-bottom: 100px; */
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
bottom: 2.5em; /* Change to 2.5em for the copyright space */
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
The reason the copyright div is not visible is because your <div class="navbarSocialMedia"> has a position fixed, so it is displayed on top of the footer (that also has a fixed position).
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
w3
I set bottom: 0; left: 0; right: 0; footer's attributes so it's displayed on the bottom of the window and with full width.
Also I would suggest to remove the margin-bottom: 100px from the <p class="copyright"> as it takes too much space from the window.
And last but not least, I noticed that for the <div class="navbarSocialMedia"> you had set text-align: center (so I'm assuming you want the icons to be centered) but as it has the property display: flex. It's better to use align-items: center instead.
Hope this helps you out.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
width: 100%;
align-items: center;
}
.newFooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
width: 100%;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
added red background to footer just to identify footer element. You can change later.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: red;
bottom: 0;
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
.try {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom: 0;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="footer">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com" target="_blank">
<i class="fa fa-linkedin"></i> </a>
<a href="//www.google.com" target="_blank">
<i class="fa fa-google"></i></a>
<a href="https://www.facebook.com " target="_blank">
<i class="fa fa-facebook"></i> </a>
</div>
<p class=" copyright ">Copyright ©. </p>
</div>
</body>
</html>
Related
I want to make a simple gallery.
I set up the width and height of li and the img size, but it doesn't fit.
I want to make unified image sizes.
What's wrong with my code?
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
Just define some height and width to image it will start working.
body
{
margin: 0;
padding: 0;
background-color: #fff;
color: black;
font-family: sans-serif, Arial;
font-size: 15px;
line-height: 1.5;
}
.container
{
max-width: 1200px;
margin: auto;
}
.container a
{
background: #ccc;
color: #666;
text-decoration: none;
padding: 10px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
transition: background 0.5s, color 0,5s;
}
.container a:hover
{
background: #aaa;
color: #fff;
}
main
{
background: #111;
padding: 25px;
width: 100%;
float: left;
box-sizing: border-box;
}
/*Gallery*/
.gallery
{
background: #999;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 25px;
display: block;
width: 100%;
}
.gallery li
{
background: red;
width: 31%;
float: left;
margin-left: 1%;
margin-right: 1%;
height: 175px;
}
.gallery img
{
background: blue;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container .gallery a
{
background: transparent;
padding: 0;
display: block;
height: 200px;
width: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta lang="hu">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/teszt.css">
<title>test</title>
</head>
<body>
<!-- FEJLÉC -->
<div class="container">
<main>
<ul class="gallery">
<li>
<a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
<img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
<img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
<img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
<img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
<li>
<a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
<img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
<span>lorem ipsim</span>
</a>
</li>
</ul>
</main>
</div>
</body>
</html>
At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
Recently I have started development on my website and when I add this header element to a div with the id "Product" the text wraps into a box like shape and not go straight? How do I fix this?
I need the text to fill the whole top of the box but whatever I do just doesn't work. This only wraps into a box when I add other elements to the div even if the other text is an absolute position.
body {
background-color: rgb(36, 36, 36);
}
#BestProfit {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 30px;
color: #ffbc82;
position: absolute;
left: 50px;
top: 60px;
}
#BestProfitDescription {
font-family: 'Segoe UI';
font-weight: bold;
font-style: italic;
font-size: 20px;
color: #ffffff;
position: absolute;
left: 50px;
top: 100px;
}
.ProductList {
width: 640px;
height: 780px;
padding-top: 100px;
padding-right: 20px;
position: absolute;
top: 40px;
}
.Product {
display: inline-flex;
background-color: rgb(44, 44, 44);
width: 300px;
height: 240px;
margin-left: 5px;
margin-top: 5px;
border-radius: 5px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.075),0 4px 6px -2px rgba(0,0,0,.05);
}
#NameText {
position: relative;
font-weight: 600;
top: -15px;
left: 10px;
font-family: Montserrat,system-ui;
font-size: 22px;
color: #ffbc82;
}
#ProfitText {
position: relative;
top: 50px;
font-family: Montserrat,system-ui;
font-size: 18px;
color: white;
}
<html>
<head>
<link rel="icon" href="../Images/Other/Stonk.gif" id="Icon">
<title id="Title">stonks.in | Bazzar Tracker</title>
</head>
<body>
<script type="text/javascript" src="../JS/Request.js"></script>
<div id="TopBar">
<img id="Logo" src="../Images/Other/Logo.png">
<div id="Pages">
<a id="OverviewLink" href="../HTML/Overview.html">
<img id="Icon" src="../Images/Icons/Overview.png">Overview
</a>
<a id="ProfitLink" href="../HTML/Profit.html">
<img id="Icon" src="../Images/Icons/Profit.png">Profit
</a>
<a id="SmartLink" href="../HTML/Smart.html">
<img id="Icon" src="../Images/Icons/Smart.png">Smart
</a>
<a id="DemandLink" href="../HTML/Demand.html">
<img id="Icon" src="../Images/Icons/Demand.png">Demand
</a>
<a id="SupplyLink" href="../HTML/Supply.html">
<img id="Icon" src="../Images/Icons/Supply.png">Supply
</a>
<a id="BrokerLink" href="../HTML/Broker.html">
<img id="Icon" src="../Images/Icons/Broker.png">Broker
</a>
<a id="DiscordLink" href="https://discord.gg/pKpw3Bk">
<img id="Icon" src="../Images/Icons/Discord.png">Discord
</a>
</div>
</div>
<h1 id="BestProfit">Best Profit</h1>
<h2 id="BestProfitDescription">These products have the highest profit gap.</h2>
<ul id="TopProfit" class="ProductList">
</ul>
</body>
<script type="text/javascript" src="../JS/Request.js"></script><script>RequestProducts("TopProfit", "Profit", 6)</script>
<link rel="stylesheet" type="text/css" href="../CSS/Topbar.css">
<link rel="stylesheet" type="text/css" href="../CSS/Overview.css">
</html>
add css:
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
body {
background-color: rgb(36, 36, 36);
}
#BestProfit {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 30px;
color: #ffbc82;
position: absolute;
left: 50px;
top: 60px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#BestProfitDescription {
font-family: 'Segoe UI';
font-weight: bold;
font-style: italic;
font-size: 20px;
color: #ffffff;
position: absolute;
left: 50px;
top: 100px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ProductList {
width: 640px;
height: 780px;
padding-top: 100px;
padding-right: 20px;
position: absolute;
top: 40px;
}
.Product {
display: inline-flex;
background-color: rgb(44, 44, 44);
width: 300px;
height: 240px;
margin-left: 5px;
margin-top: 5px;
border-radius: 5px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.075),0 4px 6px -2px rgba(0,0,0,.05);
}
#NameText {
position: relative;
font-weight: 600;
top: -15px;
left: 10px;
font-family: Montserrat,system-ui;
font-size: 22px;
color: #ffbc82;
}
#ProfitText {
position: relative;
top: 50px;
font-family: Montserrat,system-ui;
font-size: 18px;
color: white;
}
<html>
<head>
<link rel="icon" href="../Images/Other/Stonk.gif" id="Icon">
<title id="Title">stonks.in | Bazzar Tracker</title>
</head>
<body>
<script type="text/javascript" src="../JS/Request.js"></script>
<div id="TopBar">
<img id="Logo" src="../Images/Other/Logo.png">
<div id="Pages">
<a id="OverviewLink" href="../HTML/Overview.html">
<img id="Icon" src="../Images/Icons/Overview.png">Overview
</a>
<a id="ProfitLink" href="../HTML/Profit.html">
<img id="Icon" src="../Images/Icons/Profit.png">Profit
</a>
<a id="SmartLink" href="../HTML/Smart.html">
<img id="Icon" src="../Images/Icons/Smart.png">Smart
</a>
<a id="DemandLink" href="../HTML/Demand.html">
<img id="Icon" src="../Images/Icons/Demand.png">Demand
</a>
<a id="SupplyLink" href="../HTML/Supply.html">
<img id="Icon" src="../Images/Icons/Supply.png">Supply
</a>
<a id="BrokerLink" href="../HTML/Broker.html">
<img id="Icon" src="../Images/Icons/Broker.png">Broker
</a>
<a id="DiscordLink" href="https://discord.gg/pKpw3Bk">
<img id="Icon" src="../Images/Icons/Discord.png">Discord
</a>
</div>
</div>
<h1 id="BestProfit">Best Profit</h1>
<h2 id="BestProfitDescription">These products have the highest profit gap.</h2>
<ul id="TopProfit" class="ProductList">
</ul>
</body>
<script type="text/javascript" src="../JS/Request.js"></script><script>RequestProducts("TopProfit", "Profit", 6)</script>
<link rel="stylesheet" type="text/css" href="../CSS/Topbar.css">
<link rel="stylesheet" type="text/css" href="../CSS/Overview.css">
</html>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
I would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT