I'm trying to create six individual boxes with content with in, however it seems I can only separate them horizontally and not vertically. For example the boxes can be spaced apart horizontally using 'width', however when I try to move the boxes like in this image https://imgur.com/a/INcit , they don't seem to separate vertically and stay in pairs of twos instead. If anyone knows a solution, it would be greatly appreciated. Thanks :)
body {
background-color: #323232;
max-width: 960px;
padding: 0;
margin: 0;
font-family: Lato;
}
nav a {
color: #fff;
text-decoration: none;
padding: 20px 25px;
display: inline-block;
}
.fixed-header, .fixed-footer {
background: #333;
color: #fff;
width: 100%;
position: fixed;
text-align: center;
z-index: 10;
background-color: #202020;
}
.fixed-header {
top: 0;
}
.fixed-footer {
bottom: 0;
padding: 20px 0px;
}
.fixed-header a:hover {
color: #c1c1c1;
}
.fixed-footer a {
color: #fff;
font-weight: lighter;
text-decoration: none;
}
.group-content {
max-width: 960px;
text-align: center;
}
.group-content h3 {
font-weight: normal;
font-size: 20px;
color: white;
}
.group-content p {
font-weight: lighter;
font-size: 20px;
color: white;
}
.content {
display: inline-block;
width: 30%;
background-color: #202020
}
#font-face {
font-family: "Lato";
font-weight: normal;
font-style: normal;
src: url('fonts/Lato-Regular.eot'),
src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato-Regular.ttf') format('truetype'),
url('fonts/Lato-Regular.woff') format('woff'),
url('fonts/Lato-Regular.woff2') format('woff2');
}
#font-face {
font-family: "Lato";
font-weight: bold;
font-style: normal;
src: url('fonts/Lato-Bold.eot'),
src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato-Bold.ttf') format('truetype'),
url('fonts/Lato-Bold.woff') format('woff'),
url('fonts/Lato-Bold.woff2') format('woff2');
}
#font-face {
font-family: "Lato";
font-weight: lighter;
font-style: normal;
src: url('fonts/Lato-Light.eot'),
src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato-Light.ttf') format('truetype'),
url('fonts/Lato-Light.woff') format('woff'),
url('fonts/Lato-Light.woff2') format('woff2');
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
<div class="fixed-footer">
Made by Kumo © 2018
</div>
<div class="group-content">
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Arma 3: Exile Server</h3>
<p>A project for improving the exile mod.</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
<div class="content">
<img src="https://i.imgur.com/Xde6duk.png">
<h3>Reserved Space</h3>
<p>Reserved space for future projects</p>
</div>
</div>
</body>
</html>
I created a jsfiddle with your layout and made changes to make it work
https://jsfiddle.net/rqvg3fd2/
Basically I added this rule to limit the size of the contents of each block:
.content >* {
max-width: 220px;
text-align: center;
margin: 0;
}
Then I added the last 3 lines to .group-content to make it a flex-grid. Notice the flex-wrap: wrap which makes the contents wrap around.
.group-content {
max-width: 960px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
I also made the .content a flex-grid as a column and gave it a margin at the top to space out the rows
.content {
width: 30%;
background-color: #202020;
display: flex;
flex-direction: column;
padding-bottom: 20px;
align-items: center;
margin-top: 20px;
}
And last, I added a margin at the top of the H3 to separate it from the red box.
.group-content h3 {
margin-top: 10px;
font-weight: normal;
font-size: 20px;
color: white;
}
Related
I have inserted the fonts but I can't see them. I don't know why there is no space in between the words.
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<div id="topbar">
</div>
<nav id="main">
<img src="logo.svg" alt="logo">
<ul id="main-menu">
<li>Η ΟΜΟΣΠΟΝΔΙΑ</a></li>
<li>ΑΡΚΑΔΩΝ ΕΡΓΑ</a></li>
<li>ΕΠΩΝΥΜΟΙ ΑΡΚΑΔΕΣ</a></li>
<li>ΝΕΑ - ΕΝΗΜΕΡΩΣΗ</a></li>
<li>ΕΠΙΣΚΕΨΗ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
<li>ΑΝΑΖΗΤΗΣΕΙΣ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Regular.otf);
font-weight: normal;
}
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Bold.otf);
font-weight: bold;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Regular.ttf);
font-weight: normal;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Bold.ttf);
font-weight: bold;
}
body {
margin: 0;
font-family: 'SourceSansPro-Regular', serif;
}
header {
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
text-align: center;
}
nav#main {
background-color:white;
border-radius: 4px;
height: 60px;
position: relative;
}
#logo{
position: absolute;
display: block;
border: 10px solid #AB0427;
border-radius: 100%;
left: 50px;
top: 50%;
transform: translateY(-50%);
}
#logo img{
display: block;
}
.container{
width: 1360;
margin: 0 auto;
}
#main-menu{
margin: 0;
padding: 0 20px 0 320px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
list-style: none;
}
#main-menu a {
color:#002868 ;
font size: 14px;
font-weight: bold;
}
Try Using Formats and make sure the path is correct
Note: Remove the spaces if there are no spaces is in the filename, change the backward slash into forwarding slash
#font-face {
font-family:"Proxima Nova" ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family:"Proxima Nova";
src: url(./fonts/Proxima/Nova/Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Regular.ttf) format("truetype");
font-weight: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Bold.ttf) format("truetype");
font-weight: bold;
}
Looks like you have backslashes in the urls of the top two. I'd check to make sure the filepath is correct, that may be part of the problem.
Additionally, you could try to add a format property like so:
#font-face {
font-family: Proxima Nova ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("open-type");
font-weight: normal;
I am trying to hone my skills in on html5/css, by attempting a portfolio. The issue I am running into, is I have 3 inline-block divs, wrapped in a container div, but whenever I add more than 1 line of text (whether an h1 and h2 or h1 and a p) to only 1 div or all but 1, it shifts the other inline-block divs down. Shouldn't the inline-block div's stay where they are since the text is internal to that div? Furthermore, why are they breaking out of their parent/container div? Thanks for any help!
David
HTML
<html>
<head>
<title>Test Div - Portfolio</title>
<link rel="stylesheet" type="text/css" href="./style/alpha.css">
<link rel="stylesheet" type="text/css" href="./style/grid-alpha.css">
</head>
<body>
<header id="logo-bar">
<img src="#">
</header>
<div class="container">
<a href="#">
<div class="maps">
<h1>Level Design</h1>
<p>Check out some maps!</p><p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html">
<div class="sound">
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
<footer>2020 Test | Contact</footer>
</body>
</html>
CSS
/*** Fonts ***/
#font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mavenpro/v20/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
color: white;
}
body {
background-color: black;
}
header, footer {
background-color: #2d3436 !important;
}
h1, h2, h3, a, p {
font-family: "Maven Pro";
color: #dfe6e9;
}
a, a:active, a:hover, a:visited {
text-decoration: none;
color: #dfe6e9;
}
.container {
height: 85%;
width: 100%;
}
/** Div Backgrounds **/
#logo-bar {
background-color: white;
width: 100%;
height: 10%;
display: block;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.maps {
background-color: #7f8c8d;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.sound {
background-color: #2980b9;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.proj {
background-color: #2c3e50;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.maps, .sound, .proj {
text-align:center;
}
/*** Footer***/
footer {
background-color: white/**#2c3e50**/;
font-family: "Maven Pro";
text-align: center;
font-size: 14px;
font: #95a5a6;
text-transform: uppercase;
position: absolute;
bottom: 0px;
width: 100%;
height: 5%;
vertical-align: middle;
}
Hi you missing a property for your children container tag.
Add vertical-align: top for each element with a display`
Let the classes maps, sound and proj the direct childs of the contanier div as follow
<div class="container">
<a href="#" class="maps">
<div>
<h1>Level Design</h1>
<p>Check out some maps!</p>
<p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html" class="sound">
<div>
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
and float them to left
.maps, .sound, .proj{
float: left;
}
and insted of repeating the same code for the three classes
use this code
.maps, .sound, .proj {
text-align:center;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
float: left;
}
.maps {
background-color: #7f8c8d;
}
.sound {
background-color: #2980b9;
}
.proj {
background-color: #2c3e50;
}
Screenshot of my page. I want to know how I can position the text 'Github' under 'John Doe'.
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
}
My HTML File:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
</div>
<div class="conatiner2">
<h3> Github </h3>
</div>
</body>
</html>
I describe my problem more in detail. The name John Doe is centred. And I want the text 'Github' directly under it. But how can I achieve that? When I try to do it, 'Github' is centred but on the end of the page. Can someone help me please? Btw I never used CSS before.
Is this something you wanted? I have put the the Github under Text 'John Doe'.
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
margin: 0;
line-height: 48px;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
margin: 0;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<h3> Github </h3>
</div>
</body>
</html>
Or something like this?
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container2 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
</div>
<div class="container2">
<h3> Github </h3>
</div>
</body>
</html>
Use the same container class for Github as you did for John Doe (classes are not unique and can be shared among multiple elements)
<div class="container">
<h3> Github </h3>
</div>
Also remove height: 100%; from your CSS file under .container in order to get the text to appear closer together. Both will be centered on the page based on your current setup.
A couple of changes...
1) Move the 'Github' text into the same container as 'John Doe' so that they are formatted together.
2) Remove all of this:
display: flex;
position: sticky;
align-items: center;
justify-content: center;
flex-direction: column;
3) Replace it with...
text-align center: // (centers the text)
margin: 0 auto; // (centers the content to the middle of the screen)
body {
background-color: #000000;
height: 700px;
}
h1 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 50px;
color: #ffffff;
}
h3 {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
br {
font-family: 'Arvo', serif;
font-style: normal;
font-size: 12px;
color: #ff384b;
}
.container {
height: 100%;
width: 100%;
text-align: center;
margin: 0 auto;
}
My HTML File:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"> </link>
<title> John Doe </title>
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<h3>Github</h3>
</div>
</body>
</html>
I am currently new to the community, and would love some help with a HTML site I am creating for a friend of mine.
Basicly I man creating a simple website, but I have some issues with the text not going above the footer. I check the code and tried to figure out how to solve this, but I was unable to do so.
My question is: could someone help me putting the text above the footer?
Please let me know !
body {
margin: 0 auto;
min-height: 100%;
background-color: #111;
}
h1 {
color: #fff;
position: relative;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {
height: auto;
width: 100%;
}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
top:0px;
background-color: #111;
}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
width: 100%;
height: 100%;
color:#f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
position: relative;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
background-color: #111;
bottom: 20;
}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {text-decoration: none; color: #fff;}
a:hover{text-decoration: underline;}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<title>Froluv</title>
<meta name="Froluv." content="PSD to HTML5+CSS3 conversion.">
<meta name="Froluv" content="PSD, HTML5, CSS3">
<meta name="author" content="Vivaco">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="StyleCSS.css">
</head>
<body>
<div class="container">
<!-------------------------------------------------------------------------HEADER------------------------------------------------------------------------->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo"> <!--insert logo here-->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END HEADER----------------------------------------------------------------------->
<!-------------------------------------------------------------------------CONTENT----------------------------------------------------------------------->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1 style="font-family:'Champagne & Limousines';font-weight:normal;font-size:42px">“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END CONTENT-------------------------------------------------------------------->
<!-----------------------------------------------------------------------FOOTER------------------------------------------------------------------------->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!---------------------------------------------------------------------END FOOTER----------------------------------------------------------------------->
</div>
</body></html>
I would avoid using absolute positioning until you have a better understanding of when and where to use it and what problems it helps to solve.
By undoing the absolute positioning you have applied, the content will be in the correct order. Though, may likely need further refinement to fit your needs.
In my example below, I have used flexbox to push the footer to the bottom of the page. You'll also notice I've removed a lot of properties that are not necessary, i.e. width: 100% for a <div> (it does this by default).
body {
margin: 0;
min-height: 100vh;
background-color: #111;
display: flex;
flex-direction: column;
}
h1 {
color: #fff;
position: relative;
font-family: 'Champagne & Limousines';
font-weight: normal;
font-size: 42px;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
color: #f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
flex-grow: 1;
background-color: #111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<!-- HEADER -->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo">
<!-- insert logo here -->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1>“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- FOOTER -->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!-- END FOOTER -->
As advised minutes ago, just remove the position:absolute from .contentcontainer and it should work: https://jsfiddle.net/ilkovs/yqdg62fe/3/
.contentcontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
instead of :
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
Separate your header and footer. 1. div for header, 2. another div for content 3. footer. in your footer css, add margin-bottom:0; and margin-top: 200px; That is a quick fix, but after separating the three, you can play around the CSS to fit your design need
You should understand how to use position:absolute, if you use absolute you are taking the <Div> out of the flow of the page, so I think you should use relative positioning instead of absolute.
Then again, if you are going to use absolute, you need to specify one of these four(4) properties which are:
top, bottom, left, right, these four properties help you to move the <div> around the page anyhow you like and can help you shift your text up.
Last thing all the different types of positions all use the same four properties I mentioned
I have a H1 that is placed inside a .container div with a width of 800px. I tried giving the H1 a width also and that didn't fix it either. I can't think of any reason why this H1 wouldn't take the full width (taking it out of the .container div makes it work). Any idea what's causing this?
Thanks in advance.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="header-block">
<h2>Cristian M.</h2>
<h3>Product Designer</h3>
<p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>
<div id="extra-info">
<p>
Resume <span id="slash">   /   </span>
My Process <span id="slash">   /   </span>
Contact
</p>
<p>I live in London, UK</p>
</div>
</div>
<div id="glofox-block">
<div class="container">
<img src="Images/macbook.png">
<div id="text">
<h1 id="number">01.</h1>
<h1>Reinventing Glofox's interface for a complex user base.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-white.png">
</div>
</div>
</div>
</div>
<div id="webfaction-block">
<div class="container">
<div id="text">
<h1 id="number">02.</h1>
<h1>Helping Webfaction attract a less technical audience.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-black.png">
</div>
</div>
<img id="ipad" src="Images/ipad.jpg">
</div>
</div>
</body>
</html>
CSS:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
#font-face{
font-family:"Tisa W01 Light";
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
#font-face{
font-family:"Tisa W01 Regular";
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}
#font-face{
font-family:"Tisa W01 Medium";
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}
#font-face{
font-family:"Tisa W01 Bold";
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}
/* Global */
body, a {
font-family:"Tisa W01 Light", serif;
color: black;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px solid black;
cursor: pointer;
}
p {
font-size: 19px;
line-height: 1.8;
}
h1{
font-size: 50px;
line-height: 1.2;
margin: 0 0 40px 0;
padding: 0;
}
h2{
font-size: 30px;
margin: 0;
padding: 0;
}
h3{
font-family: "Tisa W01 Medium", serif;
font-size: 26px;
margin: -5px 0 40px 0;
padding: 0;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#view-project{
display: inline !important;
opacity: .5 !important;
border-bottom: 1px solid white;
}
#view-project a{
font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#view-project img{
width: 15px !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
float: none !important;
}
/* Intro Section */
#header-block{
padding: 140px 50px 140px 50px;
}
#extra-info{
margin-top: 40px !important;
font-size: 18px;
opacity: .4;
}
#extra-info p{
margin: 0;
padding: 0;
}
#extra-info a{
font-family: "Tisa W01 Medium", serif;
}
/* Glofox Section */
#glofox-block{
background-color: #2b4ea4;
height: 800px;
}
#glofox-block #number{
opacity: .2;
font-family: "Tisa W01 Regular", serif;
margin-bottom: 20px;
}
#glofox-block img{
z-index: 1;
width: 740px;
float: left;
margin-top: 60px;
}
#glofox-block .container #text{
position: relative;
top: -790px;
z-index: 2;
float: right;
width: 350px;
color: white;
float: right;
}
#glofox-block #view-project a{
color: white;
border: none;
}
/* Webfaction Section */
#webfaction-block #ipad{
z-index: 1;
width: 795px;
position: relative;
top: -100px;
}
#webfaction-block h1{
width: 750px;
}
#webfaction-block #text{
z-index: 2;
}
In order to fix this you need to add the following line to your CSS:
white-space: nowrap;
Please familiarise yourself with CSS whitespace parameters.
https://www.w3schools.com/cssref/pr_text_white-space.asp