Hi i have a diferent style because betwin labale and input set icon. Please lock at the https://jsfiddle.net/mL1o0d5m/
css codes :
body{
font-family: tahoma;
font-size:14px;
background-color:#f1f1f1;
color:#999;
direction:rtl;
}
.form{
font-size:14px;
width:100%;
}
.form label{
text-align: right;
clear: both;
float:right;
}
.form input.inputs{
font-size:14px;
color:#999;
display:block;
border:1px solid #ccc;
border-right:none;
background-color:#fff;
width:80%;
margin-bottom:20px;
padding:10px;
padding-right:30px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-shadow:none;
-webkit-appearance: none;
}
.addon{
position:relative;
font-size:0;
}
.addon:before{
display:block;
content:"";
width:3px;
height:100%;
background-color:#3399cc;
position:absolute;
}
.icon:before{
font-size:14px;
color:#bbb;
position:absolute;
top:12px;
right:12px;
}
HTML :
<form class="form">
<label>Name</label>
<div class="addon">
<i class="icon fa fa-user"></i>
<input class="inputs" name="name" type="text" placeholder="Name" />
</div>
</form>
I wanna to set label and input in same line .label should be in right and input and icon must be at left .
Thanks .
like this? https://jsfiddle.net/mL1o0d5m/1/ it is one of the many posibilities to achieve this. Added some css
.form > label{
text-align: right;
float:right;
width:40px;
margin-top:10px;
}and also to .icon:before and .addon:beforeSee in fiddle
Related
I am trying to have 1 image and two elements floating right next to it (and the two elements on two separate lines). I tried working with display:inline-block so that each of the two elements comes on a separate line, but no luck. Also, the "brand" should be on top of the "model", thus first Mercedes and second W126. Is it possible to achieve this?
Fiddle here... Fiddle
HTML:
<div class="car"><img alt="" src=
"http://placehold.it/50x50&text=CAR"></div>
<div class="brand">
Mercedes
</div>
<div class="model">
W126
</div>
CSS:
.car img {
max-width:100%;
max-height:100%;
margin:0;
display:block;
}
.brand {
font-size:16px;
color:#333333;
font-family:'Droid Serif';
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
padding-top:5px;
float:left;
margin-left:2px;
margin-right:2px;
margin-top:2px;
display:inline-block;
}
.model {
font-size:12px;
color:#5A5A5A;
font-family:'Droid Serif';
font-style:normal;
margin-left:2px;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
float:left;
display:inline-block;
}
It's easy if you change the HTML & CSS a bit:
.car {
display:inline-block;
}
.car img {
max-width:100%;
max-height:100%;
margin:0;
display:inline-block;
vertical-align:middle;
}
.car .makeAndModel {
margin:0 0 0 5px;
font-family:'Droid Serif';
display:inline-block;
vertical-align:middle;
}
.brand {
font-size:16px;
color:#333333;
font-weight:bold;
display:block;
}
.model {
font-size:12px;
color:#5A5A5A;
font-style:normal;
display:block;
}
<div class="car">
<img alt="" src="http://placehold.it/50x50&text=CAR" />
<div class="makeAndModel">
<div class="brand">
Mercedes
</div>
<div class="model">
W126
</div>
</div>
</div>
You can use some floats instead:
.car img {
max-width:100%;
max-height:100%;
margin:0;
float:left;
}
.brand {
font-size:16px;
color:#333333;
font-family:'Droid Serif';
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
padding-top:5px;
margin-left:52px;
margin-right:2px;
margin-top:2px;
}
.model {
font-size:12px;
color:#5A5A5A;
font-family:'Droid Serif';
font-style:normal;
margin-left:2px;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
float:left;
}
<div class="car">
<img alt="" src="http://placehold.it/50x50&text=CAR">
</div>
<div class="brand">Mercedes</div>
<div class="model">W126</div>
Note that .brand has no float which allows the W126 to be pushed to the line below it, and the margin has been increased to space it properly.
I'm trying to send a div block to the right side of my page with a float:right; but it doesn't work.
HTML :
<div id="footer_div">
<footer>
<div class="copyrights">
<a href="contact.html" style="
color:#8C8C8C;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
"><center>Site © 2013</center></a>
</div>
<div class="footer_links">
<a href="cgu.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">Conditions d'utilisation</a>
<a href="about.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">A propos</a>
<a href="help.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">Aide</a>
<a href="contact.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">Contact</a>
</div>
</footer>
</div>
CSS :
footer
{
position:fixed;
bottom:0;
height:45px;
width:100%;
background:url(Templates/footer1.png) repeat-x bottom;
}
.copyrights
{
float:left;
position:fixed;
bottom:17.5px;
text-decoration:none;
margin-left:8px;
}
.footer_links
{
float:right;
height:20px;
width:240px;
position:fixed;
bottom:17.5px;
text-decoration:none;
border:0px solid;
}
Any idea how I can solve that ?
I want the .footer_links to go to the right side of my page.
Thanks !
Chris.
Take off the position fixed you have specified on the .footer-links class.
See this jsFiddle example.
http://jsfiddle.net/wCMqY/6/
footer
{
position:fixed;
bottom:0;
height:45px;
width:100%;
background:red;
}
.copyrights
{
float:left;
bottom:17.5px;
text-decoration:none;
margin-left:8px;
}
.footer_links
{
float:right;
height:20px;
width:240px;
text-decoration:none;
border:0px solid;
background:green;
}
.clear {
clear:both;
}
It's the position fixed that's causing you problems
and here is the css:
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-block;
margin:10px;
transition:0.5s;
overflow:hidden;
}
.divPhoto:hover {
border:1px solid #0000FF;
background-color:#CCC;
cursor:pointer;
height:175px;
}
foreach($photos as $photo) { ?>
<div class="divPhoto" >
<a class="fancybox" data-fancybox-group="gallery" href="upload/<?=$photo->filename?>"><img class="img-polaroid" src="upload/thumb/<?=$photo->filename?>"></a>
<input type="button" class="btn btnEffacer" value="effacer" style="margin-left:30px;" data="<?=$photo->id?>" />
</div>
<? } ?>
ANy idea on align the hover on bottom and not on top ?
Because now all pictures are moving when hovering an imahe
A vertical-align:top to the .divPhoto rule should be enough.
Since you change the height on hover from 140px to 175px, you need some extra margin-bottom on the unhovered state to pad it out to 175px height.
you should use display:inline-table; for .divPhoto div
Fiddle
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-table; /* <= this line */
margin:10px;
transition:0.5s;
overflow:hidden;
}
Since the elements are inline-blocks, you can simply use vertical-align: top:
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-block;
margin:10px;
transition:0.5s;
overflow:hidden;
vertical-align: top;
}
http://jsfiddle.net/Dtejn/
I have a contact form that I would like all elements to be floated to the left and aligned vertically, with the exception of the "message" box and submit button which should be floated and aligned on the right.
Currently, all fields seem to be flowing horizontally. How can I remedy?
jsfiddle
<div id="contact">
<div id="contact-form" class="clearfix">
<h2><img src="img/chat.png" alt="contact frsh studio"></h2>
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="process.php">
<input type="text" id="name" name="name" value="" placeholder="NAME" required="required" autofocus="autofocus" />
<input type="email" id="email" name="email" value="" placeholder="EMAIL" required="required" />
<select id="enquiry" name="enquiry">
<option value="refrsh">Brand REFRSH</option>
<option value="consult">Brand Consultation</option>
<option value="support">Just a Hello!</option>
</select>
<textarea id="message" name="message" placeholder="MESSAGE" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Holla!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> kind of necessary</p>
</form>
</div>
</div><!-- end contact -->
#contact-form {
width: 690px;
padding:20px;
margin: 50px auto;
position:relative;
}
#contact-form h2 {
margin-bottom:20px;
margin-top:40px;
text-align: center;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
font-size:15px;
margin-bottom:2px;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
float: left !important;
width:320px;
margin-bottom:20px;
padding:4px;
}
#contact-form textarea {
height:150px;
resize: none;
}
#contact-form #message {
clear: both;
float: right !important;
}
#contact-form label {
display:block;
}
#contact-form .required {
font-weight:bold;
color:#F00;
}
#contact-form #submit-button {
width: 100px;
border: 2px solid #515151;
display:block;
float:rightright;
margin-bottom:0px;
margin-right:6px;
}
#contact-form #loading {
width:32px;
height:32px;
background-image:url(../img/loading.gif);
display:block;
position:absolute;
rightright:130px;
bottombottom:16px;
display:none;
}
#errors {
border:solid 1px #E58E8E;
padding:10px;
margin:25px 0px;
display:block;
width:437px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
display:none;
}
#errors li {
padding:2px;
list-style:none;
}
#errors li:before {
content: ' - ';
}
#errors #info {
font-weight:bold;
}
#errors #info:before {
content: '';
}
#success {
border:solid 1px #83D186;
padding:25px 10px;
margin:25px 0px;
display:block;
width:437px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
font-weight:bold;
display:none;
}
#errors.visible, #success.visible {
display:block;
}
#req-field-desc {
font-style:italic;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
color:#CCC;
font-style:italic;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
color:#CCC;
font-style:italic;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text {
color:#CCC;
font-style:italic;
}
Updated JSFiddle: http://jsfiddle.net/jF49S/1/
As I mentioned in my comment, don't forget to utilize the CSS clear definition when dealing with float.
For instance, all that was needed here was a clear: left;.
#contact-form input,
#contact-form select,
#contact-form textarea {
clear:left;
float: left;
width:320px;
margin-bottom:20px;
padding:4px;
}
I also rearranged some of the HTML. Sometimes this is required to obtain the desired layout. For instance, I moved <textarea> to the beginning of the form in order for it to show up correctly.
Remember that, usually, there are many ways to accomplish a layout with HTML and CSS; my suggestion was just one way.
There are many articles and tutorials on float but here's a good primer: http://css-tricks.com/all-about-floats/
In Chrome, notice that that input area under "Your contact info" lines up with the border for div#contact. Also notice that the textarea under "Message" does not line up with that border; it's moved in a couple pixels. This is not the behavior I prefer.
In Firefox, everything lines up on the left. It's a little difficult, but you can see that in this screencap. This is the behavior I prefer.
My problem is obvious: how do I get those input areas to line up on the left (as in the Firefox image)?
Here is the HTML (non-working skeleton form code) that's rendered for that portion of the page (which resides in the footer of the page).
<div id="footer">
<div id="contact">
<h1>Talk to me</h1>
<div id="email-me">You can email me at address#server.com<br/>
or fill out the form below!
</div>
<form>
<div id="email">
<h2>Your contact info</h2>
<input type="text"/><br/>
</div>
<div id="message">
<h2>Message</h2>
<textarea rows="10" cols="75"></textarea><br/>
</div>
<input class="buttons" type="submit" value="Send"/>
</form>
</div>
</div>
Here's the CSS. It's quite long, so I was going to edit out some parts, but I decided against it in case some small piece makes the difference.
#footer {
clear:both;
background-color:#8BA5B5;
min-height:400px;
font-size:13px;
font-family:Helvetica,Verdana,Arial,sans-serif;
color:#fff;
padding-left:105px;
padding-top:30px;
padding-bottom:45px;
position:relative;
top:5px;
overflow:hidden;
}
#footer h1 {
font-size:15px;
margin:0px;
margin-bottom:5px;
}
#footer a {
color:#DAEBF5;
text-decoration:none;
margin-bottom:5px;
}
#footer a:visited {
color:#333;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
#email-me {
font-size:16px;
padding-left:2px;
margin-bottom:10px;
text-align:center;
}
#email-me a {
font-size:18px;
font-style:normal;
}
#contact {
float:left;
overflow:hidden;
font-style:oblique;
font-family:georgia,times,serif;
}
#contact h1 {
font-size:44px;
font-style:normal;
text-align:center;
font-family:helvetica,verdana,arial,sans-serif;
}
#contact h2 {
margin:0px;
font:inherit;
}
#contact input {
background-color:transparent;
border:1px solid #fff;
color:#fff;
width:50%;
}
#contact textarea {
background-color:transparent;
border:1px solid #fff;
color:#fff;
}
#contact #message {
margin-top:5px;
margin-bottom:5px;
}
#contact .buttons {
font-family:inherit;
font-weight:800;
font-size:12px;
padding:5px;
width:100%;
background-color:#fff;
color:#8BA5B5;
}
It seams that your margins are off... Are you using a CSS reset to level the style across all browsers?
try setting margin:0; to your inputs
For a css reset, I recommend:
http://meyerweb.com/eric/tools/css/reset/
#contact input, #contact textarea {
margin:0px;
}