This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
Related
I have this HTML code that i gave been working on and its giving me a error on the closing div tag
Here is the code. If anyone can help it would be appreciated :)
I knows its messy but I have just started web development. I have tried but I don't think the closing div tags are self closing. I assume that I am missing an ending tag or missing a closing tag in general.
body {
background-color: lightblue;
}
blockquote{
font-size: 100px;
color: chocolate;
}
h3 {
font-size: 70px;
}
h4 {
font-size: 130px;
}
.grid-container {
display: grid;
grid-column-gap: 0px;
}
h1 {
font-size: 200px;
text-align: center;
font-style: initial;
}
<!DOCTYPE html>
<head>
<link rel="ico" type="image/ico" href="Pauldinio icon.ico" />
<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a" />
<link rel="icon" href="Pauldinio icon.ico" type="image/ico"/>
<title>Paul Jordan IT</title>
<h1>Paul Jordan IT</h1>
<Link rel="stylesheet" type="text/css" href="Paul Jordan.css">
<Link rel="stylesheet" type="text/css" href="lightsaber.css">
<style>
.grid-container {
display: grid;
grid-column-gap: 0px;
grid-template-columns: 1 1 1;
background-color: lightblue;
padding: 0px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 5px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-container">
<div class="grid-item">
<div class="grid-item">
<em>This is a good Youtube Channel</em>
Paul Jordan IT <br>
</div>
<div class="grid-item">
<h2>Small Paul <br></h2>
<div ALIGN = "left">
<img src="Pauldinio.PNG" alt="Pauldinio" sizes="5000" srcset="Pauldinio.PNG 5000w">
</div>
</div>
<div class="grid-item">
<h3>Medium Paul <br></h3>
<div ALIGN = "left">
<img src="Pauldinio.PNG" alt="Pauldinio" sizes="1000" srcset="Pauldinio.PNG 1000w">
</div>
</div>
<div class="grid-item">
<h4>Big Paul <br></h4>
<div ALIGN = "left">
<img src="Pauldinio.PNG" alt="Pauldinio" sizes="1000" srcset="Pauldinio.PNG 500w">
</div>
<font-size:50>
<blockquote>"Take No Prisoners" - Paul Jordan 29/09/2021</blockquote>
</font-size:50>
</div>
<div class="grid-item">
<div class="grid-item">
<div ALIGN = "bottom">
<label for="green">Green</label>
<input type="radio" id="green" name="color" checked>
<label for="blue">Blue</label>
<input type="radio" id="blue" name="color">
<label for="yellow">Yellow</label>
<input type="radio" id="yellow" name="color">
<label for="purple">Purple</label>
<input type="radio" id="purple" name="color">
<label for="red">Red</label>
<input type="radio" id="red" name="color">
<label for="darksaber">Darksaber</label>
<input type="radio" id="darksaber" name="color">
<div class="lightsaber">
<input type="checkbox" id="on-off">
<div class="blade"></div>
<label class="hilt" for="on-off">
</label>
<embed src="https://assets.codepen.io/308367/coolsaber.mp3" type="">
</div>
</div>
</div>
</div>
</div>
The comments are good to point you in the correct direction with the validators. To answer your question on what is wrong and needs to be fixed is the closing head tag before the div tags. Also you don't have body tags but are using body tags in your css. Start with those changes then run it through the validator and make changes via those suggestions.
Using my iPhone to preview a webpage I'm working on, I notice that whenever I click an input, I see a brief flash of grey behind it.
I've stripped out all the CSS but the grey flashing remains. It's not visible on desktop Safari, only mobile Safari.
What is causing it? How do I stop it from happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why do the inputs flash?</title>
<style type="text/css">
input {
display: block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
</style>
</head>
<body>
<input type="radio" name="mode" id="mode1" value="mode1">
<label for="mode1">Mode 1</label>
<input type="radio" name="mode" id="mode2" value="mode2">
<label for="mode2">Mode 2</label>
<input type="radio" name="mode" id="mode3" value="mode3">
<label for="mode3">Mode 3</label>
<label for="hello">
<input checked type="checkbox" id="hello">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Check me</span>
</label>
<form action="">
<label for="text-input">
Enter text
<input type="text">
</label>
<label for="email-iput">
Enter email here
<input type="email">
</label>
</form>
</body>
</html>
I googled the American spelling gray and found an answer on CSS-tricks.
-webkit-tap-highlight-color: rgba(0,0,0,0);
And then to allow :active styles to work in your CSS on a page in Mobile Safari:
document.addEventListener("touchstart", function(){}, true);
Edit
Actually, I only need -webkit-tap-highlight-color: rgba(0,0,0,0); to override the grey flash.
Use display: inline-block; instead of display: block;
Tested in the newest Safari Version in IOS 15
Here's an example:
/* Ignore this */
* {
margin: 0;
padding: 0;
}
/* Width part */
#first {
display: block;
background: red;
}
#second {
display: inline-block;
background: red;
}
<p id="first">This has a 100% width</p>
<br>
<p id="second">This text has a background color based on the texts lenght</p>
So change this:
input {
display: block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
to this:
input {
display: inline-block;
width: 100%;
border-width: 0 0 1px 0;
border-radius: 0px;
}
or just this:
input {
display: inline-block;
}
<input type="checkbox">
Radio and checkbox elements should not use width property in the sense you are using it. It should be fixed element size whatever it is. If you want it to take up an entire row, you should wrap it in a div. As bellow.
However, there might be a CSS way to manage the color via the use of :focus selector. But I cannot test it, since I don't have access to iPhone.
input:focus {
background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why do the inputs flash?</title>
<style type="text/css">
input {
display: block;
border-width: 0 0 1px 0;
border-radius: 0px;
}
</style>
</head>
<body>
<div class="i-should-be-full-width">
<input type="radio" name="mode" id="mode1" value="mode1">
</div>
<label for="mode1">Mode 1</label>
<input type="radio" name="mode" id="mode2" value="mode2">
<label for="mode2">Mode 2</label>
<input type="radio" name="mode" id="mode3" value="mode3">
<label for="mode3">Mode 3</label>
<label for="hello">
<input checked type="checkbox" id="hello">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Check me</span>
</label>
<form action="">
<label for="text-input">
Enter text
<input type="text">
</label>
<label for="email-iput">
Enter email here
<input type="email">
</label>
</form>
</body>
</html>
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!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">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
I need to beautifully design the "switches". Found an example on one site. How can I do the same? Please give a link to a similar example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Switches</title>
</head>
<body>
<form>
<p><input name="tech" type="radio" value="computer" checked>compute</p>
<p><input name="tech" type="radio" value="xbox">xbox</p>
<p><input name="tech" type="radio" value="playstation">playstation</p>
<p><input name="tech" type="radio" value="Game">Game</p>
<p><input name="tech" type="radio" value="TV">TV</p>
</form>
</body>
</html>
Here is an example of what I want to get.
You could do it like this.
You hide the radio circle but if you select it (by the label) you change the style of the label.
input{
display: none;
}
input + label{
font-size: 14px;
border: #9c94bb 1px solid;
width: 130px;
background-color: #ffffff;
transition: background-color .3s;
color: #000000;
text-align: center;
padding: 7px 0;
display: inline-block;
margin-right: 10px;
}
input:checked + label{
background: #ece8ff;
}
form{
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Switches</title>
</head>
<body>
<form>
<p>
<input name="tech" type="radio" value="computer" id="computer" checked>
<label for="computer">computer</label>
</p>
<p>
<input name="tech" type="radio" value="xbox" id="xbox">
<label for="xbox">xbox</label>
</p>
<p>
<input name="tech" type="radio" value="playstation" id="playstation">
<label for="playstation">playstation</label>
</p>
<p>
<input name="tech" type="radio" value="Game" id="game">
<label for="game">Game</label>
</p>
<p>
<input name="tech" type="radio" value="TV" id="tv">
<label for="tv">TV</label>
</p>
</form>
</body>
</html>
I have created a form that is aligned horizontally with the labels on top.
I had some difficulty aligning the = button, and I used a trick with   to align it. I couldn't find any better solution for this, is there something better to do?
I want to apply a border around the form and align it in the center of the page.
I have tried several things, like placing it inside a table, or using another div but with no success.
This is my code until now (I have not included the script for the calculations):
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</div>
</form>
</body>
</html>
You can create a wrapper DIV around it and make that a flex container, using the following settings to achieve the centering both horizontally and vertically:
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
padding: 10px;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</div>
</body>
</html>
What you might do is give the form a width and use margin: 0 auto to align it in the middle and set overflow: auto;
For example:
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right:20px;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div>
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div>
<label for="O">Operator</label>
<select name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div>
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div>
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div>
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</body>
</html>