I was making the responsive mobile version of a website, when I discovered that the body expands when resizing the window, here's a screenshot of it (the header is pink so I could spot where the error was in pixels, ah yes, it's in Italian but don't worry):
This is the code:
<head>
<meta charset="utf-8">
<title>
Ravenna | Home
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/zoom-marker.css"/>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/script.js" async></script>
</head>
<body id="body">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<section id="hd" class="header">
<h2>Ravenna</h2>
<nav>
<ul>
<li class="menu">
Storia
<ul class="ani-menu">
<li><a class="aestr1" href="antica.html">Antica</a></li>
<li><a class="a" href="esarcato.html">L'Esarcato</a></li>
<li><a class="a" href="medioevo.html">Medioevo</a></li>
<li><a class="aestr2" href="dal500aoggi.html">Dal 500 a oggi</a></li>
</ul>
</li>
<li class="menu">
Strutture
<ul class="ani-menu">
<li><a class="aestr1" href="santapollinareinclasse.html">Sant'Apollinare in Classe</a></li>
<li><a class="a" href="museoclassis.html">Museo CLASSIS</a></li>
<li><a class="a" href="portoanticoinclasse.html">Porto Antico in Classe</a></li>
<li><a class="a" href="sanvitale.html">San Vitale</a></li>
<li><a class="a" href="gallaplacidia.html">Galla Placidia</a></li>
<li><a class="a" href="battisteroneoniano.html">Battistero Neoniano</a></li>
<li><a class="a" href="museoarcivescovile.html">Museo Arcivescovile</a></li>
<li><a class="aestr2" href="strutture.html">Altro...</a></li>
</ul>
</li>
<li class="menu">
Banksy
<ul class="ani-menu">
<li><a class="aestr1" href="chie.html">Chi è</a></li>
<li><a class="a" href="cosacomunica.html">Cosa comunica</a></li>
<li><a class="aestr2" href="spuntiperchiacchierare.html">Spunti per chiacchierare</a></li>
</ul>
</li>
</ul>
</nav>
<div id="burgy" class="burgy">
<a id="onclickburgy" onclick="openSlideMenu()">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</a>
</div>
<div id="side-menu" class="side">
<div id="containerside" class="containerside">
Home
Storia
Strutture
Banksy
</div>
</div>
</section>
<section class="wall">
<img src="img/Ravenna.jpg" class="fitBg">
<div class="content">
<h2>Benvenuti a Ravenna!</h2>
<p>N.B. Per esplorare il sito rivolgersi ai punti di cui sopra, una guida più completa può essere trovata qui sotto</p>
<div class="animation">
^
</div>
</div>
</section>
</body>
</html>
and there is the css:
body {
font-family: 'Poppins', sans-serif;
min-height: 200vh;
background: #111;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
section {
position: relative;
padding: 20px;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 1000000;
display: flex;
justify-content: space-between;
width: 100%;
padding: 40px 60px;
transition: 0.35s;
}
.header .logo {
color: #fff;
font-size: 1.2em;
font-family: 'Acme';
margin-top: 8px;
}
.wall {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wall:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 400px;
z-index: 1;
background: linear-gradient(to top, rgb(17, 17, 17),transparent);
}
.wall .content {
position: relative;
max-width: 900px;
text-align: center;
z-index: 1;
}
.wall .content h2 {
color: #fff;
font-size: 5em;
font-family: 'Leckerli One';
}
.wall .content a {
position: absolute;
color: #fff;
font-size: 9em;
font-family: 'Leckerli One';
bottom: -140px;
left: 50%;
transform: translate(-50%, 70%) rotate(180deg);
font-weight: 900;
}
Add this to the top of your CSS and your problems will be solved:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
The issue is that the padding on the .header is making the element expand beyond where you want it to. Changing the box-sizing will modify the way the padding is interpreted and apply it inside the content area instead of expanding it.
Try using overflow-x like this:
html,body{
overflow-x: hidden;
}
Related
Before zoom:
After zoom:
From what I noticed, I am working on a 27' monitor display and my teacher will be viewing my website on a 15 inch, and the second image is typically what the teacher will be seeing. How do I prevent the overlapping from occurring, and keep it to its own position and proportional size?
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="parallax.min.js"></script>
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li>H o m e</li>
<li>G a m i n g</li>
<li>O f f i c e</li>
<li>C o n t a c t s</li>
<li>C h e c k o u t</li>
</div>
</div>
</header>
<body>
<div class="container">
<div id="info"></div>
<div class="center">
<div class="logo">
<img src="logoreal2.png"/>
</div>
<div class="text">
<h1>Contact Us</h1>
<h4>- Socials -</h4>
<div id="links">
<a id="facebook" href="https://www.facebook.com/jared.huynh.1">Facebook</a>
<a id="instagram" href="https://www.instagram.com/jarednhu/">Instagram</a>
<a id="twitter" href="https://twitter.com/JaredWorkshop">Twitter</a>
</div>
<h4>- Support -</h4>
<div id="links2">
<a id="aa" href="https://mail.google.com/mail/u/0/#inbox?compose=jrjtXDzFhFXBrtwSfQzLJRrTmwBtfcnPVWKLhHzlGhTRbTKwsKbzRgrczFglKlXLmDLQtQCW" target="_blank">Email: Jaredsworkshop#gmail.com</a>
<a id="bb" href="#">Phone: 0426710063</a>
<a id="cc" href="https://www.google.com/maps/place/PLE+Computers+Wangara/#-31.7873489,115.8205448,17z/data=!3m1!4b1!4m5!3m4!1s0x2a32ad058339f89d:0xeb20a17d59f97d22!8m2!3d-31.7873535!4d115.8227335" target="_blank">Address: 1/46 Buckingham Dr, Wangara WA 6065</a>
</div>
</div>
</div>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
user-select: none;
}
body {
background: #eee;
}
.text {
font-family: 'Roboto', sans-serif;
font-size: 50px;
color: black;
position: absolute;
}
a {
display: block;
text-decoration: none;
color: black;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 70px;
margin: 0;
}
h4 {
font-family: 'Montserrat', sans-serif;
font-size: 40px;
margin: 0;
margin-top:10px;
}
.hovered a {
color: #ffffff66;
}
.hovered {
color: #fff;
}
.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
}
canvas {
width: 100%;
height: 100%;
}
#info {
position: fixed;
padding: 20px;
}
#facebook:hover {
color: #FFFFFF;
}
#instagram:hover {
color: #ff0066;
}
#twitter:hover {
color: #fff;
}
.center .logo {
text-align: center;
position: absolute;
padding-bottom: 0;
margin-top: 30%;
background-color: transparent;
}
.center .logo img {
width: 1200px;
}
.text{
transform: translate(0,-30%);
background-color: transparent;
}
#facebook {
font-size: 2rem;
}
#instagram {
font-size: 2rem;
}
#twitter {
font-size: 2rem;
}
#links a{
display: inline-block;
white-space: nowrap;
padding: 20px;
line-height: 2px;
}
#links2 a{
line-height: 2px;
white-space: nowrap;
padding: 20px;
}
#aa{
font-size: 2rem;
}
#bb{
font-size: 2rem;
}
#cc{
font-size: 2rem;
}
#aa:hover{
color: #fe9500;
transition: 0.5s;
}
#bb:hover{
color: #fe9500;
transition: 0.5s;
}
#cc:hover{
color: #fe9500;
transition: 0.5s;
}
I fixed it by removing position:absolute; in .center .logo{} and removed width: 1200px; under .center .logo img{} . Then I cut and pasted the whole
<div class="logo">
<img src="logoreal2.png"/>
</div>
and placed it all inside <div class="text"> which was the same div as the text below (I'm moving the logo). I later added a negative top margin to move it down from the top of the screen.
Final HTML product looked like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="parallax.min.js"></script>
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li>H o m e</li>
<li>G a m i n g</li>
<li>O f f i c e</li>
<li>C o n t a c t s</li>
<li>C h e c k o u t</li>
</div>
</div>
</header>
<body>
<div class="container">
<div id="info"></div>
<div class="center">
<div class="text">
<div class="logo">
<img src="logoreal2.png"/>
</div>
<h1>Contact Us</h1>
<h4>- Socials -</h4>
<div id="links">
<a id="facebook" href="https://www.facebook.com/jared.huynh.1">Facebook</a>
<a id="instagram" href="https://www.instagram.com/jarednhu/">Instagram</a>
<a id="twitter" href="https://twitter.com/JaredWorkshop">Twitter</a>
</div>
<h4>- Support -</h4>
<div id="links2">
<a id="aa" href="https://mail.google.com/mail/u/0/#inbox?compose=jrjtXDzFhFXBrtwSfQzLJRrTmwBtfcnPVWKLhHzlGhTRbTKwsKbzRgrczFglKlXLmDLQtQCW" target="_blank">Email: Jaredsworkshop#gmail.com</a>
<a id="bb" href="#">Phone: 0426710064</a>
<a id="cc" href="https://www.google.com/maps/place/PLE+Computers+Wangara/#-31.7873489,115.8205448,17z/data=!3m1!4b1!4m5!3m4!1s0x2a32ad058339f89d:0xeb20a17d59f97d22!8m2!3d-31.7873535!4d115.8227335" target="_blank">Address: 1/46 Buckingham Dr, Wangara WA 6065</a>
</div>
</div>
</div>
<canvas></canvas>
<script src="app.js"></script>
</body>
</html>
I'm trying to clone the Google front for educational purposes in my career as a front-end developer. In this case I am working with Google's own sprite. Here I put an image of the sprite with which I am working.
This is the HTML that I carry so far. As you can see, I am still creating the header.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Google. Búsqueda avanzada · Programas de publicidadTodo acerca de GoogleGoogle.com in English. © 2020 - Privacidad - Condiciones." />
<meta name="author" content="Diesan Romero" />
<link rel="stylesheet" href="./assets/css/main.css" />
<title>Google</title>
</head>
<body>
<header>
<nav>
<ul class="nav-right__section">
<li>
Gmail
</li>
<li>
Imágenes
</li>
<li>
<a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
</li>
<li>
Iniciar Sesión
</li>
</ul>
</nav>
</header>
</body>
</html>
On the other hand, this is the sass file that I have so far:
header {
width: 100%;
height: 60px;
nav {
display: flex;
justify-content: flex-end;
.nav-right__section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
a {
margin-right: 10px;
color: $black-color;
}
a.menu-icon {
background-image: url('../images/sprite.png');
background-size: 528px 68px;
background-position: -132px -38px;
color: #000;
opacity: .55;
}
}
}
}
The reason I use sass is because periodically I will take the project to another level, maybe I will pass it to React, etc.
The problem is that I don't know if I'm positioning the sprite well so that it shows me the icon I want. Here is an image of the icon that should come out:
However, this is what I am getting:
Yeah, I know, very sad 😢
Can someone please help me?
I think you just need to set the element as a display:inline-block and give it a size
From what i can see, i think that the element is 0x0 px right now.
Try adding this to the a.menu-icon class
height: 29px;
width: 28px;
display: inline-block;
/* compiled style */
header {
width: 100%;
height: 60px;
}
header nav {
display: flex;
justify-content: flex-end;
}
header nav .nav-right__section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}
header nav .nav-right__section a {
margin-right: 10px;
color: #222;
}
header nav .nav-right__section a.menu-icon {
background-image: url("https://i.stack.imgur.com/YTlAV.png");
background-size: 528px 68px;
background-position: -132px -38px;
color: #000;
opacity: 0.55;
display: inline-block;
width: 30px;
height: 30px;
}
<header>
<nav>
<ul class="nav-right__section">
<li>
Gmail
</li>
<li>
Imágenes
</li>
<li>
<a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
</li>
<li>
Iniciar Sesión
</li>
</ul>
</nav>
I cannot keep the footer at the bottom of the page for both desktop and mobile. can someone please go over my code and tell me how to fix it?
The issue is it keeps going back to the center of the page and i am unable to move it down and have it stay there for most browsers and devices.
I have looked around for fixes and there are a few but the ones iv tried just ruin the entire page and push it all out of alignment. I am looking for the smallest amount of code possible to do this i don't want a giant chunk of code for this. i wanna keep it simple. I am new to web development. This is my first website.
This is the index.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>THG Graphics</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,
h1 {
font-family: "Raleway", Arial, sans-serif
}
h1 {
letter-spacing: 6px
}
.w3-row-padding img {
margin-bottom: 12px
}
.dropdownmobile {
height: 100%;
width: 100%;
}
.border {
width: 24.%;
border: 1px solid #c3c3c3;
display: inline-block
}
.dropbtn {
background-color: #FFFFFF;
color: black;
padding: 16px;
font-size: 16px;
border: thin;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #ffffff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #989898
}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:32px 16px">
<h1>THG Graphics</h1>
<h1 class="w3-xlarge">Graphic Designer</h1>
<div class="w3-padding-32">
<div class="border">
<a title="Home" href="index.html" class="w3-button w3-grey dropbtn">Home</a>
<a title="Portfolio" href="portfolio.html" class="w3-button dropbtn">Portfolio</a>
<a title="Enquiry" href="Enquiry.html" alt="Enquiry" class="w3-button dropbtn">Enquiry</a>
<div class="dropdown">
<button title="About" alt="About" class="w3-button dropdown dropbtn dropdownmobile">About</button>
<div class="dropdown-content" id="myDropdown">
<a title="Contact us" href="Contact.html" alt="Contact us" class="w3-button">Contact us</a>
<a title="Terms of use" href="TOS.html" alt="Terms of use" class="w3-button">Terms of use</a>
Privacy Policy
<a title="FAQ" href="FAQ.html" alt="FAQ" class=" w3-button">FAQ</a>
</div>
</div>
</div>
<h2>Welcome to THG Graphics!</h2>
<h5>We make custom Logos, Animated Logos & Animations to suit your needs.</h5>
<h5>Please check out our portfolio to view some of our work.</h5>
</div>
</header>
</div>
<footer class="w3-container w3-padding-16 w3-light-grey w3-center footer">
<p class="fl_left">Copyright © 2017 - All Rights Reserved - THG-Graphics.com</p>
<div>
Terms of use
Privacy Policy
FAQ
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>
To simplify a bit the problem, say your HTML code looks like this:
<div id="wrapper">
<div class="header">HEADER</div>
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Now that's how the CSS code could look like:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
width: 100%;
position: relative;
}
.header {
background: blue;
}
.container {
background: red;
padding-bottom: 100px;
}
.footer {
bottom: 0;
width: 100%;
height: 100px;
position: absolute;
background: yellow;
}
Note that you need to add a bottom padding of exactly the height of your footer (100px here) to your container to make it work.
The magic here happens because you set the min-height of your wrapper to be always equal to 100%, which forces your div to fit the view port height.
And your footer will be at the bottom of the page no matter what.
Hope this helps !
Try this
.footer {position: absolute; bottom: 0; width: 100%;}
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
I'm trying to force the word "District" to sit below "Area School", but it tends to force "District" to the left of the page underneath the logo
HTML:
<!DOCTYPE html>
<head>
<meta name="description" content="EPASD is a public school district that serves the communities in and around East Pennsboro Township in Central Pennsylvania.">
<meta name="author" content="John Gibson">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="nomargins">
<header id="MainHeader">
<nav>
<ul>
<li class="inline" style="max-width:auto">
<img src="EPASD logo.svg" id="logo">
</li>
<li class="inline" id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li class="inline" id="DistrictName_2">
<div class="inline">Area School</div>
<div class="inline">District</div>
</li>
</ul>
</nav>
</header>
<aside>
<nav style="VerticalNavbar">
<a href="">
</nav>
</aside>
<section id-"MainContentArea">
<div id="carousel">
</div>
</section>
<aside id="articles">
<h1 class="ArticleSectionHeading">Articles</h3>
</aside>
</body>
</html>
CSS:
* {
margin: 0px 0px 0px 0px;
}
body {
background-image: url(background.svg);
background-size: cover;
background-attachment: scroll;
}
.nomargins {
margin: 0px 0px 0px 0px;
}
#MainHeader {
background: #F08819;
position: fixed;
z-index: 100;
height: 115px;
width: 100%;
min-width: 320px;
color: #000000;
opacity: 0.9;
}
#articles {
position: relative;
overflow: hidden;
}
#logo {
height: 100%;
max-height: 150px;
margin-top: -17px;
}
ul {
list-style-type: none;
padding-left: 0px;
max-height:auto;
overflow: visible;
display: inline-block;
}
#DistrictName_1 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 3.6em;
vertical-align: 60px;
margin-left: 26px;
}
#DistrictName_2 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.625em;
vertical-align: 80px;
}
.inline {
display: inline;
}
.block {
display: block;
}
Any suggestions on how to force District underneath? I'd like to keep it as text rather than merging the text into an .svg
Is this what you wanted to achieve?
Changed HTML
<ul>
<li style="max-width:auto">
<img src="EPASD logo.svg" id="logo"></img>
</li>
<li id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li id="DistrictName_2">
<div>Area School</div>
<div class="clear">District</div>
</li>
</ul>
CSS
ul li, #DistrictName_2 > div {
display:inline-block;
}
.clear {
float:left;
clear:both;
}
Working example here:
JSFiddle