This is only happening in Chrome, not Firefox or IE -
I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:
When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:
This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.
I've tried using a flexbox footer instead of the vh method but that didn't help.
My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
<title>Good Boy Dog Care</title>
</head>
<body>
<div class="index-content">
<div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
</div>
<div class="footer">
</div>
</body>
</html>
And CSS:
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: rgba(240, 100, 60, 1);
width: 100%;
cursor: default;
}
#we-love-dogs-one {
width: 34%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-one-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-one-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-two {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
font-family: "Montserrat";
}
#we-love-dogs-two-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-two-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 24.5px);
font-size: 2em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-three {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-three-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-three-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
Any help would be appreciated. Thanks!
cliffgallagher# , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</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%;
}
As a homework for school I'm creating a website but a div
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
} is getting out the window, because of this the h1.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}put inside it makes the h1 and a
form
.map {
display: block;
margin: 0 auto;
} put inside the div aswell, not centered on all resolutions.
Why doesn't the div is a little bit larger instead of taking the excat width of the window even if i wrote 100vw?
Here's the full HTML/CSS code
.immag {
max-width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
}
.map {
display: block;
margin: 0 auto;
}
.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
}
.border {
background-color: #ebebeb;
margin: 0 auto;
width: 300px;
border-style: ridge;
border-color: #00c4ff;
border-width: 1vw;
width: 20vw;
height: auto;
}
#font-face {
font-family: musei;
src: url(font-titolo-musei.otf);
}
html {
overflow-y: scroll;
}
.over {
overflow-y: hidden;
width: 200vw;
}
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >
<title>1CE</title>
</head>
<body>
<img src="Senza%20titolo-1.jpg" class="immag">
<div class="container">
<div class="border">
<h1 class="titolo">MUSEI</h1>
</div><br>
<iframe class="map" src="https://mapsengine.google.com/map/embed?mid=zi8GElmpTlNo.kJ3GnRl1X08c" width="640" height="480"></iframe>
</div>
</body>
</html>
Using 100vw will always make the site take up the entire viewport, however a scrollbar is also part of the viewport and will make what is displayed smaller than the actual viewport. using width:100% will solve your problem with the scrollbar being in the way.
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
I am currently working on a HTML5 and CSS project and am having a problem getting the containers to display properly.
What I want to have is a header bar at the top, a wrapper that contains 2 other divs and then a footer at the bottom which is always at the bottom of the window or at the bottom of the content whichever is further down.
Here's a snippet:
html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
background-color: purple;
height: 100%;
width: 100%;
margin-top: 0px;
}
header
{
position: absolute;
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer
{
background-color: blue;
width: 75%;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 80px;
}
#articleContent
{
width: 70%;
background-color: yellow;
float: left;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
float: right;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
float: right;
height: auto;
}
<html>
<head>
<title>index</title>
<link href="ArticleStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="articleContainer">
Article Container
<div id="articleContent">
The quick brown fox jumped over the lazy dogs back. All good men must come to the aid of the party
</div>
<div id="articleSidebar">
Article Sidebar
</div>
</div>
</div>
</body>
</html>
At the moment the articleContainer is only the height of however many lines there are. What I want to have is the formContainer to fill the rest of the screen, I've tried adding the height: 100%; attribute but then this feels the form container over the screen size. I.e. a vertical scrollbar appears which is about the same height as the header. How can I get the formContainer to fill the available screen space without the scroll bar. However, if the content is larger than the form container should expand to fill the extra space.
Thanks for any help you can provide.
If you really want a css3 solution the one you're looking for is setting height: calc(100% - 80px); on #articleContainer as demonstrated in this fiddle, however this will not work in all browsers.
Example using old flexbox model css:
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-box;
-webkit-box-orient: vertical;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-box;
-webkit-box-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
same thing, but this time using new flexbox model
css
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-flex;
-webkit-flex-direction: column;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-flex;
-webkit-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
version with only the paragraph in yellow
I've used this method before, the tricky part is getting the header and footer in the right location. Once you have that the rest should fall into place:
jsfiddle:
http://jsfiddle.net/Ug5JR/
css:
html, body { margin: 0; padding: 0; height: 100%; }
header {
position: relative;
display: block;
background: red;
height: 100px;
z-index: 1;
}
article {
display: block;
background: yellow;
min-height: 100%;
margin-top: -100px;
margin-bottom: -100px;
}
article section {
display: block;
padding-top: 100px;
padding-bottom: 100px;
overflow: hidden;
}
footer{
display: block;
background: blue;
height: 100px;
}
p:hover {
height: 4000px;
}
markup:
<header></header>
<article>
<section>
<p>Hover me and I'll push the content larger than the page</p>
</section>
</article>
<footer></footer>
The trick is to get the negative margins to absorb the space used by the header and footer, this causes the 100% calculation to correct itself. You can then use any internal element to counter the negative margins with padding or margin on top and bottom. So whilst your article element is pretty much 100% height of the page, your article > section element will appear the right height and lay it's children out correctly.