Text in a div wont fit - 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

Related

How to arrange divs side by side automatically?

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>

Header not responsive, causing overlap on buttons

I am very new at web development and am trying to figure out an issue I am having with my header. I want my header to be responsive and not cause an over-lap on the button elements next to it.
I have tried applying the position, float, and transform elements separately and all at once to the header sections and this does not seem to solve the issue or I just do not know how to properly use them.
Below is a sample of both my html and css.
HTML:
<header>
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
CSS Classes:
#smallLogo{
width: 110px;
height: 110px;
float: left;
}
.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}
header{
background-color: black;
font-family: Courier;
justify-content: center;
}
.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}
.lineHeader, .lineFooter{
margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{
Any solution for this would be greatly appreciated. Thanks
Basically, if you want to make a fully responsive page/navbar, you may need to use the "Burger Menu". Looks like you have used Bootstrap. You can see this link
Still, I'm trying to provide a measurable solution. Check the code and style as you want. I just have used a flex div at the html portion.
header{
width: 100%;
}
#smallLogo{
width: 110px;
height: 110px;
/* float: left; */
}
.bizPage{
font-size: 80px;
color: white;
/* position: relative; */
top: 30%;
/* left: 30%; */
}
header{
background-color: black;
font-family: Courier;
}
.homeButtons{
/* position: absolute; */
/* top: 32px; */
/* right: 26px; */
margin-top: 1%;
font-size: 8px;
}
.lineHeader, .lineFooter{
/* margin-left: auto;
margin-right: auto; */
color: white;
height: 3px;
width: auto;
{
<!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>Stack Overflow</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<div class="d-flex justify-content-between">
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
<!-- <script type="text/javascript" src="index.js"></script> -->
</body>
</html>
Let me know if it works for you.

How to create segments in container div

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>

Creating a layout which follows text box width

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>

Putting three buttons side by side wont a large button on top

I am having trouble putting my simple image button webpage into action. I cannot align three buttons in the remaining space at the bottom of my webpage.
.fullwidth {
width: 100%;
height: 80%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: center;
}
.tierwidth {
width: 33.333333333333%;
height: 20%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: center;
}
html,
body {
height: 100%;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20%;
}
.btnContainer {
float: left;
}
<!DOCTYPE HTML>
<HTML>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Excl Home</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- FONTS BELOW -->
<!-- FONTS STOP -->
</head>
<body>
<div class="footer">
<div class="btnContainer">
</div>
<div class="btnContainer">
</div>
<div class="btnContainer">
</div>
</div>
<br class="clearFloat">
</head>
</html>
If all you're doing is making a page with four buttons, you don't really need bootstrap. Since .fullwidth and .tierwidth share a lot of the same CSS properties, I moved those properties into the single rule. The differences get their own rule (i.e. width and height). If you make them float to the left, they will fill up as much space as possible before moving onto the next line. I added some color to make it easy to see what's what.
If you want the .tierwidth buttons to be in a fixed container the HTML will look a little different.
.fullwidth,
.tierwidth {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: center;
float:left;
}
.fullwidth {
width: 100%;
height: 80%;
background-color: red;
}
.tierwidth {
width: 33.333333333333%;
height: 20%;
background-color: blue;
}
html,
body {
height: 100%;
margin: 0;
}
If you're looking to do something like this as part of a larger website and are using bootstrap elsewhere, you should probably look into the grid system, because the less custom CSS you use for layout the easier it will be to style and modify later.