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
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>
I am trying to solve an issue where CSS - overflow-x causes a line to fade in and fade out for a brief second after each h2. This only happens when the webpage is rendered (visited or refreshed).
This doesn't happen on Chrome or Firefox on the computer. It doesn't happen on Safari on Iphone 8 as well.
The following link contain all of the code: https://jsbin.com/liqodaluwo/edit?html,css,output
You don't need overflow-x for your Text elements in this case, because the text Elements won't be cutted, so just use overflow:hidden;
/* Body */
body {
overflow-x: hidden;
font: 16px/1 "Montserrat", Arial, Helvetica, sans-serif;
color: white;
background: #101010;
margin: 0;
padding: 0;
}
/* Global */
li {
list-style: square;
}
.container {
text-align: center;
width: 90%;
margin: auto;
}
/* Gallery */
#gallery,
#gallery-card,
#gallery-music,
#gallery-substance-designer {
font-size: 0;
list-style: none;
outline: none;
margin: 0;
padding: 0;
}
#gallery li,
#gallery-music li,
#gallery-substance-designer li {
display: inline-block;
position: relative;
margin: 2px;
padding: 0;
}
#gallery-card li {
display: inline-block;
position: relative;
margin: 10px;
padding: 0;
}
#gallery a,
#gallery-card a,
#gallery-music a,
#gallery-substance-designer a {
color: white;
text-decoration: none;
outline: none;
}
#gallery img,
#gallery-card img,
#gallery-substance-designer img {
cursor: pointer;
height: auto;
width: 300px;
max-width: 100%;
margin: 0;
padding: 0;
transform: scale(1);
transition: all 0.2s;
}
#gallery img:hover,
#gallery-substance-designer img:hover {
transform: scale(0.98);
}
#gallery iframe,
#gallery-card iframe,
#gallery-music iframe,
#gallery-substance-designer iframe {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Card */
.card {
max-width: 300px;
}
.card-info,
.card-info-center {
font-size: 12px;
background: #202020;
margin: 0;
padding: 15px;
transition: all 0.3s;
}
.card-info {
text-align: left;
}
.card-info h2,
.card-info-center h2 {
margin: 0;
padding: 0;
}
.card-info p,
.card-info-center p {
margin: 0;
padding-top: 10px;
}
.card-price {
font-size: 16px;
margin-top: 20px;
padding: 0;
}
.card-price p {
text-align: right;
margin: 0;
padding: 0;
}
.card:hover .card-info,
.card:hover .card-info-center {
background: #404040;
}
/* Fade In */
.fade-in {
animation: animation-fade-in 1s;
}
#keyframes animation-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Desktops & Laptops */
#media only screen and (max-width: 1085px) {
#global-container,
#global-content,
#slideshow {
width: auto;
}
#about-profile,
#about-profile-text,
#global-sidebar {
float: none;
width: auto;
}
.details {
width: 100%;
margin: 0 0 20px;
}
.information,
#sys-req {
padding: 1px 10px 5px;
}
#about-divider {
background: linear-gradient(to left, #00000000 0%, #303030 50%, #00000000 100%);
float: none;
width: auto;
height: 1px;
margin: 10px 10% 0;
}
#slideshow-container {
display: block;
}
#slideshow-summary {
text-align: center;
float: none;
width: auto;
margin: 0 0 20px;
}
#slideshow-summary div {
display: inline-block;
vertical-align: top;
text-align: justify;
max-width: 380px;
margin: 0 10px;
}
#slideshow-summary img {
width: 400px;
max-width: 100%;
}
}
/* Tablets & Mobile Phones */
#media only screen and (max-width: 625px) {
/* Hide Navigation */
#navigation {
display: none;
}
/* Show Navigation Icons */
#navigation-icons {
display: block;
}
/* Expand Body to fit all content (Navigation Icons bar would otherwise hide content) */
body {
padding-bottom: 52px;
}
/* Download content resize */
#download-content {
max-width: 100%;
max-height: 100%;
}
.card {
max-width: 150px;
}
.card-info-center h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Links -->
<link rel="stylesheet" href="/css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="/img/global/favicon.ico">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=auto">
<!-- Title -->
<title>tet</title>
</head>
<body>
<!-- Main Content -->
<main class="container">
<section>
<h1>test</h1>
<!-- Portfolio -->
<ul id="gallery-card">
<li>
<article class="card">
<a href="/portfolio/games">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-games.png">
<div class="card-info-center">
<h2>Games aw w dwadaw</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/2d-art">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-2d-art.png">
<div class="card-info-center">
<h2>2D Art</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/3d-models">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-3d-models.png">
<div class="card-info-center">
<h2>3D Models</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/particles/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-particles.png">
<div class="card-info-center">
<h2>Particles</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/shaders/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-shaders.png">
<div class="card-info-center">
<h2>Shaders</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/environments/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-environments.png">
<div class="card-info-center">
<h2>Environments</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/programming/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-programming.png">
<div class="card-info-center">
<h2>Programming</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/substance-designer/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-substance-designer.png">
<div class="card-info-center">
<h2>Substance Designer</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/music">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-music.png">
<div class="card-info-center">
<h2>Music</h2>
</div>
</a>
</article>
</li>
</ul>
</section>
</main>
<!-- Scripts -->
<script src="/js/lazyload.js"></script>
</body>
</html>
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>
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.