CSS Div is hiding under footer - html

i am using this CSS Code to display 2 divs side by side:
#contactus-menu {
width:20%;
float:left;
display:inline;
}
#contactus-main {
width:75%;
float:right;
display:inline;
}
and then my HTML:
<div id="contactus-menu"><?php include 'contact-us/locations.php'; ?></div>
<div id="contactus-main">
<div id="contactus-title">Leigh-on-Sea, Essex</div>
<div id="contactus-bar">Sales</div>
<div id="contactus-bar-sub">
<strong>Telephone: </strong><?php echo $main_phone_number; ?> (Option 1)
</div>
<div id="contactus-bar-sub">
<strong>Email: </strong>sales#domain.co.uk
<p> </p><p> </p>
<form method="post" action="main.php">
<input name="name" type="text" id="name" onFocus="if(this.value=='Full Name'){this.value=''}" onBlur="if(this.value==''){this.value='Full Name'}" value="Full Name" size="30" />
<br /><br />
<input name="email" type="text" id="email" onFocus="if(this.value=='Email Address'){this.value=''}" onBlur="if(this.value==''){this.value='Email Address'}" value="Email Address" size="30" />
<br /><br />
<input name="phone" type="text" id="phone" onFocus="if(this.value=='Phone Number'){this.value=''}" onBlur="if(this.value==''){this.value='Phone Number'}" value="Phone Number" size="30" />
<br /><br />
<textarea name="message" cols="30" rows="6" id="message" onFocus="if(this.value=='Message'){this.value=''}" onBlur="if(this.value==''){this.value='Message'}">Message</textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send Message" /><br />
</form>
</div>
<div id="contactus-bar-sub">
<strong>Postal Address</strong>
<p> </p>
<?php
if($main_address1 > '') { echo $main_address1.'<br>'; }
if($main_town > '') { echo $main_town.'<br>'; }
if($main_county > '') { echo $main_county.'<br>'; }
if($main_postcode > '') { echo $main_postcode; }
?>
</div>
</div>
but the #contactus-main DIV is displaying under my footer for some reason, any ideas what i have done wrong. there is nothing wrong with the footer as it is working fine on all other pages, its just this page that has a few extra divs.

You should use display:block on your divs, because display:inline has no effect on floating elements. Also, you probably need an element with style="clear:both" before the footer.

Related

Stick a background behind a div form

I have a form I'm looking to place an image behind, like in this example:
The code is as follows:
#minicontact{width:25%;float:right;margin:-525px 155px -5px 0;}
#miniformtitle{margin:0 auto; text-align:center;}
#buttonmini{cursor:pointer;width:150px !important;height:60px !important;font-size:120% !important;text-align:center !important;background-color:#6db9fa !important;color:#ffffff !important;border-radius:20px !important; margin-top:20px; display:block; padding:0px;
margin:0 auto;}
<div id="minicontact">
<h3 id="miniformtitle">Get Started</h3>
<form class="contact" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" method="post" name="simp_cont">
<p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
/><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea><input name="form_name" type="hidden" value="contact_form" />
<button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p>
</form>
</div>
The image I'm trying to use as the background is:
Google probably won't allow you to see the image in run script, but the CSS is there for you to achieve it :)
#minicontact {
width:400px;
height:500px;
float:left;
border:1px solid #ebebeb;
background:url('https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_1280.jpg');
background-size:cover;
background-position:center;
}
<div id="minicontact">
<h3 id="miniformtitle">Get Started</h3>
<form class="contact" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" method="post" name="simp_cont">
<p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
/><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea><input name="form_name" type="hidden" value="contact_form" />
<button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p>
</form>
</div>
Just set a background image via css, and you're good to go.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

How to get two inputs side by side and the rest on separate lines?

