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.
Related
my <input type=text> are longer then <select> tags. How do I make inputs have the same width as selects?
form fieldset {
width: 50%;
margin: auto;
border: 3px solid grey;
padding: 10px;
}
form fieldset legend {
font-size: 20px;
font-weight: bold;
}
form label {
font-weight: bold;
font-size: 16px;
margin-top: 10px;
}
form input, select {
margin-bottom: 10px;
padding: 5px;
border: 0;
border-bottom: 1px solid grey;
font-size: 16px;
width: 100%;
font-family: 'Poppins';
}
form input[type=submit] {
font-size: 20px;
border: 0;
font-weight: bold;
margin-top: 10px;
}
form input:focus, select:focus {
outline: none;
border-bottom: 2px solid black;
}
form div.submit {
width: 20%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body>
<form method='POST' action='quotation.php?a=insert'>
<fieldset>
<legend>My legend</legend>
<label for='customer'>Customer: </label><br>
<select name='customer' id='customer'>
<option value='NULL'></option>
<option value='1'>Cust. 1</option>
<option value='2'>Cust. 2</option>
<option value='3'>Cust. 3</option>
</select><br>
<label for='contact_person'>Contact person: </label><br>
<select name='contact_person' id='contact_person'>
<option value='NULL'></option>
<option value='1'>CP 1</option>
<option value='2'>CP 2</option>
<option value='3'>CP 3</option>
</select><br>
<label for='project'>Project: </label><br>
<input type='text' name='project' id='project'><br>
<label for='part'>Part: </label><br>
<input type='text' name='part' id='part'><br>
<label for='recieved'>Recieved: </label><br>
<input type='date' name='recieved' id='recieved'><br>
<label for='deadline'>Deadline: </label><br>
<input type='date' name='deadline' id='deadline'><br>
<div class='submit'>
<input type='submit' value='Save'>
</div>
</fieldset>
</form>
</body>
</html>
Thank you for any idea.
I tried to set padding of whole fieldset:
fieldset { padding: 5px }
This is correct with tag but doesn't work with .
Then I tried to set: input {margin: 5px} but this didn't work as well. In the chrome DevTools i see that the margin is ouside of the fieldset area.
Because of padding, the border overflows the box so keep the top and bottom 5px and add 0 for right and left.
form input, select {
margin-bottom: 10px;
padding: 5px 0;
border: 0;
border-bottom: 1px solid grey;
font-size: 16px;
width: 100%;
font-family: 'Poppins';
}
Just update css style.
form input, select{
padding: 5px 0;}
I added this into CSS:
form input, select {
box-sizing: border-box;
}
This resolved my issue.
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 want to apply the background color inside the red border except that yellow circle.
Here my code and help me out to fix my problem:
http://codepen.io/mgkrish/pen/YNwqVO
<html>
<head>
<title>newtab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
background-color: #f5683d;
}
legend i{
font-size: 52px !important;
padding: 24px;
padding-left: 33px;
padding-right: 33px;
color:#ffffff;
background-color: #ffd200;
border: 1px solid #ffd200;
border-radius: 168px;
}
form{
width: 300px;
margin: 0 auto;
background-color: #ececec;
}
input{
margin-bottom: 20px;
width: 264px;
height: 40px;
text-align: center;
border:none;
color:#717171;
}
a{
padding-left: 29%;
text-decoration: none;
color:#f5683d;
}
#loginbutton{
background-color: #4591fb;
color:#ececec;
}
fieldset{
margin-right: 0;
margin-left: 0;
border-color:red;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend style="margin:0 auto;"><i class="fa fa-user"></i></legend>
<div>
<h1 style="font-size: 29PX; color:#717171;text-align: center;"> Member Login</h1>
<input type="name" name="username" placeholder="username" >
<br>
<input type="password" name="pswd" placeholder="password" >
<br>
<input type="button" value="LOGIN" id="loginbutton" >
Forgot Password?
</div>
</form>
</body>
Thanks in advance for help.
You need to move definition background-color: #ececec; from form to fieldset
http://codepen.io/anon/pen/EZPKRo
<html>
<head>
<title>newtab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
background-color: #f5683d;
}
legend i{
font-size: 52px !important;
padding: 24px;
padding-left: 33px;
padding-right: 33px;
color:#ffffff;
background-color: #ffd200;
border: 1px solid #ffd200;
border-radius: 168px;
}
form{
width: 300px;
margin: 0 auto;
}
input{
margin-bottom: 20px;
width: 264px;
height: 40px;
text-align: center;
border:none;
color:#717171;
}
a{
padding-left: 29%;
text-decoration: none;
color:#f5683d;
}
#loginbutton{
background-color: #4591fb;
color:#ececec;
}
fieldset{
margin-right: 0;
margin-left: 0;
border-color:red;
background-color: #ececec;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend style="margin:0 auto;"><i class="fa fa-user"></i></legend>
<div>
<h1 style="font-size: 29PX; color:#717171;text-align: center;"> Member Login</h1>
<input type="name" name="username" placeholder="username" >
<br>
<input type="password" name="pswd" placeholder="password" >
<br>
<input type="button" value="LOGIN" id="loginbutton" >
Forgot Password?
</div>
</form>
</body>
I'm not sure if I understand your question correctly.
But try to add an background-color to fieldset like that:
fieldset{
margin-right: 0;
margin-left: 0;
background-color: #ececec;
border-color:red;
}
add the style background-color to your fieldset
fieldset {background-color: green;}
So I have four inputs and a button. I tried editing them with CSS but I can't seem to get them to separate. They are all together. No matter what numbers I try to change. Here's my code for both files. Sorry if I get something totally wrong i'm a noob.
nav ul input{
margin: 0px 0px 10px 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
#signInBtn{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<header>
<nav>
<ul>
<?php
echo "<form action='includes/signup.inc.php' method='POST'>
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
<input id='usrInput' type='text' name='uid' placeholder='Username'>
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
<button id='signInBtn' type='submit'>Sign Up</button>
</form>";
?>
</ul>
</nav>
</header>
Try button,input {display:block} and the ul needs min. of one li
In your css your are using position absolute for all the input. That's why all input come all together.
nav ul input {
position: relative;
display: block;
}
#signInBtn {
position: relative;
}
just change it to something position relative or what suitable for you.
nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}
/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}
!you don't have to keep the margin 0 and float: none but i think its a good start before figureing out where you want everything
You are using position absolute, causing the overlap issue
and also you having wrong closing tag so I corrected your code, Please see demo below and tell me if you need anything else.
.wrapper {
margin: 0 auto;
}
.input_block {
text-align: center;
margin-top: 10px;
}
input {
padding: 20px;
width: 200px;
color: black;
border: solid;
font-size: 15px;
}
#signInBtn {
padding: 20px
width: 200px;
color: black;
border: solid;
font-size: 30px;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<form action='includes/signup.inc.php' method='POST'>
<div class="input_block">
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
</div>
<div class="input_block">
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
</div>
<div class="input_block">
<input id='usrInput' type='text' name='uid' placeholder='Username'>
</div>
<div class="input_block">
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
</div>
<div class="input_block">
<button id='signInBtn' type='submit'>Sign Up</button>
</div>
</form>
</div>
</body>
</html>
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.