How do i move this to the right ?
<div class="contentcontainer med left">
<div class="headings alt">
<h2>Medium Width - Heading title here</h2>
</div>
<div class="contentbox">
<form action="#">
<p>
<label for="textfield"><strong>Text field:</strong></label>
<input type="text" id="textfield" class="inputbox" /> <br />
<span class="smltxt">(This is an example of a small descriptive text for input)</span>
</p>
<p>
<label for="errorbox"><span class="red"><strong>Missing field:</strong></span></label>
<input type="text" id="errorbox" class="inputbox errorbox" /> <img src="img/icons/icon_missing.png" alt="Error" /> <br />
<span class="smltxt red">(This is some warning text for the above field)</span>
</p>
<p>
<label for="correctbox"><span class="green"><strong>Correct field:</strong></span></label>
<input type="text" id="correctbox" class="inputbox correctbox" /> <img src="img/icons/icon_approve.png" alt="Approve" />
</p>
<p>
<label for="smallbox"><strong>Small Text field:</strong></label>
<input type="text" id="smallbox" class="inputbox smallbox" />
</p>
<select>
<option>Dropdown Menu Example</option>
</select> <br /> <br />
<input type="file" id="uploader" /> <img src="img/loading.gif" alt="Loading" /> Uploading...
<p> <br />
<input type="checkbox" name="checkboxexample"/> Checkbox
</p>
<p>
<input type="radio" name="radioexample" /> Radio select<br />
</p>
</form>
<textarea class="text-input textarea" id="wysiwyg" name="textfield" rows="10" cols="75"></textarea>
<p><br /><br />Buttons styles</p>
<input type="submit" value="Submit" class="btn" /> <input type="submit" value="Submit (Alternative)" class="btnalt" />
</div>
</div>
Try setting the css 'margin-left' property of the outer div to push it away from the left side of the screen.
<div class="contentcontainer med left" style="margin-left: 200px;">
(change 200 to an appropriate number).
Note: try not to use inline 'style' attribute in your final product - put it in an external stylesheet :)
if you want to move everything to right, use css "float: right".
For example:
<div class="contentcontainer med left" style="float: right">
You can offset by a set-amount with the CSS margin property:
<div class="contentcontainer med left" style="margin-left: 50px;">
Related
I need to align two textfields in the same row, but one on the left and the other in the page center. I'm trying this:
<div class="pure-g margin-1-0">
<div class="pure-u-1-4">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
But I see the left one correctly but the other remains next to the first and not at the center.
Any suggestion?
To align elements inside the container use text-align css rule. Struts2 tags use themes to generate additional content in the forms. So it could break the initial design.
<div class="pure-g margin-1-0">
<div class="pure-u-1-4" style="text-align:center">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="text-align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
JSFiddle
Please run the code snippet below and explain why the "Hey There" Text is not aligned with the "Sign Up!" text?
That is the code I used to create the table.
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" vallign="top">
<h2>Hey There</h2>
</td>
<td width="40%" vallign="top">
<br />
<br />
<h2>Sign up!</h2>
<br />
<br />
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
They are not aligned for two reasons:
the vallign is not an attribute. Change it to valign
you have two line breaks <br /> above your "Sign Up!" text. Either
remove them, or add them above your <H2>Hey There</H2> text.
See my example below:
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" valign="top">
<h2>Hey There</h2>
</td>
<td width="40%" valign="top">
<h2>Sign up!</h2>
<br />
<br />
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
It's because the way you have your table structured, you have one row and two columns.
Text is automatically centered vertically, so it's not lining up correctly. You have 2 options:
Either have a table that is 2x2 with the top row containing your h2's "Hey There" and "Sign Up". Try this:
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr> <!--top row -->
<td width="60%">
<h2>Hey There</h2>
</td>
<td width="40%">
<br />
<br />
<h2>Sign up!</h2>
<br />
<br />
</td>
</tr>
<tr> <!-- Bottom row with form -->
<td>
<!-- Empty to make a 2x2 table -->
</td>
<td>
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
Get rid of your <br /> tags in the cell where you have "Sign Up!" and give your <td> tags an additional styling of vertical-align: top. This will change the vertical alignment from being centered to aligning to the top so your headers will line up.
A table by defaults aligns vertically at the middle, the solution to that problem is to align at the top so that both the signup and hey there text can be on the same level using css instead of html
add this code in the header section to affect all tables
<style>
table, th, td {
vertical-align: top;
}
</style>
Please try This.
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" vallign="top">
<h2>Hey There</h2>
</td>
</tr>
<tr>
<td width="40%" vallign="top">
<br />
<br />
<h2>Sign up!</h2>
<br />
<br />
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Last Name" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="E-mail" />
<br />
<br />
<input type="text" name="fname" size="25" placeholder="Password" />
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
Reason: You actually forgot the ending of </tr>.
That's because it is basic html. You will need to work on CSS. I would recommend to use bootstrap.
<div class="row">
<div class="col-md-3">
<h2> Hey There</h2>
</div>
<div class="col-md-3">
<table>
<tr>
<h2>Sign up!</h2><br /><br />
<form action= "#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" /><br /><br />
<input type="text" name="fname" size="25" placeholder="Last Name" /><br /><br />
<input type="text" name="fname" size="25" placeholder="E-mail" /><br /><br />
<input type="text" name="fname" size="25" placeholder="Password" /><br /><br />
<input type="submit" name="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
</div>
Hope this works for you!
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<style>
.name {
width: 130px;
}
</style>
</head>
<body>
<h1> Test </h1>
<form>
<fieldset class="name">
<label for="firstName">Name</label> <input type="text" name="firstName" id="firstName" required> <br /> <br/>
<label for="last_name">Surname</label> <input type="text" name="last_name" id="last_name" required> <br /> <br/>
</fieldset>
<br />
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
I want to make the the Free text and rank go next to the fieldset name (with some space) and the button to be in the middle of the page.
How can I make it work?
For the previous code I want to make this part to be next to the fieldset:
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
And the submit button be and the middle of the page.
Thank you in advance.
I did this really easily with some searches like "Put two divs next to each other" and "Center a div".
http://pastebin.com/SLQfGpQC
How can i get the element the "keys_values" div next to the text box..i.e, all the elements inside the div should be visible next to the text box
<div id="edata" class="edata" >
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
<div class="keys_values" style="float:'left';">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
I'd recommend using this:
<div id="edata" class="edata">
<input type="text" class="users_percentage" placeholder="% of users" />
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
</div>
CSS:
.users_percentage {
width:65px;
float:left;
margin-right:4px;
}
.keys_values {
float: left;
}
.e_keys, .e_values {
width: 65px;
}
Using the classes your elements already have allows you to separate the style and structure of the page.
Note: margin-right: 4px was only added to match the other input's style. If you're using normalize.css or similar then it might not be necessary.
Here it is working: http://jsfiddle.net/Fr3kD/1/
Update: To add extra span elements below each other use this HTML:
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
and add an extra CSS style:
.keys_values span{
display: block;
}
Here's a demo: http://jsfiddle.net/Fr3kD/3/
<div id="edata" class="edata" >
<div style="float:left; width:49%">
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
</div>
<div class="keys_values" style="float:left; width:49%">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
Try this
<div class="keys_values" style="float:'left';margin:-26px 0 0 70px">
DEMO
I've a template for a register mask. I use the <p> because my input boxes does not have a id only class.
It should look like in the illustration with 2 rows. I do not like extra div's, no table. Is it possible ?
HTML (elements can be in a different order)
<div id="parent">
<p class="Useraccount-Email-Repeat-Label"></p>
<input class="Useraccount-Email-Repeat" type="text" />
<p class="Useraccount-Password-Repeat-Label"></p>
<input class="Useraccount-Password-Repeat" type="text" />
<p class="Useraccount-Email-Label"></p>
<input class="Useraccount-Email" type="text" />
<p class="Useraccount-Password-Label"></p>
<input class="Useraccount-Password" type="text" />
</div>
try this:
HTML:
<div id="parent">
<p class="Useraccount-Email-Repeat-Label"></p>
<input class="Useraccount-Email-Repeat" type="text" />
<p class="Useraccount-Email-Label"></p>
<input class="Useraccount-Email" type="text" />
<p class="Useraccount-Password-Label"></p>
<input class="Useraccount-Password" type="text" />
<p class="Useraccount-Password-Repeat-Label"></p>
<input class="Useraccount-Password-Repeat" type="text" />
</div>
CSS:
#parent p,
#parent input{margin:0 2% 2%;float:left;width:48%;display:block}
#parent input{border:1px solid #ccc; border-radius:3px}