Here is my code In HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Selection</title>
<link rel="stylesheet" href="style.css">
</head>
<body >
<div id="container" >
<form action="http://localhost:8084/CBGS/Allocate" method="Get">
<h1>College EXAM SECTION</h1>
<div id="sem">Semester:
<select name="sem">
<option value="3" >Sem3</option>
<option value="4">Sem4</option>
<option value="5">Sem5</option>
<option value="6">Sem6</option>
</select>
</div>
<div id="branch">Branch:
<select name="branch">
<option value="IT" >IT</option>
<option value="COMP">COMP</option>
<option value="MECH">MECH</option>
<option value="CIVIL">CIVIL</option>
<option value="EXTC">EXTC</option>
</select>
</div>
<div id="exam">
<input type="radio" name="exam" value="R" />REGULAR<br>
<input type="radio" name="exam" value="K"/>KT
</div>
<div id="numberstudent">
No of student
<input type="number" name="noOfStudent" min="1" max="100">
</div>
< input type ="submit">
</form>
</div>
</body>
</html>
and style .css is
body
{
margin: 0px auto;
width:700px;
//margin:0 auto;
//margin-left:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color: white;
line-height:1em;
background-image: url("image/tail-middle.jpg");
background-repeat: repeat-y;
}
#container
{
background:url(image/newsletter-bg.gif) ;
display: block;
border-radius:10px;
// border:10px solid ;//#EE872A;
//background-color: yellow;
width:600px;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
padding: 20px;
}
h1{
//color: black;
margin-left: 20px;
}
#sem , #branch, #exam,#numberstudent {
display: block;
//color: blueviolet;
}
#branch,#sem {
float: left;
}
#exam{
clear: both;
}
#numberstudent{
margin-left: auto;
margin-right: auto;
}
but here margin:0 auto not work,as my image not shift towards center,even i use margin-left it also not working,what wong in my code,any suggestion are most welcome
----------
body {
margin: 0px auto;
width: 700px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: white;
line-height: 1em;
background-image: url("image/tail-middle.jpg") #ccc;
background-repeat: repeat-y;
background-position: 50% 0;
}
.wrapper{
width:100%;
background-image:url("http://www.corelangs.com/html/html.png");
background-repeat:no-repeat;
}
#container {
background: url(image/newsletter-bg.gif);
display: block;
border-radius: 10px;
/*border:10px solid ;//#EE872A;
background-color: yellow;*/
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
padding: 20px;
}
h1 {
//color: black;
margin-left: 20px;
}
#sem,
#branch,
#exam,
#numberstudent {
display: block;
//color: blueviolet;
}
#branch,
#sem {
float: left;
}
#exam {
clear: both;
}
#numberstudent {
margin-left: auto;
margin-right: auto;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="container">
<form action="http://localhost:8084/CBGS/Allocate" method="Get">
<h1>College EXAM SECTION</h1>
<div id="sem">Semester:
<select name="sem">
<option value="3">Sem3</option>
<option value="4">Sem4</option>
<option value="5">Sem5</option>
<option value="6">Sem6</option>
</select>
</div>
<div id="branch">Branch:
<select name="branch">
<option value="IT">IT</option>
<option value="COMP">COMP</option>
<option value="MECH">MECH</option>
<option value="CIVIL">CIVIL</option>
<option value="EXTC">EXTC</option>
</select>
</div>
<div id="exam">
<input type="radio" name="exam" value="R" />REGULAR
<br>
<input type="radio" name="exam" value="K" />KT
</div>
<div id="numberstudent">
No of student
<input type="number" name="noOfStudent" min="1" max="100">
</div>
< input type="submit">
</form>
</div>
</div>
</body>
</html>
Please Try this
Try to add the following in your css:
body{margin: 0px auto !important; width:700px;}
Have you tried using the asterisk(*) selector before the body and setting the margin to 0?
Example:
* {
margin: 0;
}
Try to add text-align: center; in your css. Even if it's not text, this property is needed often.
Related
How can I get a design that looks like this:
Tried a select in a fieldset:
<!DOCTYPE html>
<html>
<head>
<style>
legend{margin:-20px 0;}
select{margin-top:20px; border:0;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Auswahl</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
</form>
</body>
</html>
The fieldset element is too big. It should lool like one element
You can try with the below code:
<!DOCTYPE html>
<html>
<head>
<style>
.row{
display: flex;
column-gap: 15px;
}
.form-select{
display: block;
width: 100%;
padding:10px 15px;
font-size: 16px;
font-weight: 400;
outline: none;
border: 1px solid #CCCCCC;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select{
position: relative;
padding: 10px 0 0 0;
width: 100%;
}
.custom-select:before{
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #CCCCCC;
position: absolute;
right: 15px;
top: 50%;
margin-top: 2px;
}
.custom-select label{
position: absolute;
left: 15px;
top: 0;
background-color: #FFF;
color: #333;
font-family: Arial;
padding: 0 10px;
}
.form-select:focus{
border: 1px solid #55935B;
}
.form-select:focus + label{
color:#55935B;
}
</style>
</head>
<body>
<form>
<div class="row">
<div class="custom-select">
<select class="form-select">
<option>Option1</option>
<option>Option2</option>
</select>
<label>Auswahl</label>
</div>
<div class="custom-select">
<select class="form-select">
<option>Option1</option>
<option>Option2</option>
</select>
<label>Jahr</label>
</div>
</div>
</form>
</body>
</html>
this one works
<!DOCTYPE html>
<html>
<head>
<style>
form{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 40vw;
height: 10vh;
background-color:rgba(0,0,0,0.01);
margin: 0 auto;
}
fieldset{
width:16vw;
height:3vh;
background-color: white;
border-radius: 10px;
}
legend{
margin:-10px 0;
}
select{
width: 16vw;
height: 3vh;
border:0; }
option{
width: 100%
}
</style>
</head>
<body>
<form>
<fieldset>
<legend class="legend">Auswahl</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
<fieldset>
<legend class="legend">Jahr</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
</form>
</body>
</html>
Using "min-width" you can set same width of your both select box.
fieldset {
min-width: 150px;
border-radius: 5px;
padding: 5px 15px 11px 15px;
display: inline-block;
}
select {
margin-top: 15px;
width: 100%;
outline: none;
border:0;
}
legend{margin:-20px 0;}
fieldset:hover {
border-color: #4caf50;
}
fieldset:hover legend{
color:#4caf50;
}
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<fieldset>
<legend>Auswahl</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
<fieldset>
<legend>Jahr</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
form { display: flex; margin: -10px 100% 0 0;}
legend{margin:-20px 0; }
select{margin-top:20px; border:0;}
fieldset {margin-right: 80%;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Auswahl</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
<fieldset>
<legend>Jahr</legend>
<select>
<option>Option1</option>
<option>Option2</option>
</select>
</fieldset>
</form>
</body>
</html>
I added a margin-right: 80%; to decrease the size of the fieldset to not take the entire row.
Then I added 2 fieldset's for Jahr and Auswahl, and in the form's css I added display: flex to align both of them in the same line, and then
Lastly I added a bit of margin top and right to really make them look like they're next to each other.
Here is the CSS and HTML that I am working with. I already tried at #media only screen. It didn't work so I got rid of that portion of code.
I will copy and paste my html and css down below. The code you see down below is mostly all I have so far.
Again I need a way to make the webpage fit all screens without shifting from their original positions and layout.
HTML-
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ListeningHere</title>
<link href="css.css" rel="StyleSheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<body>
<h1><img src="listening_here.png" alt="ListeningHere"></h1>
<div class="invisible">
<div class="first">
<h2>What is the season?</h2>
<div class="box">
<select name="season">
<option value=""></option>
<option value="Winter">Winter</option>
<option value="Summer">Summer</option>
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
</div>
</div>
<div class="first">
<h2>What is the time of day?</h2>
<div class="box">
<select name="season">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
<option value="Night">Night</option>
</select>
</div>
</div>
<div class="first">
<h2>What is the weather like?</h2>
<div class="box">
<select name="season">
<option value=""></option>
<option value="Sunny">Sunny</option>
<option value="Rainy">Rainy</option>
<option value="Cloudy">Cloudy</option>
<option value="Snowy">Snowy</option>
</select>
</div>
</div>
<div class="fourth">
<button>Submit</button>
</div>
</div>
</body>
</html>
CSS-
body {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Lato, sans-serif;
font color: black;
font-weight: 400;
background-color: #C1E5E5;
}
h1 {
padding-left: 50px;
}
h3 {
text-align: center;
font-size: 500%;
font-style: normal;
font-weight: 400;
}
.invisible {
margin:auto;
border-radius: 15px;
background-color: whitesmoke;
padding: 30px;
width: 60%;
height: 500px;
}
.first {
height: 150px;
width: 90%;
float: left;
text-align: center;
background-color: whitesmoke;
}
.second {
height: 150px;
width:90%;
float: left;
text-align: center;
background-color: whitesmoke;
}
.third {
height: 150px;
width:90%;
float: left;
text-align: center;
background-color: whitesmoke;
}
.fourth {
height: 50px;
width: 90%;
float: left;
text-align: center;
background-color: whitesmoke;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
border-radius: 8px;
}
.box {
position: absolute;
padding-left: 265px;
padding-right: 50px;
text-align: center;
}
.box select {
background: blue;
color: white;
padding: 10px;
width: 250px;
height: 50px;
border: none;
font-size: 20px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit appearance: button;
outline: none;
}
Change your .box to
.box {
margin-right: 5%;
text-align: center;
}
This worked for me. However I wasn't using whatever image you have so hopefully that wont interfere. Using position absolute is often a bad idea when trying to make a responsive website.
I have two boxes a text box and a drop down menu box.
The problem is that the drop down box align so far to the right.
What i want is to have the label text to the left. Then comes a defined amount of space. Then all boxes start at a certain position.
As it is right now the boxes all end at the same position.
body {
font-size: 100%;
background-color: black;
}
label {
float: left;
font-size: 1.3em;
padding-right: 0.625em;
}
.box {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
.main {
float: left;
}
.menu {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
<div class="main">
<div class="box">
<label for="test">test </label>
<input type="text" id="test" placeholder="placeholder" />
<div class="menu">
<label for="peashooter">peas</label>
<select id="peashooter">
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
</select>
</div>
</div>
I want the boxes to align to the drawn left line:
You can do it with grid layout.
Check: https://jsfiddle.net/filipasimao/Lca19d7z/
body {
font-size: 1.2rem;
background-color: black;
color: white;
}
.main {
display: grid;
grid-template-columns: 60px auto;
grid-row-gap: 5px;
}
<div class="main">
<label for="foo">foo</label>
<input type="text" id="foo" placeholder="foo placeholder" />
<label for="bar">bar</label>
<select id="bar">
<option value="bar1">bar 1</option>
<option value="bar2">bar 2</option>
<option value="bar3">bar 3</option>
<option value="bar4">bar 4</option>
</select>
</div>
One approach is to make label part fixed with some determined width up-front, e.g. 50 pixels, plus apply text-align:left as Sarthak Jha mentioned. You can also specify width in % and limit it with max-width in pixels, also use overflow hidden or auto etc. In-browser page zoom will not disrupt the alignment.
body
{
font-size:100%;
background-color:black;
}
label
{
float:left;
font-size:1.3em;
padding-right:0.625em;
width:15%;
min-width:45px;
max-width:150px;
}
.box
{
color:rgb(255, 255, 255);
clear:both;
text-align:left;
line-height:1.5625em;
}
.main{
float:left;
}
.menu
{
color:rgb(255, 255, 255);
clear:both;
text-align:left;
line-height:1.5625em;
}
<div class="main">
<div class="box">
<label for="test">test </label>
<input type="text" id="test" placeholder="placeholder" />
<div class="menu">
<label for="peashooter">peas</label>
<select id="peashooter">
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
</select>
</div>
</div>
.menu
{
color: rgb(255, 255, 255);
clear:both;
text-align:left;
line-height: 1.5625em; /* The distance between each box */
}
Make it " text-align: left "
You can use float: left on your #peashooter and give your label elements a width so that your inputs align correctly:
body {
font-size: 100%;
background-color: black;
}
label {
float: left;
font-size: 1.3em;
padding-right: 0.625em;
}
.box {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
.main {
float: left;
}
.menu {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
.main #peashooter {
float: left;
}
.main label {
width: 30px;
}
<div class="main">
<div class="box">
<label for="test">test </label>
<input type="text" id="test" placeholder="placeholder" />
<div class="menu">
<label for="peashooter">peas</label>
<select id="peashooter">
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
</select>
</div>
</div>
</div>
I just would like to know why my button tag is lower than select tag ?
This is my HTML :
<div class="wrap-form-planning">
<form class="form_search_order form-planning" name="form_search_client">
<!-- Chauffeur -->
<select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
<option value="" selected>Nom du chauffeur</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Client -->
<select type="search" name="client_name[]" class="select-client" multiple size="2">
<option value="" selected>Nom du client</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Semaine -->
<select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
<option value="" selected>Semaine</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
</form>
</div>
My CSS :
.wrap-form-planning{
display: block;
background-color: $bleu;
padding: 20px 0;
text-align: center;
}
.form-planning{
width:80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
select{
font-size: 14px;
margin-right: 10px;
width: (14%-10px);
border-radius: 0;
&.select-chauffeur{
min-width: 150px;
}
&.select-client{
min-width: 120px;
}
&.select-semaine{
min-width: 90px;
margin-right: 0;
}
}
.inp-submit-form-planning{
font-size: 14px;
color: white;
background: $bleu;
border: solid 2px white;
padding: 4px 9px;
&:hover{
color: $bleu;
background: white;
cursor: pointer;
transition: 0.6s;
}
}
}
here is a screen :
They're different sized inline-block elements, so they will aligned baseline by default. You also have a 2px white border on the search icon
You can use form.form_search_order > * { vertical-align: middle; } whatever vertical-align property you want.
But I would use a flex layout. Add display: flex to the form, and use align-items to align them vertically however you want. Also added justify-content: center to horizontally center them since you had text-align: center on the parent originally.
body {
background: blue;
}
.wrap-form-planning {
display: block;
padding: 20px 0;
text-align: center;
}
.form-planning {
width: 80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
}
.form-planning select {
font-size: 14px;
margin-right: 10px;
width: calc(14% - 10px);
border-radius: 0;
}
.form-planning select.select-chauffeur {
min-width: 150px;
}
.form-planning select.select-client {
min-width: 120px;
}
.form-planning select.select-semaine {
min-width: 90px;
margin-right: 0;
}
.form-planning .inp-submit-form-planning {
font-size: 14px;
color: white;
border: solid 2px white;
padding: 4px 9px;
}
.form-planning .inp-submit-form-planning:hover {
background: white;
cursor: pointer;
transition: 0.6s;
}
form.form_search_order {
display: flex;
align-items: flex-end;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrap-form-planning">
<form class="form_search_order form-planning" name="form_search_client">
<!-- Chauffeur -->
<select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
<option value="" selected>Nom du chauffeur</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Client -->
<select type="search" name="client_name[]" class="select-client" multiple size="2">
<option value="" selected>Nom du client</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Semaine -->
<select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
<option value="" selected>Semaine</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
</form>
</div>
I am developing a Chrome extension.
Sometimes when I'm clicking on the extension icon, divs are making like a "ladder":
I want it to be like this:
How can I ensure the currency fields are aligned properly?
Here is my markup:
<div class="calc">
<div class="in">
<img id="cur-img-in" src="img/AMD.gif"/>
<select name="currency-calc-cur" id="in-select">
<option selected="selected" value="AMD">AMD</option>
<option value="EUR">EUR</option>
<option value="RUR">RUR</option>
<option value="USD">USD</option>
</select>
<input type="text" id="in"/>
</div>
<img id='swap-cur' src="img/swap.png" alt="Swap"/>
<div class="out">
<img id="cur-img-out" src="img/USD.gif"/>
<select name="currency-calc-cur" id="out-select">
<option value="AMD">AMD</option>
<option value="EUR">EUR</option>
<option value="RUR">RUR</option>
<option selected="selected" value="USD">USD</option>
</select>
<input type="text" id="out"/>
</div>
</div>
And style:
.calc {
margin-top: 10px;
margin-left: 20%;
width: 60%;
}
.calc input[type="text"] {
width: 100%;
}
.calc #bank-list {
width: 100%;
}
.calc [name="currency-calc-cur"] {
width: 78%;
}
.calc .in {
width: 40%;
position: relative;
float: left;
}
.calc .out {
width: 40%;
position: relative;
float: right;
}
.calc #swap-cur {
margin: 17px 0 0 16px;
}
And my sources from GitHub if something is missing.
Your image likely needs to be floated as well.
.calc #swap-cur {
float: left;
margin: 17px 0 0 16px;
}