Newbie here. I am trying to come up with a simple one-page site but my contact form first name label is not attaching with the correct section.
I am attaching the image where the underlined "First Name" is not with the input, even though I have added it under another section and container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sitemize Hoşgeldiniz</title>
</head>
<body>
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-items">Home</li>
<li class="nav-items">Contact</li>
<li class="nav-items">About</li>
</ul>
</nav>
<section id="information">
<div class="container">
<div class="information-showcase">
<h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
</div>
</div>
</section>
<section id="short-info">
<div class="container">
<div class="container-image-1">
<div class="row">
<div class="column">
<h2>Anında Sipariş</h2>
<i class="fas fa-shopping-cart fa-5x"></i>
</div>
<div class="column">
<h2>Hızlı Teslimat</h2>
<i class="fas fa-truck fa-5x"></i>
</div>
<div class="column">
<h2>Mmnuniyet Garantisi</h2>
<i class="fas fa-smile-beam fa-5x"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us">
<div class="container">
<form action="#">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="Enter your first name">
<label for="fname">Last Name</label>
<input type="text" id="lname" placeholder="Enter your last name">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</html>
/* Body */
body {
background-color: burlywood;
}
/* Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A800C
}
.nav-items {
display: inline;
float: left;
}
.nav-items a {
text-decoration: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-items a:hover {
background-color: #111;
}
/* Image section */
.column {
float: left;
width: 25%;
padding: 10px;
margin-top: 25px;
margin-left: 100px;
background-color: aqua;
}
#information {
background:url("resim2.jpg");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
#header {
text-align: center;
padding-top: 150px;
color: aqua;
font-size: 60px;
}
.lead {
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: center;
width: 20%;
padding: 10px;
height: 200px;
text-align: center;
background-color: burlywood;
}
.row {
margin-left:150px;
}
Thank you
Onur
the problem is you are using the
float
in your css that is makeing the problem
if you need your elements to be horizantly
add this to .row
.row {
margin-left: 150px;
display:flex;
}
remove this property from your css
.column
and wrap the items with a div that has this property
display:flex;
you can learn more about it here
https://www.youtube.com/watch?v=fYq5PXgSsbE
good luck!
look how i did it
https://stackblitz.com/edit/js-qjmbgj?file=index.html
https://js-qjmbgj.stackblitz.io
if you cant use display flex
use position :absolute ;
for more understanding
go here
https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position
Related
when i try to scroll the form the form-row content overlap on the navigation.
i am trying to make a form using bootstrap. but when i am adding a form-row or grid element for horizontal fields, the content or that form-row block overlap on my navigation panel on scrolling.
how can i make my form blocks below my navigation on scrolling.
body{
width:100%;
position: relative;
background-color: aliceblue;
display: flex;
margin: 0;
padding: 0;
}
#menu {
background-color: rgb(1, 9, 54);
width:300px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#menu .logo{
display: flex;
align-items: center;
color: aliceblue;
padding: 30px 0 0 30px;
justify-content: flex-start;
}
#menu .logo img {
width: 60px;
margin-right: 15px;
border-radius: 50%;
}
#menu .items {
margin-top: 40px;
}
#menu .items li {
list-style-type: none;
padding: 15px 0;
transition: 0.3s ease;
}
#menu .items li:hover{
background: #254893;
cursor: pointer;
}
#menu .items li:nth-child(1){
border-left: 4px solid white;
}
#menu .items li i{
color: blanchedalmond;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 16px;
margin: 0 16px 0 25px;
}
#menu .items li:hover i,
#menu .items li:hover a {
color : #f3f4f6;
}
#menu .items li a{
text-decoration: none;
color: rgb(134, 141, 151);
font-weight: 300px;
transition: 0.3s ease;
}
#interface {
width: calc(100% - 300px);
margin-left: 300px;
position: relative;
}
#interface .navigation {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 15px 30px;
border-bottom: 3px solid blue;
position: fixed;
width: calc(100% - 300px);
}
#interface .navigation .search {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 14px;
border: 1px solid #d7dbe6;
border-radius: 4px;
}
#interface .navigation .search input {
border: none;
outline: none;
font-size: 14px;
}
#interface .navigation .search i {
margin-right: 14px;
}
#interface .navigation .profile {
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 25px;
}
#interface .navigation .profile i {
margin-right: 20px;
font-size: 19px;
font-weight: 400;
}
#interface .navigation .profile img{
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
}
.i-name {
color: #444a53;
padding: 30px 30px 0 30px;
font-size: 24px;
font-weight: 700;
margin-top: 70px;
}
.values {
padding: 30px 30px 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.values .val-box {
background: #f3f4f6;
width: 235px;
padding: 16px 20px;
border-radius: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.values .val-box i {
font-size: 25px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #254893;
margin-right: 15px;
}
.values .val-box i:nth-child(1) {
background-color: rgb(3, 114, 114);
}
.values .val-box i:nth-child(2) {
background-color:rgb(80, 231, 181);
}
.values .val-box i:nth-child(3) {
background-color: cadetblue;
}
.values .val-box h3 {
font: 18px;
font-weight: 600px;
}
.values .val-box span {
font: 15px;
color: #444a53;
}
#interface .fbuttons {
margin-left: 25px;
}
and here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/f8bc328439.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section id="menu">
<div class="logo">
<img src="profile-pic.png" alt="" class="">
<h2>Farmer</h2>
</div>
<div class="items">
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user"></i>Add/Modify Farmer</li>
<li><i class="fas fa-chart-bar"></i>Check Details</li>
<li><i class="fas fa-tasks"></i>Store</li>
<li><i class="fas fa-infinity"></i>Buyback</li>
<li><i class="fas fa-sign-out-alt"></i>Logout</li>
</div>
</section>
<section id="interface">
<div class="navigation">
<div class="n1">
<div class="search">
<i class="fas fa-search"></i>
<input type="text" placeholder="search">
</div>
</div>
<div class="profile">
<i class="fas fa-bell"></i>
<img src="profile-pic.png" alt="">
</div>
</div>
<h3 class="i-name">Add/modify farmer</h3>
<div class="fbuttons">
<button class="btn btn-danger">REGISTER A NEW FARMER</button>
<button style="margin-left: 10px" class="btn btn-danger" >MODIFY FARMER DETAILS</button>
</div>
<div class="container"style="margin: 10px 0 500px 10px;">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="">
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="aadhar">Aadhar Number</label>
<input type="number" class="form-control" id="">
</div>
<div class="form-group col-md-5">
<label for="mobileno">Mobile number</label>
<input type="number" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" >
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputVillage">Village</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputVillage">Taluka</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputDistrict">District</label>
<select id="inputDistricts" class="form-control">
<option selected>Choose...</option>
<option></option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Pincode</label>
<input type="number" class="form-control" id="inputPincode">
</div>
</div>
<h4> Farm Details </h4>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" >
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputVillage">Village</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputVillage">Taluka</label>
<input type="text" class="form-control" id="inputVillage">
</div>
<div class="form-group col-md-3">
<label for="inputDistrict">District</label>
<select id="inputDistricts" class="form-control">
<option selected>Choose...</option>
<option></option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Pincode</label>
<input type="number" class="form-control" id="inputPincode">
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Survey number</label>
<input type="number" class="form-control" id="inputPincode">
</div>
<div class="form-group col-md-2">
<label for="inputPincode">Area</label>
<input type="number" class="form-control" id="inputPincode" placeholder="In acers">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</section>
</body>
</html>
I believe you're asking the "Sticky Header" question.
https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3
It does mean restructuring your form a little bit. The nav section should probably go outside the "interface" section.
An alternate approach is the "holy grail" aproach. Take what they have here: https://css-tricks.com/the-holy-grail-layout-with-css-grid/
and then just use the Aside, Nav, Article sections without the header and footer, and it's essentially what you're asking for.
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
I'm making a basic citation generator mockup with two columns: one for the list of already-generated citations, and one with a form to create a new one. Each element is in a div. Because the form is shorter in height than the citation list, I'm putting an example image underneath that could be replaced with an advertisment.
However, despite placing the first column (citation list) and second (form and ad) in different divs, the ad stays underneath the citation list:
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
#citationList {
display: inline-block;
float: left;
margin-left: 15%;
width: 30%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
margin-right: 15%;
width: 30%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm form label {
float: left;
}
#creationForm form input .textBox {
float: right;
}
#adSpace {
float: right;
}
<html>
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="col-sm">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
<li>Citations are listed here</li>
<li>This can be however long</li>
</ul>
</div>
</div>
<div class="col-sm">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<label for="someInput">Some input:</label>
<input id="someInput" type="text" class="textBox" />
<label for="moreInput">More input:</label>
<input id="moreInput" type="text" class="textBox" />
<label for="evenMoreInput">Even more input:</label>
<input id="evenMoreInput" type="text" class="textBox" />
<label for="muchMoreInput">Much more input:</label>
<input id="muchMoreInput" type="text" class="textBox" />
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</body>
</html>
use clear:both; as shown below
#adSpace {
float: right;
clear: both;
}
Here is the corrected CSS and HTML.
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
.contentContainer {
width:1200px;
margin:0 auto;
display: inline-block;
}
#citationList {
display: inline-block;
float: left;
width: 100%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
width: 100%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
.row {
margin:10px -15px;
}
#creationForm form label {
float: left;
width: 30%;
}
#creationForm form input.textBox {
float: left;
}
#adSpace {
float: left;
}
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="contentContainer">
<div class="col-md-6 col-sm-6">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
Looks like you don't have any citations made yet!
</ul>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<div class="row">
<label for="authorFirst">Author's first name:</label>
<input id="authorFirst" type="text" class="textBox" />
</div>
<div class="row">
<label for="authorLast">Author's last name:</label>
<input id="authorLast" type="text" class="textBox" />
</div>
<br />
<!-- Website -->
<div class="row">
<label for="pageTitle">Title of page/article:</label>
<input id="pageTitle" type="text" class="textBox" />
</div>
<div class="row">
<label for="siteTitle">Title of website:</label>
<input id="siteTitle" type="text" class="textBox" />
</div>
<br />
<!-- Dates -->
<div class="row">
<label for="datePublished">Date published:</label>
<input id="datePublished" type="text" class="textBox" />
</div>
<div class="row">
<label for="dateAccessed">Date accessed:</label>
<input id="dateAccessed" type="text" class="textBox" />
</div>
</form>
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
I'm trying to remove the white strip above the "form-strip" div and also center it to the middle of the page (exactly below the image) with no success. Any suggestions?
(I also used a CSS reset style).
Thanks!
HTML:
<!DOCTYPE html>
<html lang="he">
<meta charset="UTF-8">
<head>
<title>Title</title>
<link href="Styles/Reset.css" rel="stylesheet" />
<link href="Styles/Base.css" rel="stylesheet" />
</head>
<body dir="rtl">
<header>
<div class="title">
<h1>text come here</h1>
<h2>text come here</h2>
</div>
</header>
<div class="img-strip" align="center">
<img src="img/picture.jpg" class="image" />
</div>
<div class="form-strip" align="center">
<h1>text come here</h1>
<form method="post" accept-charset="utf-8" action="">
<input type="text" class="form-control" id="name" placeholder="text come here">
<input type="text" class="form-control" id="name" placeholder="text come here">
<input type="text" class="form-control" id="email" placeholder="text come here">
<input type="text" class="form-phone" id="phone" placeholder="text come here">
<ul>
<li>052</li>
<li>054</li>
<li>057</li>
</ul>
<input type="submit" value="text come here">
</form>
</div>
<div class="footer">
<img src="img/logo.png" class="logo" />
<div class="address">
<h1>text come here</h1>
<h2>text come here</h2>
</div>
</div>
</body>
</html>
CSS - base.css:
body{
direction: rtl;
background-color: #FFFFFF;
}
.title h1 {
font-family:"FbSpoiler";
font-size:18px;
color:#1BABCD;
text-align:center;
font-weight:lighter;
margin-top: 25px;
}
.title h2 {
font-family:"FbSpoiler";
font-size:22px;
color:#1BABCD;
text-align:center;
font-weight:bold;
margin-top: 3px;
margin-bottom: 7px;
}
img.image {
max-width: 100%;
clear: both;
}
.form-strip {
padding-top: 10px;
background-color:#016a88;
height: 70px;
clear: both;
overflow: hidden;
max-width: 920px;
}
.form-strip h1 {
font-family:"FbSpoiler";
font-size:15px;
color:#ffffff;
font-weight:lighter;
margin-bottom: 7px;
}
.form-control {
width: 200px;
height: 25px;
margin-left: 4px;
}
.form-phone {
width: 150px;
height: 25px;
}
.footer {
padding-top: 10px;
padding-right: 700px;
background-color:#ffffff;
height: 100px;
clear: both;
overflow: hidden;
max-width: 920px;
}
.address h1 {
font-family:"FbSpoiler";
font-size:10px;
color:#737676;
text-align:right;
font-weight:lighter;
margin-top: 5px;
margin-bottom: 3px;
}
.address h2 {
font-size:15px;
color:#737676;
text-align:right;
font-weight:lighter;
margin-top: 3px;
margin-bottom: 7px;
}
Try making the image in the div above the form-strip div a block element to get rid of the gap.
div.img-strip img {
display: block;
}
I'm not sure what you're trying to center - the div.form-strip? If so add left/right margins of 'auto' to it:
div.form-strip {
margin: 0 auto;
}
div.form-strip {
margin-left: 0px;
margin-right: 0px;
}