I made a simple page using html and ccs only, it contains two colored div blocks which isn't rendered on a page: there should be yellow and green div's appear on a page, but instead blank page.
I checked for an errors - browser shows no errors.
HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
CSS:
.field {
background-color:yellow;
}
.key {
background-color: green;
}
They both in the same folder, name of files containing html and css are index.html and styles.css.
Add some padding or content
.field {
background-color:yellow;
padding:20px;
}
.key {
background-color: green;
padding:20px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field">test</div>
<div class="key" id="a key">test</div>
</body>
</html>
the divs are empty so their computed height is 0.
Use a min-height or add a character like a
Because they're empty.
<div class="field">text</div>
<div class="key" id="a key">text</div>
put something in them and youll see them
The divs are empty, ie they have no children and have no height assigned. If you add content to the divs, such as images or text or give them some sort of height property, you will see them.
You don`t have any dimensions.
Add them like this:
.field {
background-color:yellow;
height: 50px;
}
.key {
background-color: green;
height: 50px;
}
Div is a block element and when you use it it expect some content from you.
You can make the divs visible in following ways:
div{
min-height:27px;
}
.heights-a{
background-color:green;
}
.heights-b{
background-color:yellow;
}
.space-div{
background-color:orange;
}
.content-div{
background-color:white;
position:relative;
text-align:center;
}
.chakar{
border-radius:50%;
border:1px solid blue;
width:25px;
height:24px;
position:absolute;
left:44%;
top:0%
}
<!-- Using Space-->
<div class="space-div"> </div>
<!-- Using Content-->
<div class="content-div">
<div class="chakar">
</div>
</div>
<!-- Using Height-->
<div class="heights-a"></div>
<div class="content-div"> INDIA!!!</div>
Related
I am learning the basics of web development.
I would like to make the position of a div depend on the dimensions of the browser window. I would also like this div to scale.
The easiest way to demonstrate this would be with images (it's all about the 'radio panel'):
Intended appearance
Scaled down the browser window
The code I have written so far:
'panel' is the object I want to manipulate.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="panel">
</div>
</div>
</body>
</html>
CSS:
#main{
background-image: url('tlo.jpg');
background-size:cover;
background-position:center;
width:100%;
height:100%
}
#panel{
background-image: url('radio.png');
position:relative;
width: 49.7%;
height: 30vh;
/*border: 5px solid red; */
top:35.1%;
left:23.9%;
}
Panel with red border should fit in the green border
I've tried to find solutions on the Internet, but I don't even know quite how I'm supposed to describe it in a specialized way.
You could try this: (put it in head)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if it will not work as you expected it to work, then you can read something about media queries.
Change the height of the #main div to 100vh.
#main{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/1200px-Zinnia_elegans_with_Bombus_01.JPG?20070924151254');
background-size:cover;
background-position:center;
width:100%;
height:100vh;
}
#panel{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Halictus_bee_on_flower-2.jpg/1200px-Halictus_bee_on_flower-2.jpg?20070515152433');
position:relative;
width: 49.7%;
height: 30vh;
/*border: 5px solid red; */
top:35.1%;
left:23.9%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="panel">
</div>
</div>
</body>
</html>
I am making a website and at one part I made a flexbox row of 3 boxes, and whenever I put anything in any of the boxes their size expands and pushes away everything else. How do I make it not change it's size regardless of what I put in it? Here is the code:
/*---------CENTER----------*/
div.center-grid {
display:flex;
justify-content:center;
}
#grid1 {
background-color:red;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
}
#grid2 {
background-color:green;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
position:static;
max-width:0px;
max-height:0px;
}
#grid3 {
background-color:blue;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
}
#ingrid1 {
display:grid;
}
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center-grid">
<div id="grid1">
grid1
</div>
<div id="grid2">
<div id="ingrid1">
<image src="content/images/q1.png"></image>
<image src="content/images/q2.png"></image>
</div>
</div>
<div id="grid3">
grid3
</div>
</div>
</body>
</html>
Try using max-width in css. Max-width specifies the maximum width of the specified element.
So I am testing w/ absolute vs relative and for most part, I am beginning to understand. I get that part that when you use absolute, and your parent is relative, it will use the coordination related to your parent.
Question is, if I wanted to position that parent to it's parent.
How should it be?
I have this repl which has this implementation.
So basically if I wanted div two to be relative to div one (but div two is already position:relative and it is parent to div three which has absolute).
How can I make relationship here div one as relative and div two as absolute(but it's already relative).
What is the right thing to do?
#one {
width:50px;
height:30px;
background-color:yellow;
margin:20px;
padding:15px;
top:200px;
}
#two {
width: 200px;
height: 100px;
background-color:red;
margin:10px;
padding:10px;
left:500px;
top:100px;
position:relative;
}
#three {
width:15px;
height:20px;
background-color:green;
position:absolute;
left:0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Your problem is not position here. Your problem is usage of left, and top which position div's specifically at a distance from browser's edges. If I change your css to this, your divs are coming out inside one other.
#one {
background-color:yellow;
margin:20px;
padding:15px;
top:200px;
position:relative;
}
#two {
width: 200px;
height: 100px;
background-color:red;
margin:10px;
padding:10px;
position:relative;
}
#three {
width:15px;
height:20px;
background-color:green;
position:absolute;
left:0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I don't think there will be a situation that will require what you are asking for. If there is, I'd like to see an example :).
You can achieve whatever effect you want by placing the second and third div's absolutely to the first one. You know the exact coördinates of the second div. By using those you can calculate what the absolute position of the 3th div should be.
I am making an HTML website's index page now, and I don't know why this CSS isn't working. My CSS code is as follows, and my HTML code after that:
body {
background-image:url("background.png");
font-family:sans-serif;
}
#content {
margin:0 auto;
overflow:auto;
background-color:white;
border-radius:10px;
width:60%;
}
.header {
margin:10px;
}
.body {
margin:10px;
}
.footer {
margin:10px;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<p>This is the header!</p>
</div>
<div id="body">
<p>This is the body!</p>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
So, what ends up happening is that overflow: auto is not setting the side margins, but it is successfully setting the top and bottom margins. Thanks in advance.
By the way, all of the images are also in the directory, and they are working fine.
You're using class selectors in your CSS and id attributes in your HTML.
Either change your CSS to #header, #body, and #footer.
Or, change your HTML to class="header", class="body", and class="footer".
I have noticed that when I have text in my inline-block divs they move down instead of staying in place how can I fix this so that is stays in line with the others with text inside?
Screenshot
HTML
<html>
<head>
<title>My Web site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
</head>
<body>
<div id="container">
<div id="jumbotron">
</div>
<center>
<div class="listbox">
<h1>exapmle</h1>
</div>
<div class="listbox">
</div>
<div class="listbox"></div>
</center>
<!-- container end div -->
</div>
</body>
</html>
CSS
#container{
height:100%;
width:100%;
background-color: #669999;
padding: 5px 5px 5px 5px;
}
.listbox{
height: 250px;
width: 250px;
background-color: #003333;
display:inline-block;
border-radius:5px;
}
#jumbotron{
margin:2px auto 5px auto;
background-color:black;
border-radius:5px;
height:450px;
width:900px;
color:#ffffff;
}
Apply vertical-align:top; to your .listbox CSS class. This issue is due to default vertical-align value (baseline) , so when there is text, it affects baseline for all inline elements and pushes one with text down.
JSFiddle
It's happening, because browser is trying match the baseline of all inline elements.
Add vertical-align: middle to .listbox
Its because of the <h1> tag you are having here:-
<div class="listbox">
<h1>exapmle</h1>
</div>
You haven't specified any rule for it. Try adding this to your CSS:-
h1 { float: left; }