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>
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>
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>
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 im making a "Meet The Team" page but the text does not want to fit inside the div. I know im doing something wrong so any help would be appreciated
This is the code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no"
name="viewport"><!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<header><p id="college">Homepage</p></header>
<div><img class="top-logo" src="images/logo.png"></div>
<div class="laura1"><img class="laura" src="images/laura.jpg"><p>Laura - L2 Coordinator graphic designer and dance enthusiast. </p></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
and this is the CSS
.laura1 {
width: 75%;
height: 150px;
background-color: white;
margin-left: 50px;
margin-top: 30px;
}
.laura {
width: 150px;
height: 150px;
margin: auto;
}
#text1 {
font-size: 12.5px;
padding-left: 140px;
color: black;
}
Oh and this is what it turns out like with the code https://gyazo.com/b152d83601a127eeb3d758e85f26fca6
Here is my try... I have used flexbox to align the text. You can change background colours to get the desired results.
.laura1 {
width: 25%;
padding: 15px;
background-color: white;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.laura {
width: 150px;
height: 150px;
}
#text1 {
width: 50%;
text-align: center;
color: black;
margin-left: auto;
margin-bottom: 0;
}
https://codepen.io/anon/pen/qYPmBW
You should use flex-box positioning on parent class.
Fiddle : https://jsfiddle.net/swordys/ngLg7tmL
the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport.
but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?
You could use z-index
Higher z-indices will come infront of lower z-indices.