So I want to achieve the following which i drew:
and the green div is the outer div and inside the div, there is a div which i plan to use for a map. Now the problem I'm facing now is how to I place the div at the bottom of the outer div? I want it to be somehow locked in that position so when I resize the browser, it would stay at its current position and the map div won't move around.
I tried using "margin-top: 59vh" but when i adjust the height of my browser it overflows and becomes weird:
Would appreciate some help on this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
}
#map_div {
border: 1px solid blue;
height: 300px;
margin-top: 59vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
Remove margin-top: 59vh from #map_div and add display: flex, flex-direction: column, and justify-content: flex-end to #outer
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#map_div {
border: 1px solid blue;
height: 300px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
Related
I want to insert divs as event entries in a "div_outside". The event entry should take 100% of the width if there is no other entry next to it. If there is another entry next to it, they should both be the same size next to each other.
My current code looks like this, but doesnt work:
test.css:
.column_div{
position: relative;
width: 200px;
height: 800px;
margin-top: 20px;
margin-left: 20px;
border: solid black;
}
.new_event1{
position: relative;
width: 100%;
height: 30px;
float: left;
background-color: red;
}
.new_event2{
position: relative;
width: 100%;
height: 30px;
float: left;
background-color: green;
}
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="column_div" id="column_div"></div>
<script src="test.js" defer></script>
</body>
</html>
test.js:
column_div = document.getElementById("column_div")
new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");
column_div.appendChild(new_event1)
new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");
column_div.appendChild(new_event2)
How i can do that with html and css?
If I understand you correctly, the display: flex CSS attribute is what you're looking for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.div_outside {
border: 2px solid black;
display: flex;
}
.div_outside > div {
border: 2px solid red;
display: flex;
justify-content: center;
align-items: center;
background: blue;
height: 300px;
width: 100%;
}
</style>
</head>
<body>
<div class="div_outside">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</body>
</html>
you didn't actually explain clearly what exactly you want but I think what you mean is that you want divs to be in a row with equal space. and if there is only one div, it should take 100% width. is that it? check the code and let me know if this is what you want or not.
for that, you need to make the parent display: flex: with flex-direction: row: and you don't need to use float.
column_div = document.getElementById("column_div")
new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");
column_div.appendChild(new_event1)
new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");
column_div.appendChild(new_event2)
// new_event3 = document.createElement("div")
// new_event3.classList.add("new_event3");
// column_div.appendChild(new_event3)
.column_div{
position: relative;
width: 200px;
height: 800px;
margin-top: 20px;
margin-left: 20px;
border: solid black;
display: flex;
flex-direction: row;
}
.new_event1{
position: relative;
width: 100%;
height: 30px;
background-color: red;
}
.new_event2{
position: relative;
width: 100%;
height: 30px;
background-color: green;
}
/*
.new_event3{
position: relative;
width: 100%;
height: 30px;
background-color: yellow;
} */
<body>
<div class="column_div" id="column_div"></div>
</body>
This is my HTML with styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I wanted a circle that was slightly cut on both left & right sides(mobile) and up & down (for desktop) so i thought this was the best way but what I observe is that the page also ends up with extra width on mobile and extra height on desktop, I don't want this to happen.
Is there any way deal with this so the circles remain cut and removing the scrolling?
Use heigth: 100% and width: 100% and overflow: hidden on your html tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
So I'm having a hard time making an image with a psuedo element
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
And Here's the CSS:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('./Path\ 14#2x.png');
position: absolute;
display: inline-block;
background-size: 30% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
Here's how the code looks when you see it:
I want the image to take 100% of the width instead of repeating like that maybe the image is too small but I can't find a bigger image
Here's the image
THANK YOU IN ADVANCE
Try this, I added background-repeat: no-repeat; and then change the background size to background-size: 100% 100%;
See working example here:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('https://i.imgur.com/TEKMxzx.png');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
background-size: 100% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
I have the following in my HTML page:
and its a div containing a label "Name" and a textarea below it with a height of 30vh.
I'm having issues where I want to keep the height of the textarea from resizing itself whenever i adjust the height of the browser. Right now it is resizing when i resize the browser window height wise:
I've read up about "min-height" so I set the min-height to 30vh as well hoping that it would prevent the textarea from resizing height wise but its not working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#output2 {
height: 90vh;
width: 25%;
border: 1px solid black;
}
#name_field {
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
#name_box {
height: 30vh;
min-height: 30vh; /*defined min-height here*/
width: 95%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "output2">
<div id = "name_field">
Name
<textarea id = "name_box" disabled></textarea>
</div>
</div>
</body>
</html>
Would appreciate some help on this.
Instead of setting value of min-height property in "relative unit"(in this case vh),set the value of min-height property in "absolute unit" such as px ,mm etc.
In this way ,you can solve this problem .Hope you understand!
Here is a correction(just focus #name_box selector in css):
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#output2 {
height: 90vh;
width: 25%;
border: 1px solid black;
}
#name_field {
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
#name_box {
height: 30vh;
min-height: 50px; /*Line to focus*/
width: 95%;
}
textarea {
resize: none;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "output2">
<div id = "name_field">
Name
<textarea id = "name_box" disabled></textarea>
</div>
</div>
</body>
</html>
So I'm trying to get the following layout which consists of three elements, an outer shell (div), a text box and a circle element:
But the problem I'm having is that I want the outer shell div width to scale based on the width of the textbox, meaning if the width of the textbox is smaller, then it would scale down as well.
Right now, i have the following in HTML:
Two issues is that, the circle i defined in CSS is not showing up which i wanted to get like the above, second is that the outer shell is not following the width of the textbox.
html, body {
height: 100%;
}
.main {
border: 1px solid black;
height: 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.outer_shell {
border: 1px solid black;
border-radius: 40px;
}
.circle {
width: 20%;
height: 20%;
background: blue;
}
#text_in {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main">
<div class = "outer_shell">
<div class = "circle"></div>
<input type = "text" id = "text_in">
</div>
</div>
</body>
</html>
First of all, love your drawing.
You should use
width: fit-content
for your outer_shell
I did some experimentation with the provided code and I found that the HTML appeared okay. The error was found in the CSS file. The following code snippet should work:
html, body {
height: 100%;
}
.main {
border: 1px solid black;
height: 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.outer_shell {
border: 1px solid black;
border-radius: 40px;
display: inline-flex;
width: fit-content;
}
.circle {
width: 20px;
background: blue;
border-radius: 50%;
padding: 1px;
}
#text_in {
width: 200px;
height: 100%;
margin-left: 5px;
margin-right: 10px;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main">
<div class = "outer_shell">
<div class = "circle"></div>
<input type = "text" id = "text_in">
</div>
</div>
</body>
</html>