I am having problem displaying my content in proper alignment. I made a timer web app using html and css, but the display structure gets messed up when i zoom in or out in the web page. The outer box and inner button do not zoom in or out together also the buttons go into the next line when zoomed in. I have attached screenshots of how they look.
Web page on 100%
Zoomed in
I used flex boxes to align the components
Here is the code I wrote:
body {
height: 100vh;
font-family: "Poppins", "PT sans", Arial, sans-serif;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 10%;
-webkit-box-shadow: 0px 2px 7px 8px rgba(255, 255, 255, 0.40);
box-shadow: 0px 6px 12px 13px rgba(255, 255, 255, 0.40);
width: 55vh;
height: 70vh;
display: flex;
flex-direction: column;
}
.image {
margin-top: 10%;
}
.block {
display: inline-block;
}
span {
font-size: 50px;
color: white;
}
button {
align-items: center;
margin: 12px;
border-radius: 50px;
font-size: 18px;
height: 90%;
padding: 10px 40px;
z-index: 1;
cursor: pointer;
transition: 0.5s;
position: relative;
}
button:hover {
color: white;
background: none;
}
/*.button::before{
content: "";
position: absolute;
left: 0;
height: 0%;
width: 100%;
background: none;
z-index: -1;
transition: 0.5s;
}*/
<body>
<div class="container">
<div class="image">
<center><img src="timer.png" width="40%" height="20%" alt="" id="timer">
<br>
<span id="countdown"> 60 </span> <span id="plural">s</span>
<br>
<div class="block">
<button id="start" name="start" class="fill" onclick="startTimer()">START</button><br>
<button id="add" name="+5" class="fill" onclick="add()">+5</button><br>
</div>
<div class="block">
<button id="pause" name="pause" class="fill" onclick="pauseTimer()">PAUSE</button> <br>
<button id="remove" name="remove" class="fill" onclick="remove()">-5</button> <br>
</div>
<div class="block2"><button id="end" name="" class="fill" onclick="endTimer()">END</button></div>
</center>
</div>
<!-- <div class="text"></div> -->
<div></div>
</div>
<script src="index.js"></script>
</body>
I just got started so any help would be great. Thanks!
I am guessing a little at what you're going for, but if I understand your correctly, your height and width values on .container were causing you problems. I removed them, and also replaced <center> with a <div> as Paulie commented, it is obsolete:
body {
height: 100vh;
font-family: "Poppins", "PT sans", Arial, sans-serif;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 10%;
-webkit-box-shadow: 0px 2px 7px 8px rgba(255, 255, 255, 0.40);
box-shadow: 0px 6px 12px 13px rgba(255, 255, 255, 0.40);
display: flex;
flex-direction: column;
}
.image {
margin-top: 10%;
}
.block {
display: inline-block;
}
span {
font-size: 50px;
color: white;
}
button {
align-items: center;
margin: 12px;
border-radius: 50px;
font-size: 18px;
height: 90%;
padding: 10px 40px;
z-index: 1;
cursor: pointer;
transition: 0.5s;
position: relative;
}
button:hover {
color: white;
background: none;
}
<body>
<div class="container">
<div class="image">
<div><img src="timer.png" width="40%" height="20%" alt="" id="timer">
<br>
<span id="countdown"> 60 </span> <span id="plural">s</span>
<br>
<div class="block">
<button id="start" name="start" class="fill" onclick="startTimer()">START</button><br>
<button id="add" name="+5" class="fill" onclick="add()">+5</button><br>
</div>
<div class="block">
<button id="pause" name="pause" class="fill" onclick="pauseTimer()">PAUSE</button> <br>
<button id="remove" name="remove" class="fill" onclick="remove()">-5</button> <br>
</div>
<div class="block2"><button id="end" name="" class="fill" onclick="endTimer()">END</button></div>
</div>
</div>
<!-- <div class="text"></div> -->
<div></div>
</div>
<script src="index.js"></script>
</body>
Related
how i want it to look like
how it looks right now
.row2 {
display: flex;
justify-content: space-evenly;
align-items: stretch;
}
.til-col {
flex-basis: 32%;
border: 7px solid #c9c9c9;
border-radius: 30px;
margin: 10px;
position: relative;
overflow: hidden;
padding: 40px;
box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
flex-direction: column;
align-items: center;
}
.til-col img {
width: 50%;
border-radius: 10px;
padding-bottom: 5%;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 12px 34px;
border-radius: 10px;
font-size: 13px;
padding: 0 20px;
background: #012a5d;
position: relative;
cursor: pointer;
}
<div class="row2">
<div class="til-col">
<img src="images/Home/Layer 2-2.svg">
<p>Interact with a TIL timeline showing key moments and events over the years</p>
<a href="classroom.html" class="button">
<h3>TIL Story</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Progress.svg">
<p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
<a href="classroom.html" class="button">
<h3>Projects</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Report_icons-02 1.svg">
<p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
<a href="classroom.html" class="button">
<h3>Classroom Redesign</h3>
</a>
</div>
</div>
I want to make the image of each box aligned with each other, same with the text and the button, like it is presented in the image. Yet everything would follow right after the image, the text ends. I also want to uniform the size of the image, without messing up the proportion, but I don't know how to do so.
Simply adding the below styles to ".til-col" class will achieve the expected result
display: flex;
text-align: center;
Maybe something like this?
P.S. I don't think CSS have something to let you horzionally align several child elements from different blocks.
.row2 {
display: flex;
justify-content: space-evenly;
align-items: stretch;
}
.til-col {
display:flex;
flex-basis: 32%;
border: 7px solid #c9c9c9;
border-radius: 30px;
margin: 10px;
position: relative;
overflow: hidden;
padding: 40px;
box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
flex-direction: column;
align-items: center;
}
.til-col img {
width: 50%;
border-radius: 10px;
padding-bottom: 5%;
}
.til-col > p{
padding-bottom:40px;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 12px 34px;
border-radius: 10px;
font-size: 13px;
padding: 0 20px;
background: #012a5d;
position: absolute;
bottom:20px;
cursor: pointer;
}
<div class="row2">
<div class="til-col">
<img src="images/Home/Layer 2-2.svg">
<p>Interact with a TIL timeline showing key moments and events over the years</p>
<a href="classroom.html" class="button">
<h3>TIL Story</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Progress.svg">
<p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
<a href="classroom.html" class="button">
<h3>Projects</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Report_icons-02 1.svg">
<p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
<a href="classroom.html" class="button">
<h3>Classroom Redesign</h3>
</a>
</div>
</div>
You can follow below code for solution
.row2 {
display: flex;
justify-content: space-evenly;
align-items: stretch;
}
.til-col {
flex-basis: 32%;
border: 7px solid #c9c9c9;
border-radius: 30px;
margin: 10px;
position: relative;
overflow: hidden;
padding: 40px;
box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
flex-direction: column;
align-items: center;
display: flex;
justify-content: space-between;
text-align: center;
}
.til-col img {
width: 50%;
border-radius: 10px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
margin-bottom: 30px;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 34px 0 0 0;
border-radius: 10px;
font-size: 13px;
padding: 0 20px;
background: #012a5d;
position: relative;
cursor: pointer;
}
<div class="row2">
<div class="til-col">
<div class="til-col-head">
<div class="icon"><img src="https://dynamic.brandcrowd.com/asset/logo/2a056b05-ac9b-404f-a619-eba59f92ef48/logo-search-grid-1x?v=637631474641000000"></div>
<p>Interact with a TIL timeline showing key moments and events over the years</p>
</div>
<a href="classroom.html" class="button">
<h3>TIL Story</h3>
</a>
</div>
<div class="til-col">
<div class="til-col-head">
<div class="icon"><img src="https://cdn-icons-png.flaticon.com/512/109/109733.png"></div>
<p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
</div>
<a href="classroom.html" class="button">
<h3>Projects</h3>
</a>
</div>
<div class="til-col">
<div class="til-col-head">
<div class="icon"><img src="https://miro.medium.com/max/1268/0*2pi-PJAAVse41Ovk.png"></div>
<p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
</div>
<a href="classroom.html" class="button">
<h3>Classroom Redesign</h3>
</a>
</div>
</div>
I've been looking into my contact page on this website I'm creating and I'm trying to my text line up beside my icon but I can't seem to line it up properly. Here Is what I'm looking for. I've been trying to look through it and I'm getting a lot of struggles if possible thank you for the help
Issue via picture
Issue
------
|ICON| Address:
| | Information
------
But instead Im getting this:
------
|ICON|
| | Address:
------
Information
Here is my code:
/*-------------------------------------------- STYLING FOR CONTACT PAGE ----------------------------------------------*/
.back-container {
height: 150vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
/* Form styling for contact page */
.formContainer {
border-radius: 5px;
background-color: white;
padding: 20px;
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
filter: drop-shadow(0 0 30px #333);
z-index: 100;
}
.formText {
color: black;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #1e90ff;
}
.formContent {
margin-top: 5px;
}
/* Styling for the text inputs */
input[type=text] {
font-size: 20px;
border: 2px solid #ccc;
width: 250px;
height: 50px;
}
/* Styling for info div */
.info {
display: flex;
flex-direction: column;
}
.info h1 {
color: #1e90ff;
margin-left: 10px;
display: inline-block;
}
.info h2 {
color: white;
}
/* Styling for the icons */
.icons {
display: flex;
align-items: flex-end;
}
.icons>i {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: white;
padding: 28px;
width: 50px;
height: 50px;
border-radius: 50%;
}
/* Styling for text area */
textarea {
font-size: 15px;
border: 2px solid #ccc;
max-width: 250px;
min-width: 250px;
width: 250px;
max-height: 350px;
min-height: 100px;
height: 100px;
}
/* Styling for the submit button */
input[type=submit] {
background-color: #1e90ff;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
margin-left: 75px;
}
/*-------------------------------------------- STYLING FOR CONTACT PAGE END ----------------------------------------------*/
/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE ----------------------------------------------*/
#media (max-width: 1011px) {
.back-container {
height: 200vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
#media (max-height: 700px) {
.back-container {
height: 400vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
}
/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE END ----------------------------------------------*/
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Container for the entire page !-->
<div class="back-container">
<div class="info" style="float: left; padding: 150px;">
<!-- All icons being used for information !-->
<div class="icons">
<i class="fas fa-map-marker-alt fa-3x"></i>
<h1> Address:</h1>
</div>
<h2>INFO</h2>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<h1> Phone:</h1>
</div>
<h2>INFO</h2>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<h1> Fax:</h1>
</div>
<h2>INFO</h2>
<div class="icons">
<i class="fas fa-envelope fa-3x"></i>
<h1> Email:</h1>
</div>
<h2>INFO</h2>
<div class="icons">
<i class="fas fa-mail-bulk fa-3x"></i>
<h1> P.O Box:</h1>
</div>
<h2>INFO</h2>
</div>
<!-- Container for the forms !-->
<div class="formContainer">
<form action="https://formsubmit.co/" method="POST">
<div class="formText">
<h1>Name:</h1>
</div>
<div class="formContent">
<input type="text" name="name" required="required">
</div>
<div class="formText">
<h1>Email:</h1>
</div>
<div class="formContent">
<input type="text" name="email" required="required">
</div>
<div class="formText">
<h1>Phone Number:</h1>
</div>
<div class="formContent">
<input type="text" name="phone" required="required">
</div>
<div class="formText">
<h1>Message:</h1>
</div>
<div class="formContent">
<textarea required="required" name="message"></textarea>
</div>
<div class="formContent">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
You could wrap the two headings in a div with flex-direction: column.
Working example:
/*-------------------------------------------- STYLING FOR CONTACT PAGE ----------------------------------------------*/
.back-container {
height: 150vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
/* Form styling for contact page */
.formContainer {
border-radius: 5px;
background-color: white;
padding: 20px;
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
filter: drop-shadow(0 0 30px #333);
z-index: 100;
}
.formText {
color: black;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #1e90ff;
}
.formContent {
margin-top: 5px;
}
/* Styling for the text inputs */
input[type=text] {
font-size: 20px;
border: 2px solid #ccc;
width: 250px;
height: 50px;
}
/* Styling for info div */
.info {
display: flex;
flex-direction: column;
}
.info h1 {
color: #1e90ff;
margin-left: 10px;
display: inline-block;
}
.info h2 {
color: white;
}
/* Styling for the icons */
.icons {
display: flex;
align-items: center;
}
.icons>i {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: white;
padding: 28px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.icon-info {
display: flex;
flex-direction: column;
align-items: center;
}
/* Styling for text area */
textarea {
font-size: 15px;
border: 2px solid #ccc;
max-width: 250px;
min-width: 250px;
width: 250px;
max-height: 350px;
min-height: 100px;
height: 100px;
}
/* Styling for the submit button */
input[type=submit] {
background-color: #1e90ff;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
margin-left: 75px;
}
/*-------------------------------------------- STYLING FOR CONTACT PAGE END ----------------------------------------------*/
/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE ----------------------------------------------*/
#media (max-width: 1011px) {
.back-container {
height: 200vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
#media (max-height: 700px) {
.back-container {
height: 400vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
}
/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE END ----------------------------------------------*/
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Container for the entire page !-->
<div class="back-container">
<div class="info" style="float: left; padding: 150px;">
<!-- All icons being used for information !-->
<div class="icons">
<i class="fas fa-map-marker-alt fa-3x"></i>
<div class="icon-info">
<h1> Address:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<div class="icon-info">
<h1> Phone:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<div class="icon-info">
<h1> Fax:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-envelope fa-3x"></i>
<div class="icon-info">
<h1> Email:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-mail-bulk fa-3x"></i>
<div class="icon-info">
<h1> P.O Box:</h1>
<h2>INFO</h2>
</div>
</div>
</div>
<!-- Container for the forms !-->
<div class="formContainer">
<form action="https://formsubmit.co/" method="POST">
<div class="formText">
<h1>Name:</h1>
</div>
<div class="formContent">
<input type="text" name="name" required="required">
</div>
<div class="formText">
<h1>Email:</h1>
</div>
<div class="formContent">
<input type="text" name="email" required="required">
</div>
<div class="formText">
<h1>Phone Number:</h1>
</div>
<div class="formContent">
<input type="text" name="phone" required="required">
</div>
<div class="formText">
<h1>Message:</h1>
</div>
<div class="formContent">
<textarea required="required" name="message"></textarea>
</div>
<div class="formContent">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
use bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
do your icons class like this
<div class="icons row">
<div class="col"><i class="fas fa-map-marker-alt fa-3x"></i></div>
<div class="col">
<h1>Address:</h1>
<h2>INFO</h2>
</div>
</div>
I'm pretty sure you are looking for this:
Fax
.fax:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f095";
}
Easiest and cleanest way.
Here is working example and and explanation is below
.back-container {
height: 150vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.formContainer {
border-radius: 5px;
background-color: white;
padding: 20px;
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
filter: drop-shadow(0 0 30px #333);
z-index: 100;
}
.formText {
color: black;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #1e90ff;
}
.formContent {
margin-top: 5px;
}
input[type=text] {
font-size: 20px;
border: 2px solid #ccc;
width: 250px;
height: 50px;
}
.info {
display: flex;
flex-direction: column;
}
.info h1 {
color: #1e90ff;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}
.info h2 {
color: white;
}
.icons {
display: flex;
align-items: flex-start;
column-gap: 10px;
margin-bottom: 20px;
}
.icons > i {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: white;
padding: 28px;
width: 50px;
height: 50px;
border-radius: 50%;
}
textarea {
font-size: 15px;
border: 2px solid #ccc;
max-width: 250px;
min-width: 250px;
width: 250px;
max-height: 350px;
min-height: 100px;
height: 100px;
}
input[type="submit"] {
background-color: #1e90ff;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 75px 4px 2px;
cursor: pointer;
}
#media (max-width: 1011px) {
.back-container {
height: 200vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
#media (max-height: 700px) {
.back-container {
height: 400vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Container for the entire page !-->
<div class="back-container">
<div class="info" style="float: left; padding: 150px;">
<!-- All icons being used for information !-->
<div class="icons">
<i class="fas fa-map-marker-alt fa-3x"></i>
<div class="data">
<h1>Address:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<div class="data">
<h1>Phone:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<div class="data">
<h1>Fax:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-envelope fa-3x"></i>
<div class="data">
<h1>Email:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-mail-bulk fa-3x"></i>
<div class="data">
<h1>P.O Box:</h1>
<h2>INFO</h2>
</div>
</div>
</div>
<!-- Container for the forms !-->
<div class="formContainer">
<form action="https://formsubmit.co/" method="POST">
<div class="formText">
<h1>Name:</h1>
</div>
<div class="formContent">
<input type="text" name="name" required="required">
</div>
<div class="formText">
<h1>Email:</h1>
</div>
<div class="formContent">
<input type="text" name="email" required="required">
</div>
<div class="formText">
<h1>Phone Number:</h1>
</div>
<div class="formContent">
<input type="text" name="phone" required="required">
</div>
<div class="formText">
<h1>Message:</h1>
</div>
<div class="formContent">
<textarea required="required" name="message"></textarea>
</div>
<div class="formContent">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
I had to make few changes in html as well as in css.
html:
this will not do
<div class="icons">
<i class="fas fa-map-marker-alt fa-3x"></i>
<h1> Address:</h1>
</div>
<h2>INFO</h2>
so I changes it into
<div class="icons">
<i class="fas fa-map-marker-alt fa-3x"></i>
<div class="data">
<h1>Address:</h1>
<h2>INFO</h2>
</div>
</div>
This way you will be able to position your element as you described but in order to do this there is a need to make few changes in css
first of all you want text to be on top instead of bottom so
.icons {
display: flex;
align-items: flex-end;
}
you need to change into
.icons {
display: flex;
align-items: flex-start;
column-gap: 10px;
margin-bottom: 20px;
}
column-gap will create space between column in .icons element without the need of margin and margin-bottom will space .icons elements.
margin-bottom can be replaced with row-gap: 20px in .info element.
and lastly remove margin-top and margin-bottom from .info h1 just to make it pretty.
Hopy it helps
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to make my navbar hide when I scroll down without using anything other than html and css with minimal js if possible. I can't provide code until later tonight because of project rules.
I figured out that it is very simple, applied in the code below.
<!DOCTYPE html>
<html>
<head>
<!--these are links to the css and little verticle bar icons and also the device width so the navbarand text can work properally at a smaller device width (to an extent)-->
<title>Parker Aucoin</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="a">
<div id="home">
<div id="navbar">
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
} </script>
<div id="navlinks">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>StackOverflow</li>
</ul>
</div>
</div>
<div class="content">
<div class="header">
<p>Parker</p>
</div>
<div class="header2">
<p><span>Aucoin</span></p>
</div>
<div class="header3">
<p>Software Developer</p>
</div>
<div class="gallery-header">
<div id="portfolio">
<h1>Portfolio</h1>
<h3>My GitHub
<a class="github-btn" href="https://github.com/ParkerAucoin/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</h3>
</div>
</div>
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio1.jpg">
<img src="images/portfolio1.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio5.jpg">
<img src="images/portfolio5.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio6.jpg">
<img src="images/portfolio6.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
<div class="spacer">
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio2.jpg">
<img src="images/portfolio2.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio3.jpg">
<img src="images/portfolio3.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio4.jpg">
<img src="images/portfolio4.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
</div>
<div id="contact">
<h1 id="contact-header">Contact</h1>
<table>
<tr>
<th>
<div id="slideshow">
<div class="slider">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<div class="slide first">
<img src="images/portfolio1.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio2.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio3.jpg" alt="image1">
</div>
<div class="navigarion-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
</div>
</div>
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if (counter > 3){
counter = 1;
}
}, 5000);
</script>
</th>
</tr>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
*{
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(images/background.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fugaz One', cursive;
}
#navbar{
transition: .3s;
z-index: 1;
top: 0;
position: sticky;
width: 100%;
overflow: hidden;
display: inline-block;
padding-top: 40px;
font-family: 'Fugaz One', cursive;
}
#navlinks{
float: center;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
flex: 1;
font-family: 'Fugaz One', cursive;
}
#navlinks ul{
margin-left: 0px;
display: inline-block;
}
#navlinks ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
#navlinks ul a{
color: #fff;
text-decoration: none;
font-size: 15px;
}
#navlinks ul li::after{
content: '';
width: 0;
height: 2px;
background: rgb(255, 100, 52);
display: block;
margin: auto;
transition: .3s;
}
#navlinks ul li:hover::after{
width: 100%;
}
.header{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
padding-top: 1500px;
color: #fff;
text-align: center;
margin: 0;
}
.header p{
font-size: 100px;
}
.header2{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
top: -65px;
margin: 0;
color: #fff;
text-align: center;
padding-top: -30px;
}
.header2 p{
font-size: 100px;
}
.header2 span{
color: rgb(255, 100, 52);
}
.header3{
font-family: 'Fugaz One', cursive;
margin: 0;
position: relative;
color: rgb(163, 163, 163);
font-size: 20px;
text-align: center;
top: -100px;
padding-bottom: 250px;
}
#contact{
position: relative;
color: #fff;
text-align: center;
float: center;
margin: 0;
top: 100px;
}
#slideshow{
top: 20px;
align-items: center;
justify-content: center;
position: relative;
margin: 0;
padding-bottom: 20px;
}
.slider{
width: 200px;
height: 300;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 400px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 200px;
height: 500px;
}
.navigation-manual{
position: absolute;
width: 200px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: .3s;
}
.manual-btn:not(:last-child){
margin-right: 10px;
}
.manual-btn:hover{
background: rgb(255, 100, 52);
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
.navigation-auto{
position: absolute;
display: flex;
width: 400px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
background: rgb(255, 100, 52);
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background: rgb(255, 100, 52);
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background: rgb(255, 100, 52);
}
.gallery-header{
font-family: 'Fugaz One', cursive;
text-align: center;
justify-content: center;
align-items: center;
margin: 0;
padding: 20;
}
#portfolio{
color: #fff;
padding-bottom: 50px;
}
#portfolio h3{
color: rgb(163, 163, 163);
}
h3 a{
color: rgb(255, 100, 52);
}
h3 a:hover{
color: rgb(252, 154, 125);
}
#gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 300px;
}
#gallery:hover {
border: 1px solid #777;
}
#gallery img {
width: 180px;
height: 300px;
}
div.desc {
padding: 15px;
text-align: center;
}
th.contact-form{
padding: 16px;
position: relative;
margin: 0;
float: center;
}
I cannot get my .container{} to encompass all the content on my web page. My lower navigation buttons are sitting outside the container (marked by a 1px black border) and I can't figure out why. I'm not sure where I've went wrong in my CSS or HTML code! Thanks in advance for your help. Here is a link to my CodePen: https://codepen.io/IDCoder/pen/rGWeEE?editors=0100
Here are my code snippets:
<html>
<head>
<title>Ms.Jane Equities Management Corp</title>
</head>
<body>
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/>
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/> </div>
<div class ="nav wrap">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<!--<div class="search box wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>-->
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class ="nav wrap 2">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
</body>
<html>
CSS:
.container-fluid{
border: 1px solid #000000;
max-width: 1600px;
/*overflow: hidden;*/
}
.wrap{
background-color: yellow;
display: inline: flex;
/*overflow: hidden;*/
}
.Logos{
width: 55%;
display: inline-block;
background-color: blue;
}
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: 25px;
}
ul.navigation{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two{
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size:cover;
background-repeat: no-repeat;
max-width: 1600px;
height: 550px;
margin: auto;
}
.floater.box{
background-color: white;
border-radius: 10px;
opacity: .45;
max-width: 75%;
height: 200px;
position: absolute;
top:50%;
left: 0;
right: 0;
margin: auto;
}
/*.search {
width: 50%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
.search.box.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
I think your div.nav.wrap is getting pushed down because it's floated and there's no room for it in the container and because it's floated the container doesn't adjust for it. If you remove the float, you'll see the container start to contain it. That's normal float behaviour - elements with float are out of the 'flow' of the document so other elements aren't affected by them.
I'd just add a negative top margin to push it back up. I'd usually do this in rem or depending on how you size the nav height. So your existing .nav.wrap rule would become:
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: -35px;
}
I am doing a popup image with close button and dimmed background. When the popup is displayed and users click outside of it, it supposes to close the popup. It works fine on other browser, but not safari. I found on Z-index problems on ipad that I need to put -webkit-transform: translate3d(0,0,0) to the same DOM level but I am not really sure about the concept. Can someone help me, please?
Here is my code:
/**********************HTMl*********************/
<body id="price">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<?php include('header.php')?>
<div id="content-border" >
<div id="content">
<h1><strong>Packages</strong></h1>
<P id="package-p"></P>
<div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn1" onClick="openPopup(1)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal1" class="popup">
<div class="popup-content">
<img src="images/The-Apprentice_low.jpg" id="popup-content1"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn2" onClick="openPopup(2)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal2" class="popup">
<div class="popup-content">
<img src="images/The-Celebrity-Chef_low.jpg" id="popup-content2"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
</div>
</div>
</div>
<?php include('footer.php')?>
</div>
</div>
</div>
<?php include('html-body-end.php')?>
</body>
/*************************CSS***********************/
#package-p{
background-color: #fff;
color: #000;
padding: 10 20;
text-shadow: none;
}
#price-col{
margin:0 auto;
width:50%;
float: left;
text-align: center;
}
#price-circle{
margin: 30 auto;
background: #ffffff;
padding: 35px;
text-align: center;
height: 250px;
width: 250px;
display: table;
color: #222222;
box-shadow: 0px 0px 10px 5px rgba(206, 44, 44, 0.5);
border: 0;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
}
#price-circle > div{
display: table-cell;
vertical-align: middle;
}
#currency{
font-size: 30px;
}
#price-circle:hover{
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
background-color: #ce2c2c;
color: #fff;
}
/*Popup*/
.popup {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
/* padding-top: 300px; Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
.popup-content {
margin: auto;
color: #ffffff;
display: inline-block;
position: relative;
}
.popup::after, .popup::before{
display: block;
content: "";
height: 5%;
}
.popup-content img{
max-height: 90vh;
max-width: 90vw;
min-height: 170px;
min-width: 240px;
z-index: 10;
}
/* The Close Button */
.closeBtn{
color: rgba(255,255,255,5);
font-size: 36px;
font-weight: bold;
position: absolute;
margin-top: -2.1vh;
right: 0;
display: inline-block;
z-index: 10;
}
.closeBtn:hover, .closeBtn:focus{
color: #000;
cursor: pointer;
}
Thanks.