This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
CSS- multiple background image
(3 answers)
Closed 5 years ago.
I've got three background images that I want to put at the bottom of the page, they are three pieces that fit together. So one has to be put at the bottom left, one at the center and one at the right. But sadly I can't seem to get them into place, I already have content on that page so it's kinda hard for me to put these backgrounds into place. Any advice on how to do this effectively?
HTML
html {
height: 100%;
width: 100%;
background-color: #fdb03c;
}
.cardbox {
border-radius: 5px;
padding: 20px;
#media only screen and (min-width: 480px) {
.cardbox {
margin-bottom: 16px; } }
#media only screen and (min-width: 992px) {
.cardbox {
margin-bottom: 24px; } }
}
.cardinputs input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.cardinputs input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<html>
<head>
<title>
Formulier
</title>
<link rel="stylesheet" href="css/cece.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQU7qWa3PGgsj2p86DkfcxAJoCyiukqnA&v=3.exp&sensor=false&libraries=places"></script>
</head>
<body>
<div>
<form class="cardinputs" method="post">
<div class="cardbox">
<table>
<th>
Gegevens:
</th>
<tr>
<td>
<label for="BTW">BTW Nummer:</label>
</td>
<td>
<input type="text" id="BTW" name="BTWnummer" maxlength="11" required autofocus>
</td>
<td id="company">
</td>
</tr>
<tr>
<td>
<label for="contactpersoon">Contactpersoon:</label>
</td>
<td>
<input type="text" id="contactpersoon" name="contactpersoon" required>
</td>
</tr>
<tr>
<td>
<label for="functie">Functie:</label>
</td>
<td>
<input type="text" id="functie" name="functie" required>
</td>
</tr>
<tr>
<td>
<label for="email">E-mailadres:</label>
</td>
<td>
<input type="email" id="email" name="email" required>
</td>
</tr>
<tr>
<td>
<label for="telefoonnummer">Telefoonnummer:</label>
</td>
<td>
<input type="text" id="telefoonnummer" name="telefoonnummer" required>
</td>
</tr>
<tr>
<td><input type="submit" id="formsubmit" name="submitformulier" disabled></td>
</tr>
</table>
</div>
</form>
</div>
</body>
<script src="js/javascript.js?t=<?php time(); ?>"></script>
</html>
Thank you in advance.
try to use bootstrap grid system, in that way you can put them in a row , and divide that row into 3 columns:
Small demo :
<div class="row">
<div class="col-md-4"> image 1 here </div>
<div class="col-md-4"> image 2 here </div>
<div class="col-md-4"> image 3 here </div>
</div>
In this way, you're giving each image 4 columns off the 12 columns of the page, they would be automatically positioned left - center - right.
Try Wrapping them all in an inline div with the following style:
display:flex
flex-direction: row
<div>
<imgLeft>
<imgCenter>
<imgLast>
</div>
That should do it.
First: I would use a container for them, for good practice, and the
EXAMPLE:
<div>
<Element-with-image>
<Element-with-image>
<Element-with-image>
</div>
Then I would float them all left, or use display: inline-block.
div element-with-image{
float: left;
}
or
div element-with-image{
display: inline-block;
width: 33.33%
}
and then I would give them a percentage of 33.333 each so they spread equally across the page. If you want them to be all the way at the bottom, just make sure that entire HTML block of code is at the very bottom of your page.
I hope that helps
Related
I have a <form> containing several <input /> fields. On some of these fields I have added a calendar widget for selecting a date - that is working without any problems.
html {
margin: 0px;
padding: 0px;
}
.img {
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
<h1>Example #1 (table)</h1>
<table>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</td>
</tr>
</table>
<h1>Example #2 (div)</h1>
<div>
<input />
<br/>
<input />
<br/>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</div>
My problem is a calendar icon next to the <input /> field. The height of all rows containing the calendar icon are increased by a few pixel:
How can I prevent this? I already set the width and height of the <img> to 20px and the <img> isn't higher than the <input />.
Unfortunately I have to change the position of the <img> otherwise it would be starting a few pixel above the <input />.
Instead of using position:relative; top:5px; on your image, use vertical-align:middle; on both the input and the img.
The vertical-align rule determines how inline elements of different heights should be positioned vertically on a line. The input and img elements have different vertical aligns by default, which is why you need to set it manually to achieve your desired effect.
Using top:5px pushes the image down by 5px from the top, which resulted with extra space between your lines. So remove that bit. Using top to center elements vertically is a bad idea anyway, as you may have images that are of slightly different sizes and it is more prone to getting disaligned again when more elements are introduced.
Demo:
html {
margin: 0px;
padding: 0px;
}
img {
width: 20px;
}
img, input{
height: 20px;
vertical-align: middle;
}
<h1>Example #1 (table)</h1>
<table>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</td>
</tr>
</table>
<h1>Example #2 (div)</h1>
<div>
<input />
<br/>
<input />
<br/>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</div>
If you want answer then use this code :
<style>
html {
margin: 0px;
padding: 0px;
}
.img {
float:left;
margin-left:4px;
}
.inpt_cls {float:left;}
</style>
To have icon in same line, use float:left on both element so they will be in one line and replace <input /> this to <input class="inpt_cls"/> so particular css will apply on input class.
and you will get what you want. Hope it help or let me know if there is any issue. Ty
I have the HTML code below. I am trying to align the text boxes so they line up one below the other. I have the CSS below that. Not successful. Note that the .Label and .TextBoxFor merely create and Label and Text box.
<div style="text-align: left; width: 1000px">
<fieldset>
<legend>Information</legend>
<div class="form-element-row">
#Html.Label("Collector")
#Html.TextBoxFor(model => model.Collector)
</div>
<div style="clear:both"></div>
<div class="form-element-row">
#Html.Label("Email")
#Html.TextBoxFor(model => model.Email)
</div>
</fieldset>
Here is the css
.form-element-row
{
float: left;
}
.form-element-row label
{
margin: 0px;
min-width: 400px;
}
.form-element-row input
{
margin: 0px;
width: 500px;
}
Try displaying your forms as list items like so:
.form-element-row label, .form-element-row textarea {
display: list-item;
list-style: none;
}
Easiest way is to use table. This way you will not have to worry about any alignments.
You can do it like this:
<div style="text-align: left; width: 1000px">
<fieldset>
<legend>Information</legend>
<table>
<tr>
<td style ="width:30%;">
XXX
</td>
<td>
<input type="textbox"/>
</td>
</tr>
<tr>
<td>
YyYY
</td>
<td>
<input type="textbox"/>
</td>
</tr>
</table>
</fieldset>
</div>
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
here's my code:
<div class="search-option">
<div id="slider-days" class="search-opt-left"></div>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</div>
I want to make the slider and input field algin to the middle of the line.
How can i do that ? Thanks !
My CSS:
.search-opt-left {
float: left;
width: 250px;
vertical-align: middle;
}
.search-opt-right {
float: left;
margin-left: 20px;
}
This can be buggy.
What I usually do is make a table. And since table rows start with vertically-centered alignments, it's quite simple.
<div class="search-option">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="slider-days" class="search-opt-left"></div>
</td>
<td>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</td>
</tr>
</table>
</div>
You may then alter your CSS to get rid of the un-needed stuff.
I have a problem with my html button and checkbox. Whenever I resize page especially making it very small my button and checkbox goes at the bottom. You can check it by running my code. I want the button and checkbox to stay on the same line with the textbox. Please help. Thanks in advance.
compresstest.html
<html>
<head>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div style="width: 100%;">
<input type="text" id="searchCompanyText" name="searchCompanyText" />
<input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" /> Active
</div>
<table id="tblTest" style="width: 100%">
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>Tom</td>
<td>UK </td>
</tr>
<tr>
<td>Hans</td>
<td>Germany</td>
</tr>
<tr>
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr>
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr>
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</table>
</body>
</html>
You can also use white-space: nowrap; on your div.
https://developer.mozilla.org/en/CSS/white-space
I have just added min-width style to the div. Have a look at
http://jsfiddle.net/tariqulazam/wmEYD/
<div style="width: 300px;" >
<input type="text" id="searchCompanyText" name="searchCompanyText" />
<input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" /> Active
</div>
Your width: 100% makes your element get width related to the parent object. Change it's value to non-relative: px, em...
Give your div a width, something that can contain all of the content you want but not 100% (as you have it now).
Here is your example altered with a width for the search box div:
http://jsfiddle.net/neilheinrich/xUd9k/