I am trying to build a log in with textfields that have padding on them. But the problem is that it doesn't seem to work. I don't know if it is the height or the padding but there must be something wrong because it used to work and after I opened the page again it didn't, I don't know why.
Here is the CSS:
.Login-Textfield{
width:280px;
height:20px;
padding:15px;
background-color:#EEE;
border:none;
outline:none;
color:#222;
text-align:right;
font-size:20px;
font-family:main;
}
And here is the HTML:
<!-- Login -->
<div class="Content-590">
<div class="New-Offer-Header"><span class="FL"><img src="../images/logo-2.png" width="160" height="70" /></span><span class="FR"><img src="../images/offer-header.png" width="160" height="70" /></span></div>
<div class="New-Offer-Content">
<form action="../ex/ad/create-offer.php" method="POST">
<div class="New-Offer-570">
<input type="text" name="title" class="New-Offer-Textfield-Long MB10" dir="rtl" placeholder="عنوان الإعلان" value="" />
</div>
<div class="New-Offer-Right ML10">
<select type="text" name="section" class="New-Offer-Select MB10" dir="rtl">
<option>أختر القسم</option>
<option value="value">option</option>
</select>
</div>
<div class="New-Offer-Left">
<input type="text" name="talent" class="New-Offer-Textfield MB10" dir="rtl" placeholder="الموهبه" value="<?php form_values('talent'); ?>" />
</div>
<div class="New-Offer-570">
<textarea type="text" name="description" class="New-Offer-Textarea MB10" dir="rtl" placeholder="الوصف"><?php form_values('description'); ?></textarea>
</div>
<div class="New-Offer-570 F28">:أرغب في</div>
<br />
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="work" class="Switch" id="work" /><label dir="rtl" for="work">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل</div>
<div class="New-Offer-Remember"><input type="checkbox" name="freelance" class="Switch" id="freelance" /><label dir="rtl" for="freelance">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل المستقل</div>
</div>
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="part_time" class="Switch" id="part_time" /><label dir="rtl" for="part_time">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل الجزئي</div>
<div class="New-Offer-Remember"><input type="checkbox" name="train" class="Switch" id="train" /><label dir="rtl" for="train">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">التدريب</div>
</div>
<div class="New-Offer-570"><center><input type="submit" class="New-Offer-Submit" value="!أضف موهبتك" /></center></div>
</form>
</div>
</div>
Can you tell what is the problem?
Please visit the page: http://www.mawhibaty.com/login.php
Your page looks fine to me, so I don't know what is the problem. But maybe you should not specify both the height and the padding. If you specify the font size and the padding, the height should adjust automatically. If you specify the font size and the height, the padding should adjust automatically. I think you should define only two of the three: font size (including the default white space above and below the letters) and padding, or font size and the height of the input text field.
The text input fields do have some padding, but I have no idea of knowing if it's as much as you want. I would try removing the "height" from your CSS because the padding will determine the height.
I have found a solution ...
All I needed was to remove the height and the padding will work great for text field. I don't know why but it worked.
Related
I am try to create a search field with a submit button, where the submit button width is based on it's content, and I try to make the input field width to be fluid, and as max as possible. It's in jQuery mobile.
I've found this solution, and tried to implement it without success. Here is a test JSFIDDLE
I've tried it on a simple html page, and on that it works.
Can somebody point me to where am I made the mistake?
HTML
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
add this CSS in your code
.searchContainer > div:first-child {float:right;display:inline-block;}
button will get arranged as per the content.
This is generic solution. You can write it using class name.
Maybe using table will do the job
HTML
<div data-role="page">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<!-- /header -->
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<table style="width: 100%;">
<tr>
<td><input type="text" name="term" style="width: 100%;" /></td>
<td><input type="submit" name="search" value="Go" /></td>
</tr>
</table>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
<div data-role="footer" data-theme="b">
<h1>Copyright © </h1>
</div>
</div>
DEMO HERE
If you want side by side elements without width, remove float and set display:inline-block; to both elements. Or if button have fixed width (eg 70px), use float with calc() for input field width. width: calc(100% - 70px)
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
Another IE6 (and 7) float problem.
I've some labels at right and some inputs, textarea and span at left.
http://jsfiddle.net/VRErj/1/
How can I fix it?
Edit: screenshot
As My Head Hurts mentioned, clearing is a pain in IE 7 and below. You can wrap your label/input pairs in a div and apply the clearfix class to it that you get on this page: http://www.positioniseverything.net/easyclearing.html. It would look something like this:
<div class="clearfix">
<label for="input1">input 1:</label>
<input type="text" name="input1" id="input1" />
</div>
<div class="clearfix">
<label for="input2">input 2:</label>
<input type="text" name="input2" id="input2" />
</div>
<!--etc...-->
That should do it.
I want to adjust the appearance on same controls on the website which I am working on, but it seems that is not going good.
I want to use CSS to properly align the controls.
I want to have the checkbox and the label aligned left and then little bit room, then textbox is coming.
Also I want all the textboxes to be aligned same vertically.
How can I do that with css without using tables.
Thanks in advance for your help, Laziale
CSS
div{margin-bottom:2px;}
input[type="checkbox"]{display:block; float:left; margin-right:2px;}
label{display:block; float:left; width:150px;}
HTML
<div><input type="checkbox" /><label>Address</label><input type="text" /></div>
<div><input type="checkbox" /><label>State</label><input type="text" /></div>
<div><input type="checkbox" /><label>City</label><input type="text" /></div>
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
Seriously, for you need, you should use tables. you'll have a lot more html and CSS trying the achieve this anyway.
The whole drive to not use tables in Html is for layout of pages and such where you may want to rearrange your page layout (move things around) using just CSS. but I doubt you'd want to rearrange the way your form is laid out.
Simplest way: Specify a width and float:left for the input containers (labels) http://jsfiddle.net/tCcff/2/
<style type="text/css">
label {
float: left;
width: 8em;
}
label.text {
width: 7em;
}
</style>
<div>
<label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' />
</div>
<div>
<label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' />
</div>
<div>
<label> <input type='checkbox' /> Label here </label> <label class='text'>Text Three-----</label> <input type='text' />
</div>
This article is a good reference for CSS based form layout: http://articles.sitepoint.com/article/fancy-form-design-css/3
I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page
http://staging.terrilynn.com/fundraising/
There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.
The div's that should appear to the left of right-floated message div are disappearing.
Page displays correctly in firefox. Any help would be appreciated.
<div id='footer-contact-form'>
<h1>Request Information <span class='note'>(all fields required)</span></h1>
<form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
<fieldset>
<legend>Footer Info Request</legend>
<div class="textarea required" id="w2376">
<p class="data">
<label for="area_2376">Message</label>
<textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
</p>
</div>
<div class="text required" id="w2377">
<p class="data">
<label for="text_2377">Name</label>
<input id="text_2377" type="text" name="e_2377" value="" />
</p>
</div>
<div class="text required" id="w2378">
<p class="data">
<label for="text_2378">Phone</label>
<input id="text_2378" type="text" name="e_2378" value="" />
</p></div>
<div class="text" id="w2379">
<p class="data">
<label for="text_2379">Email</label>
<input id="text_2379" type="text" name="e_2379" value="" />
</p>
</div>
<p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>
<input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
<input type="hidden" name="SITEID" value="2185" />
<input type="hidden" name="cpBID" value="367780" />
<input type="hidden" name="formslug" value="footer-info-request" />
<input type="hidden" name="CMSCODE" value="EKK" />
<input type="hidden" name="fkey" value="" />
</fieldset>
</form>
</div><!-- #footer-contact-form -->
I guess I found the problem:
screen.css (line 382)
#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}
"overflow:hidden" causes the problem.
Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.
Wow that worked!
I was using overflow:hidden to force the div to contain the floated label and input elements.
But really the float on the input elements wasn't necessary.
Thanks you all very much.