I have an form that I want to have a user fill in. I want to lay it out that the name fields are next to each other and all other fields are on their own separate line.
I have used the below code, have tried putting paragraphs and "brs" , but still no luck...
The code below:
<div style="float:left;">
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div style="float:right;">
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
Returns the below image:
So, for some reason the Email Address Label is very much out of place (it should be above the input that is reading 1500 - the way Phone is above number
I'm sure that it's a silly little thing, but I just can't place it
I have tried various combinations of "< p>" and "< br >",but to no avail.
You need to add "clear both" ( <div style="clear:both"></div> ) to prevent the content below mixed up with your 2 floating divs.
Example code:
<div style="float:left;">
<!-- something here -->
</div>
<div style="float:right;">
<!-- something here -->
</div>
<div style="clear:both"></div>
<!-- more goes here -->
I would use something like Bootstrap, if I were you. However, here's a custom solution:
input {
width: 100%;
display: block;
}
div.inline {
width: 100%;
display: table;
}
div.inline div {
display: table-cell;
}
div.inline div:nth-child(n+2) {
padding-left: 10px;
}
<div class="inline">
<div>
<label>First Name:</label>
<input>
</div>
<div>
<label>Last Name:</label>
<input>
</div>
</div>
<div>
<label>Email:</label>
<input>
</div>
<div>
<label>Phone:</label>
<input>
</div>
wrap your bottom 3 inputs and labels in a div and add 100% width to each input and label
<div style="width:100%;clear:both;display:block;">
<label style="width:100%;display:block;"></label
<input style="width:100%;display:block;">
</div>
.flexi{
display:flex;
flex-flow:row;
}
<div class="flexi">
<div>
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div>
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
</div>
<div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<div>
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
</div>
<div>
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
</div>
</div>
Read about css and html on internet .
Floating causes parent to remove height. thats why yo email pops in mill
https://jsfiddle.net/d69Lxmst/3/

How to align one text with other in HTML Tables

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!

How to set input text be shown inline with css?

I try to make inputs be displayed one after another in line using float: right.
[input][input][input]
But instead of it i see steps:
[input]
[input]
[input]
Do anyone has any suggestions? I use labels in form as following
here is my code:
כותרת נוספת
<label for="pa_passport">מספר ת.ז</label>
<input type="text" name="pa_passport" id="pa_passport" placeholder="מספר ת.ז" /><br />
<label for="pa_firstName">שם פרטי</label>
<input type="text" name="pa_firstName" id="pa_firstName" placeholder="שם פרטי" /><br />
<label for="pa_lastName">שם משפחה</label>
<input type="text" name="pa_lastName" id="pa_lastName" placeholder="שם משפחה" /><br />
<div style="clear:both"> </div>
<label for="pa_city">עיר מגורים</label>
<input type="text" name="pa_city" id="pa_city" placeholder="עיר מגורים" /><br />
<label for="pa_car">מספר רכב</label>
<input type="text" name="pa_car" id="pa_car" placeholder="מספר רכב" /><br />
<label for="pa_city">שנת ייצור</label>
<input type="text" name="pa_year" id="pa_year" placeholder="שנת ייצור" /><br />
<h4 class="faqlike bluecolh2">כותרת נוספת</h4>
<label for="pa_phone">טלפון</label>
<input type="text" name="pa_phone" id="pa_phone" placeholder="טלפון" /><br />
<label for="pa_phone"></label>
<select>
<option>054</option>
<option>052</option>
<option>053</option>
<option>050</option>
<option>08</option>
<option>09</option>
</select>
===UPDATE=====
Here is my scss:
.private_area {
label {
display:none;
}
input[type=text] {
float: right;
}
}
I think this is what you want right?
body { direction:rtl;}
H4 { clear:both; padding:20px 0;}
label { display:inline-block; width: 70px; margin:0 5px 0 0;}
.field { float:right;}
DEMO
let me know if you have any questions :) בהצלחה
I think the problem is the break statement after each input.

Text isn't aligning with an object correctly in html

So I'm trying to make a form with a message box, but it won't align correctly; it keeps pushing the text to the bottom of the area it takes up..
I've accepted putting in a break between the text field and the message field for a long time, but there's a break, so it isn't aligned there either...
JSFiddle: http://jsfiddle.net/2U2PJ/
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','E-mail','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
<p>
<label><font size="3">Name: </font>
<input name="Name" type="text" id="Name" size="25" /><font size="2"> <font color="red"><span id="req_3" class="req">*</span></font></font></label>
</p>
<p>
<label><font size="3">Email:</font>
<input name="E-mail" type="text" id="E-mail" size="25" /> <font size="2"><font color="red"><span id="req_3" class="req">*</span></font></font></label>
</p>
<p>
<label><font size="3">Review:</font>
<textarea name="Message" cols="35" rows="7" id="Message" placeholder="Y U SO BROKE MR. THINGY D;"></textarea>
</p>
</label>
<label>
<input name="Submit" type="submit" id="Submit" value="Submit" />
</label>
</form>
As per my comment. Use CSS. This should get you on the correct path:
http://jsfiddle.net/2U2PJ/3/
css:
.contact-form .field label { width: 100px; display:inline-block; vertical-align: top; }
.contact-form .req { color: red; }
.contact-form .field .textbox { width: 180px; }
html:
<div class="contact-form">
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','Email','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
<div class="field">
<label for="Name">Name:</label>
<input name="Name" type="text" id="Name" class="textbox" />
<span id="req_3" class="req">*</span>
</div>
<div class="field">
<label for="Email">Email:</label>
<input name="Email" type="text" id="Email" class="textbox" />
<span id="req_3" class="req">*</span>
</div>
<div class="field">
<label for="Message">Review:</label>
<textarea name="Message" cols="35" rows="7" id="Message" placeholder="Y U SO BROKE MR. THINGY D;"></textarea>
</div>
<div>
<input name="Submit" type="submit" id="Submit" value="Submit" />
</div>
</form>
</div>
Full Code to simplify your issue!
http://jsfiddle.net/SinisterSystems/jLXsV/2/
HTML:
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','E-mail','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
<p>
<label>Name:</label>
<input type="text" />
</p>
<p>
<label>Email:</label>
<input type="text" />
</p>
<p>
<label>Review:</label>
<textarea rows="7" cols="35"></textarea>
</p>
<p>
<input name="Submit" type="submit" id="Submit" value="Submit" />
</p>
CSS:
input, textarea {
width:200px;
margin-left:15px;
}
label {
float:left;
min-width:100px;
}
With your IDs
Fiddle: http://jsfiddle.net/SinisterSystems/jLXsV/3/