I have created a input field and a button but i want to put that button insiade that input field. I have done it by using position:absolute but the problem is its not working properly in medium or large screen. Any kind of help would be highly appreciated. Here is my code
HTML CODE
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div style="float: right">
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad" style="margin-right: 15px;"></button>
</div>
</div>
</div>
CSS CODE
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin:-20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border: 1px solid #1486ab66 !important;
border-radius: 4px;
width: 92%;
}
.post-image-uploaad {
width: auto;
height: 22px;
margin-top: 8px;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 0px;
}
.no-button-design img {
height: 34px;
}
In small screen its perfectly fine
But in large screen it's coming out from the input field
use this code
css:-
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin: -20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border-radius: 4px;
width: 100%;
position: relative;
}
.post-image-uploaad {
position: relative;
width: auto;
height: 22px;
margin: -39px -3px 1px 1px;
float: right;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 19px 35px;
}
.no-button-design img {
height: 34px;
}
html:-
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div>
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad_send" style="margin-right: 15px;"></button>
</div>
</div>
</div>
form {
display: inline-block;
position: relative;
}
form button {
position: absolute;
top: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input name="search" type="text">
<button type="submit">click</button>
</form>
</body>
</html>
try this good luck
Update in 2022:for this question can try this code:
.search {
margin-bottom: 30px;
}
form {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
input {
position: relative;
width: 280px;
height: 30px;
}
button {
position: absolute;
margin-right: 3px;
padding: 8px 10px;
background-color: #e7c130;
border: none;
}
<div className='search'>
<form>
<input type='text' />
<button>SEARCH</button>
</form>
</div>
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<input type="text"/><button class="btn">button</button>
</body>
</html>
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 am having an issue with resizing and a div. When I resize the browser, then scroll over to the right, I see that the bottom div is not extending all the way despite my width at 100% I have tried position and width tags and am at a loss. Any ideas? The form is moving into the white space and not sticking to the background div area.
https://codepen.io/CaptainMattyP/pen/mdJRKpo
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
}
#footer-info1 {
color: white;
padding: 80px 0px 0px 150px;
positon: absolute;
}
#copyright {
color: white;
padding: 0px 0px 0px 900px;
positon: absolute;
}
#contact-info {
padding: 20px 10vw 0px 1600px;
position: absolute;
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
</section>
</main>
I'm going to take a guess here that you have a very wide monitor that you are doing most of your work on. You have hard coded almost all of the padding and margins used in your code to place the different items on the page. This is the root of your problem. When you put something to width: 100% what is actually occurring is you are telling the browser to give a width of 100% of the current screen size. This means it will be subjective to the size of the browser that is displaying the page. The rest of your padding and margins though are set to a hard pixel value. Combine these two different display styles together and you can have a page that displays different portions off of the initial screen.
I think you might want something closer to this. I do still use hard coded padding values, but they are padding based on dynamic values instead of absolute values so it allows for easier reflowing and resizing of the page so it looks better for more screen sizes.
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
white-space: nowrap;
text-align: right;
padding-right: 10px;
padding-top: 10px;
margin: 0px;
}
li {
color: white;
display: inline;
padding-left: 10px;
}
#welcome-section {
padding-bottom: 40px;
text-align: center;
}
.picture {
border-radius: 50%;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
overflow: auto;
}
#footer-info1 {
color: white;
text-align: right;
padding-right: 10px;
float: right;
}
#email-section {
float: left;
padding-bottom: 10px;
padding-left: 10px;
}
.block {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="email-section">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
<div id="copyright">
#Matthew Paciello
</div>
</div>
</section>
</main>
If I'm reading this right, I suggest adjusting the bottom area and use a flex like so:
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
#footer-info1 {
color: white;
}
#copyright {
color: white;
}
#contact-info {
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</section>
</main>
Your footer is 100% but:
The form in your footer have a 10vw padding-right which make the page horizontally scrollabe. And that white space on your right. either bring the form more to the left by reducing the padding-left or padding-right.
The position of the image is set by margin-top and margin-left which also plays a roll in making the page horizontally off, and scrollable. You can bring the image closer to the left by reducing margin-left of it. Or use other methods to center the image, if necessary.
I'm trying to make a comment box that is horizontal with the name box, because the text box was fixed on the top. When I tried to apply margin-top on the text area and form, it moves the name box and the whole entire profile down with it. Is there a way to move the text area down, without affecting anything else. Here is my code:
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label for="fname">Profile Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
Another option is to put a position to the label tag and this tag have a relative position and you can change top and right to move when you want.
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
label{
position:relative;
top:50px;
right:100px;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label class="label-prueba" for="fname"> Profile <br> Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
I have seen your code and found your problem, my suggestion is kindly add two property to your .textarea class and that is position:relative and top as per your requirement.
textarea{
position:relative;
top:100px;
}
try margin-top with a negative value, for instance: margin-top: -2px;
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'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}