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.
Related
What's the best way to get the mins below next to the hr?
-I tried using columns and rows, but it de-centered everything.
-I tried floats, but it makes everything misaligned
-I tried boxes, but similar problems to columns and rows.
Thank you so much! :)
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
Replace your code with this one:
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
as #Pyromonk mentioned p is a block element so use span instead
p is a block element and so is fieldset. input is an inline element. If linebreaks are the problem you are facing, you should look into using a set of inline elements in succession, for example a label and an input. Block elements force a linebreak after themselves and inline elements don't, to put it in simple terms. I see absolutely no reason for using fieldset and p in your scenario, unless you absolutely have to. If you do, you can try setting their display to inline-block.
Further reading: MDN :: Visual formatting model
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.
is it wrong if I use span-x to define element width?
<div class="search span-7 prepend-17 last">
<fieldset>
<form action="index.php" method="get">
<input type="hidden" name="page" value="found"/>
<input class="span-4" type="text" MAXLENGTH="25" placeholder="Enter text to search" name="search"/>
<input class="span-3 last" type="submit" value="search" />
</form>
</fieldset>
</div>
Not at all. Span only assigns a width, float and margin. As long as this is what you want for your element there's no problem using it.
I've styled a domain search form with CSS and DIV tags, but it's not W3C compliant since I separated the form tags. How can I get around this and still be able to style each component of the form?
<div class="reg-domain-txt">
<span>Register Your Domain Name Today!</span>
</div>
<div class="checkerform">
<form action="https://www.xhostcompanyx.com/clients/domainchecker.php" method="post">
<input type="hidden" name="token" value="xxxxxxxxx" />
<input type="hidden" name="direct" value="true" />
<input class="inputbox" type="text" name="domain" size="29" />
</div>
<div class="tldboxlist">
<select class="tldbox" name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.biz</option>
<option>.us</option>
<option>.info</option>
<option>.mobi</option>
<option>.me</option>
<option>.co</option>
<option>.tv</option>
<option>.pro</option>
</select>
</div>
<div class="domaincheckbutton">
<input class="domainbutton" type="submit" value="Search" />
</form>
</div>
Just put the start and end form tags outside of the divs.
Please explain why this will prevent you from styling?
The code you’ve posted isn’t valid because you’ve opened a <div> tag, then opened a <form> tag, then closed the <div> tag before closing the <form> tag. You can’t do that with any tags in HTML.
Here’s your HTML, corrected and indented — indentation really helps make these kinds of HTML errors more obvious:
<div class="reg-domain-txt">
<span>Register Your Domain Name Today!</span>
</div>
<div class="checkerform">
<form action="https://www.xhostcompanyx.com/clients/domainchecker.php" method="post">
<input type="hidden" name="token" value="xxxxxxxxx" />
<input type="hidden" name="direct" value="true" />
<input class="inputbox" type="text" name="domain" size="29" />
<div class="tldboxlist">
<select class="tldbox" name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.biz</option>
<option>.us</option>
<option>.info</option>
<option>.mobi</option>
<option>.me</option>
<option>.co</option>
<option>.tv</option>
<option>.pro</option>
</select>
</div>
<div class="domaincheckbutton">
<input class="domainbutton" type="submit" value="Search" />
</div>
</form>
</div>
I would remove the three DIVs. They are not necessary for content or styling. If you need to group together form elements, you should use the FIELDSET tag. Also, if you need to position the entire form, you can give the form an ID or a Class.
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