I'm trying to add an image to my "welcome" ID but the image wont display.
Here is my CSS and HTML:
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
}
.header {
width: 100%;
height: 35px;
background-color: rgba(0, 0, 0, 0.3);
}
#welcome {
background-image: url(../images/Welcome.jpg);
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" type="text/css" href="simplegrid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<div class="grid grid-pad">
<div class="col-1-3">
<h1>Logo</h1>
</div>
<div class="col-2-3">
About
What we do
Who we are
Our Work
Contact Us
</div>
</div>
</div>
<section id="welcome">
</section>
</body>
</html>
I've tried both single and double quotes inside the url box. I have also added the image to the body using tags and it displayed that way, but for some reason it wont display through the style sheet. I have also tried embedded and inline css, neither has worked.
Any help would be appreciated.
The section will just take a 0px width and height since it doesnt have any content. Either add come content, which will then force it to expand to its height, or gives fixed heights, like below. That should ideally work.
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
}
.header {
width: 100%;
height: 35px;
background-color: rgba(0, 0, 0, 0.3);
}
#welcome {
background-image: url(data:image/jpeg;base64,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);
width: 400px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" type="text/css" href="simplegrid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<div class="grid grid-pad">
<div class="col-1-3">
<h1>Logo</h1>
</div>
<div class="col-2-3">
About
What we do
Who we are
Our Work
Contact Us
</div>
</div>
</div>
<section id="welcome">
</section>
</body>
</html>
The reason it won't display is because you applied height: 100% to #welcome, however, the browser doesn't actually know what that size is because percentage values are relative to the immediate parent. In this case the immediate parent is the body tag which you've also set to height: 100%, but yet again the browser can't calculate that either. This time it's because you have not defined the height of the body tag's parent, which is the html tag. So because the html tag's height is undefined and it is the parent of the body tag, the browser has no reference value to calculate 100% height from. So both the body tag and #welcome's heights are 0.
You can set your CSS like so.
html {
min-height: 100%; // this will reference the viewport but could become bigger than viewport depending on your content
}
body {
height: 100%;
}
#welcome {
height: 100%;
}
Another option would be to set #welcome to be 100% of the viewport like so:
#welcome {
height: 100vh;
}
Hope this helps.
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I went to a beginner course on youtube, but Css is not working correctly when is given. I created a div class conatainer and added the following css:
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
And The Html Code is:
<!DOCTYPE html>
<html>
<head>
<title>DeveOfE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">
</div>
</div>
</body>
</html>
Height/Width percent values are taken from its parent.
Which means you will have to specify 100% height/width to body and html element (since body is a child of html and it takes its height/width from html)
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
<!DOCTYPE html>
<html>
<head>
<title>DeveOfE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">
</div>
</div>
</body>
</html>
I am trying to set a background image for a header. This is what I want it to look like:
This is what I am getting:
So, a tiny weird strip at the bottom end. Here is my code:
html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>FOLK</li>
<li>JAZZ</li>
<li>SIGNATURE</li>
<li>NYLON</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="container">
<div id="logo">
<img id="rays" src="Images/PNGs/rayons.png">
<img id="base" src="Images/PNGs/baseLogo.png">
<img id="roue" src="Images/PNGs/roue.png">
<img id="letters" src="Images/PNGs/title.png">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
I have tried adding a size property to the background, like so:
background-size: 100% 100px;
And that's how I am getting the tiny strip at the bottom. Without that property I get nothing at all. Also, the header is not as long as the page although I have set the width at 100vw. Thanks of your time.
I made some changes to your header:
#header {
/*position: absolute;*/
background-image: url("Images/menu.jpg");
/*width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;*/
background-size:cover;/*added this*/
padding: 5px;/*added this*/
}
JSfiddle: https://jsfiddle.net/sg7dfpzj/
Hope that helps, cheerio!
Remove height for #header Class
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
/*height: 10vh;*//*Remove this*/
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
Add a padding top and bottom for the header until you have all the image showing, the problem with empty spaces, you dont tell the browser how to show the image,
add some more content or add a padding top and bottom.
Where is your code for the class="cf" and id="menu" for the line <nav class="cf" id="menu"> in the body section of the HTML code?
There might be an error there. Check it out.
I'm actually learning how to code with bootstrap and something pretty weird is happening to me.
I want to build a basic template with a title row and a middle row.
the middle row has to be grey on the background and white in the center (where the content is).
the middle row has a flex-grow so that the background colors are everywhere, no just depending of the content size.
But when this content is big, it overflows the row, and I can't figure out why.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Potatoe Home</title>
<link rel="stylesheet" href="path/to/file/file.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body class = "container-fluid">
<div class = "row titleRow">
<div class = "col-sm-3">
</div>
<div class = "col-sm-6">
<div id="titleArea">
<h1 id="title">Potatoe</h1>
<p>blablabla</p>
</div>
</div>
<div class = "col-sm-3">
</div>
</div>
<div class = "row scndRow">
<div class = "col-sm-3">
</div>
<div class = "col-sm-6 middleColumn">
<div id="testBlock">
</div>
</div>
<div class = "col-sm-3">
</div>
</body>
</html>
my css:
h1[id=title]
{
font-size: 200%;
}
.titleRow
{
background-color: red;
color: white;
font-size: 200%;
}
.scndRow
{
flex-grow: 1;
display: flex;
background-color: #D0D0D0;
}
.middleColumn
{
background-color: white;
}
#testBlock
{
width: 20%;
height: 900px;
background-color: blue;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
my display
thanks for your help
Okay problem solved:
I replaced the height: 100% by a min-height: 100% (for html and body)
when i set a height: 100%, chrome consider that i want it to be 100% of the viewport. when my testBlock is bigger, it should make the row bigger and so the body. so the body's height would be bigger than 100%. so it can't, and the testBlock overflow.
Thanks for your help :)
What about removing the flex properties to class scndRow ?
and set height:100% to element that have to be?
You have to specify it to scndRow which is wrapping the two other colunm classes AND to these columns.
.scndRow{
height:100%;
}
.scndRow .col-sm-3
{
/*flex-grow: 1;*/
/*display: flex;*/
min-height:100%;
background-color: #D0D0D0;
}
.middleColumn
{
min-height:100%;
background-color: white;
}
Just for the example, I added a jQuery function to make you see the effect of more content in the testBlock.
See it in updated Fiddle
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!