I actually have two requests. First, the form below is supposed to have two containers in a form that should run across the page like – container1 OR container2. I thought I understood the concept of moving boxes around and aligning them, but I think I have tried every combination of display, float and position and can’t get them to do that so I am missing something. That’s the easy one. And the code should be loadable for viewing as is. I put boxes around the container and the text just to see where they are.
Second, I would really appreciate for someone to take a look at my css markup and critique it from an efficiency standpoint and a semantic standpoint. Too many divs, meaningful classes and id’s, etc. I would really appreciate it.
Thanks
Form
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Model Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<div id="box">
<div id="container">
<div id="innerwhole">
<form action="Search?ziprlookup" method="post">
<div id="searchbyrestaurant">
<p>Search By Business</p>
</div>
<div id="info">
<div id="form-zip-txtcntnr">
<div id="form-zip-select">
<label for="zipmileshigh">Find all businesses within</label>
<select name="zipmileshigh" id="zipmileshigh">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
</select>
</div>
<div id="form-zip-select2">
<p>miles</p>
</div>
<div id="form-zip-text">
<label for="zip1">of this ZIP Code:</label>
<input type="text" name="zip1" id="from" maxlength="5" value="">
</div>
</div>
<div id="form-zip-or">
<p>OR</p>
</div>
<div id="form-city-txtcntnr">
<label for="city" id="labelcity">City:</label>
<input type="text" name="city" id="city">
<label for="city" id="labelstate">State:</label>
<input type="text" name="city" id="state">
</div>
<div id="form-zip-submit">
<input type="submit" name="Submit" value="Find Businesses">
</div>
</div>
</form>
</div>
<div id="bottom-partial">
<p>example bottom text</p>
</div>
</div>
<div id="footer">
<p>
All files <cite>copyrighted</cite> ©
</p>
</div>
</div>
</body>
</html>
css
body {margin: 0; padding: 0; background: #ddd; color: #000; font: normal normal normal 95%/1.4 Verdana, Tahoma, sans-serif; background: white;}
#box {overflow: hidden; width: 950px; margin: 3px auto; background: #fff;}
#container {clear: both; overflow: hidden; background: url(/images/thirdcolbgnd.png) repeat-y 785px 0;}
#innerwhole {float: left; overflow: hidden; width: 755px; margin: 0 10px 5px 5px; padding: 3px 0 0 0;}
#right-bar {float: right; overflow: hidden; width: 160px; margin: 0; padding: 0;}
#bottom-partial {clear: left; width: 770px; margin: 0; padding: 0 0 0 5px;} /*div tag outside bottom-partial*/
#footer {clear:both; width: 100%; height: 40px; margin: 5px 0 0 0; padding: 3px 0; border-top: 1px solid #000; background: #fff; font-size: 80%;}
/***************************************************************************************************************************/
form {margin: 0; padding: 0;}
form br {clear: both;}
p {margin: 0; text-align: left; }
/***************************************************************************************************************************/
#searchbyrestaurant p{margin: 10px 0 0 120px; width: 400px; font-size: 120%; text-align: center; border: 1px solid #9f389d;}
#info {display: inline-block; clear: left; width: 735px; border: 1px solid red;}
#form-zip-txtcntnr{display: inline-block; width: 340px; height: 110px; margin: 30px 20px 20px 5px; padding: 20px 10px; background: #f0f0f0; border: 1px solid #9f389d; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#form-zip-select label{float: left; width: 215px; margin: 0; padding: 0 10px 0 0; text-align: right; font-weight: bold;}
#form-zip-select select{float: left; width: 50px; margin: 0; padding:0; text-align: center; font-weight: bold;}
#form-zip-select2 p{float: left; width: 50px; margin: 0; padding:0 0 0 10px; text-align: right; font-weight: bold;}
#form-zip-text label{float: left; width: 220px; margin: 0; padding: 10px 10px 0 0; text-align: right; font-weight: bold;}
#form-zip-text input{float: left; width: 55px; text-align: center; margin: 10px 0; border: 1px solid #9f389d;}
#form-zip-or p{display: inline; width: 30px; height: 25px; margin-top: 0px; font-size: 140%; border: 1px solid #9f389d;}
#form-city-txtcntnr{float: right; width: 240px; height: 110px; margin: 30px 20px 20px 5px; padding: 20px 20px; background: #f0f0f0; border: 1px solid #9f389d; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
label#labelcity {float: left; width: 50px; margin: 0; padding: 10px 10px 0 0; text-align: right; font-weight: bold;}
input#city { width: 155px; margin: 10px 0; border: 1px solid #9f389d;}
label#labelstate {float: left; width: 50px; margin: 0; padding: 10px 10px 0 0; text-align: right; font-weight: bold;}
input#state { width: 30px; margin: 10px 0; border: 1px solid #9f389d;}
#form-zip-submit input{float: left; width: 200px; height: 30px; margin: 25px 0 5px 240px; font-weight: bold; text-align: center; background: #f0f0f0; border: 1px solid #9f389d; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
PaulOB
August 2, 2010, 3:55pm
2
HI,
I’m guessing that you wanted something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
color: #000;
font: normal normal normal 95%/1.4 Verdana, Tahoma, sans-serif;
background: fff;
}
#container {
width: 950px;
margin:2px auto;
padding:1px 0;
clear: both;
overflow: hidden;
background: url(/images/thirdcolbgnd.png) repeat-y 785px 0;
}
#innerwhole {
float: left;
overflow: hidden;
width: 755px;
margin: 0 10px 5px 5px;
padding: 3px 0 0 0;
background:#f2f2f2;
display:inline;
}
#right-bar {
float: right;
width: 160px;
background:#ffc;
}
#bottom-partial {
clear: both;
width: 770px;
margin: 0;
padding: 0 0 0 5px;
} /*div tag outside bottom-partial*/
#footer {
clear:both;
width: 100%;
height: 40px;
margin: 5px 0 0 0;
padding: 3px 0;
border-top: 1px solid #000;
background: #fff;
font-size: 80%;
}
/***************************************************************************************************************************/
form, fielsdet {
margin: 0;
padding: 0;
}
form br {
clear: both;
width:100%;
}
p {
margin: 0;
text-align: left;
}
/***************************************************************************************************************************/
.searchform fieldset {
width:735px;
border:none;
}
.searchform legend {
margin:0;
padding:0;
width:735px;
display:block;
}
.searchform legend b {
margin:0 auto;
width: 400px;
font-size: 120%;
text-align: center;
border: 1px solid #9f389d;
display:block;
}
#form-zip-txtcntnr {
display: inline-block;
width: 340px;
height: 110px;
vertical-align:middle;
margin: 30px 20px 20px 5px;
padding: 20px 10px;
background: #f0f0f0;
border: 1px solid #9f389d;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-weight:bold;
}
* html #form-zip-txtcntnr{display:inline;}
*+html #form-zip-txtcntnr{display:inline;}
#form-zip-txtcntnr label {
float: left;
width: 215px;
margin: 0;
padding: 0 10px 0 0;
text-align: right;
font-weight: bold;
}
#form-zip-txtcntnr select {
float: left;
width: 50px;
margin: 0 10px 0 0;
padding:0;
text-align: center;
font-weight: bold;
}
#form-zip-txtcntnr label.zip {
float: left;
width: 215px;
margin: 0;
padding: 10px 10px 0 0;
text-align: right;
font-weight: bold;
}
#form-zip-txtcntnr input#from {
float: left;
width: 55px;
text-align: center;
margin: 10px 0;
border: 1px solid #9f389d;
}
p#form-zip-or {
display: inline-block;
width: 30px;
height: 25px;
margin-top: 0px;
font-size: 140%;
border: 1px solid #9f389d;
vertical-align:middle;
}
* html p#form-zip-or {display:inline}
*+html p#form-zip-or {display:inline}
#form-city-txtcntnr {
display:inline-block;
vertical-align:middle;
width: 240px;
height: 110px;
margin: 30px 0 20px 15px;
padding: 20px 20px;
background: #f0f0f0;
border: 1px solid #9f389d;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
* html #form-city-txtcntnr{display:inline;}
*+html #form-city-txtcntnr{display:inline;}
label#labelcity {
float: left;
width: 50px;
margin: 0;
padding: 10px 10px 0 0;
text-align: right;
font-weight: bold;
}
input#city {
width: 155px;
margin: 10px 0;
border: 1px solid #9f389d;
}
label#labelstate {
float: left;
width: 50px;
margin: 0;
padding: 10px 10px 0 0;
text-align: right;
font-weight: bold;
}
input#state {
width: 30px;
margin: 10px 0;
border: 1px solid #9f389d;
}
#form-zip-submit input {
width: 200px;
height: 30px;
margin:0 auto 5px;
display:block;
clear:both;
font-weight: bold;
text-align: center;
background: #f0f0f0;
border: 1px solid #9f389d;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="innerwhole">
<form class="searchform" action="Search?ziprlookup" method="post">
<fieldset>
<legend><b>Search By Business</b></legend>
<div id="form-zip-txtcntnr">
<label for="zipmileshigh">Find all businesses within</label>
<select name="zipmileshigh" id="zipmileshigh">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
</select>
miles
<label class="zip" for="zip1">of this ZIP Code:</label>
<input type="text" name="zip1" id="from" maxlength="5" value="">
</div>
<p id="form-zip-or">OR</p>
<div id="form-city-txtcntnr">
<label for="city" id="labelcity">City:</label>
<input type="text" name="city" id="city">
<label for="city" id="labelstate">State:</label>
<input type="text" name="city" id="state">
</div>
<div id="form-zip-submit">
<input type="submit" name="Submit" value="Find Businesses">
</div>
</fieldset>
</form>
</div>
<div id="right-bar">Right bar</div>
<div id="bottom-partial">
<p>example bottom text</p>
</div>
<div id="footer">
<p> All files <cite>copyrighted</cite> © </p>
</div>
</div>
</body>
</html>
Try not to wrap everything in divs when there is no need as you can often target the existing elements to do the same job anyway.
Display:inline-block isn’t supported in IE6 or 7 hence the hacks to make it work.
If you didn’t want the hacks you could have floated the elements but the you would lose the automatic vertical alignment.
Sure, in the form, they can select to enter a zip code with radius, or a city/state pair to look up businesses. It’s an either/or situation. So I wanted to show the zip lookup on the left side and the city/state pair on the right, each in it’s own visual container with border, with the word OR in between the two containers.
It sounds so easy but for some reason I can’t get it to do that.
ralphm
August 2, 2010, 2:24pm
4
bestboy, could you explain again what you want to do with the layout? I couldn’t quite understand what you are trying to achieve.
PaulOB
August 2, 2010, 9:52pm
5
Hi,
As I mentioned earlier they were two hacks for Ie6 and IE7 respectively to make then understand inline-block which they don’t natively do.
You can read up on the details here which should explain the issues more clearly
That’s exactly what I was looking for. Let me pull it apart line by line so I fully understand it. If I have any questions, I’ll be back. But thanks so much, I really appreciate the time.
Why do you need the last two lines of this since you have declared the or id an inline-block. This is definitely where I missed it. Is that to give it added weight or is there some other significance to the HTML. And why the two entries. Thanks again, definitely a huge help.
p#form-zip-or {#9f389d ;
html p#form-zip-or {display:inline}
