Currently my search bar is in the navigation bar but on a different line and I was wondering why it is doing this. I stays the same even when I make the writing smaller and change the padding and margin.
I am doing this in class
this is my code all help is appreciated
<!--
#navbar ul {
margin: 0;
padding-right: 5px;
list-style-type: none;
text-align: center;
background-color: #fafafa;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
font-size: 29px;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #fafafa;
}
#navbar ul li a:hover {
color: #000;
background-color; #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
<li>Rowing</li>
<li>School</li>
<li>Attractions</li>
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="https://www.google.com/cse/tools/onthefly? form=searchbox_demo&lang="></script>
</ul>
</div>
Because is a block level element and, by default, block level elements begin in a new line. That is why in this case, the containing the search bar goes to a new line - under the navbar. By making it appear as an inline element, the will stay in the same line with the <li> elements that are, as you can see in the style above, also set to be displayed as inline elements.
Put this in your CSS:
form{
display:inline;
}
Related
I am struggling to center labels inside radio button with position:absolutes. The thing is that the labels are different (M, L , XL ) and my list renders with map. So my top/left values apply for each radio button in the same way.
Here is the li element:
{["M", "L", "XL"].map((size, index) => (
<li key={index}>
<label className={styles.sizeLabel}>
<input
type="radio"
value={size}
checked={size === selectedSize}
onChange={handleChange}
className={styles.radioButton}
key={size}
/>
<span className={styles.sizeText}>{size}</span>
</label>
</li>
))}
And here is my styling :
.sizeLabel span {
position: absolute;
left: 22%;
top: 5%;
font-size: 20px;
font-family: RobotoRegular;
font-style: normal;
font-weight: normal;
color: #272727;
overflow: hidden;
text-align: center;
}
Perhaps there is any better solution for how to make it better. This is how it shows right now, as you see it is not centered : https://prnt.sc/sz3ecl
I would suggest that you use flex, something like (inner span will be centered horizontally and vertically) :
.sizeLabel {
display: flex;
align-items: center;
justify-content: center;
}
.sizeLabel span {
font-size: 20px;
font-family: RobotoRegular;
font-style: normal;
font-weight: normal;
color: #272727;
overflow: hidden;
text-align: center;
}
Flex allows you to center elements, it will do the math for you based on the elements size and available space in parent element.
https://yoksel.github.io/flex-cheatsheet/
Trick to center something with position absolute is that you need to do 2 things:
set top and left of the element to 50%.
above step will center the top left corner of the element in the center of its parent element. To bring the element's center in the center of its parent element, you need to translate it by setting transform to translate(-50%, -50%)
ul {
list-style: none;
}
li {
margin: 20px 0 0 0;
}
label {
background: #f99;
padding: 10px;
width: 50px;
height: 50px;
display: flex;
position: relative;
border-radius: 50px;
}
label input {
opacity: 0;
}
label span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<label>
<input type="radio" value="1" checked="true" />
<span>M</span>
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked="true" />
<span>L</span>
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked="true" />
<span>XL</span>
</label>
</li>
</ul>
You could also use flexbox for centering anything horizontally and vertically. In your case, you will need to set display: none on the input element for it to work.
ul {
list-style: none;
}
li {
margin: 20px 0 0 0;
}
label {
background: #f99;
padding: 10px;
width: 50px;
height: 50px;
display: flex;
border-radius: 50px;
align-items: center;
justify-content: center;
}
label input {
display: none;
}
<ul>
<li>
<label>
<input type="radio" value="1" checked="true" />
<span>M</span>
</label>
</li>
<li>
<label>
<input type="radio" value="2" checked="true" />
<span>L</span>
</label>
</li>
<li>
<label>
<input type="radio" value="3" checked="true" />
<span>XL</span>
</label>
</li>
</ul>
I'm trying to have my li element align in the middle - vertically.
But it looks like vertical-align is not working. Any ideas?
HTML
<body>
<div class="toolbar">
<ul>
<li>
<input type="radio" value="one" name="try" />
<img src="try1_30X30.png"/>
hello
</li>
<li>
<input type="radio" value="two" name="try" />
<img src="try2_30X30.png"/>
world
</li>
</ul>
</div>
</body>
CSS
.toolbar ul {
list-style-type: none;
height: 50px;
}
.toolbar ul li {
float: left;
display: block;
line-height: 50px;
padding-left: 10px;
vertical-align: middle;
}
Try to apply the vertical-align property to the img tag itself.
Please see code below or working example here (http://jsbin.com/oxoMeCo/1/)
<html>
<head>
<style type="text/css">
.toolbar ul {
list-style-type: none;
height: 50px;
}
.toolbar ul li
{
float: left;
display: block;
line-height: 50px;
padding-left: 10px;
}
.toolbar ul li img {
vertical-align:middle;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<input type="radio" value="one" name="try" />
<img src="http://placehold.it/30x30">
hello
</li>
<li>
<input type="radio" value="two" name="try" />
<img src="http://placehold.it/30x30">
world
</li>
</ul>
</div>
</body>
</html>
I have a table with background image shown in my site. The FF and chrome looks normal but not in IE. The background image seems to shift and generate wired result. I was wondering if anyone here can help me out on this one. Please see attached picture. Thanks for the help.
<section>
some html....
<form action="http://localhost/jobSearch/add_project/validate" method="post" accept-charset="utf-8">
<fieldset>
<legend>ADD NEW PROJECT</legend>
<label>Parcel</label>
<input type="text" name="parcel" value="">
<label>Lot Number</label>
<input type="text" name="lot_number" value="">
<label>Block</label>
<input type="text" name="block" value="">
<label>Subdivision</label>
<input type="text" name="subdivision_name" value="">
<label>Section/Phase</label>
<input type="text" name="section_phase" value="">
<input type="submit" name="submit" value="Add Project" id="submit">
</fieldset>
</form>
more html.....
</section>
CSS:
form {
display: block;
}
form fieldset {
font: bold 1.1em helvetica;
}
form label{
float:left;
display:block;
width:140px;
font:bold 1.1em Helvetica;
margin:5px;
}
fieldset{
color:black;
font:bold 1.2em Helvertica;
width:400px;
margin: 20px auto;
padding: 10px;
border:1px solid grey;
background:url('../images/background.jpg');
}
form input {
font-size: .9em;
padding: 4px 6px;
border: solid 1px #AACFE4;
margin: 5px;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
form #submit {
cursor: pointer;
font: bold 1em Helvetica;
padding: 4px 2px;
border: solid 1px #AACFE4;
margin: 5px;
width: 100px;
}
Your tags are not properly nested. You open with <form>, but close with </fieldset>. You need to swap the locations of the closing tags in the example below to correct the nesting issue.
<form ...>
<fieldset>
<!-- content removed -->
</form>
</fieldset>
OK, so my stupid little login form almost looks how I want it to look. (This is basically my first CSS project ever and first HTML project since updating attempting to update my 15 year old HTML skills.) For the life of me, I can't figure out how to get the "forgot password?" link to move down, either aligned with the middle or bottom of the "Login" button. I've tried moving the display: inline; and vertical-align: middle; to all kinds of different selectors and none of them work! I've even tried setting the height of the anchor and/or the <li> elements. I don't understand what the deal is! Any help is greatly appreciated!
Here is my code:
form.login {
margin: 10px 10px 20px 20px;
padding: 0 0 0 0;
}
form.login fieldset{
margin: 0 0 0 0;
padding: 2px 2px 2px 2px;
border:2px solid;
border-radius: 5px;
width: 348px;
height: 90px;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding:0;
}
form.login fieldset fieldset {
border: 0;
width: 100%;
height: 40%;
display: inline;
vertical-align: middle;
}
form.login fieldset fieldset li{
float: left;
list-style: none;
width: 165px;
margin: 0 4px 0 4px;
}
form.login input {
width: 165px;
}
form.login label {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover {
color: blue;
}
form.login a:active {
color: blue;
}
form.login fieldset ul fieldset li button#submitLogin {
float: right;
}
and the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formstyle.css" />
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<fieldset>
<li>
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li>
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
</fieldset>
<fieldset>
<li>
Forgot Password?
</li>
<li>
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
</fieldset>
</ul>
</fieldset>
</form>
</body>
</html>
EDIT:
Here's a screen shot of what it looks like with the code above.
Try changing:
<li class="middle">
Forgot Password?
</li>
<li class="middle">
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
and add this to your css:
.middle {
height: 22px;
line-height: 22px;
}
This explicitly gives it a set-height and and then through the line-heightproperty tells it to center the text and form objects in the li vertically.
I reworked your markup to remove the fieldsets and to make the style's more consistent. What I am doing here is making the li's all half of the width and height of the UL. That way, if you want to changed the fieldset's height and/or width, you just have to change the one spot and maybe tweak your other styles.
I also condensed and removed some other unnecessary property declarations (padding: 0 0 0 0 to padding: 0). Let me know if you have any questions.
EDIT
I worked on it to make it more consistent between Chrome and Firefox.
And I actually think you'd be better putting the height on the li elements:
http://jsfiddle.net/QRNBg/13/
Try viewing the above and run it while commenting out the display: none on the CSS .hide class declaration.
CSS
form.login {
margin: 10px 10px 20px 20px;
padding: 0;
font-size: 1.2em;
}
form.login fieldset {
margin: 0;
padding: 5px;
border: 2px solid;
border-radius: 9px;
display: inline-block;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding: 0;
height: 90px;
width: 348px;
}
form.login fieldset ul li {
width: 50%;
height: 45%;
float: left;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
form.login input {
border: 1px solid #aaa;
}
form.login input,
form.login li.common a {
width: 93%;
height: 80%;
display: block;
margin: 5px;
font-size: 1em;
}
form.login .hide {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover,
form.login a:active {
color: blue;
}
form.login li.common {
text-align: left;
display: table-cell;
line-height: 2.5em;
}
#submitLogin {
text-align: right;
margin: 0 5px 0 -5px;
}
#submitLogin button {
padding: 5px 8px;
}
HTML
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<li class="hide">
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li class="hide">
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
<li class="common">
Forgot Password?
</li>
<li id="submitLogin" class="common">
<button value="submit" name="submitLogin" type="submit">Login</button>
</li>
</ul>
</fieldset>
</form>
http://jsfiddle.net/QRNBg/11/
you want it beside the login button, yet you define it in an 'li' tag before the login button? have you tried putting that anchor in the same 'li'? using a 'table' and putting them in the same 'tr' would work for sure.
Here's a quick fix. http://jsfiddle.net/xNAnz/
I offset the li 10px from the top.
I need to build a form for data input, let's say FirstName and LastName. I know how to do this with a table. In the first <td> I'd put a label tag and in the second I'd use an input tag with a type="text" attribute. This way the labels and textboxes would be lined up in two columns.
Is there a way to do this with CSS?
Here's a tutorial for this.
You do NOT need tables to make great HTML forms. In fact, you don't want them! Try this code at home and see what you think..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>
<LINK href="main2.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
fieldset.nested
{
position: relative;
margin-top: 15px;
}
fieldset.nested legend
{
position: absolute; top: -8px; left: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div>
<form>
<fieldset class="main">
<legend>Contact info</legend>
<fieldset class="nested">
<legend>Name</legend>
<ol>
<li>
<label for="textboxName">Name</label>
<input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxName" >Title</label>
<input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCompany">Company</label>
<input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Address</legend>
<ol>
<li>
<label for="textboxAddress1" >Street address</label>
<input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxAddress2" >Street address</label>
<input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCity" >City</label>
<input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxRegion" >City/Region</label>
<input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxPostalCode" >Postal code</label>
<input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCountry" >Country</label>
<input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Phone numbers</legend>
<ol>
<li style="display:none">
<label for="textboxName" >Name</label>
<input id="text1" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li style="display:none">
<label for="textboxAddress1" >Address</label>
<input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
</li>
<li>
<label for="textboxAddress2" >Phone</label>
<input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<div class="buttonsContainer">
<input class="button" type="submit" value="OK" />
<input class="button" type="button" value="Cancel" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
fieldset.main
{
margin: 1.5em 0 0 1.5em;
padding: 1em 0 0 0;
width: 400px;
font-size: .9em;
}
fieldset.main legend
{
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset.main ol
{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset.main li
{
padding-bottom: .5em;
}
fieldset.main ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
fieldset.nested
{
margin: 0 0 1em 1em;
padding: 0;
width: 93%;
font-size: .8em;
border: 1px solid gray;
background: #B0C4DE;
}
fieldset.nested legend
{
margin-left: 1em;
font-weight: normal;
font-size: .9em;
color: black;
background-color: white;
padding: 0 1em 0 1em;
border: 1px solid black;
}
fieldset.nested ol
{
padding: 0 1em 0 1em;
list-style: none;
}
fieldset.nested li
{
/* Control leading between rows. */
padding-bottom: .7em;
}
fieldset.nested ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
input.button
{
/* border-style: none; */
width: 6em;
height: 2.5em;
}
div.buttonsContainer
{
float: right;
margin: 1em 1em 1em 0;
}
CSS will work fine -- IF you are okay with entering pixel widths for things But sadly fails when you need to localize your strings and discover labels don't fit. For an address entry form, I would stick to using Tables, as they do all the right re-sizing and wrap behaviour and work w/o issues on almost every browser there is.
EDIT: I kinda wonder if any of the down-voters has checked the layout for these S.O. pages
A really good way to do this yourself is to install firebug on firefox and inspect elements on websites which implement this really well.
There is a great smashing maagzine on sign up forms. Several approaches in CSS can be seen, with some really great examples.