I have a html mark up with label and inputbox. However, for business reasons, I need to show the label and inputbox on sameline and hide the placeholdertext. The end result should look like the placeholder text is staying there. Example is here: http://jsfiddle.net/XhwJU/
Here is the markup for reference:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
</head>
<body>
<h1> test </h1>
<div class="inputdata">
<label for="AccessCode"> Access Code: </label>
<div style="display:inline"> <input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /> </div>
<div class="clear"></div>
</div>
</body>
</html>
Here is the styles used:
.inputdata {
border: thin solid gray;
padding: 0.1em;
margin: 0.1em;
vertical-align: middle;
}
div .inputdata label {
width:auto;
float:left;
color: gray;
line-height: 2;
padding-top: .4em;
}
input[type='text']{
overflow:hidden;
line-height: 2;
box-shadow: none;
border:none;
vertical-align: middle;
background:none;
width:100%;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size:0pt;
margin-top: -1px;
}
As you can see in the jsfiddle, label and input show in separate lines. I want the label and input to show up on same line irrespective of the screenwidth. Label shall have a fixed size that allows it to fit contents in one line and the input shall occupy the rest of the screen width.
appreciate any help
I've done some changes in your CSS and i think i got what you want, here is an example and below HTML and CSS.
CSS
div.inputdata{
border:thin solid gray;
padding:0.1em;
margin:0.1em;
}
div.inputdata label{
float:left;
margin-right:10px;
padding:5px 0;
color:gray;
}
div.inputdata span{
display: block;
overflow: hidden;
}
div.inputdata input{
width:100%;
padding-top:8px;
border:none;
background:none;
}
.clear {
clear: both;
}
HTML
<h1>test</h1>
<div class="inputdata">
<label for="AccessCode"> Access Code: </label>
<span><input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /></span>
<div class="clear"></div>
</div>
To understand better the reason of overflow:hidden in span you can read this: The magic of "overflow:hidden"
Related
For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.
Here's an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-wrapper">
<div class="menu">
<div class="nav">
<ul>
<li>EXAMPLE</li>
<li >EXAMPLE</li>
<li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
</ul>
</div>
</div>
<div class="content">
<p id="notice"></p>
<div class="container">
</div>
</div>
</div>
</body>
</html>
CSS:
html,
body {
height:100%;
width:100%;
margin: 0px;
display: block;
}
.site-wrapper {
display: block;
background-color: yellow;
width: 100%;
height: 100%;
}
.nav {
background-color: red;
}
.content {
background-color: blue;
width: 300px;
height: 300px;
}
.menu {
font-weight: 400;
top:50%;
margin-top:-115px;
position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}
ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}
http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.
You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?
For example this will help:
.content {
display: inline-block;
}
You can use this code to set margin for all elements
*{
margin:0;
padding:0;
}
Hello i'm new to html and css. I wanted to use a section to display some images but it gives me a strange problem. when I use div for my section in html I get the wanted result but when I only use < section > I don't get the same result. Can some one help me to use only section in my html and not the div ?
this my css code:
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
color: orange;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
}
.section p {
color: black;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
padding-bottom: 2em;
}
and my html looks like this:
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
Pika deken
<img src="../images/NB1.jpg" />
<p>€19.99</p>
</div>
<div class="section">
City boy
<img src="../images/peuter1.jpg" />
<p>249.99</p>
</div>
<div class="section">
Classy girl
<img src="../images/peuter9.jpg" />
<p>€244.99</p>
</div>
<div class="section">
Outdoors
<img src="../images/girl1.jpg" />
<p>€129.99</p>
</div>
</div>
Thanks in advance!
First of all, make sure you specify <!DOCTYPE html> at the top of the page, to indicate HTML5 is being used (needed mainly for IE)
Second, <section> is not a block level element, e.g. a <div> is a block level element.
to fix this, add this to your .section CSS
display: block
this will cause a <section> to behave like a <div> and should fix your problem.
Make sure you're using <!DOCTYPE html> in your HTML document.
I just want to vertically align elements in my header. That would be really easy with tables but can't figure how to do it with CSS. I want to vertically align all 3 elements withing the black bar : "Logo", "Rechercher" and the text input.
Here is the CSS:
body {
margin:0;
padding:0;
font-size:100%;
}
#header {
background-color:#303030;
height:3em;
}
#logo {
color:#EEEEEE;
font-size:2em;
line-height:1.5em;
padding:0 30px 0px 10px;
display:inline;
}
#recherche {
color:#EEEEEE;
font-size:1.5em;
display:inline;
}
#recherche input {
width:300px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius:4px;
}
And the HTML :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/mainframe.css">
</head>
<body>
<div id="header">
<div id="logo">Logo</div>
<form id="recherche" action="/" autocomplete="off">
<label for="rechercher">Rechercher</label>
<input type="text" name="recherche">
</form>
</div>
</body>
</html>
here is a solution that works fine:
you can add line-height:size_px to each element that you want it's children to be aligned vertically. (e.g. size_px := 10px). The line-height should be the same as the parent height (height).
try:
jsfiddle.net/rjCBR/
Replace body and #header of your css with the following code:
body {
margin:0;
padding:0;
font-size:100%;
width: 100%;
display: table;
}
#header {
background-color:#303030;
height:3em;
display: table-cell;
vertical-align: middle;
}
Using Vertical-align: middle;, as other have suggested, aligns the bottom of the text for each element, which looks odd for an input box where the bottom of the actual element will be substantially below the text.
Try adding the following properties to the input css
height: 24px;
vertical-align: text-bottom;
jsFiddle
How can I get the "Run" button below the divs?
Here is the code: http://jsbin.com/ehurit/10/edit
Same code copy-pasted below.
<!DOCTYPE html>
<html>
<head>
<style>
div.boxes { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
</style>
</head>
<body>
<div class="boxes"></div>
<div class="boxes" id="mover"></div>
<div class="boxes"></div>
<button class="clearfix" id="run" >Run</button>
</body>
</html>
Try display: block and clear: both in your .clearfix CSS class
Demo
Update: I just checked again and you should probably set the clearfix around your floating divs like this: http://jsfiddle.net/dC7GL/1/
Change your style
.clearfix {
clear:both;
}
Then above the button add a div tag and apply the clear fix style it will push the button down below the boxes
<div class="clearfix"></div>
<button id="run" >Run</button>
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
My CSS file:
#import "reset.css"; /* Meyer's CSS reset */
body { background-color: #f3f3f3; font: 15px sans-serif; }
#wrapper {
width: 1000px;
margin: 0 auto;
}
#navigation {
width: inherit;
margin-top: 20px;
background-color: #ccc;
overflow: hidden;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 10px 10px;
text-decoration: none;
color: #000;
}
#navigation li a:hover {
background-color: #aaa;
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Nav0</li>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
</ul>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
You should use a clear fix class (either an empty element after the <ul> or use a clear fix class on the <ul> so the browser will properly clear the floats.
.clearfix {
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Is one I use most of the time. Here is a fiddle of it in action: http://jsfiddle.net/gpQ2f/1/