Is a div necessary?
I'm just starting out in Dreamweaver CC, trying to teach myself, having kind of a tough go. I value this forum because there is nowhere else for me to go when I get stuck.
I have a very basic question: Is it necessary or desirable to insert a div element before inserting an image (inside the div)? I know David Powers does this but he never explains why.
For example, in my first site I want an image ("bigpic") to appear at the top left of my page and occupy 60% of the page width.
What I did was insert a container div at 100% width, then I inserted a #bigpic div at 100% width with property "float left", and then my bigpic img inside the bigpic div at 60% also with "float left".
I can see that this method will place the image correctly but is this the best way to do it? I would like to avoid complications later on, so again - is the bigpic div necessary? Couldn't I just insert the bigpic image into the container div and skip the bigpic div?
Later on I want to add other elements which will "move up" alongside the bigpic image.
Thanks,
Kevin Burke
Cambridge, Massachusetts
No, it is not necessary to place a division expressly for an image, yet in a responsive design it is desirable. Have a look at the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style>
body {
width: 100%;
max-width: 980px;
margin: auto;
img {
display: block;
.img {
width: 60%;
.img img {
width: 100%;
</style>
</head>
<body>
<img src="http://www.adobe.com/images/shared/product_mnemonics/48x48/dreamweaver_48x48.png" alt="" />
<div class="img"><img src="http://www.adobe.com/images/shared/product_mnemonics/48x48/dreamweaver_48x48.png" alt="" /></div>
</body>
</html>
Copy and paste the code into a new document and view in your browser. Also increase and decrease the width of the browser to see the behaviour of the images.
Similar Messages
-
Spry Menu Bar transparency problem - one solution
Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps -
I am running 10.6.8 and using iweb for my web site. After several SEO analysis they all indicate I need H1-6 header tags. After looking at the source code I see there are none in iweb. Are they necessary to add? Why would one add these tags and how do I add H Tags to iweb? And are there examples to look at? I am slowly learning about simple web design and assumed that iweb was stand alone without having to write code. Is this one of the reasons iweb is no longer supported? Thanks for looking at this!
A simple text page like this:
Heading
sub heading
text paragraph ....
Is traditionally represented by html tags like:
<h1>Heading</h1>
<h2>sub heading</h2>
<p>text paragraph ... </p>
I would guess that the use of h1-h6 tags helps search engines to understand the structure of a page as the tags imply a certain structure.
This can be compared to more generic tags like <div> that could represent any kind of content - and may be what iWeb uses (you'll have to check yourself).
I would generally recommend that you use some kind of up to date blog/site building tool, perhaps Wordpress or Squarespace (I haven't used either one myself) that support current web technologies - this should reduce your SEO issues and make it easier to properly support mobile/tablet users. -
Div moves down when window is resized
Hello,
Here's my problem: When I resize my browser window the main div is resized up until a certain point when it just falls below all of the other content.
How can I prevent this from happening? I have both the top and bottom div's set to auto width, so I can't figure out whats going wrong.
Here's the website if you want to see for yourself: www.hondovfd.org
Here's some code from my template file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="Title" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
<meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
<link href="../stylesheet1.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css">
#mainContent, #sidebar1 { zoom: 1;}
</style>
<![endif]-->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColLiqHdr">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<h3>Navigation : </h3>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="/index.php">Home</a></li>
<li><a href="/support.php">Support Hondo</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
<ul>
<li><a href="/people.php">Our People</a></li>
<li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
<li><a href="/medical.php">Medical</a></li>
<li><a href="/apparatus.php">Apparatus</a></li>
<li><a href="/training.php">Training</a></li>
<li><a href="/volunteer.php">Volunteer</a></li>
<li><a href="/statistics.php">Statistics</a></li>
<li><a href="/patchtrading.php">Patch Trading</a></li>
</ul>
</li>
<li><a href="/gallery2/main.php">Photo Gallery</a></li>
<li><a href="/calendar.php">Calendar</a></li>
<li><a href="/news.php">Blog/News</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<span class="lefttext">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8567201">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
</img></input></input>
</span>
</form>
<span class="lefttext"><br />
</span>
<center>
<span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
</center>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
<a href="/membersonly/register.php">Register</a></p>
<p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
<p>Call Statistics as of:<br />
<?php
$myFile = "/home/hondovf1/public_html/membersonly/month.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?><?php
$myFile = "/home/hondovf1/public_html/membersonly/date.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></p>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="60%">EMS Calls</td>
<td width="40%"><?php
$myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
<td>Fire Calls</td>
<td><?php
$myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
<td>Other Calls</td>
<td><?php
$myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
</table>
<hr />
<!-- Begin Google Search Element -->
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
var googleNumSearchResults = 5;
var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<!-- End Google Search Element -->
</div>
<!-- end #sidebar2 -->
<div id="mainContent">
<div class="topleft"></div><div class="top"><div class="topright"></div></div>
<div class="wrap">
<!-- TemplateBeginEditable name="Main Content" -->
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="47" class="h2">Header</td>
</tr>
<tr>
<td>Text Goes Here!</td>
</tr>
</table>
<!-- TemplateEndEditable -->
</div><br class="clearfloat" />
<div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
</div>
</div>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p align="center">© Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
</body>
</html>
And here is my CSS file:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: auto;
color: #333333;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-image: url(images/main-right.png);
background-repeat: repeat-y;
.thrColLiqHdr #container {
width: 95%; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-image: url(/images/halftone1.png);
.thrColLiqHdr #header {
padding: 0 10px;
height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position:center;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000;
.thrColLiqHdr #navbar {
height:45px;
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.thrColLiqHdr #sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 15%; /* top and bottom padding create visual space within this div */
height: 100%;
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
min-width: 150px;
.thrColLiqHdr #sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 15%; /* top and bottom padding create visual space within this div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
min-width: 150px;
.thrColLiqHdr #sidebar3 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 275px; /* top and bottom padding create visual space within this div */
padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
min-width: 150px;
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
text-align: center;
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.thrColLiqHdr #mainContent {
margin-top: 10px;
margin-bottom: 10px;
float: left;
width: 65%;
background-image: url(images/main-right.png);
background-repeat: repeat-y;
background-position: right;
.h2 {
color: #B4241B;
font-size: 20px;
letter-spacing: -2px;
font-weight: 100;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: normal;
.thrColLiqHdr #footer {
text-align: center;
color: #666;
font-size: 11px;
padding: 10px;
background: #f7f7f7;
border-top: 1px solid #aaa;
width: auto;
.thrColLiqHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.topleft {
height:22px;
width:19px;
background-image:url(images/top-left.png);
float: left;
.top {
height:23px;
background-image: url(images/top.png);
background-repeat:repeat-x;
width: auto;
.topright {
height:22px;
width:28px;
background-image:url(images/top-right.png);
float: right;
.textarea{
.wrap{
text-align: justify;
padding-right: 40px;
padding-left: 40px;
background-repeat: repeat-y;
float:left;
background-image: url(images/main-left.png);
width: auto;
clear: left;
.wrapright {
width:4px;
background-image:url(images/main-right.png);
background-repeat: repeat-y;
float: right;
.bottomleft {
height:22px;
width:19px;
background-image:url(images/bottom-left.png);
float: left;
clear: left;
.bottom {
height:23px;
background-image: url(images/bottom.png);
background-repeat:repeat-x;
width: auto;
.bottomright {
height:22px;
width:27px;
background-image:url(images/bottom-right.png);
float: right;That's one of the problems with liquid (%) based layouts. In your default.css file, replace the top 2o selector rules with the following:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin:0;
padding:0;
background: url(images/main-right.png) repeat-y;
.thrColLiqHdr #container {
width: 95%;
min-width: 870px; /**keep page from collapsing**/
margin:0 auto;
background: url(/images/halftone1.png);
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
Issue with container divs, and absolute/fixed positioning
Hello everyone, I have an issue getting my divs to function properly. I have a container div and I want the table div to float inside (and move with page resize). Right now it doesnt move with the page (see photo).
However, when I change the position to relative of that div, it moves under the container div and locks itself there.(Second photo)
Any help would be great! Thanks!
Picture one:
Picture two
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>davide marchetti architetto</title>
<!-- TemplateEndEditable -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<link href="ttp://mottie.github.com/tablesorter/css/theme.blue.css" rel="stylesheet">
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#myTable").tablesorter();
</script>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin: 0;
padding: 0;
color: #000;
background-image: url();
background-repeat: no-repeat;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
padding: 10px 0;
font-size: x-small;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
body,td,th {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
#apDiv1 {
position: relative;
width: 618px;
height: 268px;
z-index: 1;
left: 186px;
top: 147px;
overflow: hidden;
#apDiv2 {
position: relative;
width: 698px;
height: 299px;
z-index: 1;
left: 266px;
top: 117px;
overflow: scroll;
table.tableizer-table {
border: 1px solid #CCC; font-family: Courier New, Courier, monospace;
font-size: 12px;
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
.tableizer-table th {
background-color: #000000;
color: #FFF;
font-weight: bold;
#apDiv4 {
position: relative;
width: 697px;
height: 299px;
z-index: 1;
left: -141px;
top: -636px;
overflow: scroll;
#apDiv3 {
position: relative;
width: 700px;
height: 300px;
z-index: 2;
h1,h2,h3,h4,h5,h6 {
font-family: "Courier New", Courier, monospace;
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<div class="container">
<div class="container"><img src="../images/Davide.png" width="800" height="600" usemap="#Map" border="0" />
<div id="apDiv2">
<map name="Map" id="Map">
<area shape="rect" coords="48,416,125,435" href="../news.html" />
<area shape="rect" coords="262,416,304,436" href="../studio.html" />
<area shape="rect" coords="490,416,545,435" href="../projects.html" />
<area shape="rect" coords="702,415,751,436" href="../contact.html" />
</map>
<table id="myTable" class="tableizer-table">
<thead>
<tr class="tableizer-firstrow">
<th>YEAR </th>
<th>PROJECT</th>
<th>LOCATION</th>
<th>CATEGORY</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td>2013</td>
<td>EXPO 2015 - Italian Pavilion</td>
<td>Milan - Italy</td>
<td>Culture</td>
<td>Competition</td>
</tr>
<tr>
<td>2012</td>
<td>Requalification of "Almerici", "Bufalini" and "Fabbri" Squares</td>
<td>Cesena - Italy</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Re-thinking Shanghai: sustainable intervention along the Suzhou Creek</td>
<td>Shanghai - China</td>
<td>Mixed use</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>VCC Flat</td>
<td>Rome - Italy</td>
<td>Interior design</td>
<td>Commission / Built</td>
</tr>
<tr>
<td>2011</td>
<td>London 2012 Olympic Games Information Pavilion</td>
<td>London - UK</td>
<td>Culture</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Enhancement project for the sacred area of the sanctuary of Hercules Victor</td>
<td>Tivoli - Italy</td>
<td>Culture</td>
<td>Competition</td>
</tr>
<tr>
<td>2010</td>
<td>VTL Flat </td>
<td>Rome - Italy</td>
<td>Interior design</td>
<td>Commission / Built</td>
</tr>
<tr>
<td> </td>
<td>BNC Flat</td>
<td>Rome - Italy</td>
<td>Interior design</td>
<td>Commission / Built</td>
</tr>
<tr>
<td> </td>
<td>Expansion of the "Farnesina" High School</td>
<td>Rome - Italy</td>
<td>Education</td>
<td>Competition / Selected Project</td>
</tr>
<tr>
<td> </td>
<td>Neanderthal Art Center</td>
<td>Pilo�a - Spain</td>
<td>Culture</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>New pedestrian & cycling footpath in the site of the "San Leopoldo II" old bridge</td>
<td>Poggio a Caiano - Italy</td>
<td>Infrastructure</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Proposition 2065 - St. Leonards site</td>
<td>Sidney - Australia</td>
<td>Mixed use</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>MEIS - National Museum of Italian Judaism and Shoah </td>
<td>Ferrara - Italy</td>
<td>Culture</td>
<td>Competition / 3rd Prize</td>
</tr>
<tr>
<td> </td>
<td>36 The Calls Design Competition</td>
<td>Leeds - UK</td>
<td>Offices</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Europan 10: masterplan for an harbour area</td>
<td>Rudk�bing - Denmark</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td>2009</td>
<td>"Scuola in Piazza a Levante" - Kindergarten and public areas</td>
<td>Bisceglie - Italy</td>
<td>Education</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>CIBAF - City of Kids </td>
<td>Frattamaggiore - Italy</td>
<td>Education</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Designing in Teheran</td>
<td>Teheran - Iran</td>
<td>Mixed use</td>
<td>Competition / Selected Project</td>
</tr>
<tr>
<td>2008</td>
<td>DawnTown 2008: Waterworks</td>
<td>Miami - USA</td>
<td>Mixed use</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Venice Biennale New Australian Pavillion</td>
<td>Venice - Italy</td>
<td>Culture</td>
<td>Competition / 1st Prize</td>
</tr>
<tr>
<td> </td>
<td>New pedestrian and cycling bridge</td>
<td>Civita di Bagnoregio - Italy</td>
<td>Infrastructure</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Renovation of "San Ciro" Square</td>
<td>Portici - Italy</td>
<td>Urban planning</td>
<td>Competition / 2nd phase selected / 3rd Prize</td>
</tr>
<tr>
<td> </td>
<td>Renovation of "Umberto I�" Square</td>
<td>San Ferdinando di Puglia - Italy</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Historic Renovation of the "Corsie Sistine" Hospital Wards </td>
<td>Rome - Italy</td>
<td>Culture</td>
<td>Tender Competition (design/bid/build)</td>
</tr>
<tr>
<td> </td>
<td>Cupboard</td>
<td>Rome - Italy</td>
<td>Furniture design</td>
<td>Commission / Built</td>
</tr>
<tr>
<td> </td>
<td>Office table and lighting system</td>
<td>Rome - Italy</td>
<td>Furniture design</td>
<td>Commission / Built</td>
</tr>
<tr>
<td> </td>
<td>New City Library</td>
<td>Legnano - Italy</td>
<td>Library</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Office table</td>
<td>Rome - Italy</td>
<td>Furniture design</td>
<td>Concept Design</td>
</tr>
<tr>
<td> </td>
<td>Volleyball Arena, Hotel and Commercial Spaces</td>
<td>Rome - Italy</td>
<td>Mixed use</td>
<td>Concept Design</td>
</tr>
<tr>
<td>2007</td>
<td>New Provincial Archaeological Museum in the Santa Scolastica Monastery</td>
<td>Bari - Italy</td>
<td>Culture</td>
<td>Competition / 5th Prize</td>
</tr>
<tr>
<td> </td>
<td>The City of Water and Health</td>
<td>Rome - Italy</td>
<td>Mixed use</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Parkway Iconic Bridge</td>
<td>Sheffield - UK</td>
<td>Infrastructure</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Renovation of "Loveno 84" Sport Center</td>
<td>Menaggio - Italy</td>
<td>Sport</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>"Guardia di Finanza" Corp Main Headquarters</td>
<td>Catanzaro - Italy</td>
<td>Mixed use</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>"Lega Lombarda" Real Estate Complex Urban Development</td>
<td>Rome - Italy</td>
<td>Mixed use</td>
<td>Tender Competition (design/bid/build) </td>
</tr>
<tr>
<td> </td>
<td>Necklace</td>
<td>Rome - Italy</td>
<td>Jewellery design</td>
<td>Prototype </td>
</tr>
<tr>
<td> </td>
<td>Moon putter</td>
<td>Rome - Italy</td>
<td>Product design</td>
<td>Prototype</td>
</tr>
<tr>
<td> </td>
<td>Aleale Coffee Table</td>
<td>Rome - Italy</td>
<td>Furniture design</td>
<td>Concept Design</td>
</tr>
<tr>
<td>2006</td>
<td>"1st October" Public Square</td>
<td>Santa Maria Capua Vetere - Italy</td>
<td>Urban planning</td>
<td>Competition / 1st Prize / Built</td>
</tr>
<tr>
<td> </td>
<td>"Attilio Pecile" New Square and Sustainable Mixed Use Building</td>
<td>Rome - Italy</td>
<td>Mixed use</td>
<td>Competition / 1st Prize</td>
</tr>
<tr>
<td> </td>
<td>Renewal of the "Porta Nuova" Old Tower</td>
<td>Venice - Italy</td>
<td>Culture</td>
<td>Competition / 2nd Prize</td>
</tr>
<tr>
<td> </td>
<td>"Meno e pi� 4": Civic Center and Pre-school Building</td>
<td>Rome - Italy</td>
<td>Mixed use</td>
<td>Competition / Mention</td>
</tr>
<tr>
<td> </td>
<td>Urban Renewal of Historic Building and Public Squares</td>
<td>Conversano - Italy</td>
<td>Urban planning</td>
<td>Competition / 2nd Prize</td>
</tr>
<tr>
<td> </td>
<td>New Seafront and Beach Accesses</td>
<td>Fregene - Italy</td>
<td>Urban planning</td>
<td>Competition / Mention</td>
</tr>
<tr>
<td> </td>
<td>Requalification of Main Streets and Squares of the Old City Centre</td>
<td>Bari - Italy</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Gyeonggi-do Jeongok Prehistory Museum</td>
<td>Jeongok-ri - South Korea</td>
<td>Culture</td>
<td>Competition / Honourable Mention</td>
</tr>
<tr>
<td> </td>
<td>Low-income housing development</td>
<td>Guadalajara/Ceuta - Spain</td>
<td>Residential</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Shop extension</td>
<td>Rome - Italy</td>
<td>Retail</td>
<td>Commission / Concept Design</td>
</tr>
<tr>
<td> </td>
<td>Temporary Concert Hall</td>
<td>Rome - Italy</td>
<td>Culture</td>
<td>Concept Design</td>
</tr>
<tr>
<td> </td>
<td>Office Space Interior Design - New Seat of the Lombardy Regional Government </td>
<td>Milan - Italy</td>
<td>Office</td>
<td>Tender Competition (design/bid/build)</td>
</tr>
<tr>
<td>2005</td>
<td>Europan 8 - Urban Requalification</td>
<td>Istanbul - Turkey</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Natural Park Visitor Center, Kindergarten and Primary School</td>
<td>Funes - Italy</td>
<td>Education</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Coastal Area Development</td>
<td>Latina - Italy</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Requalification of Three Squares</td>
<td>Benevento - Italy</td>
<td>Urban planning</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Office and Data Center New Building in the Ministry of Defense headquarters</td>
<td>Rome - Italy</td>
<td>Office</td>
<td>Concept Design</td>
</tr>
<tr>
<td>2004</td>
<td>JCD Floating Pearl Store</td>
<td>Tokio - Japan</td>
<td>Retail</td>
<td>Competition / 2nd phase selected </td>
</tr>
<tr>
<td> </td>
<td>Requalifications of Rome�s Beachfront and Coastal Areas</td>
<td>Ostia - Italy</td>
<td>Urban planning</td>
<td>Competition / 1st Prize</td>
</tr>
<tr>
<td> </td>
<td>40 Apartments Building and Sport Center</td>
<td>Rome - Italy</td>
<td>Mixed use</td>
<td>Competition / 2nd Prize</td>
</tr>
<tr>
<td> </td>
<td>nMBA New Beaux-Art Museum</td>
<td>Lausanne - Switzerland</td>
<td>Culture</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>The Dubai Residence and Hotel Towers</td>
<td>Dubai - UAE</td>
<td>Mixed use</td>
<td>Concept Design</td>
</tr>
<tr>
<td> </td>
<td>Shoes and Accessories Shop</td>
<td>Rome - Italy</td>
<td>Retail</td>
<td>Commission / Concept Design</td>
</tr>
<tr>
<td>2003</td>
<td>Pedestrian and cycling Bridge </td>
<td>Rome - Italy</td>
<td>Infrastructure</td>
<td>Competition</td>
</tr>
<tr>
<td> </td>
<td>Temporary Pavillion for a Car Show</td>
<td>Rome - Italy</td>
<td>Retail</td>
<td>Commission / Concept Design</td>
</tr>
<tr>
<td> </td>
<td>Belvedere Tower</td>
<td>Castellammare di Stabia - Italy</td>
<td>Infrastructure</td>
<td>Concept Design</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end .container --></div>
</body>
</html>#apDiv2 {
position: absolute;
width: 698px;
height: 299px;
z-index: 1;
left:50px;
top: 117px;
overflow: scroll;
Don't forget to fix your code errors. You're still missing a <body> tag in your markup.
Nancy O. -
AP Divs (layers) move when I open my website on different window size.
First of all, this is my first time trying to make a website.
I'm doing an assignment for my class and i found it difficult for me to fix. I have spend 4-5 hours researching online but nothing work for me.
Well,the problem is the AP Divs (layers) move when I open my website on different window size(iphone,ipad).
The website only look right on 1366 x 786 resolution. Please take a look at my 2 pics below:
And I don't know how to make the website to fit on the iphone and ipad so that I don't have to scroll down or sroll to the right to view the whole thing.
Please someone help me!
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Boston Green Community College</title>
<style type="text/css">
<!--
body {
background-color: #3f7244;
padding: 0;
color: #8d0101;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #003702;
text-decoration: NONE; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #028b66;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #ADB96E;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
padding: 0px 0;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #CCC49F;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position: absolute;
width: 251px;
height: 101px;
z-index: 1;
left: 871px;
top: 10px;
#apDiv2 {
position: absolute;
width: 228px;
height: 60px;
z-index: 2;
left: 9px;
top: 1397px;
#apDiv3 {
position: absolute;
width: 273px;
height: 198px;
z-index: 2;
left: 851px;
top: 383px;
#apDiv4 {
position: absolute;
width: 200px;
height: 115px;
z-index: 3;
left: 242px;
top: 120px;
#apDiv5 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 902px;
top: 178px;
#apDiv6 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 857px;
top: 171px;
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 455px;
top: 547px;
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 853px;
top: 113px;
#apDiv9 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
left: 853px;
top: 246px;
#apDiv10 {
position: absolute;
width: 200px;
height: 115px;
z-index: 6;
left: 513px;
top: 121px;
#apDiv11 {
position: absolute;
width: 200px;
height: 115px;
z-index: 6;
left: 511px;
top: 123px;
-->
</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="Pictures/34d-1.png" alt="Insert Logo Here" name="Insert_logo" width="619" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
<div id="apDiv11"><font color="#f4f1f1">
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script></font>
</div>
<div id="apDiv1">
<!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
<!-- The terms of service are available at http://www.google.com/cse/docs/tos.html -->
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</div>
</div>
<div class="content">
<center><img src="Pictures/DFDF11.png" width="959" height="556" longdesc="Pictures/junior-2-960x.jpg" /></h1></center>
<!-- end .content --></div>
<div class="footer">
<img src="Pictures/RRR1.png" width="202" height="70" />
<div id="apDiv3">
<p> </p>
<p><a href="Job.html">Jobs</a> </p>
<p><a href="Art Gallery.html">Art Gallery</a> </p>
<p><a href="Contact us.html">Contact Us </a></p>
</div>
<div id="apDiv4"><center>
<P>About</P>
<a href="visiting.html">visiting</a> | <a href="Map.html">maps </a>| <P><a href="About.html">about BGCC</a></P>
<P>Academic</P>
<P><a href="Courses.html">schools+courses</a></P>
<P>Admissions </P>
<P><a href="cost & aid basics.html">cost & aid basics </a>| <a href="Apply now.html">join BGCC</a>
<P>Studen Life</P>
<P><a href="Athletics.html">Athletics</a></P>
<P>Greenforce Education</P>
<P><a href="Career.html">career center</a></P>
</center> </div>
<p><font size="2" color="black">BGCC | 99 GreenField | Boston, MA 02199 |617-0101-1000| TTY 617-0202-9944|</font></p>
<div id="apDiv9"><a href="Donate.html" target="_blank"><a href="Donate.html"><img src="Pictures/three-green-logo.jpg" width="218" height="99" longdesc="Pictures/three-green-logo.jpg" /></div>
<div id="apDiv8"><a href="Apply now.html" target="_blank"><a href="Apply now.html">
<img border="0" src="Pictures/cxgvxdvxgd.jpg" alt="Apply Now" width="218" height="99"></a></div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>That's what APDivs do. This is the single most common problem new people have with web page layouts. DO NOT use positioning. You don't need it. Start over. Learn to use CSS floats, margins and padding to align elements.
Below is a basic HTML5 Layout. View source in browser to see the code.
http://www.alt-web.com/sandbox/HTML5-BasicLayout.html
Nancy O. -
Div Image not showing in Live View
Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!
I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/pavemend_website1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
</style>
<!-- InstanceEndEditable -->
<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
background-repeat: no-repeat;
height: 78px;
width: 196px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><!-- InstanceBeginEditable name="HeaderLogo" --><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
<div id="resources"></div>
<!-- InstanceBeginEditable name="Header" -->
<div class="headerResources"></div>
<!-- InstanceEndEditable -->
<nav>
<ul id="menu">
<li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
<ul>
<li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
<li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
<li><a href="dotline_product_page.html">DOTLine™</a></li>
<li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
<li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
<li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
<li><a href="IA_product_page.html">Instant Asphalt™</a></li>
<li><a href="kemrok_product_page.html">KEMROK™</a></li>
<li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
<li><a href="firerok_product_page.html">FIREROK™</a></li>
<li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
<li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
</ul>
</li>
<li><a href="resources_page.html">RESOURCES</a></li>
<li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
<li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
</section>
<!-- InstanceBeginEditable name="Sidebar" -->
<div class="sidebarleftlong">
<nav>
<ul>
<li><a href="#">PAVEMEND PRODUCT <br> BROCHURE</a></li>
<p><li><a href="#">KEEP TRAFFIC MOVING <br> BROCHURE</a></li></p>
<p><li><a href="#">CASE STUDIES</a></li></p>
<p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
<p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
<p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
<p><li><a href="#">DOTLINE FIELD <br> APPICATION VIDEO</a></li></p>
</ul>
</nav>
<div id=""></div>
<!-- end .sidebar1 --> </div>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Content" -->
<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
<section>
<p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
<p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
</section>
<!-- end .content --></div>
<!-- InstanceEndEditable -->
<div class="footer"><!-- InstanceBeginEditable name="Footer Logo" --><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" /><!-- InstanceEndEditable -->
<table width="510" summary="footer material">
<tr>
<td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
<td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
<td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
</tr>
</table>
<div id="apDivPFT1"></div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
clear: left;
position: relative;
width: 100%; /**adjust width as needed**/
margin: 0;
padding: 0;
background-image: url(_images/topnavpanel.png);
color: #FFFFFF;
#menu ul {
margin: 0;
padding: 0
#menu li {
list-style: none;
float: left;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
/**top level menu**/
#menu li a {
display: inline-block;
text-decoration: none;
/* adjust width as needed or use auto */
width: 13em;
padding: 8px;
font-weight: bold;
line-height: 12px;
color: #000;
border-top-style: none;
font-size: 90%;
margin-bottom: 0;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
color: #FFF;
width: 13em;
/**sub-menu**/
#menu li ul {
display: none;
text-align: center;
padding: 0;
margin-bottom: 0;
margin-left: 40px;
margin-right: 0;
margin-top: 0;
border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
display: block;
position: absolute;
z-index:1000;
padding: 0;
#menu li:hover li, #menu li.hover li {
float: none;
background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
width: 14em; /* adjust width as needed or use auto */
margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
color: #FFF;
background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
position: absolute;
width: 190px;
height: 180px;
z-index: 2;
background-image: url(_images/WomanPhone.png);
background-position: 10px;
background-repeat: no-repeat;
margin-top: 240px;
#apDivSustainability {
position: absolute;
width: 200px;
height: 420px;
z-index: 3;
background-image: url(_images/sustainabilitySB2.png);
background-repeat: no-repeat;
#apDiv10 {
position: absolute;
width: 75px;
height: 73px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
float: right;
margin-left: 650px;
margin-top: -110px;
#apDiv9 {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/slphoto1.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivslqphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/slqphoto.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivdotlinephoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/dotlinephoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv15photo {
position: absolute;
width: 200px;
height: 179px;
z-index: 3;
background-image: url(_images/15.0_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivTRphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/TR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivAWphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/AWPhoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivASphoto {
position: absolute;
width: 200px;
height: 134px;
z-index: 3;
background-image: url(_images/ASphoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivVRphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/VR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivIAphoto {
position: absolute;
width: 200px;
height: 162px;
z-index: 3;
background-image: url(_images/IA_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/KEMROK%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivFirerokphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/Firerok_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivtechsupportphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/techsupport_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokVRphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/Kemrok%20VR%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv8 {
position: absolute;
width: 180px;
height: 167px;
z-index: 2;
background-image: url(_images/SLbktandbag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 520px;
#apDivslq {
position: absolute;
width: 80px;
height: 105px;
z-index: 2;
background-image: url(_images/SLQbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -125px;
margin-left: 515px;
#apDivdotlinebag {
position: absolute;
width: 88px;
height: 167px;
z-index: 2;
background-image: url(_images/dotlinebag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 280px;
#apDivkemrokbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 570px;
#apDivPFT1 {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
background-repeat: no-repeat;
float: right;
margin-top: -75px;
margin-left: 470px;
#apDivkemrokVRbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrokvr_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivFirerokbag {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 570px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 80px;
height: 96px;
z-index: 2;
background-image: url(_images/AWbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDiv15bag {
position: absolute;
width: 88px;
height: 111px;
z-index: 2;
background-image: url(_images/15.0bucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -115px;
margin-left: 260px;
#apDivTRbucket {
position: absolute;
width: 80px;
height: 106px;
z-index: 2;
background-image: url(_images/TRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 370px;
#apDivAWbucket {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/AWArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivASArt {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/ASArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivVRbucket {
position: absolute;
width: 80px;
height: 87px;
z-index: 2;
background-image: url(_images/VRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -105px;
margin-left: 470px;
#apDivIAbucket {
position: absolute;
width: 251px;
height: 106px;
z-index: 2;
background-image: url(_images/IAbuckets.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 400px;
body {
background-color: #666;
color: #000;
text-align: center;
background-image: url(_images/roadblurred.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding-top: 60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
.formtext {
font-size: 100%;
text-align: left;
.bodyfootnote {
font-size: 70%;
margin-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
font-size: 70%;
color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
text-transform: capitalize;
text-decoration: none;
list-style: none;
h1, h2, h3, h4, h5, h6, p {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 23px;
line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 100%;
padding: 5px;
a:visited {
color: #FFFFFF;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #03C;
color: #FFF;
height: 12px;
alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/Bridge4WebScreened.png);
background-repeat: no-repeat;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
text-align: left;
.containerTS {
width: 960px;
background-color: #FFF;
margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/US_Map.png);
background-repeat: no-repeat;
text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #000;
background-image: url(_images/BannerBlured960.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSL {
background-color: #000;
background-image: url(_images/PMND%20SL%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerPurchase {
background-color: #000;
background-image: url(_images/contact%20us%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSLQ {
background-color: #000;
background-image: url(_images/PMND%20SLQ%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerDOTline {
background-color: #000;
background-image: url(_images/DOTLINE%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header15 {
background-color: #000;
background-image: url(_images/PMND%2015.0%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTR {
background-color: #000;
background-image: url(_images/PMND%20TR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAW {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAS {
background-color: #000;
background-image: url(_images/anti%20scale%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerVR {
background-color: #000;
background-image: url(_images/PMND%20VR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerIA {
background-color: #000;
background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrok {
background-color: #000;
background-image: url(_images/KEMROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrokVR {
background-color: #000;
background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerFirerok {
background-color: #000;
background-image: url(_images/FIREROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAntiWear {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTechSupport {
background-color: #000;
background-image: url(_images/FEBlurred.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerResources {
background-color: #000;
background-image: url(_images/ResourceBanner.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20pt;
font-style: normal;
font-weight: bolder;
color: #FFF;
padding-top: 150px;
padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 180px;
margin-left: 0px;
margin-right: 30px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/Testimonialb.gif);
background-repeat: no-repeat;
height: 456px;
text-decoration: none;
z-index: 1000;
.sidebarPurchase {
float: right;
width: 200px;
margin-left: 0px;
margin-right: 20px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/purchaseSB.png);
background-repeat: no-repeat;
height: 420px;
margin-top: 0px;
text-decoration: none;
background-color: #217CC0;
background-position: 10px 10px;
.sidebarleft {
float: left;
width: 195px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 85%;
font-style: oblique;
height: 200px;
text-decoration: none;
padding-top: 8px;
padding-left: 10px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 30px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
.sidebarleftlong {
float: left;
width: 195px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: oblique;
height: 280px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 17px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
color: #FFF;
font-size: 85%;
text-align: left;
padding-left: 10px;
.sidebargreen {
float: left;
width: 195px;
height: 410px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #8CC63F;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
padding-left: 10px;
.nav2 {
font-family: bebas-neue;
font-style: normal;
font-weight: 400;
color: #FFF;
.sidebarleft nav ul li a {
text-decoration: none;
color: #FFF;
.sidebarleftlong nav ul li a {
text-decoration: none;
color: #FFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
.content {
width: 730px;
float: left;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding: 10px 0;
text-align: left;
font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
text-decoration: none;
ul.nav li {
border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #DFEBF3;
color: #FFF;
text-decoration: none;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both;
background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position: absolute;
width: 900px;
height: 94px;
z-index: 1;
margin-top: 80px;
margin-left: 30px;
white-space: 3;
font-size: 100%;
text-align: left;
sllogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
.slLogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
height: 100px;
width: 240px;
.productlogos {
margin-left: 23px;
margin-top: 10px;
.Bold {
font-weight: bold;
.inherent {
font-style: inherit;
sup {
position: relative;
top: -1ex;
vertical-align:baseline;
font-size: 75%;
#apDiv2 {
position: absolute;
width: 650px;
height: 31px;
z-index: 2;
background-repeat: no-repeat;
padding-right: 15px;
padding-left: 15px;
margin-right: 15px;
margin-left: 15px;
top: 369px;
background-image: url(_images/homeheader.png);
.footer table tr td {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
height: 8px;
width: 160px;
margin-left: 10px;
padding-left: 15px;
border-collapse: collapse;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
.footer p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #FFF;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 30px;
.footer table tr th h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
float: left;
padding-left: 15px;
height: 0px;
.footer table tbody tr td a {
color: #FFF;
#wrapper {
width:970px; /**adjust as needed**/
margin:0 auto; /**centers page on screen**/
.flt_rgt {
float: right;
margin-top: 15px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.title {
/* [disabled]margin-right: 30px; */
margin-top: 35px;
margin-left: 10px;
background-image: ;
background-repeat: no-repeat;
/* [disabled]margin-left: 20px; */
top: 30px;
/* [disabled]margin-top: 30px; */
left: 30px;
.flt_products {
float: right;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.container section nav {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
padding-top: 3px;
#apDiv3 {
position: absolute;
width: 468px;
height: 41px;
z-index: 2;
background-image: url(_images/savetimetext.png);
background-repeat: no-repeat;
margin-left: 15px;
#apDiv4 {
position: absolute;
width: 400px;
height: 41px;
z-index: 3;
background-image: url(_images/ULTRAFLOR.png);
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 45px;
#apDiv5 {
position: absolute;
width: 250px;
height: 103px;
z-index: 4;
background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
background-repeat: no-repeat;
float: right;
right: auto;
margin-left: 675px;
margin-top: -22px;
#apDiv6 {
position: absolute;
width: 40px;
height: 38px;
z-index: 5;
background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
margin-top: -25px;
margin-left: 83px;
#apDiv7 {
position: absolute;
width: 20px;
height: 17px;
z-index: 5;
background-image: url(_images/twitter-bird-dark-bgs.png);
margin-top: -15px;
margin-left: 85px;
nav ul {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
font-size: 90%;
nav ul li {
text-decoration: none;
color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
text-align: left;
color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
text-decoration: none;
.orange {
color: #FAA634;
.white {
color: #FFFFFF;
.red {
color: #F00;
.red1 {
color: #F00;
.toppanel {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
#apDiv12 {
position: fixed;
width: 960px;
height: 30px;
z-index: 5;
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
float: left;
top: 229px;
.white {
.CeraTechLogo {
background-image: url(_images/CTI_logo_white.png);
background-repeat: no-repeat;
width: 200px;
height: 60px;
.apDivPFT {
background-repeat: no-repeat;
padding-left: px;
padding-top: 0px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#resources {
background-image: url(_images/ResourcesType.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px; -
Need help with overlapping divs!
Hey everyone,
I'm working on another website and I have come up against a common problem for newbie designers from what I hear, the dreaded overlapping div problem! I have a 2 column fixed layout with a floating left div. My left div has my nav bar and various images. When my main content div has more content than the left floating div, the left div border does not reach the footer! Until now, I have gotten by with just hitting return in my left column div until it reaches the footer. I am sure it is not the right way to do it but it has worked so far. The problem is, now one of the pages has the left column div overlapping onto the footer! I did some reading and I am guessing it involves either the box properties or clear float which I am not too familiar with.
Any advice would be stellar! I know this is just another stumbling block to get over but I would feel so much better if I was doing it the right way.
Here are screens of my issue,
And here is my code for the page in question.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://www.xldesignsonline.com/fchi/favicon.ico">
<title>Full Circle Home Inspections</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-color: #FFF;
.paragraphLead {
font-size: 110%;
font-weight: bold;
a:link {
text-decoration: none;
color: #CF0;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
#apDiv1 {
position:absolute;
width:236px;
height:157px;
z-index:1;
left: 692px;
top: 372px;
#apDiv2 {
position:absolute;
width:200px;
height:192px;
z-index:2;
left: 697px;
top: 1443px;
#apDiv3 {
position:absolute;
width:158px;
height:204px;
z-index:2;
left: 643px;
top: 1502px;
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<h1><!-- end #header -->
</h1></div>
<div id="sidebar1">
<h3 align="center">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="620">
<param name="movie" value="_assets/menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h3>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.nachi.org/"><img src="_images/interNACHI.png" alt="InterNACHI" width="190" height="164" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.nachi.org/education.htm"><img src="_images/education-seal-small.gif" alt="education seal" width="150" height="150" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.iac2.org/"><img src="_images/iac2-all.gif" width="174" height="126" alt="IAC" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.inspectopia.com/profile.b.507.r.16181.u.03bcfb.html"><img src="_images/logo_top.png" alt="Inspectopedia" width="190" height="45" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.energystar.gov/"><img src="_images/img_energy_star_partner.jpg" width="160" height="191" alt="Energy Star Partner" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://cjenterprises.myshaklee.com/us/en/welcome.html#"><img src="_images/Shaklee.gif" alt="Shaklee" width="119" height="160" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://activerain.com/"><img src="_images/ARLogoSmall.gif" alt="Active Rain" width="135" height="36" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><a href="http://www.insiderpages.com/b/15246780294"><img src="_images/insider_pages.gif" alt="Insider Pages" width="89" height="37" border="0" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="mainContent">
<h2>Radon Gas Inspection</h2>
<div id="paragraphFloat">
<h5>What Is Radon?</h5>
<p> Radon is a cancer causing radioactive gas. You cannot see, smell or taste radon, but it may be a problem in your home. The Surgeon General has warned that radon is the second leading cause of lung cancer in the United States today. </p>
<div id="apDiv1">
<div align="center"><a href="http://www.epa.gov/radon/video/epa-epu.wmv"><img src="_images/psa_revised.jpg" alt="What Is Radon?" width="200" height="172" border="0" /></a></div></div></div>
<p>If you smoke and your home has high radon levels, you're at high risk for developing lung cancer. Some scientific studies of radon exposure indicate that children may be more sensitive to radon. This may be due to their higher respiration rate and their rapidly dividing cells, which may be more vulnerable to radiation damage. </p>
<p> </p>
<h5>Why Is It Dangerous?</h5>
<p> The U.S. Environmental Protection Agency (US EPA) and the Surgeon General's Office have estimated that as many as 20,000 lung cancer deaths are caused each year by radon. Radon is the second leading cause of lung cancer. Radon-induced lung cancer costs the United States over $2 billion dollars per year in both direct and indirect health care costs.</p>
<p>According to the US EPA, nearly 1 in 3 homes checked in seven states and on three Indian lands had screening levels over 4 pCi/L, the EPA's recommended action level for radon exposure.</p>
<p>The alpha radiation emitted by radon is the same alpha radiation emitted by other alpha generating radiation sources such as plutonium.</p>
<p>A family whose home has radon levels of 4 pCi/l is exposed to approximately 35 times as much radiation as the Nuclear Regulatory Commission would allow if that family was standing next to the fence of a radioactive waste site. (25 mrem limit, 800 mrem exposure)</p>
<p> At the 4 pCi/l EPA action guideline level, radon carries approximately 1000 times the risk of death as any other EPA carcinogen. It is important to note that the action level is not a safe level, as there are no "safe" levels of radon gas.</p>
<p> </p>
<h5>How Does It Get Into My Home?</h5>
<p> Radon is a radioactive gas. It comes from the natural decay of uranium that is found in nearly all soils. It typically moves up through the ground to the air above and into your home through cracks and other holes in the foundation. Your home traps radon inside, where it can build up. Any home may have a radon problem. This means new and old homes, well-sealed and drafty homes, and homes with or without basements.</p>
<p> Radon from soil gas is the main cause of radon problems. Sometimes radon enters the home through well water. In a small number of homes, the building materials can give off radon, too. However, building materials rarely cause radon problems by themselves.</p>
<p><strong>Radon gets in through:</strong></p>
<ul>
<li>Cracks in solid floors
<div id="apDiv3">
<div align="center"><a href="http://www.fullcirclehomeinspections.com/_assets/CitizensGuideRadon.pdf"><img src="_images/citguidecoverradon.jpg" alt="Guide To Radon" width="154" height="200" border="0" /></a></div>
</div>
</li>
<li>Construction joints</li>
<li>Cracks in walls</li>
<li>Gaps in suspended floors</li>
<li>Gaps around service pipes</li>
<li>Cavities inside walls</li>
<li>Surrounding water supply</li>
</ul>
<p> </p>
<h5>What Can I Do?</h5>
<p> Radon is a national environmental health problem. Elevated radon levels have been discovered in every state. The US EPA estimates that as many as 8 million homes throughout the country have elevated levels of radon. Current state surveys show that 1 home in 5 has elevated radon levels.</p>
<p> Testing is the only way to know your home's radon levels. There are no immediate symptoms that will alert you to the presence of radon. It typically takes years of exposure before any problems surface. </p>
<p>Let <strong>Full Circle Home Inspections</strong> ensure your family and your home are protected and safe from radon exposure!</p>
<p> </p>
<h5>Radon Myths</h5>
<p><strong><em>MYTH:</em> Scientists are not sure that radon really is a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although some scientists dispute the precise number of deaths due to radon, all the major health organizations (like the Centers for Disease Control and Prevention, the American Lung Association and the American Medical Association) agree with estimates that radon causes thousands of preventable lung cancer deaths every year. This is especially true among smokers, since the risk to smokers is much greater than to non-smokers.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon testing is difficult, time-consuming and expensive.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Radon testing is easy. You can test your home yourself or hire a qualified radon test company. Either approach takes only a small amount of time and effort.</p>
</blockquote>
<p><strong><em>MYTH:</em> Homes with radon problems can't be fixed.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> There are simple solutions to radon problems in homes. Hundreds of thousands of homeowners have already fixed radon problems in their homes. Most homes can be fixed for about the same cost as other common home repairs; check with one or more qualified mitigators. Call your <a href="http://www.epa.gov/radon/whereyoulive.html">state radon office</a> for help in identifying qualified mitigation contractors.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon affects only certain kinds of homes.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>House construction can affect radon levels. However, radon can be a problem in homes of all types: old homes, new homes, drafty homes, insulated homes, homes with basements, and homes without basements. Local geology, construction materials, and how the home was built are among the factors that can affect radon levels in homes.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon is only a problem in certain parts of the country.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> High radon levels have been found in every state. Radon problems do vary from area to area, but the only way to know your radon level is to test.</p>
</blockquote>
<p><strong><em>MYTH:</em> A neighbor's test result is a good indication of whether your home has a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> It's not. Radon levels can vary greatly from home to home. The only way to know if your home has a radon problem is to test it.</p>
</blockquote>
<p><strong><em>MYTH:</em> Everyone should test their water for radon.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although radon gets into some homes through water, it is important to first test the air in the home for radon. If your water comes from a public water supply that uses ground water, call your water supplier. If high radon levels are found and the home has a private well, call the Safe Drinking Water Hotline at 1-800-426-4791 for information on testing your water.</p>
</blockquote>
<p><strong><em>MYTH:</em> It's difficult to sell homes where radon problems have been discovered.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Where radon problems have been fixed, home sales have not been blocked or frustrated. The added protection is some times a good selling point.</p>
</blockquote>
<p><strong><em>MYTH:</em> I've lived in my home for so long, it doesn't make sense to take action now.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>You will reduce your risk of lung cancer when you reduce radon levels, even if you've lived with a radon problem for a long time.</p>
</blockquote>
<p><strong><em>MYTH:</em> Short-term tests can't be used for making a decision about whether to fix your home.</strong></p>
<blockquote>
<p><strong><em>FACT:</em> </strong>A short-term test, followed by a second short-term test* can be used to decide whether to fix your home. However, the closer the average of your two short-term tests is to 4 pCi/L, the less certain you can be about whether your year-round average is above or below that level. Keep in mind that radon levels below 4 pCi/L still pose some risk. Radon levels can be reduced in most homes to 2 pCi/L or below.</p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><img src="_images/CA-3.jpg" width="520" height="207" /></p>
</blockquote>
</div>
<div id="footer">
<p align="center"><strong>© 2009 XL Designs Online - All Rights Reserved </strong></p>
</div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
And here is my CSS if needed,
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
.twoColFixLtHdr #container {
width: 950px; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #557050;
.twoColFixLtHdr #header {
border-bottom: 1px solid #000000;
height: 250px;
background-color: #DDDDDD;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
background-image: url(../_images/homebanner1.png);
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 20px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
text-align: center;
font-size: 48px;
font-family: Tahoma, Geneva, sans-serif;
color: #000;
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px;
border-right: 1px solid #000000;
background-color: #557050;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
.twoColFixLtHdr #mainContent {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 250px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
text-align: left;
.twoColFixLtHdr #mainContent h1 {
font-size: 48px;
font-family: "Arial Rounded MT Bold";
font-weight: bold;
.twoColFixLtHdr #mainContent h2 {
font-family: "Arial Rounded MT Bold";
font-size: 32px;
.twoColFixLtHdr #mainContent h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #CF0;
font-size: 125%;
.twoColFixLtHdr #mainContent h5 {
font-size: 120%;
.twoColFixLtHdr #footer {
padding: 20px 10px 20px 20px;
border-top: 1px solid #000000;
background-color: #A3A3A3;
font-family: Arial, Helvetica, sans-serif;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#paragraphFloat {
width: 350px;
#paragraphFloat2 {
width: 350px;
Please if anyone knows what I'm doing wrong please please let me know! Since I am learning, I really want to get main concepts like this down so I am not constantly doing things the hard way! Thank you!
Jayson1) Regarding validation, what does it do?
It validates by telling you where your code isn't er... valid. Sometimes the results are a bit jumbled but if you work through them one at a time and revalidate, it's a good way to learn. If you fix all of the errors shown up through the validator you should end up with standards compliant code. Not necessarily the best, most efficient code you can write but at least it will be valid and it helps you spot errors that hours of code-staring never seems to find.
I don't use the DW validation tool because I find the W3c one easier.
The W3c validator has a check box of HTML Tidy which can tidy up your code but it's not always as easy to see what changes.
2) I know the <p> tag for spacing is wrong, I could just feel it in my bones. I just didn't know what else to do. If I <br> all the way down won't the code be just as cluttered?
You're obviously a born web coder!
<br> will bloat your page if you use them to position elements.
Here you need to get used to a) the Block Model and b) CSS positioning. Once you crack these, CSS opens up for you and becomes a little more intuitive.
if you have two elements on top of each other rather than push them apart with other elements you do it with padding and/or margin. There are things to watch out for here namely, collapsing margins but if you start to read up on the above, you'll get it.
I just thought of something. If I add a div in main content, align it to the bottom center with CSS, use a line break between it and the text above, and add the image in question in the new div, will the spacing between the text and image work itself out? I just really want to get out of the <p> bad habit.
Keep thinking! Web design is not like desktop publishing or print. Elements on a HTML page don't behave like paragraphs on a page. Once you begin to figure out why not it all gets a little easier.
If you want an image at the bottom an element you put that at the end of the content in that element. Then you need to ensure there is no margin, padding or border between the img element and the next element (your footer). HTML elements come with some styling that is applied by default in the browser. Many web developers include a rule like this:
body {
margin: 0;
padding:0;
This sets the margin and padding to zero of course and it's purpose is to override the defaults. Some people advocate applying similar rules to all elements and if your interested try googling Eric Meyer who has written about it online.
One of the key purposes of CSS is to take styling out of the page. It's leaner, more efficient for the viewer and the coder and helps with site management.
3) AP divs are weird, and I did only use as a last resort.
See? You're a natural!
The reason is I am confused by the float and clear float classes. My left column is floated left and that element is what I was having problems understanding. I tried to make new divs and float right but I screwed it all up. I am sure I am just not applying the clear float in the right places.
Getting the hang of floating is key to CSS positioning. You use a float if you want two elements to sit side by side on the page. It disrupts the "document flow." Ordinarily HTML elements are rendered one after the other, on top of each other. Floating an element takes it out of the document flow and allows other elements to occupy its space. When you float an element it should always have a width. If the element below it also has a width, that width has to be sufficiently narrow to allow it to occupy the space. In short, floated elements can't be wider than their containing element.
The clear property is used after a float to stop an element occupying the space left by a floated element. It works but confuses the heck out of me!
So that leads me to my final point. I am a novice too! I might have fluffed a few of the technical points above but it's pretty much there.
Regards
Martin -
Dreamweaver design view doesn't show the bottom part of a long div
Hi!
I'm doing a very graphics oriented site, which basically requires me to use a large jpg as a background image and placing text areas against this background using absolute positioning.
My problem is that Dreamweaver doesn't show me the bottom part of my content div's background, but renders it as black instead. This obviously makes placing the text areas correctly difficult, since I can't see them against the background.
If I turn on Live view, then Dreamweaver shows the bottom part correctly. But in live view I can't use rulers and guides (or can I?).
Is there any setting that I can change so that Dreamweaver is showing me the whole div bg in all situations? One possible cause of this problem might be also that I'm using overflow:scroll on my content. Could that be why Dreamweaver hides the bottom part and can I change that behaviour?
Any ideas are welcome!If we can see the page in question we could probably do this a lot easier. But all you need to do in your CSS for the background is:
background: url(pathto/image.jpg) fixed no-repeat;
If you are trying to absolutely position something in the middle you will be unable to do this without the assistance of javascript to determine the useable pixels on the end-users computer. Horiztonally is not the issue, but rather vertically because you can achieve horizontal centering by defining a width and setting the margin: 0 auto; in your CSS.
As far as working with overflows, if there is too much content in them that you believe the overflow will be necessary (assuming min/max-widths are set) you could consider including the content from another document or store it in a database and query the information out. Then it would make it easier for the client to update the content on their own in the future. -
Offset div / positioning problem in IE
I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
background-color: #333333;
#entireSite #sidebar #spacer {
height: 300px;
width: 350px;
#entireSite #sidebar #newsletter {
background-image: url(../Images/NewsLetterBackground.png);
height: 165px;
width: 350px;
color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">
<!-- This begins the coding for centering the entire webpage -->
<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">
<!-- This begins the background layer for the navbarArea -->
<div id="navbarArea">
<!-- This begins the container div for the navbar -->
<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><strong><a href="index.html">Home Page</a> </strong></li>
<li><strong><a href="About Us.html">About Us</a></strong></li>
<li><strong><a href="Services.html">Services</a> </strong></li>
<li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
<li><strong><a href="Contact Us.html">Contact us</a></strong></li>
<li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>
<!--- This ends the container div for the navbar -->
</div>
<!-- This ends the background layer for the navbarArea -->
<!--This begins the entireSite area *excludes navbar* -->
<div id="entireSite">
<!-- This begins the container for the sidebar image -->
<div id= "sidebar">
<!-- This begins a spacer div -->
<div id= "spacer">
</div>
<!-- This ends a spacer div -->
<!--This begins newsletter div -->
<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
<td>Name:</td>
<td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
<td>Zip Code:</td>
<td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>
<!-- This ends newsletter div -->
</div>
<!-- This ends the sidebar image area-->
<!-- This begins the maintext area -->
<div id= "maintext">
<!-- This begins the titlebar inside the maintext area-->
<div id= "titlebar">
<br />
</div>
<!-- This ends the titlebar of maintext area -->
<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
<td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
<br />
Water Damage</center></td>
<td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
<br />
Fire Damage</center></td>
<td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
<br />
Mold Remediation</center></td>
<td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
<br />
Soot Removal</center></td>
<td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
<br />
Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>
<!-- This ends the maintext area -->
<!-- This begins the bottombar image -->
<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>
<!-- This ends the bottom bar image -->
<!-- This begins the hotlinks area -->
<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>
<!--This ends the hotlinks area -->
<!-- This begins the copyright area -->
<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>
<!-- This ends the copyright area -->
</div>
<!-- This ends the entireSite container-->
<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>
<!-- This ends the coding for centering the entire webpage *excludes navbar* -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator -
Why isn't my layout connecting divs tightly?
I am building a website, and I am having trouble with the coding. I have a Spry Menu that needs my Nivo (jquery) Slider to fit tightly underneath it, and then have the second Spry Menu (#2) fit tightly underneath the slider.
Why am I not able to push these tightly together? (my site html and spry menu html is below - CSS built into header of page)
Thanks for any insight anyone could provide!!!
SOURCE CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cache Valley ENT</title>
<meta name="keywords" content="Cache Valley ENT, ent, ear, nose, throat, allergy, allergies, symptom, congestion, treatment, clinic"/>
<meta name="description" content="Cache Valley ENT is Northern Utah's most experienced ear, nose, and throat clinic, offering treatments for your worst symptoms, including allergies." />
<meta name="identifier-url" content="http://" />
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
body {
background-color: #F1D2A6;
background-image: url(pictures/backgroundslice.jpg);
background-repeat: repeat-x;
#header {
width: 900px;
#body {
vertical-align: baseline;
width: 725px;
text-align: justify;
height: 900px;
background-attachment: scroll;
background-repeat: no-repeat;
background-image: url(pictures/textbox/home_text.png);
padding-top: 10px;
padding-right: 60px;
padding-bottom: 40px;
padding-left: 30px;
margin: auto;
#navbar {
height: 40px;
width: 696px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000000;
border-left-color: #000;
margin-left: 12px;
#MenuBar2 li {
width: 174px;
font-family: "Arial", Arial, serif;
color: #FFFFFF;
font-size: 20px;
letter-spacing:;
height: auto;
background-image: url(pictures/images/images/spry_menu_background2.png);
background-hover: url (pictures/images/images/hover_spry_menu_background2.png)
padding-top: 20px;
#footer {
font-size: 13px;
width:800px;
left: 50px;
margin-top: 10px;
padding-top: 10px;
a:link {
color: #000;
text-decoration: none;
a:visited {
text-decoration: none;
color: #000;
a:hover {
text-decoration: underline;
color: #666;
a:active {
text-decoration: none;
.headerphone {
font-size: 24px;
text-align: center;
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="ajximagerotator.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
directionNav: true,
controlNav: true,
directionNavHide: false,
captionOpacity: 1,
prevText: '<',
nextText: '>',
effect: 'fade',
pauseTime: 9000,
</script>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<!--favicon-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<!--Google Analytics Tracking Code-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32226035-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
<table width="720" border="0">
<tr>
<td width="557"><img src="pictures/CVENT Logo Edit.jpg" width="300" height="147" vspace="0" align="top" /></td>
<td width="153" nowrap="nowrap"><div class="headerphone">
<p><strong>Cache Valley ENT</strong></p>
<p>435.753.7880</p>
</div></td>
</tr>
</table>
<hr />
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="home.html">Home</a></li>
<li><a href="our_providers.html">Our Providers</a></li>
<li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
<ul>
<li><a href="services_entservices.html">General ENT</a></li>
<li><a href="services_allergy.html">Allergy</a></li>
<li><a href="services_hearing.html">Hearing</a></li>
<li><a href="services_pediatric.html">Pediatric Services</a></li>
<li><a href="services_asthma.html">Asthma</a></li>
<li><a href="services_headache.html">Headache</a></li>
<li><a href="services_facialplasticsurgery.html">Facial Plastic Surgery</a></li>
</ul>
</li>
<li><a href="new_patient.html" class="MenuBarItemSubmenu">New Patient</a>
<ul>
<li><a href="#">Forms</a></li>
<li><a href="#">Insurance</a></li>
</ul>
</li>
<li><a href="patient_resources.html" class="MenuBarItemSubmenu">Patient Resources</a>
<ul>
<li><a href="patient_resources_ears.html">Ears</a></li>
<li><a href="patient_resources_throat.html">Throat</a></li>
<li><a href="patient_resources_noseandmouth.html">Nose and Mouth</a></li>
<li><a href="patient_resources_headandneck.html">Head and Neck</a></li>
<li><a href="patient_resources_cancer.html">Cancer</a></li>
<li><a href="patient_resources_pediatric.html">Pediatric</a></li>
<li><a href="patient_resources_featuredhealthinformation.html">Featured Health Information</a></li>
<li><a href="patient_resources_enespanol.html">en Español</a></li>
<li><a href="patient_resources_aboutotolaryngology.html">About Otolaryngology</a></li>
<li><a href="patient_resources_enthistory.html">ENT History</a></li>
</ul>
</li>
</ul>
<p> </p>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<p><img src="nivo_images/walle.jpg" alt="" /> <a href="http://dev7studios.com"><img src="nivo_images/toystory.jpg" alt="" /><img src="nivo_images/nemo.jpg" alt="" /></a></p>
</div>
</div>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="services_entservices.html">General ENT</a></li>
<li><a href="services_facialplasticsurgery.html">Surgery</a></li>
<li><a href="http://www.CacheAllergy.com" target="_blank">Allergies</a></li>
<li><a href="http://www.wherecvhears.com">Hearing</a></li>
</ul>
</div>
<div id="img">
<h1> </h1>
<h1> </h1>
<h1>Welcome!</h1>
<p> <strong>Cache Valley ENT is located in North Logan, Utah, </strong>and provides ear, nose and throat (ENT) servies to relieve the the most stubborn allergy symptoms. Cache Valley ENT serves all Cache Valley residents, Box Elder County, and even Franklin County Idaho. Our doctors, Doctor Gordon Wood, Doctor Jeffrey Bennion, Doctor James Blotter, and Lindsay Humes (PA.C.), are all trained and experienced in allergy testing and treatments to provide you a favorable experience, and to help you live the live you deserve! They have more than 75 years' combined experience in providing successful ENT treatments! Cache Valley ENT is affiliated with the MidWest ENT Associates, PLLC. <br />
<br />
We have a convenient location in North Logan, UT at 2380 North 400 East, inside the Cache Valley Specialty Hospital. This location houses the ENT Clinic and the Gulf South Outpatient Surgery Clinic. Hours of operation are Monday through Thursday, 8am to 5pm, and Friday from 8am to 12noon. Call <strong>801-753-7880</strong> to schedule an appointment. </p>
<p><img src="pictures/our_practice.png" width="500" height="333" hspace="110" align="middle" /></p>
</div>
<p> </p>
<div id="footer">
<p> </p>
<p>Copyright 2012 | Cache Valley ENT | 2380 N 400 E, Suite D | North Logan, Utah 84341 | 435.753.7880 | <strong> <a href="contact.html">CONTACT US</a> </strong></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
SPRYMENUBARHORIZONTAL.CSS
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; -moz-background-inline-policy: bounding-box;}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ul.MenuBarActive{ z-index: 1000;}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; float: left; background-image: url(../pictures/images/images/spry_menu_background.png); width: 139px; z-index: 1001;} /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul{ margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 9.5em; position: absolute; left: -1000em;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{ left: auto;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{ width: 10em;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{ position: absolute; margin: -5% 0 0 95%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{ left: auto; top: 0;} /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ul.MenuBarHorizontal ul{ } /* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{ display: block; cursor: pointer; padding: 0.5em 0.75em; text-decoration: none; text-align: center; border: 0.75px solid; border-bottom-color: #000000; border-left: none; border-right: none; border-top: none;} ul.MenuBarHorizontal ul a { text-align: left; } /* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ text-align: center; background-image: url(../pictures/images/images/hover_spry_menu_background2.png);}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ text-align: center; color: #000;} /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-repeat: no-repeat; background-position: 95% 50%;}/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; }/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-repeat: no-repeat; background-position: 95% 50%; text-align: center;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%;} /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ul.MenuBarHorizontal iframe{ position: absolute; z-index: 1010; filter:alpha(opacity:0.1);}/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */@media screen, projection{ ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; }}That which you have shared with us is OK. All fits neatly as per your requirement.
Perhaps it is that which you have not shared with us that could be the problem.
Gramps
PS The following may help you
Announcement: How Important is Code? A plea for new posters to help us!
Hide Details
Please don't ask a layout question (or really almost any other question) here without also giving us a look at the code on your page.
The best way to do this is to upload the page and its dependent files, and to post a link to this uploaded page. A poor second alternative would be to paste your code into your post using the double chevron icon on the toolbar, and selecting Syntax Highlighting > Plain Text.
Without knowing what you have in your code, we cannot possibly answer anything other than a very simple question. Save us the trouble of engaging in twenty questions to find out what you have done and just show us the code. After all, it's what determines what happens on the page, not your screenshot or your description.
Please?
Also, if your question is one that involves database use or server-scripting, please tell us what server model (PHP, CF, etc.) and database you are using (MySQL, SQL Server, etc.), as well as the operating system and platform. All of those details are necessary for complete troubleshooting and will help us help you through the process!
by Murray *ACP* (04-Aug-2010) -
I have created two FG divs for Mission and Vision.
And i want to move the Vision div to its right side and also
the Mission div to its right side ,so that both of the divs appear some what in the middle of the browser.
But when i move it the vision div gets down.Like this.
What could i do?Pls help....Hi,
Please check if you have the necessary authorization to maintain your custom infotype in QAS. Enter /nsu53 after the previous infotype (previous w.r.t the custom infotype has been saved).
Also, check if you can directly maintain the infotype through PA30.
Hope this helps.
Donnie -
Hi, I am looking for some help getting this layout using divs working correctly. It will be going inside an existing spry tabbed panel. At the moment the styles are inline but I will be moving them to my external style sheet once it is working. What I am looking to do is create a div that will containg the details of a product, also contained in the div will be another div floated to the right containing the product image. The outer div will vary in height so I want the inner div that contains the image to match the height of the outer div, with the image being centered horizontaly and vertically if possible, the image will probably vary in size as well. See mockedup image below. Below that I have put the code I have got so far
<div style="border:solid 1px #000; padding:0px 0px 0px 10px; margin: 5px 0px 0px 0px">
<div style="width:150px; border:solid 0px 0px 0px 1px #000; float:right;"><img name="" src="" width="100" height="100" alt="" /> </div>
<h4>Universal Framing Anchor (A35)</h4>
<p>The A35 Anchor features an exclusive bending slot which allows instant and accurate bending on-site. The balanced and completely reversible design of the A35 makes it suitable for a wide variety of applications.</p>
<p><a href="http://www.strongtie.co.uk/products/type.php?typeID=10&familyID=7" target="_blank">"A35" Tech Data @ www.strongtie.co.uk</a></p>
</div>
Thanks for any help,
RichardI would argue against this method for the following reasons.
First, resizing the image dynamically would require bringing in a library like JQuery to read the height of an element after the page loads and then adjust the image accodingly.
Second, as you increase the size of an image it will be more blurry, or on the flip side, if the image is large and has to be scaled down, you force users to download images larger than what is necessary increasing your page load times depending on the amount of products per page.
From a user's standpoint, my experience has been that if you make images larger, it will draw more attention to that item over your other items, is that what you want to do?
Then depending on how long the descriptions are, you also increase the amount of scrolling on your page. If the descriptions are that long your best bet may be to do a brief description on this "listing" page and then have the user click on something to bring them to a detailed page.
if you still want to move forward with the JQuery method post back and we can try to help you go that route. -
Need help with floating div's and clear property
Link to page
Link to CSS file
I have the website currently setup as a 3 column website and everything is working fine. I need to make some pages as a 2 column page with the left column having several "leftcolumn" div's stacked on top of each other so that there are several rounded box sections in the left column.
I have the leftcolumn div floated left with a clear left to get the left column div's to stack on top of each other.
The rightcolumn is floated right.
How do I get my right column to align with the top of the first leftcolumn div?It's not always necessary to float every column. One float is usually enough for a 2-column layout.
Where you have this:
#rightcolumn {
width: 620px;
float: right;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
border:3px solid #5f605f;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-opera-border-radius:20px;
-khtml-border-radius:20px;
border-radius:20px;
background-color: #858586;
font-size: 12px;
margin: 10px;
Change it as follows:
#rightcolumn {
/**REMOVE ALL THIS**/
width: 620px;
float: right;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
border:3px solid #5f605f;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-opera-border-radius:20px;
-khtml-border-radius:20px;
border-radius:20px;
background-color: #858586;
font-size: 12px;
/**REMOVE THIS**/
margin: 10px;
/**ADD THIS**/
margin-left: 350px; /**adjust as needed**/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Message was edited by: Nancy O.
Strikethroughs are not working in the forum. I edited the code to make more sense. -
How to stretch content div to bottom of page.
Been messing around with my site so much that I needed to create a new one.
However, I can't get to stretch the content div to the bottom of the page if the content text doesn't fill the page.
I have a footer at the bottom of the page that stretches the full width of the page, so I can't use the trick with the body background.
I found a lot of results on the internet, but I seem to get a little lost.
Can anyone help me?
This is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Schudden fansite</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../css/Noorderzon.css" rel="stylesheet" type="text/css" /></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1> </h1>
<!-- end #header --></div>
<div id="mainContent">
<div id="nav"><a href="#" title="Home">Home</a> | <a href="#" title="Biography">Biography</a> | <a href="#" title="News & Updates">News & Updates</a> | <a href="#" title="Gallery">Gallery</a> | <a href="#" title="Portfolio Work">Portfolio Work</a> | <a href="#" title="Links">Links</a> | <a href="#" title="Contact">Contact</a></div>
<p>Main Content</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. P</p>
<h2> </h2>
<p> </p>
</div>
<div id="footer">
<p> </p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
And this is the CSS code:
@charset "utf-8";
body {
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color: #800000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
body,td,th {
font-size: 9pt;
color: #333;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
#container {
width: 100%;
text-align: center; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #800000;
padding-bottom: 0px;
top: 0px;
bottom: 0px;
height: 100%;
#header {
width: 960px;
padding-top: 0;
padding-bottom: 0;
height: 160px;
margin-right: auto;
margin-left: auto;
background-color: #DDDDDD;
background-image: url(../images/header.jpg);
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
#mainContent {
width: 960px;
margin-right: auto;
margin-left: auto;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(../images/mainbg.jpg);
height: 100%;
#nav {
text-align:center;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
font-weight:700;
padding-top:9px;
padding-bottom:10px;
text-decoration:none;
background-image: url(../images/mainbg.jpg);
background-repeat: repeat;
width: 960px;
#nav a {
background:#fff;
color:#000;
text-decoration:none;
#nav a:active {
background:#fff;
color:#800000;
#nav a:hover {
background:#fff;
color:#000;
font-size:10pt;
padding-bottom:2px;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: #800000;
a:link {
color: #000;
a:hover {
color: #800000;
a:active {
color: #369;
a:visited {
color: #369;
#footer {
height: 100px;
width: 100%;
padding-top: 0;
padding-bottom: 0;
background-image: url(../images/bottom.png);
margin-bottom: 0px;
bottom: 0px;
position: fixed;so Im having an issue that is similar but the fixes arent really working. Here is the site http://upeer.jordanselectronics.com/
I've never worked with a page this short so it was never an issue but I want the content area to stretch 100 percent so it fills the browser window and pushes the footer to the bottom if the page is so short theres no scroll bar. I put height modifiers on the body, the wrapper(container) and the content div but it's still only as tall as the content in the content div.
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
min-height: 100%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 1em;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
margin: 0 auto;
height: 100%;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-image: url(contentbackground.png);
padding: 25px;
min-height: 100%;
/* ~~ The footer ~~ */
.footer {
background-image: url(footerbackground.png);
background-repeat: no-repeat;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.navbar {
background-color: #F00;
Maybe you are looking for
-
How can I stop safari from auto completing url's on my iphone 4 and ipad2?
How can I stop safari from auto completing url's on my iphone 4 and ipad2? On both devices I have cleared history, I have gone into settings-safari-and cleared history and cleared cookies & data, tried turning my devices on and off and I also have p
-
Error in broadcasting the Workbook
Hai friends, I have scheduled the broadcaster for a workbook with 10 different settings through E-mail. I have 1 precalculation server. I have added it to the ZIP file. But when I try to open the attachment, I get the following error: "Microsoft
-
Can I turn off my MacBook Pro screen when connected to an external monitor?
I have my 13' MacBook Pro connected an external Samsung monitor, is it possible to have the laptop screen turned off so that it is only displayed on the monitor screen?
-
Error SocketChannel receive multiple messages at once?
Hello, I use Java NIO, non blocking for my client-server program. Everything works ok, until there are many clients that sending messages at the same time to the server. The server can identify all the clients, and begin reading, but the reading of t
-
Duplicate entry is not deleted from the TCA tables
Hi We are using Oracle Customer Online to find the duplicate data and Oracle Data Librarian to remove the duplicacy. The request to remove the duplicates is taken up by ODL and the task is performed. When checked from OCO it shows that the duplicate