I'm new to HTML and I'm practicing some layouts in which I'm trying to get something like below:
But I'm having difficulties achieving the "Surname" layout which is beside the "Title" field and the "Surname" text box is aligned with the GivenName longer text box at the end.
I attempted the following:
But I couldn't seem to get surname to appear beside "Title" and ensuring the end of its text box is aligned with the given name textbox at the end.
Would appreciate some help on this.
HTML and CSS code:
.small_field {
width: 80px;
margin-left: 10px;
}
.long_field {
width: 200px;
margin-left: 10px;
}
.entity {
margin-top: 10px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>testform</title>
<link rel = "stylesheet" href = "test2.css">
</head>
<body>
<div class = "entity">
<label >Title</label>
<input type = "text" id = "title" disabled class = "small_field">
</div>
<div class = "entity">
<label >Surname</label>
<input type = "text" id = "surname" disabled class = "small_field">
</div>
<div class = "entity">
<label id = "">GivenName</label>
<input type = "text" id = "givenname" disabled class = "long_field">
</div>
</body>
Flex could be used here :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form,
.entity {
display: flex;
}
form {
flex-wrap: wrap;
}
.entity.full {
min-width: 90%;
}
.entity,
.entity>* {
flex: 1;
margin: 10px 10px 0 0
}
.entity>.long_field {
flex: 3.35;
}
input {
border: green solid;
}
label {
text-align: right;
padding-right: 1em;
}
<form>
<div class="entity">
<label>Title</label>
<input type="text" id="title" disabled class="small_field">
</div>
<div class="entity">
<label>Surname</label>
<input type="text" id="surname" disabled class="small_field">
</div>
<div class="entity full">
<label id="">GivenName</label>
<input type="text" id="givenname" disabled class="long_field">
</div>
</form>
see that guide to go further : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
grid is also a possibility , here is another guide https://css-tricks.com/snippets/css/complete-guide-grid/ .
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form {
padding: 10px;
}
form,
.entity {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.entity {
grid-template-columns: auto 1fr;
}
.entity.full {
grid-column: auto / span 2;
}
label {
width: 8em;
text-align: right;
}
input {
border: solid green;
}
<form>
<div class="entity">
<label>Title</label>
<input type="text" id="title" disabled class="small_field">
</div>
<div class="entity">
<label>Surname</label>
<input type="text" id="surname" disabled class="small_field">
</div>
<div class="entity full">
<label id="">GivenName</label>
<input type="text" id="givenname" disabled class="long_field">
</div>
</form>
There are lots of ways to place elements beside each other. A simple way is to put a div around the title and surname fields and give it display: flex.
I don't quite understand what ur trying to achieve, but if ur trying to change the position of Surname u can add position : absolute; in css and then with left : and top : u can put it anywhere
Related
I am trying to emulate this website:
To do this I have the following html code:
<div class= "grid">
<div class= "contact" id= "title">
<h2 class= "heading font-x2"> Contact message </h2>
</div>
<div class= "contact">
<img src="01130_bigsurlighthouse_1920x1080.jpg" width="auto" height="200">
</div>
<div class="contact" id= "contact" style = "color: steelblue">
<p class = "contact">Here, the input field gets a color when it gets focus (clicked on):</p>
<form id = "">
<input type="text" id="fname" name="fname" placeholder="First Name">
</form>
<form id = "form">
<input type="text" id="lname" name="lname" placeholder="Last Name">
</form>
</form>
</div>
And my CSS file looks like this:
.contact {
color: black;
background: white;
font-family:Georgia, "Times New Roman", Times, serif;
}
.heading{margin-bottom:20px; font-size:4rem;}
#title{
grid-column: 1 / 3;
font-family:Georgia, "Times New Roman", Times, serif;
text-align: center;
}
.font-x2{font-size:1.6rem;}
#service{
color:green;
float:center; margin:0 0 20px 0;
display: inline-block;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#form {
border: 2px solid #ccc;
box-sizing: 203px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
This produces a contactus page which looks like this:
I understand the color is not right to say the least. What I am wondering is how can i make the text field large in CSS stylesheet. As you can see they did not increase the font size to increase the size of the input field.
My second question is that I had to create 2 forms so have the input field stacked. Is there a way to stack the input field in CSS itself ?
Could you please advise how this can be accomplished?
You would like to use display: flex on container for right side to have children aligned vertically, and align-items: stretch helps to make them as wide as possible. I've also combined input and p under the form and fixed id (in css you were referencing non-existing #form id).
.contact {
color: black;
background: white;
font-family:Georgia, "Times New Roman", Times, serif;
}
.heading {
margin-bottom:20px; font-size:4rem;
}
#title {
grid-column: 1 / 3;
font-family:Georgia, "Times New Roman", Times, serif;
text-align: center;
}
.font-x2 {
font-size: 1.6rem;
}
#service{
color:green;
float:center; margin:0 0 20px 0;
display: inline-block;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#names {
display: flex;
flex-direction: column;
align-items: stretch;
}
#names > * {
padding: 0.5em;
margin: 0 1em 1em;
}
#names input {
font-size: 1.1em;
border: 0;
outline: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
<div class= "grid">
<div class= "contact" id= "title">
<h2 class= "heading font-x2"> Contact message </h2>
</div>
<div class="contact">
</div>
<div class="contact" id="contact" style="color: steelblue">
<form id="names">
<p class="contact">
Here, the input field gets a color when it gets focus (clicked on):
</p>
<input type="text" id="fname" name="fname" placeholder="First Name">
<input type="text" id="lname" name="lname" placeholder="Last Name">
</form>
</div>
</div>
Hey regarding you second question you can just put them inside one form. This comes handy in case you submit the form, as you have to submit only one and not multiple forms.
<form id = "contact-form">
<input type="text" id="fname" name="fname" placeholder="First Name">
<input type="text" id="lname" name="lname" placeholder="Last Name">
</form>
Then you can style the contact form in your css #contact-form in order to stack or put the forms in column. I would suggest display:block or display:flex + flex-direction: column (I prefer flex as it is more useful as you can also align-items where you want inside the div e.g align-items: center or use justify-content: space-between or space-around to play where your elements will be placed inside your div.
#contact-form {
display: flex;
flex-direction: column;
}
Now, back to your first question. To change the input size you can directly apply css to your input tags. Note that input can be of different type e.g text, email, password etc. In order to apply different style to different fonts you can access them input[text] on your css. You can also apply same style to all inputs by just selecting input on css. For instance you can try the following:
input[type="text"] {
font-size: 16px;
width=150px
height=20px
}
You can also specify the width and height in your input tag directly on your html file with inline style.
<input type="text" id="name" style="width: 200px; height: 40px">
You can define the size (i.e width) inside the input tag as below:
<input type="text" id="name" size="200">
In your input you can also define different constraints as well e.g minlength = minimum length allowed to that input field, or required so the filed will be required when you submit the form, etc...
Furthermore you can also use javascript to style the iinput if you are interested. Have a look https://www.techiedelight.com/set-width-input-textbox-html-css-javascript/
add this to your CSS to increase the font size of your input field
input {
font-size: 4em;
}
I have a media query that makes my container go to 90% width when the screen goes lower than 550px and when the password generator overflows it pushes the width to 500px instead of the 90%. How can i fix this? The overflow happens when I select one of the password options and set the length to 50.
Oof this website is hurting my eyes a bit,
Well it is because you are using flexbox on the body, to fix this try:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap");
body,
html {
padding: 0;
margin: 0;
background-color: blueviolet;
font-family: "Poppins", sans-serif;
color: black;
font-weight: 700;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 1.1em;
}
#generatorContainer {
width: 90%;
border: 2px solid white;
background-color: rgb(50, 64, 168);
padding: 0.5em;
}
#passwordContainer {
border-radius: 0.5em;
background-color: #3399ff;
overflow: auto;
}
.passwordFeaturesContainer {
display: flex;
justify-content: space-between;
margin: 0.5em 0;
}
#generatePasswordButton {
margin: 0 auto;
width: 80%;
display: block;
height: 60px;
}
#generatePasswordButton {
cursor: pointer;
background-color: rgb(50, 168, 52);
outline: none;
box-shadow: none;
color: rgb(50, 64, 168);
font-size: 1.2em;
font-weight: 700;
}
#media only screen and (min-width: 551px){
#generatorContainer {
width: 500px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script data-dapp-detection="">
(function() {
let alreadyInsertedMetaTag = false
function __insertDappDetected() {
if (!alreadyInsertedMetaTag) {
const meta = document.createElement('meta')
meta.name = 'dapp-detected'
document.head.appendChild(meta)
alreadyInsertedMetaTag = true
}
}
if (window.hasOwnProperty('web3')) {
// Note a closure can't be used for this var because some sites like
// www.wnyc.org do a second script execution via eval for some reason.
window.__disableDappDetectionInsertion = true
// Likely oldWeb3 is undefined and it has a property only because
// we defined it. Some sites like wnyc.org are evaling all scripts
// that exist again, so this is protection against multiple calls.
if (window.web3 === undefined) {
return
}
__insertDappDetected()
} else {
var oldWeb3 = window.web3
Object.defineProperty(window, 'web3', {
configurable: true,
set: function (val) {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
oldWeb3 = val
},
get: function () {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
return oldWeb3
}
})
}
})()</script></head>
<body>
<div class="flex">
<form id="generatorContainer">
<div id="passwordContainer">
<h2>Password Generator</h2>
</div>
<div class="passwordFeaturesContainer">
<label for="passLength">Password Length</label>
<input type="number" step="1" min="4" max="50" id="passLength" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="lowerCase">Contain Lowercase Letters</label>
<input type="checkbox" id="lowerCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="upperCase">Contain Uppercase Letters</label>
<input type="checkbox" id="upperCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="numbers">Contain Numbers</label>
<input type="checkbox" id="numbers" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="symbols">Contain Symbols</label>
<input type="checkbox" id="symbols" required="">
</div>
<button type="submit" id="generatePasswordButton">Generate Password</button>
</form>
</div>
<script src="main.js"></script>
</body></html>
I've added a flex div around the generator and added a class for flex as well... Try to avoid much styling on standard generated elements like html, body, script etc etc.. And please try start styling at a mobile perspective (most web users are commonly mobile users), so instead of using media-queries with max-width, use min-width: 551px; In your case you eventually dont need a media-query instead. If you are just using max-width: 500px; on your #generatorContainer its enough.
Happy coding!!
I have the following html code:
<div class="mdc-text-field steps_div" id="textfeild">
<input type="number" class="mdc-text-field__input" id="steps" name="name">
<label class="mdc-floating-label" for="steps">Steps</label>
<div class="mdc-line-ripple"></div>
</div>
This CSS centers the text box:
div#textfeild {
display: block;
margin: 0 auto;
width: 250px;
}
But this doesn't:
.steps_div {
display: block;
width: 250px;
margin: 0 auto;
}
Why does the first works and the second doesn't?
Using an id in CSS has higher priority than class.
In your case div#textfeild has more weight to css than .steps_div.
Even if you use .steps_div after div#textfeild - the first one will be leader, because of the weight and unique quality of id.
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>