I would like to use a radio input to make a div visible when it's selected.
Here's what I've got but it doesn't work.
HTML:
<input type="radio" name="menu" id="btn_commandprompt" value="1"></input>
<label for="btn_commandprompt"">
<div id="btn_commandprompt_design"></div>
</label>
<div id="commandprompt"></div>
CSS:
#commandprompt{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
#btn_commandprompt:checked ~ #commandprompt{
display: block;
}
Thanks
I have modify your code. its now working...
<style>
#commandprompt{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
#btn_commandprompt:checked ~ #commandprompt{
display: block;
}
</style>
<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1"> Show Me</input>
<input type="radio" name="menu" id="btn_acceuil" value="1"> Hide Me</input>
<div id="btn_commandprompt_design"></div>
<div id="commandprompt">ooh!!</div>
</body>
this should work
<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1" onclick="show()"> Click Me</input>
<div id="btn_commandprompt_design"></div>
<div id="commandprompt" style="display:none">Show Me</div>
</body>
<script>
function show(){
document.getElementById("commandprompt").style.display = 'block';
}
</script>
It would work if you put something inside the Div. Your code is correct, just add a paragraph inside your Div for example and try it again.
Related
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I want a row of blocks from left to right, followed by a block underneath.
Here is a picture of what I would like to see rendered in the browser.
I need to do all positioning by CSS, not by tables. Here is my HTML and my CSS...
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="demo.css" /><head>
<body>
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
</form>
<hr />
<p style="padding-top: 1em;">Some text underneath</p>
</body>
</html>
... and here is the content of demo.css...
fieldset
{
float: left;
display: block;
width: 17em;
margin: 0 1em 1em 0;
padding: 0 1em 1em 1em;
}
fieldset.radio input
{
clear: both;
float: left;
width: auto;
}
input
{
display: block;
width: 15em;
}
label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}
label.first
{
padding-top: 1em;
}
The way I read it, should be getting the desired result with this code. But I am not. Here is what renders instead ....
What changes do I need to make to my html/css in order to get the stated desired result?
A way without clearing is:
form { overflow: hidden; }
I usually create a class called floatbox and use this on every container which contains floating elements
.floatbox { overflow: hidden; }
the matching html then is
<form class="floatbox" action="">
<fieldset><p>I'm floating</p></fieldset>
<fieldset><p>me too</p></fieldset>
</form>
you need to make the <hr /> element clear the floats. hr { clear: left; }
Add:
hr {
clear: left;
}
to your style sheet to clear your floats.
You could use the ole' dummy clearing element trick:
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
<div style="clear:both"> </div>
</form>
This ensures your form actually occupies as much space as the elements inside it.
The problem with simply clearing the hr is that the form has zero width and height, which could be problematic if you're applying styling to the form as well.
I have this HTML:
<div>
<label>field 1</label>
<input type="text">
<label>field 2</label>
<input type="text">
<label>field 3</label>
<input type="text">
</div>
How can I make a label-input pair use 100% of the width with CSS ? (and each pair be on their own line)
I used to put the label-input pair in a sub div of their own. But I'm wondering if there's a way to do it with just CSS. (I'm using compass to generate the CSS).
For bonus points .. can you have the same CSS make the label a line above on mobile (small screen) devices.
Thanks heaps.
Sort of like this? http://jsfiddle.net/m6pZH/13/
I suggest you modify your HTML slightly, as it will be hard (if even possible) to properly maintain your current HTML properly:
<ul>
<li>
<label>field 1</label>
<input type="text" />
</li>
<li>
<label>field 2</label>
<input type="text" />
</li>
<li>
<label>field 3</label>
<input type="text" />
</li>
</ul>
CSS:
li {
display: block;
overflow: auto;
}
li > label {
float: left;
}
li > input {
width: auto;
float: right;
}
Try this:
div label, div input {
display: block;
}
displaying elements on block puts them on their own line and makes them a block element.
Edited content:
div { width: 600px }
div label { float: left; width: 200px; }
div input { float: right: width: 390px; }
Try this.
I want to style the html5 input type 'range'.
I am trying to create a mobile website using jquerymobile, but having a bit trouble on styling it in the right way.
I want to have two labels, one at each end of the range selecter, and want the 'pen' to be a black thin stroke.
Right now I have something like this
<label for="slider">None</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<label for="slider" style="text-align: right;">Many</label>
I found the solution by myself.
<style type="text/css" media="screen">
/* Hide text-field*/
#slider {
display: none;
}
div.ui-slider {
width: 90%;
}
label.ui-block-right{
text-align: right;
float: right;
}
.min-width-480px div.ui-slider {
width: 90%;
}
.min-width-480px label.ui-slider {
width: 50%;
}
/* Slider is displayed as a thin stroke */
.ui-slider .ui-slider-handle {
width:2px;
height:30px;
background:url(images/slider-picker.gif) repeat-y; overflow: hidden;
position:absolute;
border-style:none;
margin-left: 0px;
margin-top: -15px;
}
</style>
And the HTML
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<div class="ui-grid-a" >
<div class="ui-block-a"><label for="slider">None</label></div>
<div class="ui-block-b"><label class="ui-block-right" for="slider">Many</label></div>
</div>
</div>
I want to create a form with 3 columns using Div,
Label : Textbox Label : Textbox Label : Textbox
Label : Textbox Label : Textbox Label : Textbox
If someone can help me, I would appreciate it.
Note: The label will be in multilingual, the text could be longer in other language.This is the major problem I see with div method. If the label is longer, the textbox will automatically go under the label and this is not correct .
<style>
.wrapperField{
float:left;
width:200px;
}
</style>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
Please try the following layout
<style>
.wrapperField {
float: left;
width: 200px;
overflow: hidden;
}
.wrapperField label {
float: left;
margin-right: 10px;
}
.wrapperField input, .wrapperField textarea {
float: right;
}
</style>
<style>
.wrapperField {
float:left;
width:200px;
margin-left:10px;
}
.wrapperField label{
float:left;
margin-right:10px;
width:90px;
overflow:hidden;
white-space:nowrap;
text-align:right;
}
.wrapperField input, .wrapperField textarea {
float:left;
width:100px;
}
</style>
<div class="wrapperField">
<label>testfasdf asd asd as ff er</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test asdf asdf asdf asdf asdf </label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<br style="clear:left;" />
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
#mmanco I do change on your solution . It's working great now. Thanks again for your help. I'll never think to use the overflow properties. I Just put the overflow properties on the Label and specify a width on the label.
we'll the textbox is going under the label because you have set a fixed width of 200 px on that div. so if it exceeds 200px he will push it down. it's a normal behaviour
and I don't think using overflow:hidden will help. Better use 2 columns