I have a fixed div with dynamic loaded li elements. Now I want the div-content to scroll when there are more than 9 li elements and a scroll-bar:
This is what it looks like:
At the moment the fixed div goes on over the footer and the content can not be scrolled.
Here is the css for all divs:
#fixed-div {
position: fixed;
width: 30%;
margin-top:290px;
padding-top:20px;
padding-bottom: 20px; /* must be same height as the footer */
background-color: rgba(255, 255, 255, 0.60);
min-height: 100%;
}
#absolute-div {
padding: 15px;
background-color: rgba(255, 255, 255, 0.60);
margin-bottom: 10px;
position: relative;
height: 200px;
}
#footer {
position: relative;
margin-top: -33px; /* negative value of footer height */
height: 20px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: left;
background-color:#fff;
padding-left:10px;
}
#map_canvas { /* background */
clear:left;
float: left;
width: 100%;
min-height: 100%;
z-index:-1001;
/* height: 530px;*/
-webkit-box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
}
And here's the HTML:
<body>
<div id="searchbox">
<div id="absolute-div" class="clear-block">
<form method="post" action="./index.php" accept-charset="UTF-8" method="post" id="clinic-finder-form" class="clear-block" class="clear-block">
<label for="edit-gmap-address">Standort angeben und Vorteile in der Umgebung finden: </label>
<input type="text" maxlength="128" name="address" id="address" size="60" value="" class="form-text" autocomplete="off" />
<?php
// support unicode
mysql_query("SET NAMES utf8");
$cats = $db->get_rows("SELECT categories.* FROM categories WHERE categories.id!='' ORDER BY categories.cat_name ASC");
?>
<select name="products" class="form-select" id="edit-products" ><option value="">Alle Kategorien</option>
<?php if(!empty($cats)): ?>
<?php foreach($cats as $k=>$v): ?>
<option value="<?php echo $v['id']; ?>"><?php echo $v['cat_name']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<input type="submit" name="op" id="edit-submit" value="Vorteile finden" class="btn btn-primary" />
<input type="hidden" name="form_build_id" id="form-0168068fce35cf80f346d6c1dbd7344e" value="form-0168068fce35cf80f346d6c1dbd7344e" />
<input type="hidden" name="form_id" id="edit-clinic-finder-form" value="clinic_finder_form" />
<input type="button" name="op" onclick="document.location.href='newstore.php'" id="edit-submit" value="Unternehmen vorschlagen" class="btn btn-primary" />
</form>
</div></div>
<div id="fixed-div">
<div id="clinic-finder" class="clear-block">
<div id="results">
<ol style="display: block; " id="list"></ol>
</div>
</div>
</div>
<div id="map_canvas"></div>
<div id="footer">© 2008-2013 Ihr Vorteilsclub - Impressum</div>
Thanks a lot! Marcel
Add this to your css:
#results {
height: 100%;
overflow-y: scroll; /* adds scrollbar */
}
You can do this with absolute positioning. You still need overflow-y: scroll. Absolutely position the top of the dynamic section to the total height of the fixed elements above it and the bottom to the total height of the fixed elements below it. May need to tweak slightly but that should do the trick of consuming all the intermediate space and scrolling the overflow.
Related
I'm trying to get two groups of checkboxes to display side by side in my parent flex container to make more room for some additional elements on my webpage. I have coded it per below and following the training on had on flex but I'm obviously missing something. When this area of my page is displayed, it is still just a vertical column with all of the checkboxes instead of two groups side my side. Can someone help me figure out what I'm doing wrong?
img {
width: 100%;
height: auto;
}
#larryfoto {
max-width: 90px;
}
#brochure {
max-width: 70px;
}
.headertd {
width: 34%;
}
#socialcontainer {
padding: 20px;
}
#headerlogo {
width: 85%;
display: block;
margin-left: 0px;
margin-right: auto;
}
#fb {
width: 33%;
margin-left: 40px;
margin-right: auto;
}
#linkedin {
width: 33%;
margin-left: 40px;
margin-right: auto;
}
#ig {
width: 33%;
margin-left: 40px;
margin-right: auto;
}
#warrantywisdom {
margin-left: 0px;
margin-rignt: auto;
}
input[type=text],
select {
width: 100%;
padding: 7px 10px;
margin: 5px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
}
input[type=radio] label {}
input[type=submit] {
width: 100%;
}
#bodydiv {
margin-left: 30px;
margin-right: 30px;
background-color: transparent;
}
#headerdiv {
margin-left: 35px;
margin-right: 30px;
border-radius: 10px;
}
.warranty_option_container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wty_option_child {
width: 50%;
height: 50%;
margin: auto;
}
table {
border-spacing: 10px;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.toolbox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#inputcell {
margin-left: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 33%;
vertical-align: top;
}
#radiocell {
margin-left: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 33%;
vertical-align: top;
}
#contactinfocell {
margin-left: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 33%;
vertical-align: top;
}
body {
background-image: url('hwa_house_bkgrnd.jpg');
width: 100%;
position: absolute;
top: 0;
left: 0;
}
form {
padding: 5px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
#myImg2 {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg2:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .8);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 1000px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Caption of Modal Image */
#caption2 {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<div id="headerdiv">
<table>
<tr>
<td class="headertd"><img src="hwa_header.jpg" id="headerlogo"></td>
<td class="headertd"><img src="header2.jpg" id="headerlogo2"></td>
<td id="socialcontainer">
<td class="socialtd" id="socialcell">
<a href="https://www.facebook.com/profile.php?id=100008339314922"><img src="fb.png" id="fb"></td>
<td class="socialtd">
<a href="https://www.linkedin.com/in/larry-hines-66a8a21/"><img src="linkedin.png" id="linkedin"></td>
<td class="socialtd">
<a href="https://www.instagram.com/lwhmicrovision/"><img src="ig.png" id="ig"></td>
</td>
</tr>
</table>
</div>
<div id="bodydiv">
<form class="input-form" name="textinput" id="input_form" method="POST">
<table id="formtable">
<tr id="mainrow">
<td id="inputcell">
<label for="propertyaddress">Covered Property Address</label>
<input type="text" id="propertyaddress" name="propertyaddress" required>
<label for="mailingaddress">Mailing Address (If Different)</label>
<input type="text" id="mailingaddress" name="mailingaddress">
<label for="buyername">Buyer Name(s)</label>
<input type="text" id="buyername" name="buyername" required>
<label for="buyeremail">Buyer Email Address</label><br>
<input type="text" id="buyeremail" name="buyeremail" required><br>
<label for="buyerphone">Buyer Phone</label><br>
<input type="text" id="buyerphone" name="buyerphone"><br>
<label for="titlecompany">Title Company</label><br>
<input type="text" id="titlecompany" name="titlecompany"><br>
<label for="escrowofficer">Escrow Officer Name</label><br>
<input type="text" id="escrowofficer" name="escrowofficer"><br>
<label for="escrowofficeremail">Escrow Officer Email Address</label><br>
<input type="text" id="escrowofficeremail" name="escrowofficeremail"><br>
<label for="escrowofficerphone">Escrow Officer Phone</label><br>
<input type="text" id="escrowofficerphone" name="escrowofficerphone"><br>
<label for="referringagent">Agent Name and Agency</label><br>
<input type="text" id="referringagent" name="referringagent" required><br>
<label for="referringagentphone">Agent Phone</label><br>
<input type="text" id="referringagentphone" name="referringagentphone" required><br>
<label for="referringagentemail">Agent Email Address</label><br>
<input type="text" id="referringagentemail" name="referringagentemail" required><br>
</td>
<td id="radiocell">
<table>
<tr>
<td>
<label for="closingdate"><u>Closing Date</u></label><br>
<input type="date" id="closingdate" name="closingdate" required><br><br>
<label for="hometype"><u>Type of Home</u></label><br><br>
<input type="radio" id="Single Family" name="hometype" value="singlefamily" required><label for="Single Family">Single Family</label><br>
<input type="radio" id="Townhome/Condo/Mobile Home" name="hometype" value="towncondomobile"><label for="Townhome/Condo/Mobile Home">Townhome/Condo/Mobile Home</label><br>
<select form="input_form" name="multitype" id="duplex_triplex_fourplex" value="Multi-Flat Warranty Options">
<option value="" selected disabled hidden>Select Multi-Flat Option</option>
<option value="duplex_gold">Duplex Gold - $720</option>
<option value="duplex_platinum">Duplex Platinum - $855</option>
<option value="duplex_diamond">Duplex Diamond - $945</option>
<option value="triplex_gold">Triplex Gold - $1040</option>
<option value="triplex_platinum">Triplex Platinum - $1235</option>
<option value="triplex_gold">Triplex Diamond - $1365</option>
<option value="triplex_gold">Fourplex Gold - $1360</option>
<option value="triplex_platinum">Fourplex Platinum - $1615</option>
<option value="triplex_gold">Fourplex Diamond - $1785</option>
</select>
</td>
<td>
<label for="warrantytype"><u>Select Warranty Type</u></label><br><br>
<input type="radio" id="Gold" name="warrantytype" value="Gold" required><label for="Gold">Gold - $400</label><br>
<input type="radio" id="Platinum" name="warrantytype" value="Platinum"><label for="Platinum">Platinum - $475</label><br>
<input type="radio" id="Diamond" name="warrantytype" value="Diamond"><label for="Diamond">Diamond - $525</label><br>
<input type="radio" id="Sellers" name="warrantytype" value="Sellers"><label for="Sellers">Sellers Warranty</label><br>
<input type="radio" id="New Construction" name="warrantytype" value="New Construction"><label for="New Construction">New Construction</label><br>
<input type="radio" id="Multiyear" name="warrantytype" value="Multi-Year"><label for="Multiyear">Multi-Year Warranty</label><br><br>
</td>
</tr>
</table>
<label for="warrantynotes" title="Describe warranty type if new construction or multi-year, also please note if warranty to be paid by proceeds at closing or directly by buyer, seller or real estate agent"><u>Warranty Notes - (hover mouse over this label for instructions)</u></label><br>
<input type="text" id="notes" name="warrantynotes"><br>
<label for="options"><u>Options</u></label><br>
<div class="warranty_option_container">
<div class="wty_option_child">
<input type="checkbox" id="greenplus" name="optiontype[]" value="greenplus"><label for="greenplus">$70 Green Plus</label><br>
<input type="checkbox" id="termite" name="optiontype[]" value="termite"><label for="termite">$75 Subterranean Termite Treatment</label><br>
<input type="checkbox" id="freezer" name="optiontype[]" value="freezer"><label for="freezer">$50 Freezer-Standalone</label><br>
<input type="checkbox" id="wetbar" name="optiontype[]" value="wetbar"><label for="wetbar">$25 Wet Bar Refrigerator/2nd Fridge</label><br>
<input type="checkbox" id="poolspa" name="optiontype[]" value="poolspa"><label for="poolspa">$150 Pool/Spa Combo</label><br>
<input type="checkbox" id="addpoolspa" name="optiontype[]" value="addpoolspa"><label for="addpoolspa">$150 Additional Pool or Spa</label>
</div>
<div class="wty_option_child">
<input type="checkbox" id="saltpool" name="optiontype[]" value="saltpool"><label for="saltpool">$300 Salt Water Pool w/Spa Combo</label><br>
<input type="checkbox" id="wellpump" name="optiontype[]" value="wellpump"><label for="wellpump">$100 Well Pump</label><br>
<input type="checkbox" id="septicpump" name="optiontype[]" value="septicpump"><label for="septicpump">$75 Septic /Ejector Pump/Tank Pumping</label><br>
<input type="checkbox" id="waterline" name="optiontype[]" value="waterline"><label for="waterline">$90 External Water Line Repair</label><br>
<input type="checkbox" id="waterlineandsewer" name="optiontype[]" value="waterlineandsewer"><label for="waterlineandsewer">$195 External Water/Sewer Line Repair</label>
</div>
</div>
<input type="text" id="sendername" name="sendername" required value="Enter Your Name Here"><br>
<input type="text" id="orderemail" name="orderemail" required value="Enter Your Email Address"><br><br>
<input type="submit" id="placeorder" name="placeorder" style="width:100%;" value="Place Warranty Order"><br><br> *Payment is not required at time of order. You will receive an invoice after the order is placed. Contact me to discuss payment
options.
</td>
<td id="contactinfocell" class="toolbox">
<h2>Warranty Toolbox</h2>
<hr>
<table>
<tr>
<td id="warrantycell">
<!-- Trigger the Modal -->
<img id="myImg" src="updated_warranty_matrix.jpg" alt="Warranty Option Matrix" style="width:100%;max-width:110px"><br> View Warranty Options
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" id="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<br>
</td>
<td>
<!-- Trigger the Modal -->
<img id="myImg2" src="file_claim.jpg" alt="File a Claim" style="width:100%;max-width:125px"><br> File a Claim
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img02">
<!-- Modal Caption (Image Text) -->
<div id="caption2"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal2");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg2");
var modalImg = document.getElementById("img02");
var captionText = document.getElementById("caption2");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[1];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</td>
<td "brochurecell">
<img src="brochure_thumb.jpg" width="70" height="95" id="brochure"><br>Brochure
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td id="warrantywisdom" class="toolbox">
<ul class="doubleBullets">
<u><b>Watch our Warranty Wisdom Videos to get the most from your home warranty!</b></u><br><br>
<ul class="doubleBullets">
<li>Understand HWA Home Warranty Coverage</li>
<li>Home Warranty vs. Homeowners Insurance - What's the Difference?</li>
<li>Why Choose HWA</li>
<li>Home Warranty of America (HWA): Who We Are</li>
<li>How Do I Know What Coverage I Need for My Home Warranty?</li>
</ul>
<ul class="doubleBullets">
<li>What's Covered by an HWA Home Warranty?</li>
<li>How Do I File a Claim with Home Warranty of America?</li>
<li>Why Was My Claim Rejected?</li>
</ul><br>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td id="contactme" class="toolbox">
<u><b>Contact Me</b></u><br><br> Larry Hines<br> Account Executive, Idaho<br> Home Warranty of America<br> (208) 761-1666<br>
larry.hines#hwahomewarranty.com
</td>
<td><img src="larry_bc_photo.jpg" id="larryfoto">
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td id="promotext">
<h2>Check out our new<br>Spring Promo!</h2>
</td>
<td width="100px;">
<img src="arrow.png" style="width:100%; max-width:80px;">
</td>
<td id="arlocell">
<!-- Trigger the Modal -->
<img id="myImg3" src="arlo_thumbnail.JPG" alt="Spring Promo" style="width:100%;max-width:80px;"><br>
<!-- The Modal -->
<div id="myModal3" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img03">
<!-- Modal Caption (Image Text) -->
<div id="caption3"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal3");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg3");
var modalImg = document.getElementById("img03");
var captionText = document.getElementById("caption3");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = "HWA_Arlo_flyer.jpg";
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[2];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</td>
</tr>
</table>
<hr>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
Here is the whole .CSS file. I don't see anything competing but it's worth mentioning that the container and child div's in my flexbox are all inside of a element that is part of a 3 column table that lays out the format of the page. Does flexbox work inside of a TD?
Hi Guys I am using a table: cell-spacing layout for my website and I need some help. I have a two column website, one being the sidebar and the other containing the content. However, if I add any margins within one of the table-cell divs it moves the side bar spacing with it. I need the spacing on these two cells to be different, and I am not sure how to do so.
My code is as follows:
The CSS:
content {
width : 100%;
display : table;
margin : 0 auto;
height : 100%;
}
#side_bar, #main {
display : table-cell;
}
#side_bar {
border: 1px solid #111;
width: 13%;
background: linear-gradient(#444, #111);
}
#main {
width: 65%;
}
#contact_box {
margin-left: 30%;
margin-top: 7%;
background-color: #111;
opacity: 0.3;
width: 500px;
height: 500px;
}
The HTML:
<div id="content">
<div id="main">
<div id="contact_box">
<form method="post" id="contact_form" action="contact.php">
<p>Full Name:</p> <input type="text" size="40" id="fullname" name="fullname"><br/>
<p>Email Address:</p> <input type="text" size="40" id="email" name="email"><br/>
<p>Type of Inquiry:</p> <input type="text" size="40" id="question" name="question"><br/>
<p>Message:</p> <textarea rows="20" cols="45"></textarea><br/>
<input type="submit" style="float:right; text-transform: uppercase;" value="Send">
</form>
</div>
</div>
<div id="side_bar">
<div id="divider"><h1>News Blurb</h1></div>
<div id="news"><?php //print_news(); ?></div>
<div id="divider"><h1>Featured Games</h1></div>
<div id="featured"><?php //echo $games ?></div>
</div>
</div>
Thank you for any and all help.
Try:
#side_bar {
vertical-align:top;
}
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.
If you visit my page (http://www.dentalfixrx.com/local-equipment-repair/) and click the "get started" button at the top right you will open a lightbox form.
I would like to create code so the lightbox appears on page load automatically.
Here is the code to open the lightbox currently: <img src="images/mobile-dental-repairs.gif" width="184" height="36"border="0" class="getstarted" />
simply visiting http://www.dentalfixrx.com/local-equipment-repair/download-kit.html does not work
Wrap the lightbox code into a parent div (.parent) and hide that whole div initially
HTML:
<div class="parent">
<div class="downloadkit"><form action="formmail.php" method="post" >
<input type="hidden" name="recipients" value="brian#dentalfixrx.com,billdonatojr#gmail.com,andy#dentalfixrx.com" />
<input type="hidden" name="subject"value="New DentalFixRx Lead!" />
<input type="hidden" name="good_url" value="thanks-downloadkit.php" />
<div style=" width:300px; position:absolute; right:10px; top:15px;">
<h1 style="font-size:20px; margin:5px auto;">Emergency Fix Needed?</h1>
To receive a fast response, please complete the form below and click the "submit" button.
</div>
<p><label>Name/Business:<span class="red">*</span></label><input type="text" name="name" id="name" /></p>
<p> <label> Phone:<span class="red">*</span></label> <input type="text" name="phone" id="phone" / > </p>
<p> <label>Email:<span class="red">*</span></label> <input type="text" name="email" id="email" / ></p>
<p> <label>State:</label> <input type="text" name="st" id="st" / ></p>
<p> <label>Zip Code:</label> <input type="text" name="zip" id="zip" / ></p>
<p> <label>Service Needed:</label><select name="">
<option>Select one</option>
<option>Handpiece Repair</option>
<option> -Low Speed</option>
<option> -High Speed</option>
<option> -Electric High Speed</option>
<option>Equipment Repair</option>
<option> -Autoclaves</option>
<option> -Chairs & Delivery Units</option>
<option> -Compressors</option>
<option> -Vacuum Pumps</option>
<option> -Ultrasonic Scalers</option>
<option> -Instrument Sharpening</option>
<option> -Upholstery</option>
<option> -Curing Lights</option>
<option> -Film Processors</option>
<option>Other Service</option>
</select></p>
<p> <label>Select type of request:</label><select name="">
<option>Select one</option>
<option>Just a casual question</option>
<option>I need some help but it's not super time-sensitive</option>
<option>Things are broken and I'd like them not to be!</option>
<option>I can't get things done, please reply ASAP</option>
</select></p>
<div class="clear"></div>
<input value=" " type="submit" class="download-btn" width="231px" height="36px" />
<span>Exit</span>
</form></div>
</div>
CSS:
div.parent
{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: 'Myriad Pro', Arial, sans-serif !important;
font-size: 22px !important;
border: 2px solid #aaa;
z-index: 1040;
-moz-box-shadow: 0px 0px 20px 2px #ccc;
-webkit-box-shadow: 0px 0px 20px 2px #ccc;
box-shadow: 0px 0px 20px 2px #ccc;
background: rgb(54, 25, 25); /* Fall-back for browsers that don't
support rgba */
background: rgba(255, 255, 255, .7);
}
div.downloadkit
{
position: fixed;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
Then, on your home page of your site, add the following code: Note, this is jQuery, so just add the jquery library to your site, either in the header or just above the closing body tag -
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Now add this code right below where you added jQuery:
<script type="text/javascript">
$(window).load(function(){ //this is pageload
$('div.parent').show(500); //500 is the animation speed
})
</script>
NOTE: If
$('div.parent').show(500);
does not work, try:
$('div.parent').css('display','block');
I've got a website that has a big image covering the screen. In its image there are several DIVs (Text, Forms, Images) (see picture 2). The big image container is made displaying always the center of the image regardless of window size, so when you make your windows smaller, the very center stays visible.
The problem now is that the DIVs are collapsing, when I scale down the window size (see picture 3).
Picture number 2 depicts what it is intended to be look like!
#div1 {
width:25%;
left: 32%;
top:7.5%;
position: relative;
float:left;
}
#div2 {
position:relative;
left:37.5%;
clear:both;
width:14%;
height:20%;
}
#div2 h2 {
width:10%;
left:15%;
margin-top:11%;
position: relative;
float: left;
}
#div3 {
left: 64.4%;
top:-2.5%;
width:111px;
position: relative;
}
#div4{
left: 93%;
top:-18.0%;
width:111px;
position: relative;
}
And HTML:
<body>
<div id="wrapper"\>
<div id="div1">
<h1>Seite nicht gefunden!</h1>
</div>
<h2>Bug melden</h2>
<div id="div2">
<form>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="###" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
</div>
<div id="div3">
<img src="logo.png" alt="Logo" />
</div>
<div id="div4">
<p>Jetzt<br/ >Tester<br />werden!<br /></p>
</div>
</div>
</body>
Can you please help me what I'm doing wrong? Thank you very much in advance!
Christoph
This is probably way far from perfect, but it's worth trying.
The html code:
<head>
<meta charset="utf-8">
<title>404</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="error">
<h1>Seite nicht gefunden!</h1>
</div>
<form id="form">
<h2>Bug melden</h2>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="http://www.###/???" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
... //other code goes here</div>
and this is the edited section of the css code:
#wrapper { width: 640px; height: auto; margin: 0 auto; }
#error { font-size: 120%; margin: 65px 0 0 60px; float:left; }
#error h1 { font-size: 150%; text-align:center; }
#form { margin: 15px 86px; width:260px; height: 40%; float: left; background: green; }
Check the working example here: example
Hope that helps as a start.