I'm designing a form layout to be uesd on many pages within an online system. A devout user of tables for this purpose for many years, I'm getting pretty used to using CSS + labels for this now.
One thing I've yet to be able to master is the way different browsers pad & position the label relative to the input field. I'll give a code example, plus a close up image of how it renders in each browser (IE = IE9).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
letter-spacing:normal;
margin:20px;
}
input {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
border:solid 1px #666;
width:150px;
}
.fld {
}
.usr {
border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>
OK - now I can post a pic - here is what it looks like after Ahmed Masud's changes. He was right - the reset.css file I had (from http://html5reset.org/) didn't have padding on the input element. However, even after applying the changes, there is still a variation in the alignment of the base of the text in the label compared to that in the input. Now Firefox is dead-level, and for IE & Chrome the label text is 1px higher.
If I remove the link to reset.css, things change again: Chrome becomes dead-level, IE puts the label 1px higher than the input text, Firefox 1px lower than the input text. See below:
I should point out that this is a very basic layout, simply to try and diagnose the problem. I'll be making it look all better later. But first I need to know how to make all my text line up across all browsers with one CSS solution.
Okay css alignments are slightly a black art with CSS2 so let me tell you what's happening:
1) the reset.css you have probably is NOT resetting the padding of the input element which is why you are getting that off by 1/2 pixel error
Try adding these to your style
So one thing is to remove that padding from input:
input { padding: 0 }
You will now have to set the height of both label and input elements:
.fld { height: 16px; }
.usr { height: 16px; }
The other thing is that you probably want to align fields nicely one below the other. One way to achieve that is to make the label a block with float left property:
.usr { display: block; float: left; }
and the .fld a block as well:
.fld { display: block }
you would want to add some other parameters to p to make rendering something more aesthetic.
Here is what i did to your file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Southrock HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
margin:20px;
}
input {
border:solid 1px #666;
width:150px;
padding: 0;
height: 16px;
}
.fld { }
.usr {
border:solid 1px red;
height: 16px;
display: block;
float: left;
margin-right: 5px;
width: 7em;
}
p {
clear: both;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
<p>
<label class="usr" for="email">First Name*</label>
<input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter">
</p>
</body>
</html>
This renders the same way in IE/Safari/FF/Opera
This is one way to align:
<span>
<label>Email</label>
<input type="text" name="email" />
</span>
CSS:
form span {
vertical-align: middle;
display: block;
width: 100%;
}
form label {
display: inline-block;
float: none;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: left;
}
form input {
display: inline-block;
float: none;
width:auto;
margin:5px 0 0 10px;
padding:5px 5px;
}
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
I have a div set transparent with rgba and want on that div an input field which also has a transparent background. The problem is that the input field background is not rendered transparent.
It works if I use opacity:0.8; on the div but than also the text is transparent, so I need rgba.
For the second input field which is outside of the transparent div rgba works.
Here my example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
.term {
background-color: rgba(0,0,0,0.8);
color: #5fba3d;
width: 200px;
height: 100px;
}
input {
background-color: rgba(0,0,0,0.8);
color: #FFF;
border: none;
}
</style>
</head>
<body>
<div style="background-color:yellow; width:300px;">
<div class="term">
Input 1 <input type="text" value="Test" />
</div>
<br />
<input type="text" value="Input 2" />
</div>
</body>
</html>
Any ideas?
Thanks!
Nathanael
Hey Nathaneal its working fine if i chang the rgba value so text is not going to transparent
input {
background-color: rgba(0,0,0,0.1);
color: red;
border: none;
}
i hope this will help you...
you can see the demo :-
http://jsbin.com/avupaw/16/edit#html,live
Or just
input {
background: none;
color: red;
border: none;
}
I want to have two input with one button for user to enter their username and password, and
I'm using this css code for controlling the input tag in my website in order to appear it properly on all screen size, and it works fine.
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #555;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
I want to have some dynamic text which is retrieved from the database below these two inputs for the user. Now my problem is that if the text is long it will not appear properly below the inputs and affects them to not fit the screen, as long as the text is only 5 to 10 words there is no problem.
here is the html file for the inputs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method="post" action="answer">
<ul>
<li>
Login Name:<input type="text" name="id" class="controller"></input>
</li>
<li>
Password:<input type="password" name="pass" class="controller"></input>
</li>
<li>
<input type="submit" value="Login"></input>
</li>
</ul>
</form>
</body>
and here is the CSS code
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #400;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
please can anyone advice me what I have to do or give a css code for controlling the problem.
thank you very much for any answer and sorry for my long question.
So, I think that this is what you want to do. After your form,
<div id="response">
<p> Some Long Block Of Text That Will Wrap Around This Div </p>
</div>
then, in the CSS you get something like this going on:
#response
{
width: 75px; /*desired width*/
margin-top: 25px; /*distance from the form above*/
}
#response p
{
/*anything you want to do to that specific <p> */
}
I'm not sure how you are getting the dynamic text, but I'm guessing that it is a script that is getting info from answer and putting it in the html. Just place that info inside of the <p> that's in #response
I'm looking for a way to align a number of elements (spans, inputs, and buttons) such that despite their differing sizes, their vertical mid point is on the same horizontal line:
How do I achieve this in CSS? Here's the HTML file to play with:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
.content { font-size: 18px; border: 1px dotted blue; }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="content">
<span class="label">Label: </span><input type="text">
<span class="label">More text: </span><input type="text">
<button type="submit">Submit Me</button>
<div class="clear"></div>
</div>
</body>
</html>
Set the main div's line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.
That should work.
As others (David Nguyen and thirtydot) have said, adding vertical-align:middle; will accomplish the effect you're after so long as you get rid of the floats that are currently in your code. Adding display:inline-block; will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label"> for actual <label> tags.
Your span, input and button need the property:
vertical-align:middle;display:inline