I have 3 columns in css aligned beside each other. I don't understand why when I zoom into the browser the UI becomes responsive? For example when I zoom in the browser, <p>helooooo<p/> will enlarge only in respect to the column. On zooming in notice how the columns remain at their specified width? why does that happen? shouldn't the columns also expand in respect to the text?
body, html{
width:100%;
height:100%;
margin: 0px;
padding:0px;
}
.col1{
min-width:30%;
height:100%;
background-color: gray;
float:left;
}
.col2{
min-width:40%;
height:100%;
background-color: blue;
float:left;
}
.col3{
min-width:30%;
height:100%;
background-color: red;
float:left
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="col1">
<p>heloooooooooooooo</p>
</div>
<div class="col2">
<p>heloooooooooooooo</p>
</div>
<div class="col3">
<p>heloooooooooooooo</p>
</div>
</body>
</html>
Your example doesn't show any change when zooming in or out. But anyway, when the browser zooms, it's essentially changing the width of the viewport.. so if you have media queries, they will come into play.
This because you have set the column lengths to a specific value.
min-width:40%;
height:100%;
So whether you zoom or not, it will be of the same percentage. meaning it wont be zoomed.
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 have two fixed-width divs, first one 'main box' and the other 'other box'
I want them center-screen
and,
when browser-width permits, next to one another.
I achieve the latter by making them float:left but then since they're "out of the flow" I can't make them center screen (by margin: auto on outer div)?
Is it possible some other way?
Please see demo:
http://jsbin.com/jitus/1
When you set .a and .b to inline-block elements, you can set their parent to text-align center. Then this is your requirement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc{text-align:center;}
.a, .b{display:inline-block; width:300px; *display:inline; *zoom:1;}
.a{background:blue;}
.b{background:red;}
</style>
</head>
<body>
<div class="tc">
<div class="a">aaa</div>
<div class="b">bbb</div>
</div>
</body>
</html>
If I understood the question right HERE you can find a fiddle
#cont{
margin: 0 auto;
max-width:600px;
}
#a{
width:300px;
height: 300px;
background:red;
float:left;
}
#b{
width:300px;
height: 300px;
background:lime;
float:left;
}
HTML:
<div id="cont">
<div id="a"></div>
<div id="b"></div>
</div>
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)