I want to align two fieldset offer & Demand inside the parent fieldset type. How to do for a simple case provided below? It includes both html & css.
I am using um-ordered list inside the parent fieldset. But the alignment does not work. Thank you in advance for your help.
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Align Fieldset</title>
<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
}
</style>
</head>
<body>
<p>Aligning offer & Demand on the same line</p>
<fieldset class="header">
<legend>Type</legend>
<ul class= "list">
<li>
<fieldset class="subheader">
<legend ><label>
<input type="radio" name="Type" value="Offer" checked="checked"
/>Offer</label>
</legend>
</fieldset>
</li>
<li>
<fieldset class="subheader">
<legend><label>
<input type="radio" name="Type" value="Demand">Demand</label>
</legend>
</fieldset>
</li>
</ul>
</fieldset> <!-- End of type -->
</body>
</html>
Since you have wrapped your fieldsets into a list, you should focus your attention to the ul and li. I cleaned out all of the extraneous styles. display: flex is what made this layout problem a cakewalk. The following is the relevant CSS that was changed:
.list {
list-style-type: none;
width: 100%;
display: flex;
}
.list li {
margin: 0 30px 0 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Align Fieldset</title>
<style>
.header {
width: 100%;
}
.subheader {
width: 100%;
font-size: medium;
}
.list {
list-style-type: none;
width: 100%;
display: flex;
}
.list li {
margin: 0 30px 0 0;
}
</style>
</head>
<body>
<p>Aligning offer & Demand on the same line</p>
<fieldset class="header">
<legend>Type</legend>
<ul class="list">
<li>
<fieldset class="subheader">
<legend>
<label>
<input type="radio" name="Type" value="Offer" checked="checked" />Offer</label>
</legend>
</fieldset>
</li>
<li>
<fieldset class="subheader">
<legend>
<label>
<input type="radio" name="Type" value="Demand">Demand</label>
</legend>
</fieldset>
</li>
</ul>
</fieldset>
<!-- End of type -->
</body>
</html>
Not related to the question: I changed your meta to utf-8.
try this
<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
/* change */
width: auto;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
}
/* add */
li{
float:left;
}
</style>
You can add a specific width to ".list"(ex:100%) and specific with to ".subheader" elements(remove clear:both from it).
Try to not use display:inline-block and float at same time.
Related
CSS:
body{
background-color: #d90429;
margin:0%;
padding:0%;
overflow-x:hidden;
text-align: center;
}
.form{
display:inline-block;
justify-content: center;
}
HTML :
<body>
<!-- <h2 class="subHeading">EXPLORE</h2> -->
<h1 class="heading">REGISTER</h1>
<form action="" class=form>
<input type="text" id=email>
<label for="email">Email</label>
</form>
</body>
Here are my code. Help me to find out the solution
Screenshot of problem
try setting margin-left to auto and margin-right to auto and remove the current css.
Alternatively you could use display:flex, flex-direction:row, justify-content:center
Try this:
body{
background-color: #d90429;
margin:0%;
padding:0%;
overflow-x:hidden;
text-align: center;
}
h1 {
color: #fff;
}
.form{
background: blue;
display:block;
width: 300px;
margin: 0 auto;
}
.form div {
margin-bottom: 10px;
}
.form label {
width: 100px;
text-align: left;
display: inline-block;
}
<!-- <h2 class="subHeading">EXPLORE</h2> -->
<h1 class="heading">REGISTER</h1>
<form action="" class=form>
<div>
<label for="email">Email: </label>
<input type="text" id=email>
</div>
<div>
<label for="password">Password: </label>
<input type="text" id=password>
</div>
</form>
Change it from inline-block to block also justify content does not work outside of a flex element. Change you form class with this
body{
width:100vw;
height:100vh;
background-color: #d90429;
margin:0%;
padding:0%;
overflow-x:hidden;
text-align: center;
}
.form{
display:block;
margin:auto;
max-width:50rem;
}
Add a max width of 50 or just to see it
I am confused. I got this form, jsfiddle:
https://jsfiddle.net/rx90f38u/1/
It has the styling in there and I can't work out why "remember" me shows under the checkbox.
The checkbox and label should be on same line and centered.
CSS:
.bbp-login-form input[type=text], .bbp-login-form input[type=password], .bbp-login-form select {
width: 100% !important;
display: inline-block !important;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-sizing: border-box;
color: #000;
background-color: #c1c1c1;
}
.bbp-login-form label {
text-align:left;
width: 100% !important;
margin: 10px 0;
display: inline-block !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<h2 class="widgettitle">Support Forums</h2>
<form action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form" method="post">
<fieldset>
<div class="bbp-username">
<label for="user_login">Username: </label>
<input id="user_login" name="log" size="20" tabindex="103" type="text" value="">
</div>
<div class="bbp-password">
<label for="user_pass">Password: </label>
<input id="user_pass" name="pwd" size="20" tabindex="104" type="password" value="">
</div>
<div class="bbp-remember-me">
<input id="rememberme" name="rememberme" tabindex="105" type="checkbox" value="forever">
<label for="rememberme">Remember Me</label> </div>
</fieldset></form>
</body>
If I add this CSS then I get Remember Me center:
.bbp-login-form .bbp-remember-me label {
text-align: center;
width: 50%;
}
But even if I reduce the width still a problem.
Try this
.bbp-login-form .bbp-remember-me label {
text-align: left;
width: auto !important;
vertical-align: initial;
}
Try this css
.bbp-login-form label {
margin: 10px 0;
display: inline-block !important;
}
.bbp-remember-me{
text-align: center;
}
https://jsfiddle.net/jdfkbvrt/
You can use Flexbox to do the job .
.bbp-remember-me{
display:flex;
justify-content:center;
align-items:center;
}
https://jsfiddle.net/xh831fnd/1/
I have some tags (h4, p, ul, and li) that are in use (CSS included of those interfering elements) on another page that are styled to be centered. I have the same tags on a different page, but don't want them to be styled the same. The HTML included is of the page I want the tags to be different, not the original page the styled tags are styled for.
My code:
h4 {
text-align: center;
}
/*Paragraph Stuff*/
p {
text-align: center;
}
/*Header Things*/
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
/*Contact Stuff*/
.left {
float: left;
}
.right {
float: right;
}
/*Contact Header Stuff*/
#headerLeft {
text-align: left;
}
#headerRight {
text-align: right;
}
/*Contact p stuff*/
#pLeft1 {}
#pLeft2 {
text-align: left;
}
#pRight1 {
text-align: right;
}
#pRight2 {
text-align: right;
}
/*Contact ul & li stuff*/
#ulLeft {
text-align: left;
}
#liLeft1 {
text-align: left;
float: left;
}
#liLeft2 {
text-align: left;
float: left;
}
#liLeft3 {
text-align: left;
float: left;
}
/*About List Stuff*/
ul {
margin: 0 auto;
width: 1200px;
padding-left: 0;
font-size: 0;
}
li {
font-size: 18px;
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px auto;
box-sizing: border-box;
text-align: center;
}
<div class="wrapper">
<div class="wrapper__section">
<h3 id="headerLeft"> Want to be informed of new content? </h3>
<p id="pLeft"> Then join my newsletter and never miss out again! </p>
<form>
<!-- Start Form -->
<label for="fName">First Name:</label>
<input type="text" id="fName" name="fName">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<p>I would like more information about:</p>
<ul id="ulLeft">
<li><input type="checkbox" name="newart" id="newart" value="newart" class="chkbx">New Art</li>
<li><input type="checkbox" name="announ" id="announ" value="announ" class="chkbx">Announcements</li>
<li><input type="checkbox" name="commi" id="commi" value="commi" class="chkbx">Commissions</li>
</ul>
<input type="submit" id="submit" value="Submit" class="btn">
<input type="reset" id="reset" value="Reset Form" class="btn">
</form>
</div>
<div class="wrapper__section">
<h3 id="headerRight"> Want a commission?</h3>
<p>Contact me # </p> KaijuMyDude#gmail.com
<p> or DM me on social media </p>
<img src="Images/instaicon.png" style=" width: 5%;" alt="Instagram logo">
</div>
</div>
Multiple ways of doing this, here are a few:
1) Attach a separate style sheet to the head of the second page with whatever tag styles you'd like
2) Use classes to specify a style onto an element. A class will overwrite a tag style because it is more specific.
https://www.w3schools.com/html/html_classes.asp
example.
HTML:
<div class="alignLeft"></div>
CSS:
.alignLeft{
text-align:left;
}
3) Style the element inline, these styles will override MOST CSS file styles
example.
HTML
<div style="text-align:left;"></div>
Also I recommend going through some of the https://www.codecademy.com/ tutorials if you're just starting out.
I am working on site with fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
When I reduce the height of the browser window size
I am noticing 2 probelms:
The scroller height doesnt change with the height of the browser.
When the height is reduced the fixed button shows on top of the scroller
How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
I've made a JSFiddle demonstration of my problem here ->
MY JSFIDDLeDEMO
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in JSfiddle:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Case Studies
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
1. The scroller height doesnt change with the height of the browser.
That is because you have set a fixed height for #form-b, set at 500px:
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
2. When the height is reduced the fixed button shows on top of the scroller
It is unnecessary to wrap the submit button with a fieldset. Simply absolutely position the submit button relative to the containing parent, <form>.
3. How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
Fixed position as in, fixed in the viewport, or fixed relative to the scrolling div? Moreover, you will have to rely on JS to readjust the height of the form whenever browser height changes, something along the line of:
$(document).ready(function() {
$(window).resize(function() {
// Set <form> height here with calculations (...)
$("#form-b).height(...);
}).resize(); // Trigger another resize when document is ready
});
hello i have a problem using my editor. i'm using dreamweaver cs6 and would like to use a fieldset.
the problem with that is that i tried to implement my original code from here:
original code
where i thought it used to be same style in my editor. but it is not the same as in the example. as a result i will get this:
as you can see on left hand side it seems to be that there are automatically added tabs in there so that the input fields not flushes with the dark frame.
if there is someone who could tell me how to solve this i really would appreciate. thanks a lot.
UPDATE:
the picture above is what i will see in dreamweaver.
when i publish it on my webserver with that code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#left {
height: 400px;
width: 500px;
float: left;
border: solid 2px #f23;
}
#left #frame {
background-color:#444444;
height: 337px;
width: 440px;
margin-top: 36px;
}
#left #frame form fieldset {
height: 337px;
width: 440px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border: none;
}
#left #frame form fieldset h1 {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
}
#left #frame form fieldset h2 {
font-size: 13px;
font-weight:lighter;
margin-left: 10px;
margin-top: 3px;
}
#left #frame form fieldset ul {
list-style-type: none;
margin-top: 30px;
}
#left #frame form fieldset ul .fl label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul .fr label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul input {
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
}
#left #frame form fieldset ul .fl {
width: 180px;
float: left;
margin-bottom: 15px;
background-color: #f23;
margin-left: 0px;
}
#left #frame form fieldset ul .fr {
width: 180px;
float: right;
margin-bottom: 15px;
background-color: #0F6;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="left">
<div id="frame">
<form action="" method="post">
<fieldset>
<h1>Text 1</h1>
<h2>text 2</h2>
<ul>
<li class="fl">
<label for="label1">Label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>
<li class="fr">
<label for="label2">Label 2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>
<li class="fl">
<label for="label3">Label 3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>
<li class="fr">
<label for="label4">Label 4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>
<li class="fl">
<label for="label5">Label 5</label>
<input type="text" id="label5" name="label5" tabindex="50" autocomplete="off">
</li>
<li class="fr">
<label for="label6">Label 6</label>
<input type="text" id="label6" name="label6" tabindex="60" autocomplete="off">
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</body>
</html>
i will get as a result:
and entering the same code on jsfiddle will result:
this
It will probably be an automatic padding/margin issue, try 0'ing out all your values as the first thing you do, then you can set the values as you want
* {
margin:0;
padding:0;
}