Background image isn't appearing in the .left left column. I have set .left with the css background-image but to no avail. Any ideas what is happening? I feel it is something small and it is bugging me.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
<div class="column left">
</div>
<div class="column right">
<i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
<h2> You're In </h2>
<p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
<h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
</div>
</div>
* {
box-sizing: border-box;
}
.row {
display: flex;
border: 1px solid grey;
align-items: center;
}
.column {
text-align: center;
}
.left {
width: 50%;
background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}
.right {
width: 50%;
padding: 10px;
}
#media screen and (max-width: 600px) {
.left {
display: none;
}
.right {
width: 100%;
}
}
Try to specify height on child elements of flex.
Also you should learn how to use the console (F12) to inspect elements for debugging.
* {
box-sizing: border-box;
}
.row {
display: flex;
border: 1px solid grey;
align-items: center;
}
.column {
text-align: center;
}
.left {
height: 380px;
background-size: cover;
width: 50%;
background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}
.right {
width: 50%;
padding: 10px;
}
#media screen and (max-width: 600px) {
.left {
display: none;
}
.right {
width: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
<div class="column left">
</div>
<div class="column right">
<i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
<h2> You're In </h2>
<p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
<h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"
/><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;"
/></form>
</div>
</div>
You will have to give certain height to the left div as it does not have any element or content inside it to give it some height.
Also you can set background-size to cover or contain.
Try following code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
border: 1px solid grey;
align-items: center;
}
.column {
text-align: center;
}
.left {
width: 50%;
background-image: url(https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930);
height: 400px;
background-size: cover;
background-repeat: no-repeat;
}
.right {
width: 50%;
padding: 10px;
}
#media screen and (max-width: 600px) {
.left {
display: none;
}
.right {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column left">
</div>
<div class="column right">
<i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
<h2> You're In </h2>
<p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
<h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
</div>
</div>
</body>
</html>
Try this Style:
.left {
width: 50%;
height: 100vh;
background: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930") center center;
bacground-size: cover;
}
Related
I have created a basic form, where the user has to input various contact details. My Send button however, does not work. Im trying to use HTML and CSS only for this form, but I'm not opposed to using JS if that's what is needed for this to be functional.
I have looked up various ways for a solution, but most things involve using php, which is not something I am able to use for this. As stated before, I'm really just trying to stick with HTML.
My button does have type="submit" and href="myemail#email.com" (I have my actual email in there). However, my button does not click, or at least it does not give the appearance of clicking nor does it send anything to my email. I also thought it was just a web browser issue, but I have tried both chrome and safari and no luck.
<section class="modal-section">
<button class="modal-button" id="open">Click Me</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<div class="form-container" id="form-container">
<h1 class="form-header">Connect With Me.</h1>
<p>I would love to respond to your queries and help you succeed. Feel free to contact me!</p>
<div class="contact-box">
<div class="contact-left">
<h3 class="form-header3">Send your request</h3>
<form>
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Your Name" required>
</div>
<div class="input-group">
<label>Phone</label>
<input type="text" placeholder="(888) 888-8888">
</div>
</div>
<div class="input-row">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="YourEmail#Email.com" required>
</div>
<div class="input-group">
<label>Subject</label>
<input type="text" placeholder="You're Hired!" required>
</div>
</div>
<label>Message</label>
<textarea rows="5" placeholder="You are so cool, please make my website cool too!" required></textarea>
<button class="form-button" type="submit" value="Send" href="mailto:johnsonisaiah13#yahoo.com">SEND</button>
</form>
</div>
<div class="contact-right">
<h3 class="form-header3">Reach Me</h3>
<table>
<tr>
<td>Email</td>
<td>Johnsonisaiah13#yahoo.com</td>
</tr>
<tr>
<td>Location</td>
<td>Fort Stockton, TX</td>
</tr>
</table>
</div>
</div>
</div>
<button class="modal-button" id="close">Close Me</button>
</div>
</div>
</section>
/* //////////////////////////////////////////////////////////////
//////////////// MODAL SECTION ///////////////////////
////////////////////////////////////////////////////////////// */
.modal-section {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 200vh; /* make 100 for smaller screen */
opacity: 0;
pointer-events: none;
}
.modal-button {
/* background-color: #39FF14;
color: #1F2022;
border-radius: 5px;
padding: 10px 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px; */
background-color: white;
padding: 10px 18px;
font-weight: bold;
color: #1F2022;
display: inline-block;
margin: 30px 0;
border-radius: 5px;
}
.modal-button:hover {
background-color: #39FF14;
}
.modal {
background-color: white;
padding: 30px 50px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
width: 1000px;
max-width: 100%;
text-align: center;
}
.modal-header {
margin: 0;
}
.modal-text {
font-size: 14px;
opacity: 0.7;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
/* <!-- /////////////////////////////////////////////////////////////
///////////////////// CONTACT ME / HIRE ME /////////////////////////
///////////////////////////////////////////////////////////// --> */
.form-container {
width: 80%;
margin: 50px auto;
}
.contact-box {
background: white;
display: flex;
}
.contact-left {
flex-basis: 60%;
padding: 40px 60px;
}
.contact-right {
flex-basis: 40%;
padding: 40px;
background: #39FF14;
}
.form-header {
margin-bottom: 10px;
color: white;
}
.form-container p {
margin-bottom: 40px;
color: white;
}
.input-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-row .input-group {
flex-basis: 45%;
}
input {
width: 100%;
border: none;
border-bottom: 1px solid #39FF14;
outline: none;
padding-bottom: 5px;
}
textarea {
width: 100%;
border: 1px solid #39FF14;
outline: none;
padding: 10px;
box-sizing: border-box;
}
label {
margin-bottom: 6px;
display: block;
color: black;
}
.form-button {
background-color: #39FF14;
width: 100px;
border: none;
outline: none;
color: black;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(0, 14.5, 38.9, 48.6);
pointer-events: auto;
}
.form-header3 {
/* color: orange; */
font-weight: 600;
margin-bottom: 30px;
}
tr td:first-child {
padding-right: 20px;
}
tr td {
padding-top: 20px;
}
You can try refering to this old question some time ago. Not sure if it still works, but hope it helps.
html button to send email
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
I have two elements which I want to align this way on Top Bar :
Below you can see the HTML and CSS for the two of the elements:
I tried using margins or padding but it didn't look I was going anywhere like that.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
Did you try using right?
First change float: left; in your two CSS classes (input field and button) to float: right;.
This way, the input field and the button are next to each other on the right side.
Then you can move your "right-floated" elements using:
right: 50px;, for isntance.
You could have use flex system layout to make it easier, but to do this in the way it is we should change couple of things:
Change order of div.example and the div that contains new location button in html
Set float: right to both div.example and the other div
Set margin-right: 50px to second div
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
/* NEW */
float: right;
/* Endof NEW */
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<!-- Changed order -->
<div style="float:right;margin-right:50px;">
<button type="button">+ New location</button>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<!-- Endof change -->
</div>
I changed order of elements, add a little margin and float right to the first element.
<div>
<div class="topnav" style="margin-right: 100px;">
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
</div>
It's better to use flex and/or multi-column presentation, but with your current html-structure, one of the simplest options would be to add the second button to the "example" div and to use separated classes for buttons.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border: 1px solid grey;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example .button--search {
border-left: none;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
width: 50px;
}
.example .button--new-location {
margin-left: 15px;
border-radius: 6px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button" class="button--search"><i class="fa fa-search"></i></button>
<button type="button" class="button--new-location">+ New location</button>
</div>
</div>
</div>
body {
margin: 0px;
border: 1px solid black;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border: 1px solid black;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.contianer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.ops {
display: flex;
justify-content: center;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#list ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#list li {
float: left;
padding: 0px;
margin: 0px;
}
#list li:hover {
background-color: lightgrey;
}
#list {
display: flex;
justify-content: center;
margin: 10px;
}
form {
padding: 0px;
margin: 0px;
}
.dhund {
display: flex;
justify-content: center;
padding: 10px;
}
input[name="name"] {
max-height: 37px;
max-width: 400px;
min-width: 200px;
border-radius: 10px;
font-size: 17px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
input[name="search"] {
background-color: rgb(183, 242, 184);
font-size: 15px;
border: 1px solid black;
border-radius: 5px;
color: black;
}
input[name="logout"],
input[name="chat"],
input[name="update"],
input[name="homepage"],
input[name="event"] {
background-color: white;
border: none;
padding: 10px 19px;
}
input[name="logout"]:hover,
input[name="chat"]:hover,
input[name="update"]:hover,
input[name="homepage"]:hover,
input[name="event"]:hover {
background-color: lightgrey;
}
.content {
display: flex;
flex-direction: row;
}
.sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid black;
height: 100%
}
#image {
margin: 2px;
padding: 5px;
display: flex;
justify-content: center;
}
#image img {
border: 1px solid black;
}
#upload {
border-top: 1px solid black;
margin: 2px;
min-width: 250px;
}
#upload p {
text-align: center;
}
#stupid {
display: flex;
justify-content: center;
margin: 5px;
}
.material {
margin: 20px;
min-width: 400px;
border: 1px solid black;
border-radius: 10px;
background-color: lightgrey;
}
.posts {
border: 1px solid black;
margin: 17px;
margin-top: 80px;
border-radius: 7px;
}
.feed {
padding: 20px;
}
.post p {
padding: 5px;
}
.poster {
padding-left: 10px;
border-bottom: 1px solid black;
}
.poster p {}
#matter p {
text-indent: 30px;
}
#matter {
border: 1px solid black;
margin: 8px;
background-color: white;
border-radius: 20px;
padding: 20px;
}
.main {
display: flex;
flex-direction: column;
margin: 5px;
width: 100%;
}
/*#mind
{
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid black;
border-radius: 8px;
background-color: lightgrey;
}*/
textarea[name="mind"] {
border-radius: 10px;
border: 1px solid black;
font-size: 15px;
padding: 10px 5px 10px 5px;
}
input[name="post"] {
width: 120px;
height: 50px;
background-color: powderblue;
font-size: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div class="contianer">
<div class="ops">
<div id="list">
<ul>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>
</li>
</ul>
</div>
</div>
<div class="dhund">
<form method="POST" action="homepage.php">
<input type="text" name="name" placeholder="Search for People or things">
<input type="submit" name="search" value="search">
</form>
</div>
<div class="content">
<div class="sidebar">
<div id="visual">
<div id="image">
<img src="<?php echo $avatar ?>" width="200" height="250">
</div>
<div id="upload">
<form action="homepage.php" method="POST" enctype="multipart/form-data">
<p>Upload Pic:</p><input type="file" name="img"><br>
<div id="stupid">
<input type="submit" name="upload" value="Upload">
</div>
</form>
</div>
</div>
</div>
<div class="main">
<div id="mind">
<form method="GET" action="homepage.php">
<textarea name="mind" cols="40" rows="5"></textarea>
<input type="submit" name="post" value="Post">
</form>
</div>
<div class="feed">
<div class="posts">
<div class="poster">
<p><b>Poster</b></p>
</div>
<div class="post">
<p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I had read that every thing inside the <body> tags will fit inside of the body and the body will adjust according to the width of individual elements, but the website I designed the content seems to go outside the body, I know it because I gave body a border and found out that the content goes outside the body when I resize the browser. Why is it happening in the first place and what is the best way to make a website that is all screen friendly? also I tried to use vw instead of px is it a good idea?
One way is to turn the body into an inline-block.
Inline blocks have the same width as their contents by default and are not restricted to the width of the window.
body {
margin: 0px;
border: 1px solid black;
display: inline-block; /* new */
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border: 1px solid black;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.contianer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.ops {
display: flex;
justify-content: center;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#list ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#list li {
float: left;
padding: 0px;
margin: 0px;
}
#list li:hover {
background-color: lightgrey;
}
#list {
display: flex;
justify-content: center;
margin: 10px;
}
form {
padding: 0px;
margin: 0px;
}
.dhund {
display: flex;
justify-content: center;
padding: 10px;
}
input[name="name"] {
max-height: 37px;
max-width: 400px;
min-width: 200px;
border-radius: 10px;
font-size: 17px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
input[name="search"] {
background-color: rgb(183, 242, 184);
font-size: 15px;
border: 1px solid black;
border-radius: 5px;
color: black;
}
input[name="logout"],
input[name="chat"],
input[name="update"],
input[name="homepage"],
input[name="event"] {
background-color: white;
border: none;
padding: 10px 19px;
}
input[name="logout"]:hover,
input[name="chat"]:hover,
input[name="update"]:hover,
input[name="homepage"]:hover,
input[name="event"]:hover {
background-color: lightgrey;
}
.content {
display: flex;
flex-direction: row;
}
.sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid black;
height: 100%
}
#image {
margin: 2px;
padding: 5px;
display: flex;
justify-content: center;
}
#image img {
border: 1px solid black;
}
#upload {
border-top: 1px solid black;
margin: 2px;
min-width: 250px;
}
#upload p {
text-align: center;
}
#stupid {
display: flex;
justify-content: center;
margin: 5px;
}
.material {
margin: 20px;
min-width: 400px;
border: 1px solid black;
border-radius: 10px;
background-color: lightgrey;
}
.posts {
border: 1px solid black;
margin: 17px;
margin-top: 80px;
border-radius: 7px;
}
.feed {
padding: 20px;
}
.post p {
padding: 5px;
}
.poster {
padding-left: 10px;
border-bottom: 1px solid black;
}
.poster p {}
#matter p {
text-indent: 30px;
}
#matter {
border: 1px solid black;
margin: 8px;
background-color: white;
border-radius: 20px;
padding: 20px;
}
.main {
display: flex;
flex-direction: column;
margin: 5px;
width: 100%;
}
/*#mind
{
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid black;
border-radius: 8px;
background-color: lightgrey;
}*/
textarea[name="mind"] {
border-radius: 10px;
border: 1px solid black;
font-size: 15px;
padding: 10px 5px 10px 5px;
}
input[name="post"] {
width: 120px;
height: 50px;
background-color: powderblue;
font-size: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div class="contianer">
<div class="ops">
<div id="list">
<ul>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>
</li>
</ul>
</div>
</div>
<div class="dhund">
<form method="POST" action="homepage.php">
<input type="text" name="name" placeholder="Search for People or things">
<input type="submit" name="search" value="search">
</form>
</div>
<div class="content">
<div class="sidebar">
<div id="visual">
<div id="image">
<img src="<?php echo $avatar ?>" width="200" height="250">
</div>
<div id="upload">
<form action="homepage.php" method="POST" enctype="multipart/form-data">
<p>Upload Pic:</p><input type="file" name="img"><br>
<div id="stupid">
<input type="submit" name="upload" value="Upload">
</div>
</form>
</div>
</div>
</div>
<div class="main">
<div id="mind">
<form method="GET" action="homepage.php">
<textarea name="mind" cols="40" rows="5"></textarea>
<input type="submit" name="post" value="Post">
</form>
</div>
<div class="feed">
<div class="posts">
<div class="poster">
<p><b>Poster</b></p>
</div>
<div class="post">
<p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.
I am trying to position the search bar on a background image. I am also trying to position a button at the bottom and center of the image. Following that, I will have containers.
What I am trying to achieve.
But what I am stuck and confused with positioning. The glyphicon is not working as well?
My Code
<style>
.card {
border: 0px solid;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius: 0px;
}
.container-fluid {
width: auto
}
.container-fluid.drop-shadow {
margin-top: 2%;
margin-left: 5%;
margin-right: 5%
}
.img-fluid {
height: 200px;
}
#child {
width: 100%;
height: 20px;
margin: auto;
text-align: center;
bottom: 0px;
position: absolute;
}
.btn-checkin {
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
</style>
</head>
<body id="page-top">
<div class="card">
<img class="img-fluid" src="img/1847p.png" alt="Card image cap">
<div class="col-md-5">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
</div>
<div id="child">
<button class="btn-checkin">Check in</button>
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
</div>
Problems to target :
Get the search bar on the background pic
Set the background pic always on top of the screen with full width but with certain height. I currently hard coded the height to 200px. Is there a way that it can be responsive?
I am also stuck with the glyphycon issue, why is it not displayed?
How do I position the button at the bottom of the image and in the
center?
Use margin-top with negative value to make the form goes on the image.
Glyphicons look to be working great simply here.
* {
box-sizing: border-box;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 80%;
margin: 0 auto 20px;
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#email, label[for="email"] {
display:inline-block;
vertical-align: middle;
}
input#email {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="email"] {
width: 40px;
line-height: 40px;
}
button#btn-checkin {
display: inline-block;
padding: 6px 10px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>
<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />
<div id="form-box">
<form>
<div id="input-group">
<label for="email" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Class" id="email">
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<br/>
<br/>
<br/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
.img-fluid {
height: 200px;
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body id="page-top">
<div class="card" >
<!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
<button class="btn-checkin">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
Try this code...If you need any help, let me know.
Ok so you want to position the search bar inside a image.
Make a div with the image as background
background: image_source;
background-size: contain;
position: relative; //must to write
width: 100%;
height: 100px; //as much as you want
Then the css for search bar
position: absolute;
then use top, left,etc to position the search bar