So I took use of the 'Sticky Footer' code which automatically places the footer below all of the content, my problem is that my content height is set to 1300 pixels, meaning if you have a screen with a height more than 1300 pixels the footer will not appear at the bottom of the screen but rather below the content.
Here's my code:
#import 'https://fonts.googleapis.com/css?family=PT+Mono';
body {
font-family: 'PT Mono', monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
#content {
height: 1300px;
width: 100%;
}
html, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
width: 100%;
}
#wrapper {
position: relative;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
text-align: right;
margin-right: 10px;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
</div>
<div id="footer">
© Hecc
</div>
</body>
</html>
I apologize if my wording makes this problem difficult to visualize.
Any help is greatly appreciated!
Your question is a little ambiguous - I think you are asking "how do I fix my footer to the bottom of the screen (window), not below the content?".
You can use position fixed for that.
article {
height: 1300px;
}
footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background: lightpink;
padding: 0 1rem;
}
<body>
<article>
<p>This is the page content</p>
</article>
<footer>
<p>I am a fixed footer</p>
</footer>
</body>
Related
I am making a website and I have chosen to use smooth scroll.
The smooth scrolling effect works, but if (for example) i chose to scroll down to the 'timeline' section, and then scroll back to 'home', it just stops scrolling midway through the home section. Why is this? Below you can see my webiste.
For example I have set this div as section1 (home):
<div id='section1' class="home-info">
Therefore, i thought that smoothscroll would take me to the top of that div. Turns out it only scrolls through half of it. Why is that???
*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
color: #AEC6CF;
underline: black;
}
.header{
height: 100px;
background: #f1f1f1;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.logo{
line-height: 100px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
}
.menu{
float: right;
line-height: 100px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
.menu a{
color: #000000;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
a:link, i {
color: black;
}
i:hover {
color: #AEC6CF;
transition: 0.4s;
cursor: pointer;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
#media screen and (max-width:800px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
.header {
height: 103.5px;
}
.header-info h2 {
font-size: 20px;
margin-top: 350px;
}
.header-info h1 {
font-size: 30px;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: black;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1.2px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.header-container {
width: 100%;
position: relative;
background-color: inherit;
padding: 10px 40px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #AEC6CF;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: #f1f1f1;
position: relative;
border-radius: 6px;
transition: 0.4s;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Full-width containers */
.header-container {
width: 100%;
padding-left: 25px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<title>lunAr-creator</title>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<h1>lunAr-creator</h1>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Timeline
Projects
Useful Links
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div style="margin-top:120px">
<div id='section1' class="home-info">
<h2 style='text-align:center;margin-top:350px;font-size:28px;'>Hi there. I'm lunAr-creator!</h2>
<h1 style='text-align:center;padding-top:20px;font-size:40px;love {color:#AEC6CF}'>& I love programming</h1>
<h3 style='text-align:center;padding-top:30px;padding-bottom:480px;'>Projects<i class="fas fa-chevron-down" style='margin-left:20px;'></i></h3>
</div>
<div class='header-container'>
<div id="section3" class="content">
<h2>About<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-address-card"></i></h2>
<p>This is where i will talk about who I am and what i do :D</p>
</div>
</div>
<div class='header-container'>
<div class="content">
<h2>Timeline<i style='margin-left:20px;color:#AEC6CF;cursor:default;padding-bottom:0px;' class="fas fa-child"></i></h2>
<p>The stages I have been through so far with programming.</p>
</div>
</div>
<br></br>
<div class="timeline">
<div class="container right">
<div class="content">
<h2>2016 - 17</h2>
<p>I joined a Scratch coding camp where I learnt some of the foundations of programming.</p>
<br></br>
<p>My Dad built on the knowledge I had already aquired from the course and used C# to teach us some new concepts.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2018-19</h2>
<p>My school introduced me to HTML and CSS where i made my first website - a Minecraft handbook. I started learning Python aswell after it being recommended to me.</p>
<p>Watched a couple of Youtube tutorials on Python, started applying them to small programs and building up my skills.</p>
<br></br>
<p>Made my first (text-based) game called '9-lives'. Used the book: 'Python in easy steps' to help me understand the logic behind it.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2020</h2>
<p>Had lots of spare time on my hands due to Covid. Made some projects such as pong, a simple email client using smtplib, tkinter for the UI and made my second website.</p>
<br></br>
<p>Developed and hosted (and is still hosting) a website for a youth group. I used HTML, CSS and a little Javascript to accomplish this.</p>
<a style='color: #AEC6CF' href="https://a-town-youth.netlify.app">Click here to visit the youth group website</a>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2021</h2>
<p>Created a text-based adventure rpg game for beginners to contribute to (including me). In my opinion it improved my team-working/collaboration skills and helped me learn some new concepts looking at other people code.</p>
<br></br>
<p>Joined GitHub :D </p>
<a style='color: #AEC6CF' href="https://github.com/lunAr-creator">Click here to visit my GitHub</a>
<br></br>
<p>Made my first library (pw-gen) for generating strong randomised passwords.</p>
</div>
</div>
</div>
<br></br>
<div id='section4' class='header-container'>
<div class="content">
<h2>Projects<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-code-branch"></i></h2>
<p>All of my projects are up on my GitHub profile so be sure to check them out</p>
</div>
</div>
<div id='section5' class='header-container'>
<div class="content">
<h2>Useful Links<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-link"></i></h2>
<p>Links to websites and resources that I find helpful whilst I am programming</p>
</div>
</div>
<div id='section6' class='header-container'>
<div class="content">
<h2>Contact<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-pen"></i></h2>
<p>Contact me here for information or collaboration requests</p>
</div>
</div>
<div class='footer'>
<i class="fab fa-github" style='font-size:30px;margin-right:20px;'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
</div>
</body>
</html>
I have an image that I am trying to scale as the screen size reduces. On desktop it work fine for resolution 1336 x 625 but as soon as the screen reduces to 500 X 625 the image does not scale properly and edges are cut down. I tried putting max-width and the position. Still it doesn't work. What I need to change to make it work.
Css code
* {
margin: 0;
padding: 0;
}
body {
font-family: "Montserrat",sans-serif;
background-color: #CCC;
}
.card-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
.card {
width: 650px;
height: 400px;
background-color: #fff;
transform-style: preserve-3d;
position: relative;
border-radius: 15px;
transition: transform 1s;
}
.card-wrapper:hover .card {
transform: rotateY(180deg);
box-shadow: 1 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card-front{
width: 100%;
height: 100%;
border-radius: 15px;
backface-visibility: hidden;
background: linear-gradient(white,white);
}
.up {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
}
.up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.up span {
text-transform: uppercase;
color: #0d5692;
}
.down {
position: absolute;
width: 70%;
height: 30%;
color: black;
top: 170px;
left: 5px;
}
.down-content {
display: flex;
align-items: center;
margin: 10px 0;
}
.person {
font-family: "Yu Gothic",UI-Semibold;
font-size: 12px;
color: rgb(102, 0, 51);
padding-left: 20px;
}
.designation {
font-family: "Yu Gothic",UI-Semibold;
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.address {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.phone {
font-family: "Arial Nova Light";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
background: linear-gradient(white,white);
}
.back-up {
width: 40%;
height: 40%;
}
.back-up img {
position: absolute;
width: 60%;
height: 60%;
top: 5px;
right: 5px;
}
.back-down {
position: absolute;
width: 100%;
height: 60%;
color: black;
top: 140px;
left: 5px;
}
.back-designation {
font-family: "Meiryo";
font-size: 10px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-person {
font-family: "Meiryo UI";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-address {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
.back-phone {
font-family: "Meiryo";
font-size: 15px;
color: rgb(77, 0, 102);
padding-left: 20px;
}
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
/>
<link rel="stylesheet" href="style-Origional.css" />
<title>Business Card</title>
</head>
<body>
<div class="card-wrapper">
<div class="card">
<div class="card-front">
<div class="up">
<img src="images/logo.png" />
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="down">
<div class="person down-content">
<div>
<h2> Jarich Vansteenberge </h2>
</div>
</div>
<div class="designation down-content">
<div>
<h2> Manager </h2>
<h2> Technology & Innovation </h2>
<h2> Information & Digital Solutions </h2>
</div>
</div>
<div class="address down-content">
<div>
<p> Astrazeneca K.K. </p>
<p> Grand Front Osaka Tower B 3-1,</p>
<p> Ofuka-chu, Kita-ku, Osaka 530-0011, Japan </p>
</div>
</div>
<div class="phone down-content">
<div>
<p> Mobile +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
<div class="card-back" >
<div class="back-up">
<img src="images/logo.png" width="150"/>
<!-- <h4><span>AWS Architect</span></h4> -->
</div>
<div class="back-down">
<div class="back-designation down-content">
<div>
<h2> インフォメーション＆デジタルソリューションズ本部 </h2>
<h2> テクノロジーとイノベーション </h2>
<h2> マネージャー </h2>
</div>
</div>
<div class="back-person down-content">
<div>
<h2> バンステーンベルグ ジャリコ </h2>
</div>
</div>
<div class="back-address down-content">
<div>
<p> アストラゼネカ </p>
<p> グランフロント大阪タワーB 3-1,</p>
<p> 大阪市北区大深法律事務所530-0011 </p>
</div>
</div>
<div class="back-phone down-content">
<div>
<p> 携帯電話番号 +81-80-6222-4967 </p>
<p> E-mail jarich.vansteenberge#astrazeneca.com </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.responsive {
width:100%;
height:auto;
}
you can add these class to the image and it will work fine
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<div class="video" src="video3344.mov" autoplay loop muted type="video/mp4"></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.mt-50 {
margin-top: 50px;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
}
.top-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
}
.top-wrapper {
padding: 65px 0 0px 0;
text-align: center;
position: relative;
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<video autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of
<strong>FLOW</strong>
</p>
</div>
</div>
Hi I'm creating a header with a full page image, naviagetion ect. Overlaying the image I have text which welcomes the user to the site, shows the address, shows the opening times during the weekdays and the weekend, and also displays the phone number of the business.
However I can't get the content to center on the image, it's stuck on the left hand side. Any idea why this may be the case? I'm trying to center #openingContent, and #addressHours
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
h2,
h3,
h4,
h5 {
margin-top: 0;
}
h3 {
display: inline-block;
}
.main-header {}
/* ---- Navigation ---- */
.main-nav {
position: absolute;
top: 1em;
right: 15.9em;
z-index: 1;
}
.main-nav li {
font-size: 17.5px;
display: inline-block;
list-style-type: none;
}
.main-nav li,
.name,
{
font-family: 'Montserrat', sans-serif;
}
.main-nav a {
font-size: .95em;
color: #fff;
text-transform: uppercase;
}
.main-nav a:hover {
color: #FFAB0F;
}
.name a,
.main-nav a {
padding: 10px 15px;
text-align: center;
display: block;
text-decoration: none;
}
.name {
font-size: .95em;
color: #fff;
display: inline-block;
position: absolute;
top: 1.34em;
left: 6em;
z-index: 1;
line-height: 18px;
}
.name a {
color: #fff;
margin-top: -25px;
}
.contactButton {
top: 1.24em;
right: 6em;
z-index: 1;
position: absolute;
border-radius: 100%;
background-color: #004C4C;
color: #fff;
border: none;
padding: 5px 10px;
}
.contactButton:hover {
background-color: #fff;
color: #000;
}
/*Image Header*/
#openingContent {
font-family: 'EB Garamond', serif;
color: #fff;
position: absolute;
z-index: 1;
top: 5em;
text-align: center;
}
.headline {
font-size: 55px
}
.headline2 {
margin-top: 6%;
font-size: 85px;
}
#addressHours {
color: #fff;
position: absolute;
z-index: 1;
top: 15.5em;
line-height: 1.8;
font-style: italic;
text-align: center;
}
.mainImage {
filter: brightness(50%);
}
.fullPageImage {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
}
<header class="main-header">
<h1 class="name">Title</h1>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Enquiries</li>
<li>Reviews</li>
<li>Location</li>
</ul>
</nav>
<input type="button" class="contactButton" value="Bookings">
<div id="mix">
<div id="openingContent">
<h1 class="headline">Welcome to</h1>
<h2 class="headline2">Our restaurant</h1>
</div>
<div id="addressHours">
<span class="address">This is our address.........</span><br>
<span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
<span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
<span class="phone"><span class="call">(Call)</span>: +1 610-312-9123</span>
</div>
</div>
<img src="http://lorempixel.com/200/200" class="fullPageImage mainImage"/>
</header>
<div class="about">
<h2 class="customertitle">What our customers love about us!</h2>
<section class="section">
<h3 class="section-title">Great Coffee</h3>
<p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
<section class="section">
<h3 class="section-title">Free Wifi!</h3>
<p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
<section class="section">
<h3 class="section-title">Loyalty Cards</h3>
<p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
</div>
Add left: 50%; and ´transform: translateX(-50%); to the absolutely positioned #openingContent to move it into the horizontal center of its container:
(BTW: Don't use a closing tag on img elements!)
* {
box-sizing: border-box;
}
html,body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
h2, h3, h4, h5 {
margin-top: 0;
}
h3 {
display: inline-block;
}
.main-header{
}
/* ---- Navigation ---- */
.main-nav {
position: absolute;
top: 1em;
right: 15.9em;
z-index: 1;
}
.main-nav li{
font-size: 17.5px;
display: inline-block;
list-style-type: none;
}
.main-nav li,
.name,
{
font-family: 'Montserrat', sans-serif;
}
.main-nav a {
font-size: .95em;
color: #fff;
text-transform: uppercase;
}
.main-nav a:hover {
color: #FFAB0F;
}
.name a,
.main-nav a {
padding: 10px 15px;
text-align: center;
display: block;
text-decoration: none;
}
.name {
font-size: .95em;
color: #fff;
display: inline-block;
position: absolute;
top: 1.34em;
left: 6em;
z-index: 1;
line-height: 18px;
}
.name a {
color: #fff;
margin-top: -25px;
}
.contactButton {
top: 1.24em;
right: 6em;
z-index: 1;
position: absolute;
border-radius: 100%;
background-color: #004C4C;
color: #fff;
border: none;
padding: 5px 10px;
}
.contactButton:hover {
background-color: #fff;
color: #000;
}
/*Image Header*/
#openingContent {
font-family: 'EB Garamond', serif;
color: #fff;
position: absolute;
z-index: 1;
top: 5em;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.headline {
font-size: 55px
}
.headline2 {
margin-top: 6%;
font-size: 85px;
}
#addressHours {
color: #fff;
position: absolute;
z-index: 1;
top: 15.5em;
line-height: 1.8;
font-style: italic;
text-align: center;
}
.mainImage {
filter: brightness(50%);
}
.fullPageImage {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Wake Cup Coffee House | Dublin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Varela+Round|EB+Garamond|Roboto|Neuton|Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="Analytics/analytics.js"></script>
</head>
<body>
<header class="main-header">
<h1 class="name">Title</h1>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Enquiries</li>
<li>Reviews</li>
<li>Location</li>
</ul>
</nav>
<input type="button" class="contactButton" value="Bookings">
<div id="mix">
<div id="openingContent">
<h1 class="headline">Welcome to</h1>
<h2 class="headline2">Our restaurant</h1>
</div>
<div id="addressHours">
<span class="address">This is our address.........</span><br>
<span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
<span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
<span class="phone"><span class="call">(Call)</span>: +1 610-312-9123</span>
</div>
</div>
<img src="http://placehold.it/600x600/fca" class="fullPageImage mainImage">
</header>
<div class="about">
<h2 class="customertitle">What our customers love about us!</h2>
<section class="section">
<h3 class="section-title">Great Coffee</h3>
<p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
<img src="images/coffee.png" class="image">
</section>
<section class="section">
<h3 class="section-title">Free Wifi!</h3>
<p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
<img src="images/wifi.png" class="image">
</section>
<section class="section">
<h3 class="section-title">Loyalty Cards</h3>
<p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
<img src="images/savings.png" class="image">
</section>
</div>
</body>
</html>
If I'm getting your question right then, you should not use <img> for background image. Instead use CSS body { background-image: url("your_image.jpeg"); }
Then align text to center might be by using CSS property text-align: center
Maybe change it like this?
<div class="parent">
<div class="child">
(copy your content here)
</div>
</div>
so that the parent container has a background image, and the child has all the content. And the child is really centered in the parent
.parent {
position: relative;
background-image: url("img/image.png");
background-color: #cccccc;
}
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See https://css-tricks.com/centering-css-complete-guide/
specifically this https://codepen.io/chriscoyier/pen/lgFiq
I am making a fluid layout for a website. All elements on the home page of the website look correct when I view it on Safari or Chrome but when I try to view it on FireFox, the logo and the container for the logo become very big and it takes up more space than what I have set for it.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/stylesheetHome.css" />
<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div id="logoBlock" class= "grid_4">
<img width=100px src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
<div id="navigation" class="grid_8 omega">
<ul id="navList">
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../index.html" id="homeNav">Home</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle" >
<a class= "round-button" href="../html/gamesPageTemporary.html" id="gamesNav">Games</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
</div></div>
</li>
</ul>
</div>
<div id="section1" class="grid_10">
<div id="sizzle" class="grid_8">
<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&version=3&rel=0""></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&version=3&rel=0"" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
<!--<iframe width="620" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>-->
</div>
</div>
<div id="section2" class="grid_5">
<div id="portrait" class="grid_3">
<img width=300px src="../img/IshiharaPlate3.svg" />
</div>
</div>
<div id="section3" class="grid_5 omega">
<h2>About me</h2>
<p>Video games as a medium is the most amazing creative outlet for me and I am working hard to do it for a living. Scripting is my specialty, but I enjoy working on every part of a game(VFX are especially fun). I have a wide variety of experience from working at Oak Ridge National Lab on a game environment for GIST analysts to use to making a mobile game about catching birds while falling through the sky. I love all types of games and I am always trying to improve upon what I have learned so that I can make new and exciting games.</p>
</div>
<div id="contact" class="grid_4">
<p><span>Michael Agreda © 2014</span></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../jquery.fitvids.js"></script>
<script>
// Target your .container, .wrapper, .post, etc.
$("#sizzle").fitVids();
</script>
<body id="home">
</body>
</html>
And here is my CSS:
/*global*/
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background: #333;
width: 100%;
}
a {
color: #4fb69f;
text-decoration: none;
}
/*typography*/
h1 {
font-size: 1.750em;
font-weight: 100;
letter-spacing: -1.5px;
}
h2 {
font-weight: 100;
font-size: 1.500em;
font-size: 2.5vw;
color: #b4c34f;
}
h3 {
font-weight: 100;
font-size: 1.125em;
color: #ed6c85;
}
#logoBlock{
position: relative;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
top: 0;
background-color: #420600;
width: 100%;
height: 5%;
}
/*#logoBlock h1 {
color: #FFF;
text-align: center;
top: 20px;
}*/
#logoBlock img {
width: 100%;
height: 10%;
left: 70%;
}
#navigation{
position: relative;
width: 80%;
height: 15%;
left: 10%;
background-color: #008080;
}
#navigation ul{
list-style-type:none;
margin: 0 auto;
width: 100%;
height: 25%;
margin-left: 12%;
}
#navigation li {
display:inline;
float: left;
padding: 1%;
width: 15%;
}
.round-button {
width:85%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #ff8080;
overflow:hidden;
background: #c83737;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#F5F5DC;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
/*
.home {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg2 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.games {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg3 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.resume {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg4 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.contact {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
*/
#section1 {
position: relative;
height: 40%;
width: 100%;
}
#section 1 h1 {
height: 2%;
width: 2%;
left: 5%;
color: #FFF
}
#sizzle {
position: relative;
left: 17%;
top:-10%;
}
#section2 {
position: relative;
top: 45%;
height: 20%;
width: 30%;
}
#portrait {
position: relative;
height: 30%;
width:30%;
left: 10%;
}
#section3 {
top: 40%;
}
#contact {
height: 10%;
width: 100%;
background-color: "blue";
}
body#home .round-button a#homeNav,
body#games .round-button a#gamesNav,
body#resume .round-button a#resumeNav,
body#contact .round-button a#contactNav {
background: #30588e;
}
How do I get the layout to show properly in Firefox?
Try to put double quotes around the 100px in the img tag and remove the px:
<div id="logoBlock" class= "grid_4">
<img width="100" src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
EDIT: Thanks #RichardB
The width of your block and image are both set to 100%, and so are filling the full width of the browser window.
Your inline style says you want the logo to be 100px.
If that is the case then change
#logoBlock img {
width: 100%;
to
#logoBlock img {
width: 100px;
If it is supposed to be a more responsive in its size, then you may want to look at max-width, which allows it to expand only up to a specified point.
As to why it was working in Chrome - my guess is that they are choosing the inline style over the css one (Rems code fix should also be applied).