I have a page with this structure:
<div>
<div id="container">
<div id="content" >
<div class="question buttons clearfix nobg">
<input id="k3" name="k" type="hidden" value="">
<input id="h3" name="h" type="hidden" value="b07e0bc1c3751d34acbef5b8546b29ae">
<input id="s3" name="s" type="hidden" value="eyJwYWdlcGF0aCI6IFswXX0=">
<input type="hidden" name="page" value="0">
<input type="hidden" name="SID" value="1f7d2a9b3b9450ce2dd746bf0005ebe1">
<input type="hidden" name="_terminated_redirect" value="">
<div id="button-fix" class="button-fix" style="text-align:center">
<input type="hidden" name="referer" value="">
<input id="next-submit-button" type="submit" name="submitbutton" value="Submit">
</div>
</div>
</div>
</div>
</div>
I want to align to center using css. What will be style tag for it ?
Please suggest
You need to set a width on your outer DIV (maybe give it an ID of wrapper or similar) and then set it's margins - see below:
#wrapper {
width:960px; /* whatever you want this to be */
margin:0 auto;
}
CSS:
#container {margin: 10% auto;}
Fiddle: http://jsfiddle.net/As2yB/
<style>
#button-fix {
margin: 0 auto;
}
</style>
Here's a demonstration of your examle in jsFiddle
Related
I'm styling a portal where I cannot change any HTML but CSS and came across the following bit of code and I want to target the first label(Your Name).
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
I tried chevron and first-child selectors but none seem to work.
Try using first-of-type:
/* CSS3 */
form.no-tables > div > label:first-of-type {
background: red;
}
/* or with CSS2 */
form.no-tables > div > input + label {
border: 1px solid black;
}
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
You can do this by using input + label for CSS2 only.
edit So fcalderan mentioned this already.
input + label {
background-color: blue;
}
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
I have a two input text
<form action="process.php" method="get">
Link <input placeholder="Link" type="text" name="c">
<p>
<br>
Password <input placeholder="Password Admin" type="text" name="p">
<p>
<br>
<input type="submit">
</form>
result:
How to align in this mode?
like this
Wrap your text inside label elements with divs, and your inputs into another set of divs. Easy to modify their stylings then:
<form action="process.php" method="get" id="yourform">
<div class="labels">
<label for="c">Link</label>
</div>
<div class="inputs">
<input placeholder="Link" type="text" name="c">
</div>
<div class="labels">
<label for="p">Password</label>
</div>
<div class="inputs">
<input placeholder="Password Admin" type="text" name="p">
</div>
<br>
<input type="submit">
</form>
CSS:
.labels {
width: 150px;
text-align: right;
float: left;
margin-right: 5px
}
See the demo - jsfiddle
I try currently to beautify my sources a little bit. For this I want to change the width of buttons and radio buttons to 80% and change the alignment to center. For the buttons I made css settings that works quite fine, but I am not able to center the radio button group.
HTML:
<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
<legend id="SettingsDifficulty"></legend>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
<label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
<label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
<label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
</fieldset>
</br>
<hr>
</br>
Button
</div>
CSS:
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
The single button at the end is now at 80% width and perfect centered. The radio buttons are also at 80% width but still left aligned. At the web I found some solutions for horizontal radio button groups, but this solutions does not work with data-type="vertical". Is there a way to center this, too?
Thank you very much for helping me :-).
JSFIDDLE: http://jsfiddle.net/7eKZb
Use jQuery Mobile grid system, ui-grid-b and 3 blocks ui-block-a, ui-block-b and ui-block-c.
Demo
<div class="ui-grid-b">
<div class="ui-block-left ui-block-a"><!-- Placeholder --></div>
<div class="ui-block-center ui-block-b">
<fieldset data-role="controlgroup">
<!-- Buttons go here -->
</fieldset>
</div>
<div class="ui-block-right ui-block-c"><!-- Placeholder --></div>
</div>
And override width of blocks a, b and c. I used extra custom classes in order not to override other blocks.
.ui-block-left, .ui-block-right {
width: 10% !important;
}
.ui-block-center {
width: 80% !important;
}
See this fiddle http://jsfiddle.net/bB2vM/
i wrapped your radio button group in a div and it worked see the fiddle
<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
<legend id="SettingsDifficulty"></legend>
<div id="centregroup">
<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
<label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
<label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
<label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
</div>
</fieldset>
</br>
<hr>
</br>
Button
and here is the css
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#centregroup
{
text-align:center;
}
See screeshot.
U can group your radio buttons inside a div with fixed width and height:
<fieldset data-role="controlgroup" data-type="vertical" style="text-align: center">
<div class="centerRadio">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">A</label>
<input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">B</label>
</div>
</fieldset>
CSS:
.centerRadio
{
width: 80%; margin: 0 auto;
}
DEMO
I'm trying to achieve a same height border line between divs that are floated left using display:table-cells. I understand that if I change float:none, the heights of the divs are equal but for some reason I can't change float:left to none.
Is there a way to make the divs equal height with float:left ?
See this image to explain the problem and what I'm trying to achieve
Code :
<!doctype html>
<html>
<head>
<style>
.c-grids {display:table}
.c-grid {display:table-cell;float:left;border-left:1px solid red;padding:0 20px;}
.c-grids input {display:block;}
</style>
</head>
<body>
<div class="c-grids">
<DIV class="c-grid c-grid-1of4">
name<INPUT type=text autocomplete="off" name="text1" value="">
</DIV>
<DIV class="c-grid c-grid-2of4">
<INPUT type=text autocomplete="off" name="text2" value="">
</DIV>
<DIV class="c-grid c-grid-3of4">
<INPUT type=text autocomplete="off" name="text31" value="">
<INPUT type=text autocomplete="off" name="text32" value="">
</DIV>
<DIV class="c-grid c-grid-4of4">
<INPUT type=text autocomplete="off" name="text41" value="">
<INPUT type=text autocomplete="off" name="text42" value="">
<INPUT type=text autocomplete="off" name="text43" value="">
</DIV>
</div>
</body>
</html>
Thanks,
CT
I was trying to place a form over an image that I wanted to have it as a background in my whole homepage. Everything works fine. The only problem is that I want to place table some pixels lets 50 more to down. Also I would like to place table not to the end of right, but lets say 30 pixels before of it. Any ideas ?
This is my html code:
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="text">
<div class="homepageTable" width:40px; margin-right:auto; margin-left:auto; style="text-align:right" >
<form action="#" method="post">
<input type="text" size="25" name="first_name" placeholder="first name"><br/>
<input type="text" size="25" name="last_name" placeholder="last name"><br/>
<input type="text" size="25" name="email" placeholder="email"><br/>
<input type="text" size="25" name="retype_email" placeholder="retype your email"><br/>
<input type="text" size="25" name="password" placeholder="password"><br/>
<input type="text" size="25" name="retype_password2" placeholder="retype your password"><br/><br/>
<input type="checkbox" name="I_accept_terms" value=" "><br/>
<input type="submit" value="" name="submit" style="background:url('img/login_button_1.jpg') no-repeat; width:300; height:50; border:none;"/>
</form>
</div>
</div>
</body>
</html>
and this is my css file:
#text
{
width: 961px;
height:219px;
position: relative;
background-image: url(../img/back_img_green.jpg);
background-repeat: none;
}
Any ideas ?
Thanks Stefanos
Absolutely position the image inside a relatively positioned div. Then absolutely position the form by the offset from top left that you want and give the form a higher z-index. Either that or set the image to be the background of the div.