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>
Related
I am new to SVG apologies! I am having an issue with an SVG where I have it set to max-width: 60% but it seems to take precedence over the overall height of the elements.
I want it so the overall height of the row is 50vh. But even if I set it and remove the max-width from the SVG it still is taking precedence over the set vh. If anyone has any suggestions on the best way to approach this?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="safetyFreelancer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
body {
background: #f3f4f5;
}
.wave-container {
position: relative;
background: #ce1212;
color: #FFF;
text-align: center;
overflow: hidden;
}
.wave-container > svg {
display: block;
background: #ce1212;
}
.vh {
height: 50vh !important;
}
</style>
</head>
<body>
<div class="wave-container">
<div class="row vh">
<div class="col-md-6">
<h1 class="text-center">Welcome</h1>
</div>
<div class="col-md-6">
SVG
</div>
</div>
SVG
</div>
</body>
</html>
I did not enter the SVGs as it maxes out the character count
If I undestood correclty you want to set width for your svg. If yes, then you can just set through this new rule:
.col-md-6.test > svg {
width: 50%;
}
The jsfiddle example can be seen here.
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>
I have an HTML page where I have a div called container, I'm trying to use bootstrap here. Inside the container, I have a div called row. When I try to apply a background color to the div the color is applied only to the div content and spans only the width and not the height. I'm trying to apply the background to the hellow world to cover the whole page.
Here is the code.
.container {
padding: 10px;
}
.row {
background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/homePage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
</html>
Try this:
1st: The html element has a default margin that you have to deal with every time you write a page.
2nd:You may not want use jsfiddle to test code when using bootstrap css (or any other library for that sake). As the JSFiddle code is run before the bootstrap code.
3rd: Try this:
body,html{
margin:0;
width:100%;
}
html{
background-color: gray;
}
.container {
padding: 1em;
max-width:750px;
min-height:100vh;
width:90%;
margin: auto;
box-sizing:border-box;
background-color:aquamarine;
}
.row {
margin:0;
padding-left:20px;
}
<html>
<body>
<div class="container">
<div class="row"> Hello World! </div>
<div class="row"> Hello , I am World! </div>
</div>
</body>
</html>
Just apply it to the body.
body{
background-color: red;
}
Maybe this is what you need.
.container {
margin-left:-20px;
padding-left:30px;
margin-right:-20px;
background-color: darkgray;
}
.row {
background-color: darkgray;
}
body{
background-color: red;
}
<div class="container">
<div class="row"> Hello World! </div>
</div>
You can make the container to cover from top to bottom and set the gaps that you need left and right:
.container {
position: absolute;
top: 0px;
left: 10px; /* Gap left */
right: 10px; /* Gap right */
bottom: 0px;
background-color: black;
}
May this one you need:
html,body {
padding: 0;
margin: 0;
background-color: red;
}
.row {
background-color: darkgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row"> Hello World! </div>
</div>
</body>
Seems nice to me:
html {
background-color: darkgray
}
.row {
background-color: darkgray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/homePage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">Hello World! Here goes some content</div>
</div>
</body>
</html>
I have an index.html markup as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
To apply styles, I use main.css whose content is as follows:
#pagecontent {
border: none;
height: 100%;
width: 100%;
}
The width of the iframe is assigned correctly. That is, when I resize the browser window, the width of the iframe is adjusted accordingly. However, the height is always the same. It is about 300px and does not expand to the height of the browser window. I tried this in FF 45 and IE 11.
Question: What is the reason for the height not being adjusted in the same way as the width when applied to the iframe?
You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.
So you have to give height in px here
#pagecontent {
border: none;
height: 400px;
width: 100%;
}
working example : https://jsfiddle.net/uxq4pzc1/
#pagecontent {
border: none;
height: 100vh;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
iframes by default are inline so try line-height instead or use display: block Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly.
Whenever I use an iframe, I wrap it in a block level element and set position: relative. Then I place position: absolute top:0; bottom:0; right: 0; left: 0; on the iframe. Whenever you want control over the iframe, use it's parent instead.
See this post for details
#pagecontent {
border: none;
height: 100%;
width: 100%;
display: block;
}
.box {
height: 20em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<div class="box">
<iframe id="pagecontent" src="http://example.com"></iframe>
</div>
<footer>...</footer>
</body>
</html>
I'm setting up a very simple fixed-liquid layout. The header is set to 100%, the sidebar is set at a fixed width and floated to the left, and the width of the content area is not defined (so that it fills the remaining space).
It works well in every browser except IE, where approximately 3 pixels of white space is added between the sidebar and the content area.
I can't reproduce the problem in JSFiddle (even when I copy and paste my exact code), so I've attached images instead. The first image was rendered in Chrome and the second was rendered in IE9.
CSS (styles.css)
body {
margin: 0px;
}
#header {
width: 100%;
height: 150px;
background: #F00;
}
#sidebar {
float: left;
width: 280px;
height: 1000px;
background: #0F0;
}
#content {
height: 1000px;
background: #00F;
}
HTML
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
Have you tried adding a doctype declaration?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>