I've hit a wall here...
I have a title that I want to align centrally on the page. I've done this by using #landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;.
The title is wrapped in a div that is, in turn, sitting inside a full-screen div.
I then wanted to increase the title div's top margin to bring the title down. Simple, yes?
Except when I add in margin: 50px into the style for the div containing the title, the full-screen div moves down with it.
Even more annoyingly, when I try to do exactly the same thing with divs further down the page, everything works fine.
Why is this happening? See code and screen shots for context.
body {
margin: 0;
padding: 0;
}
#landingArea {
width: 100vw;
height: 100vh;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
}#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Becky's Pet Services</title>
<link rel="stylesheet" type="text/css" href="bps2CSS.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet">
</head>
<body>
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
</body>
</html>
P.S. The garish colours are only there for visibility of the divs. :D
You have to force parent elements to contain their children (or their childrens' margins) in some cases:
#landingArea {
...
overflow: hidden; /* or auto */
}
html,
body {
margin: 0;
padding: 0;
}
#landingArea {
height: 100vh;
overflow: hidden;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
margin-top: 50px;
}
#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
Related
I have been trying to get the header image to be shorter, however, I cannot figure out how to. Here is the HTML:
<div class="header">
<img src="images/header_sea(3).jpg" width="99%" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
Here is the CSS:
html, body {
height: 100%;
width: 99%;
text-align: center;
}
.title{
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header{
position: relative;
}
.header_image{
opacity: 0.55;
height: 40%;
width: 99%;
}
.header_title{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
I tried adjusting the height percentage in .header_image, but the image doesn't get shorter when I change the value.
The header needs a size associated with it. Otherwise the image has nothing to be "40%" of since the header is just using auto sizing.
Relevant code
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
Another good practice is to use semantic elements when possible, so consider using <header> instead of a div with a class of header.
html,
body {
height: 100%;
width: 99%;
text-align: center;
}
.title {
font-family: 'Poppins', sans-serif;
font-size: 45px;
font-weight: bold;
color: #FB79E1;
text-align: center;
text-shadow: 3px 3px white;
}
.header {
position: relative;
/* Give the header (containing element) a size, can be %, px, etc.
Also keep in mind to use a percentage as a size the body needs a percentage size as well */
height: 20%;
}
.header_image {
opacity: 0.55;
height: 100%;
width: 99%;
}
.header_title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 99%;
display: flex;
justify-content: center;
align-items: center;
}
<header class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</header>
try removing the width attribute from the image (inline) and change the width in .header_image
I did it for you below
<div class="header">
<img src="https://98e50e5e-ef9b-4f10-9bb4-65acdcdf4429.id.repl.co/images/header_sea(3).jpg"
class="header_image"
alt="sea_sky"
/>
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>
.header_image{
opacity: 0.55;
height: 40%;
width: 70%;
}
I'm no programmer. And I have a feeling it's such an easy fix, but I can't seem to figure out how to do it.
I want to do this (nothing better than a mockup):
I have all sort of problems:
I can't figure out how to get all my elements vertically align
I want my logo in the middle of my navigation, and I want all of that centered to the page
My two links (français and get a quote) I want them to stick to their respective side, with a 8.33% margin.
I want that div to occupy a space, but I want it to be on top of my hero image
Here's my HTML (I'm only doing a Under Construction page for now, but eventually I'll have my navigation as shown in the mockup): mockup: top page
#charset "UTF-8";
/* CSS Document */
/* Simplify width and height calculations */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/*general*/
body,
html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #FF4612;
}
body {
color: #262524;
font-family: "azo-sans-web", sans-serif;
font-size: 100%;
font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
article,
section,
aside,
main {
padding: 0;
margin: 0;
}
a {
color: #F04A24;
}
p .white {
color: white;
}
h1 {
text-align: center;
font-size: 2.25em;
}
h6 {
font-size: 0.875em;
color: white;
text-align: center;
}
p {
font-size: 1.125em;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -6.625em;
width: 100%;
}
.wrapper header {
padding: 1em 0;
vertical-align: middle;
width: 100%;
position: relative;
}
.wrapper header .french {
margin-left: 8.33333%;
color: white;
display: inline-block;
float: left;
}
.wrapper header .quote {
margin-right: 8.33333%;
display: inline-block;
float: right;
}
.logo {
margin: 0 auto;
width: 6.25em;
display: inline-block;
}
.hero {
height: 75vh;
position: relative;
}
.hero-text {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
margin-right: 50%;
padding: 0 8.33%;
width: 100%;
}
.hero.center {
overflow: hidden;
width: 100%;
}
.hero-image {
width: auto;
height: 100%;
position: absolute;
top: 50%;
transform: translate(0, -50%);
min-width: 100%;
min-height: 100%;
}
.hero.center .hero-text {
color: white;
text-align: center;
}
.footer {
padding: 1em;
background-color: #060E9F;
}
.footer,
.push {
height: 6.625em;
width: 100%;
}
.social {
width: 1.5em;
margin-top: 0;
margin-right: 0.25em;
margin-left: 0.25em;
margin-bottom: 1em;
height: auto;
}
body footer div {
text-align: center;
}
#media (min-width: 834px) {
.hero-image {
width: 100%;
height: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MARIE-PIER LD | Freelance Graphic Designer Ottawa</title>
<meta name="description" content="Description goes here">
<link href="../css/responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.typekit.net/fpr3kdi.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
</head>
<body>
<div class="wrapper">
<div class="verticallyAlign">
<header>
<p class="french">français</p>
<img src="../images/logoMariePierLD.svg" class="logo">
<p class="quote"> say hello </p>
</header>
</div>
<main>
<div class="hero center">
<!-- image goes here -->
<img src="../images/heroUnderConstruction.jpg" alt="" class="hero-image" />
<div class="hero-text">
<h1>dammit. we’re under renovation.</h1>
<p>and you know how it is... always longer than expected.<br> in the meantime, check out my portfolio.<br>
<br> see you soon pal!</p>
</div>
</div>
</main>
<div class="push"></div>
</div>
<footer class="footer">
<div>
<img src="../images/facebook.svg" alt="Marie-Pier LD Design | Facebook Page" class="social">
<img src="../images/instagram.svg" alt="Marie-Pier LD | Instagram" class="social">
<img src="../images/behance.svg" alt="Marie-Pier Drolet | Online Portfolio" class="social">
<img src="../images/linkedIn.svg" alt="Marie-Pier Drolet | LinkedIn" class="social">
</div>
<h6>© 2017 Marie-Pier LD Design. All Rights Reserved</h6>
</footer>
</body>
</html>
I think the most straightforward way is to use a CSS table. Vertical align middle the whole thing, and give all the cells explicit widths in % that matches your design.
Hope this helps getting you started!
.verticallyAlign {
display: table;
width: 100%;
}
.verticallyAlign > div {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 12%;
}
.verticallyAlign > :first-child,
.verticallyAlign > :last-child {
width: 20%
}
<div class="wrapper">
<div class="verticallyAlign">
<div class="french">français</div>
<div>about me</div>
<div>services</div>
<div>
<img src="http://placehold.it/100x100" class="logo">
</div>
<div>goodies</div>
<div>say hello</div>
<div class="quote"> get a quote</div>
</div>
</div>
I want to add text on top of two images and then place them side by side. I tried do this in the following way:
#main {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#front-header {
font-family: "Linux Biolinum";
font-size: 42pt;
line-height: 0pt;
font-weight: bold;
text-align: center;
}
#PI {
font-family: "Linux Libertine";
font-size: 22pt;
line-height: 0pt;
font-weight: normal;
font-style: normal;
text-align: center;
color: red;
}
#copyright {
font-family: "Latin Modern Mono";
font-size: 10pt;
line-height: 0pt;
font-weight: normal;
text-align: center;
}
#meerkat {
width: 18cm;
height: 14cm;
}
#salt {
width: 17.5cm;
height: 14cm;
}
#figu {
display: inline-block;
float: left;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#container {
height: 17.5cm;
width: 14cm;
float: left;
position: relative;
}
#images {
position: relative;
float: left;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 50px;
top: 50px;
}
.image {
position: relative;
float: left;
/* optional */
}
.image .text {
position: absolute;
top: 10px;
/* in conjunction with left property, decides the text position */
left: 10px;
width: 300px;
/* optional, though better have one */
}
<body style=" height: 723.09px;">
<p id="front-header">Learning HTML</p>
<p id="PI">Author:TH</p>
<p>
<br>
</p>
<p>
<br>
</p>
<div>
<img title="MeerKAT" alt="MeerKAT" id="meerkat" src="meerkat.jpg" border="0">
<div style="background-image:url('SALT-1.jpg');background-repeat:no-repeat;height:20cm;width:20cm;">
<h1 style="color:white;">Hello World!.</h1>
</div>
</div>
<br>
<div>
<p id="copyright">Created Today</p>
</div>
</body>
I want to add text on top of the figures named "meerkat.jpg" & "salt-1.jpg". After that I want to place them side by side.
Please suggest. Thanks.
There are several solutions to achieve this and this is my take. I make use of the display: flex; property that is being explained at MDN. Examining the code in your question, I expect that you don't have that much experience in CSS, so I got rid of all the code and made a clean example.
When you set an image as background-image, you can just add an <hX> element inside of it to add the text on top of the image.
Another solution I provided is in the second row and makes use of position: relative; and position: absolute; together with an inline image. Setting the container to relative and the text that's inside of it to absolute will only affect the text inside the div.
You could also use float, but this can cause problems to your layout.
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.image-wrapper {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
flex: 1;
width: 50%;
height: 300px;
border: 2px solid red;
/* Only to show that there are two images */
}
.image-wrapper h1 {
color: #fff;
margin: 0;
}
.container-position {
margin-top: 100px;
}
.image-wrapper-position {
position: relative;
flex: 1;
width: 50%;
}
.image-wrapper-position h1 {
position: absolute;
left: 20px;
top: 20px;
color: #fff;
margin: 0;
padding: 0;
}
<div class="container">
<div class="image-wrapper">
<h1>This is text</h1>
</div>
<div class="image-wrapper">
<h1>This is text on top of image</h1>
</div>
</div>
<div class="container container-position">
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
</div>
Use the following code as a guide for your website. Alter the width and height in <img> to suit you.
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
float: left;
width: 500;
height: 500;
margin: 50px;
border: 1px solid 0;
}
</style>
</head>
<body>
<h2>Text appearing above images</h2>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
</body>
</html>
It appears as if there is padding between two of my elements - content1 and footer. I do not want this 'padding' but I cannot understand why it is there at all. Here is part of problematic html text on its own - the 'padding' still appears. I've tried adding in padding: 0 and margin: 0 to both the elements with no result.
<style type="text/css">
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
</style>
<body>
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
</body>
In response to the proposed answer to this question. I have removed the image from the text and unfortunately the 'padding' was not removed.
It seems that your paragraph tag has a margin.
Apply this css rule:
.footer p {
margin: 0;
}
Here is a fiddle
You have encountered collapsing margins.
When elements have top or bottom margin, and the parent element doesn't have a border or padding, the margins collapes. The effect is that the margin is visible outside the parent element, not between the parent element boundaries and the child element.
It's the margin of the p element in the footer that is collapsing. It creates the distance between the content1 and the footer element.
By removing the margin on the p element, you get rid of the distance:
.footer p {
margin: 0;
}
Demo:
.footer p {
margin: 0;
}
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
if you want, you can always CSS your way through it, something like
* { margin:0; padding:0; }
It should reset All elements, after that you define new paddings and margins, which is much easier ;)
Your using a <center> tag if your using HTML5 it's not supported... if your not using HTML5 the <center> tag is a block element, add display: inline-block in the css.
I'm having a problem, whenever I give a div a height of 100% I want it to stay within the window, instead of overflowing. Here is my code:
CSS
body {
margin: 0px;
background: blue;
}
h1 {
font-family: Xirod;
}
#header {
box-shadow: 0px 12px 36px black;
right: 0;
top: 0;
position: fixed;
background: lightgray;
width: 100%;
height: 100px;
}
#whitespace {
background: white;
width: 100%;
height: 100px;
}
#header h1 {
text-align: center;
color: black;
}
#header a {
color: black;
}
#nav {
height: 30px;
width: 100%;
right: 0;
bottom: 0;
background-color: rgba(192,192,192,0.7);
position: fixed;
}
.Cnt {
width: 100%;
background: gray;
height: 29%;
margin-bottom: 30px;
}
.dis {
width: 50%;
height: 28.9%;
background: white;
margin-right: auto;
margin-left: auto;
}
bg2, bg3 {
display: none;
}
#font-face {
font-family: 'Xirod';
font-style: normal;
font-weight: 400;
src: local('Xirod'), url("http://jq.libjs.tk/fonts/xirod.ttf") format('truetype');
}
HTML
<body>
<div id="wrapper">
<div id="Header">
<h1>Visit the other sites # Main, Music, Tutorials</h1>
</div>
<div id="whitespace">
</div>
<!--Content 1-->
<div class="bg1 bg">
<div class="dis1 dis">
<br />
<p> Hi</p>
</div>
</div>
<!--Content 2-->
<div class="bg2 bg">
<div class="dis2 dis">
</div>
</div>
<!--Content 3-->
<div class="bg3 bg">
<div class="dis3 dis">
</div>
</div>
<div id="Nav">
</div>
<div id="whitespace" style="height: 30px;"></div>
</div>
</body>
</html>
and my jQuery, I don't know why this would matter
jQuery
var doc = document;
var win = window;
var docTop = $(window).scrollTop;
$(doc).ready(function(){
});
Now, the website http://games.xero-accounts.tk/ (notice the scrollbar)
ALL I want is for the window to not overflow. But I also want it to work on all monitor sizes.
whenever you deal with heights in percentage, make sure your body and html element have a set height.
Here you have a height missing from the body tag.
Add this to your css
html{
height:100%;
}
body {
margin: 0px;
background: blue;
height:100%;
}
and in you dis class, make amendment as below to capture height only equal to that of content which will prevent overflow!
.dis {
width: 50%;
height:auto; /* added */
max-height: 100%; /* added */
background: white;
margin-right: auto;
margin-left: auto;
}
EDIT
auto is missing from height mate, add this in class dis and it works
.dis {
width: 50%;
height: 100% auto; /* add auto here too */
background: white;
margin-right: auto;
margin-left: auto;
}