This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I am following a tutorial from YouTube. There I followed the same procedure. I checked it several times. But the video's authors background color shows up and mine doesn't. I have tried overflow, clear etc but it doesn't work. People with big brains I need help?
here is the css code:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100%;
background: #42455a;
}
And here is the html code:
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
Edit: problem resolved. The solution was to specify the html and body height
like
height:100%;
padding:0;
margin: 0;
}```
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<p> just write something to here your width and height percent not fixed size </p>
</div>
</body>
</html>
if you want to see the container then your CSS should be following:
.container{
width: 100px;
height: 100px;
background: #42455a;
}
100 px is a just example you can enter what you want
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100%;
background: #42455a;min-height:145px;
color:#fff;padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
You need to insert some content or add some CSS like min-height to empty div to show background color
</div>
</body>
</html>
Related
I don't understand why this is happening
I am a beginner and hardly know anything so please do make it simple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.main{
background color: yellow;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
Actually, this is background-color: yellow; no background color: yellow;
You missed the - between background and color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style media="screen">
.main{
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">this is test</div>
</body>
</html>
Two issues
Your background color definition is wrong. You should use background-color instead of background color.
In order for the div to get displayd inside the dom, you should have some content inside the div or you should define the dimension (width and height) of the div.
.main-1 {
background-color: yellow;
}
.main-2 {
background-color: yellow;
height: 25px;
width: 25px
}
<div class="main-1">
You need to have some contents inside the div,
or you should have defined the dimension of the div
just as below
</div>
<div class="main-2"></div>
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 cant get css and html code to work together using padding,margin, floats. I'm stuck. If put float left it stays in the middle. Basically it won't size properly. I hope this explains it... I'm frustrated
I have tried my books, google, w3schools. I just seem to be missing something. I'm in a coding boot camp and I don't have time in class to ask everything I need to.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Easier Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div id="header">
<h6>header</h6>
</div>
</div>
</body>
</html>
MyCSS:
.container {
padding: 250px;
margin-bottom: 500px;
margin-right: 250px;
margin-left: 250px;
margin-top: 20px;
background-color: gray;
}
#header{
width: 600px;
padding-right: 10px;
float: right;
background-color: white;
First, you have to give a particular width to the container div,then float prorperty will work.
Float property works correctly only when the parent has been given a sepecific width.
I'm going to try to explain this the best that I can. This picture represents the layout I'm trying to achieve.
I'm trying to have a navbar on the side. I'm using bootstrap so this is about a col-md-3 for row layout. I'm able to get it into my document, but what I am having a hard time with is layering this nav bar on top of the body tag.
I have a body tag that has an image set to the background with no-repeat and background-size 100% and all of that. But it always covers the nav bar. How can I get the navbar (as well as other elements) to layer on top of it. I was hoping that I could do this with z-index, but after half an hour of playing around with this, I think maybe I don't understand z-index nearly as much as I thought it did.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
<div class = "col-md-3">
<div class = "brand">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Heres my CSS:
body {
background-image:url(img/carousel-lifestyle.jpg);
background-size: 100%;
position: fixed;
background-repeat: no-repeat;
position: fixed;
z-index: -1;
}
.col-md-3 {
background-color: white;
position: absolute;
z-index: 1;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
background-size: 100%;
background-repeat:no-repeat;
width: 75px;
height: 200px;
padding:20px 100px 20px 10px;
margin-left: 25px;
}
Thanks in advance!
So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/