Help with divs

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,
Richard

I 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.

Similar Messages

Help with Div Tags

Hello,
I've got 2 flash files in separate div tags. Div 1 is sized 100% x 100% to match the movie, and the other div tag is set at 900px x 700px (again to match the movie). The 1st tag sort of acts as a background to the top layer. This all works great and really happy with the result.
My only problem is when the browser window gets smaller than the top layer a scroll bar appears (this is no problem, i actually don't want the top layer to resize due to text legibility etc.) but what i notice is that when you scroll to view the rest of the top layer, the bottom layer no longer fills the screen, the remainder of the screen is now white, it actually cuts off some of the image from where the window was in it's last position.
this is the site:
http://www.baycreative.co.uk/Test.html
Any suggestions to why this is happening?

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Help with DIV tags (i think)

Hello all,
Just started using Dreamweaver and was following a tutorial
about making a layout in Photoshop, slicing it, and then importing
it into Dreamweaver. Then I delete the content portions of the
image and add a box with DIV tags.
Now, the site works just fine when I put only a single line
of text/content for both FF and IE.
However, once I add a second line, the site becomes a mess in
FF.
I have the site hosted with 2 lines of text in my main
content box here:
http://cnorthington.site.io/sitebase.html
Any advice you can offer would be great.
Thanks,
Chris.
P.S. This is what it looks like without content:
http://cnorthington.site.io//sitebasetwo.html

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Help with Divs need please

Hello could someone possibly help me.
My page layout has a top banner ("banner"), then main content
below in the middle (middletext), and a fotter ("footer") below the
"middletext" div
I want place a div of say 100px directly to the right of the
"middletext" div. The layout is fluid so I want the right div to
move with the rest of the page when resized in an IE window. Here
is the code for the css -
body {
background-color: #666666;
background-repeat: repeat-x;
#background {
background-color: #999999;
background-repeat: repeat-x;
width: 80%;
#content {
background-color: #CCCCCC;
background-repeat: repeat-x;
height: 300px;
#middletext {
background-color: #FFFFFF;
background-repeat: repeat-x;
margin-left: 200px;
margin-right: 200px;
height: 300px;
#footer {
background-color: #9999FF;
background-repeat: repeat-x;
height: 100px;
#rightcontent {
background-repeat: repeat-x;
width: 100px;
background-color: #CCCC66;
height: 100px;
position: absolute;
left: 1052px;
top: 135px;
#banner {
background-color: #996633;
background-repeat: repeat-x;
height: 100px;
And the code for the html page -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body>
<div id="background">
<div id="banner">Content for id "banner" Goes
Here</div>
Content for id "background" Goes Here
<div id="content">
<div id="middletext">Content for id "middletext" Goes
Here</div>
id content </div>
<div id="footer">Content for id "footer" Goes
Here</div>
</div>
</body>
</html>
I also have the width of the page set to 80%, just to give a
small border, but how can I center the entire page?
Many thanks in advance!!
Billy.

Add the 'right' <div> before the 'middletext'
<div> and float it right
with a width of 100px. See code and css below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="test.css" rel="stylesheet"
type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
<style>
body {
background-color: #666666;
background-repeat: repeat-x;
#background {
background-color: #999999;
background-repeat: repeat-x;
width: 80%;
#content {
background-color: #CCCCCC;
background-repeat: repeat-x;
height: 300px;
#middletext {
background-color: #FFFFFF;
background-repeat: repeat-x;
margin-left: 200px;
margin-right: 200px;
height: 300px;
#footer {
background-color: #9999FF;
background-repeat: repeat-x;
height: 100px;
#rightcontent {
background-repeat: repeat-x;
width: 100px;
background-color: #CCCC66;
height: 100px;
position: absolute;
left: 1052px;
top: 135px;
#banner {
background-color: #996633;
background-repeat: repeat-x;
height: 100px;
#right {
float: right;
width: 100px;
background-color:#FFFFFF;
</style>
</head>
<body>
<div id="background">
<div id="banner">Content for id "banner" Goes
Here</div>
Content for id "background" Goes Here
<div id="content">
<div id="right">right</div>
<div id="middletext">Content for id "middletext" Goes
Here</div>
<div id="footer">Content for id "footer" Goes
Here</div>
</div>
</div>
</body>
</html>

Help with div positioning

I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
     width:97%;
#container {
     min-height: 1000px;
     width:100%;
     min-width:850px;
     border-color:#000;
     border: solid 2px;
     alignment-baseline:middle;
     margin:25px;
#header {
     float:left;
#collage {
     float:right;
     width:202px;
#menu {
     margin-top:20px;
     height:30px;
     float:left;
     clear:left;
#MenuBar1 {
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
     clear:inherit;
#meat {
     float:left;
     clear:left;
     /* [disabled]max-width:600px; */
     padding:20px;
     padding-left:40px;
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
     clear:both;
     width:100%;
     height:auto;
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Welcome to KIDS care Colorado.com!</title>



<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
      <div align="center"><span id="MenuBar1"><a href="#">Home</a>
        </span>
      </div>
    </li>
    <li><span id="MenuBar1"><a href="#">Programs</a></span></li>
    <li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
    <li><span id="MenuBar1"><a href="#">Donate</a></span></li>
    <li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>

<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>

<div id="footer">
<div align="center">
    <p> </p>
    <p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
    <p>PO Box 19442 • Boulder, CO 80308
    </p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Learning as I go, need help with div overlapping

PLEASE HELP, PEOPLE ARE LOOKING BUT YOU ARE NOT RESPONDING. At least give me something, please!! If you need more info I can give it to you, I just don't know what you need
I am learning Dreamweaver through the tutorials provided here on the Adobe site. I have basic html/css knowledge and am trying to learn how to use it!!
I have tried inserting div inside one big div, like in the getting started tutorial, but the tags seem to be overlapping when I click on the Live View option. The look fine in the design view, but overlap in the Live View. I need them not to overlap.
If this is not enough info for someone to help, please ask what you need to know.
Thank you
Robbie

1. Have you previously posted a question here? You seem to be alluding to one but I see no posts under the moniker of RobJes
     -No John, I haven't. I think I was just getting impatient. I had been working on this for a while and couldn't figure it out. I edited the original post after      I had seen that several people had looked at the question but had not even responded. I was being impatient.
2. Can you provide a link to what you've done so far?
      Here is a link to what I have so far, I think I fixed the problem, but if you see anything I could do please let me know
     http://www.spin4life.net/main.html
     Most of the links don't work yet, was just trying to get the layout fixed first.
3. What is your question in a nutshell?
     The text below the pictures on the top was overlapping with the other text below it. But like I said, I think I have it fixed now.
Either way, thank you for your reply. I really appreciate it and if you have any suggestions I would be all ears!! Thank you

Need help with Div Float Left...

Hi... this is a bit beginner, but can't seem to figure it out..
I'm trying to put three photos in a row... I am doing this by using divs with one floating left... but the third photo wants to drop to a second line below the other two...
Here is a link: http://www.robynjeandesign.com/bayareafacepainters/index.html
Help please
Thanks!

Don't overly complicate your code with too many divisions. Less is more.
Change this:
<div id="index_photos">
<div id="index_photo1"><img src="images/Face-Peacock.jpg" height="400" width="300"></div>
<div id="index_photo2"><img src="images/Face-Fairy-Crown.jpg" height="400" width="300"></div>
<div id="index_photo3"><img src="images/Face-Dragon.jpg" height="400" width="300"></div>
</div>
to this:
<img src="images/Face-Peacock.jpg" height="400" width="300">
<img src="images/Face-Fairy-Crown.jpg" height="400" width="300">
<img src="images/Face-Dragon.jpg" height="400" width="300">
Having said that, there may be times when you need 3 floats on a page. See link below for details.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help with div tag in DWCS4

Hola
this is my first time using --or trying to used-- CSS
I have a div tag that I want to used as a navigation bar.
I type the links, and when I try to fix them with CSS, if I put a line (border top and bottom) on top of the link, the whole links Shift out of the navigation box.
Then I tried to put an inside div in the navigation div to try to control the shifting, but it didn't work, still shift out of the div nav.
I'm going to post a link later so you can "see it".
Hope you understand my problem
Thanks for your help.
Daniel Ulysses
P.S. I'm learning DW, used to have GoLive, but have to "Update", so far...I love it, just having some issues.

Try this free menu extension from List-O-Rama.
http://www.dmxzone.com/go?5618
Project VII menus:
Uberlinks -
http://www.projectseven.com/tutorials/css/uberlinks/
CSS Express Drop menus-
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Pop Menu Magic 2 - the best
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

Help with divs and columns please?

Hello all,
I'm quite new to dreamweaver and having problems. I am
designing a site with 3 columns (left for nav, middle for main
content and right for offers & advertising etc.) I am using
tables within the divs to organise content and I have aligned the
divs left and in all sorts of other ways to try and get them to
look like 3 columns but no matter what I do the right column always
ends up underneath the middle column. What am I doing wrong?
Thanks in advance

Faux columns. I don't like javascript solutions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Jay Jhabrix" <[email protected]> wrote in message
news:ga92ts$23c$[email protected]..
> Murray,
>
> BTW... am trying to create a 3 column site... staying
away from tables...
> :)
>
> As i see it i have two choices:
> 1/ Go for a 'faux column" kind of solution
> 2/ PVII's javascript driven answer
>
> Ideally, i'd like to do it purely in CSS but with
minimal hacks. I will be
> using tables but don't want them to be a feature of the
design... purely
> for content. Background white. But want to have four
borders... left,
> right and the two central ones. Fixed width. Any
suggestions, links?
>
> (One menu is definitely PMM.)
>
> Cheers,
>
> JJ
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:ga920g$tv$[email protected]..
>>I can take it....
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>> ==================
>>
>>
>> "Jay Jhabrix" <[email protected]> wrote in
message
>> news:ga91so$ph$[email protected]..
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:ga8vu7$rpa$[email protected]..
>>>
>>>> Heh - no. It was the perceived status of the
OP.
>>>
>>> That's what i kind of figured... but couldn't
resist the dig ;->
>>>
>>
>
>

Help with div container thumbnails

Learning and experimenting with css questions:
I want thumbnail containers containing jpgs and text that wrap to browser width just like thumbnail jpgs. These will eventually be put in a spry collapsible panel.
1- How to make "no-wrap" text? I want my containers to stretch the width of widest line
2 - What did I do to make my containers wrap strangely when browser window is resized...sometimes aligning right? I want them to stack on evenly spaced rows left to right.
thanks
http://planetrambler.com/test/thumbs-index.html
http://planetrambler.com/test/x1.css

Larry,
I am not sure that I understand but this might be it...
.tn-container {
background-color:#FFFFFF;
float:left;
height:180px;
padding:2px 10px;
text-align:center;
width:auto;
The only thing that concerns me about that, if it's your solution is that I am not sure about width: auto with a float. I do know that a floated element has to have a width expressed but I don't know if auto is ok.
If this doesn't work, then I suggest you reframe your question in a new thread. Because you have marked this as answered it may not attract the expert attention that might help us both!
Regards
Martin

Help with div

<div style="width:450px; margin-left:40px;" id="122">
          <nested:iterate name="wzConditionForm" id="alphaVO1" property="alphaListVO" type="vo.WZAlphaListVO" indexId="index">
          <logic:equal name="alphaVO1" property="visible" value="true">
          <div id='<nested:write property="alphabet"/>alpha' style="width:450px; margin-left:0px; display:none">
               *<br />*
<nested:iterate name="alphaVO1" id="conditionList" property="conditionList">
                   <p>
                    I want to insert
if browser is IE else I dont want it thr.. Is there any way I can achieve this??
Please help...Thanks....

[http://forums.sun.com/thread.jspa?threadID=5328903&messageID=10410563#10410563]
It is possible. The 'how' is better to be asked in a forum devoted to Javascript. You see, you're at a Java forum, not at a Javascript forum. There are ones at webdeveloper.com and dynamicdrive.com. Google can also help a lot if you use keywords the smart way. Good luck.
That said, the reasoning behind your question (inserting a
depending on the browser) sounds like a huge code smell. Doublecheck if you got the DOCTYPE and the CSS styles right. The core of the problem is 99.9% certainly in there. Learn HTML. Learn DOCTYPE. Learn CSS. Don't doublepost/crosspost.

Need some help with div covering whole page.

I'm starting to learn more about responsive design. I have what I'm sure is a very simple question but can't seem to resolve it.
The problem is I have my header and footer taking up the whole width of the page with a black background. But if you look there is a tiny space on either side. I would like there NOT to be that space. If you wouldn't mind taking a look at the source code for this page and seeing what I might be doing wrong I's SO appreciate it!
Here is the page:
http://www.berniechiaravalle.com/index.html
I'm looking forward to all the expert advice I can get.
Thanks!
BC

You can reset everything individually to a baseline in your custom CSS file. Or globally with a CSS reset method. The one I posted (*) is the quickest way but some people prefer to use other methods like normalize.css or boilerplate.css files. See links below for details.
CSS Reset | 2013's most common CSS Resets to copy/paste, with documentation / tutorials
http://www.cssreset.com/what-is-a-css-reset/
The box-sizing is necessary in Fluid (% width) layouts to fix the box-model. You can read more about why we need it below:
http://css-tricks.com/box-sizing/
Nancy O.

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" />
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
    <h1>
</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" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
          
          <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" />
          
          <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>
          
        </object>
        
      </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>
</div>
<script type="text/javascript">

</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!
Jayson

1) 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

Help with two DIVs as columns at 100% page height

I've got two DIVs side by side on my page and I want both columns to fill the page from top to bottom.
The left DIV stops about half way down the page.
There are DIVs inside of each column.
My test link is: http://faceworks.webtestingsite.net/pages/facials.html
Here's the CSS I used for the columns,
#leftSideBkgd {
          position:absolute;
          min-height:100%;
          background-color: #f0f0f0;
          width: 25%;
          left: 0px;
          top: 0px;
          z-index: 0;
          background-image: url(../img/bkgd/leftMenu.jpg);
          background-repeat: repeat-y;
          background-position: 100% 0px;
#rightSideBkgd {
          position: absolute;
          background-color: #FFFFFF;
          width: 75%;
          left: 25%;
          top: 0px;
          z-index: 0;
          min-height:100%;
          background-image: url(../img/bkgd/pageBkgd.jpg);
          background-repeat: repeat-x;
          background-position: 0px 0px;
html {
          height:100%;
body {
          height:100%;
          background-image: url(../img/bkgd/pageBkgd.jpg);
          background-repeat: repeat-x;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          background-color: #FFF;
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 14px;
          font-style: normal;
          line-height: 1.75em;
          font-weight: normal;
          color: #000;
Thanks for your help with this

You cannot safely force the height on those divs, without also getting ugly vertical scrollbars.
Your choices are three -
1. Use Faux columns (Google it) to make it *look* like the divs are the same height.
2. Use javascript to actually dynamically determine what height to use for the columns.
3. Use CSS3 to make the adjacent columns behave as if they were two adjacent cells in a table, resulting in them being the same height.
My preference is #1 - it's easy and VERY effective. I don't like #2 as a solution, and #3 works beautifully if you are not worried about supporting IE6 or 7.

Help with this div - can I overlap divs?

Hello there, I used the search function to find an answer to this, but got nothing concrete so thought I should make this thread
My problem is shown in the screenshots below. I created a div id for the banner, a div id for the button "home". There is a Div ID for the stuff below, and that stuff is put into div classes
My problem is, I want to put that home button over the gre banner (and other buttons). When I try shifting the button over the banner, instead of shifting over the banner, it shifts the banner away and just pushes it. The screen shot is below showing the before and after, as well as the css:
[img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1designview.jpg?t=1292783483[/img]
[img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1csscode.jpg?t=1292783852[/img]
^^ the css for that. The name of the button is "home" and it is a DIV ID
This is what happens when I changes the margin left to 80pixes instead of 50 pixels (i.e. when i tried moving it to the right)
[img]http://i1006.photobucket.com/albums/af186/RC20087765/fig2designview.jpg?t=1292783939[/img]
All I want to do is place that home button on the grey banner! And later on, I will put some other buttons up there, but for now thats what I want to do
If someone can just tell me how to put a div over another div, I would be so grateful! Thanks guys.

Yes you can place one div over another div by using z-indexing (giving the <div> a stacking order). BUT, z-indexing only works with <div>s that have a declared position, like position:absolute (or relative). z-indexing and declared position have to be used together.
From and old post:
One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So
Code:
#flash {
z-index:5;
will not work without ALSO giving it a declare position.
But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.
That is, if it'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>.
Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code or copy it and practice by changing z-index and positions.
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
More info here:
http://www.w3schools.com/css/pr_pos_z-index.asp
Best of luck to ya!
Adninjastrator

Help with divs

Similar Messages

Maybe you are looking for