Height of container
Hi, I'm building a CSS website with a flexible layout (that
is i'm trying...). I use a container for all the content to be put
within. The container has a fixed with but not a fixed height. The
problem is that in Firefox the container does not stretch along
with the content. In IE it does. How come and how solve? thanks
Add this to your CSS:
.clear { clear: both; }
Then in your HTML, change this:
<div id="text">
<h1>C'MON EVERYBODY !</h1>
</div>
to this:
<div id="text">
<h1>C'MON EVERYBODY !</h1>
</div>
<div class="clear"></div>
See if that helps.
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Web Dev Articles, Photography, and more:
http://pixelyst.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"eppo747" <[email protected]> wrote in
message
news:[email protected]...
> Hi, I'm building a CSS website with a flexible layout
(that is i'm
> trying...).
> I use a container for all the content to be put within.
The container has
> a
> fixed with but not a fixed height. The problem is that
in Firefox the
> container
> does not stretch along with the content. In IE it does.
How come and how
> solve?
> thanks
>
>
>
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
> "
http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <script language="JavaScript"
type="text/JavaScript">
> <!--
> 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
[n];
>
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> x=MM_findObj(n,d.layers.document);
> if(!x && d.getElementById)
x=d.getElementById(n); return x;
> }
>
> function MM_setTextOfLayer(objName,x,newText) { //v4.01
> if ((obj=MM_findObj(objName))!=null) with (obj)
> if (document.layers) {document.write(unescape(newText));
> document.close();}
> else innerHTML = unescape(newText);
> }
> //-->
> </script>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <style type="text/css">
>
> #container {
> background-color: #333333;
> width: 880px;
> padding-top: 0px;
> padding-left: 32px;
> padding-right: 38px;
> padding-bottom: 15px;
> margin-right: auto;
> margin-left: auto;
> }
> <!--
> body {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> background-image: url(bg.gif);
> }
> #header {
> float: left;
> margin-bottom: 8px;
> }
> #rightbar {
> float: right;
> height: 426px;
> width: 215px;
> background-color: #CCCCCC;
> position: relative;
> }
> #leftphoto {
> background-color: #FFCC66;
> padding: 10px;
> height: 152px;
> width: 236px;
> float: left;
> clear: left;
> position: relative;
> margin-top: 11px;
> }
> #text {
> background-color: #E8EDDC;
> min-height: 172px;
> width: 343px;
> float: left;
> margin-left: 10px;
> margin-top: 11px;
> }
> </style>
> <!--[if IE]>
> <style>
> div#text
{min-height:172px;height:expression(this.scrollHeight <
> 172? "172px" :
> "auto" );}
> </style> <![endif]-->
> <style type="text/css">
> ul#main {
> margin: 0px;
> padding: 0px;
> }
> ul#main li {
> float: left;
> list-style-image: none;
> list-style-type: none;
> }
> ul#blok1 {
> margin: 0px;
> padding: 0px;
>
> }
> ul#blok1 li {
> float: left;
> list-style-image: none;
> list-style-type: none;
> background-color: #FFFFFF;
> height: 15px;
> width: 15px;
> margin-right: 10px;
> }
> ul#blok1 li a {
> text-decoration: none;
> color: #FFFFFF;
> height: 15px;
> width: 15px;
> display: block;
> }
>
> ul#blok2 {
> margin: 0px 0px 0px 10px;
> padding: 0px;
> float: right;
> }
> ul#blok2 li {
> list-style-image: none;
> list-style-type: none;
> background-color: #FFFFFF;
> height: 15px;
> width: 15px;
> margin-bottom: 10px;
> }
> ul#blok2 li a {}
> h1 {
> font-size: 18px;
> margin-top: 5px;
> margin-bottom: 5px;
> }
> h2 {
> font-size: 13px;
> margin-bottom: 0px;
> }
>
> -->
> </style>
> <script language="JavaScript"
type="text/JavaScript">
> <!--
> function MM_reloadPage(init) { //reloads the window if
Nav4 resized
> if (init==true) with (navigator) {if
>
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
> document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
> onresize=MM_reloadPage; }}
> else if (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH)
> location.reload();
> }
> MM_reloadPage(true);
> //-->
> </script>
> </head>
>
> <body>
> <div id="container">
> <ul id="main">
> <li><img
src="images/h_knop1.gif"></li>
> <li><img
src="images/h_knop2.gif"></li>
> <li><img
src="images/h_knop3.gif"></li>
> <li><img
src="images/h_knop4.gif"></li>
> </ul>
> <div id="header"><img
src="images/new_header.gif" width="630"
> height="220"></div>
> <ul id="blok2">
> <li></li>
> <li></li>
> <li></li>
> <li></li>
> </ul>
> <div id="rightbar"><img
src="images/new_fonsguitar.gif" width="215"
> height="426">
> </div>
> <ul id="blok1">
> <li><a></a></li>
> <li><a
onMouseOver="MM_setTextOfLayer('leftphoto','','%3Cimg
> scr=/bw_elvis.jpg%3E')"></a></li>
> <li></li>
> <li></li>
> </ul>
> <div id="leftphoto"><img
src="bw_dylan.gif"></div>
> <div id="text">
> <h1>C'MON EVERYBODY !</h1>
> </div>
> </div>
> </body>
> </html>
>
Similar Messages
-
Setting max-height with contain for bg image
Hi , I currently have a simple image that I want to sit in the top right corner, however I would like it to scale so the whole image fills the right hand of the viewport (only if they make the viewport smaller than the original image though). The contain function does this job however it also scales the image upwards should the user go full browser which looks horrible. So my question is can I use ( background-size: contain;) but add a max-height line to it also. I have tried every combination possible but nothing. Im either doing something wrong or it cant be done.
Site: http://www.stuartskelton.co.uk
my css is:
body {
margin: 5px;
background-attachment: fixed;
background-image: url(../images/neilquote.gif);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
Thanks for looking.You can't add a max-height to the existing rule, but you could use a media query to change the value of background-size like this:
body {
margin: 5px;
background-attachment: fixed;
background-image: url(../images/neilquote.gif);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
@media screen and (min-height: 462px) {
body {
background-size: 55px 461px; -
Extending height of container to same as 'parent' container
Hi
I have a container div which is housing left and right divs
for a standard two column page layout. My right div is the text and
my left is for the menu. I'd like the height of this div to always
be the height of the div container it's sitting in - extend right
down to the bottom, where I have a div for the footer. I tried
setting the height to 100%, but this didn't work. I'm left with a
block of colour in the left column which only drops as low as the
content (text) goes.
All very simply I'm sure. Any advice?
many thanks> All very simply I'm sure
No. In fact, impossible. Google "faux column" however, to
make it look
like you have achieved this goal....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"bendrissa" <[email protected]> wrote in
message
news:fc7d25$q8$[email protected]..
> Hi
>
> I have a container div which is housing left and right
divs for a standard
> two
> column page layout. My right div is the text and my left
is for the menu.
> I'd
> like the height of this div to always be the height of
the div container
> it's
> sitting in - extend right down to the bottom, where I
have a div for the
> footer. I tried setting the height to 100%, but this
didn't work. I'm left
> with
> a block of colour in the left column which only drops as
low as the
> content
> (text) goes.
>
> All very simply I'm sure. Any advice?
>
> many thanks
> -
Flash jumps when javascript change height of container DIV
Flash jumps down, when you change(make bigger) the height of contaner DIV.
I've narrowed the problem down to the simple code
<div id="layer" style="width:700px; height:45px;" onclick="
this.style.height='225px' ">
<embed src="test.swf" wmode="transparent" width="100%"
height="100%"></embed>
</div>
No matter what SWF file is used, if you click on the flash(DIV) the
javascript will change the height of the DIV and the flash will jump
down.
The quick fix is to remove the wmode="transparent", but if I need the transparency I cannot do that.
Example - http://f-source.com/firefox4_flash_bug/You need to add 'px' to the height:
<pre><nowiki>function resize() {
height = document.documentElement.clientHeight;
imgheight = Math.round((height / refheight) * 530);
document.getElementById('Image1').style.height = imgheight+'px'; //background height
setTimeout("resize()", resize_delay);
}</nowiki></pre> -
Sidebar moving over right border of website and outside of main container
Hi
I'm doing a website and have a question.
I have a left nav bar, a fluid center column and an absolute positioned right sidebar.
The sidebar is set to clear left and float right.
However the sidebar moves over to the right and extends past the right border on some browsers.
It moves out of the main container and I would like it to remain within it.
Does anyone know how I can fix it so that the sidebar stays within the white area and does not move to the right?
Thanks for your help!!!!
Here is a screen shot
When the browser window gets a little smaller the sidebar goes back to where I want it.
Here is a link to my test page online:
http://elynncohen.com/index2.html
and here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
line-height: 1.4;
background-image: url(images/background.gif);
background-repeat: 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;
.container .sidebar1 h3 {
padding-left: 0px;
color: #C60651;
font-size: x-large;
h1 strong {
color: #C60651;
font-size: 90%;
font-family: "Binary ITC Bold";
h1 strong em {
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;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF; /* 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%. */
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C60651;
border-left-color: #C60651;
/* ~~ 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 {
padding-top: 40px;
#Quote {
float: right;
clear: left;
margin-right: 1%;
/* ~~ 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
margin-top: 40px;
border-top-color: #FFF;
border-left: #FFF;
margin-left: 25px;
background-color: #FFF;
font-family: museo-sans;
arial;
max-width: 200px;
min-width: 180px;
position: absolute;
.content {
float: left;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10;
font-family: museo-sans;
arial;
margin-right: 250px;
margin-left: 220px;
.container .content p {
padding-top: 0px;
.sidebar2 {
float: right;
width: 20%;
background-color: #D3CCB2;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 5px;
font-family: museo-sans;
arial;
font-size: 90%;
position: absolute;
clear: left;
right: 12%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding-top: 0px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 40px;
font-family: museo-sans; arial;
font-size: 100%;
color: #666;
.container .content p {
font-family: museo-sans;
arial;
padding-top: 0px;
padding-left: 17px;
padding-bottom: 0px;
#Quote {
float: right;
clear: both;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the space between the navigation on the content below */
font-family:museo-sans; arial;
line-height: 250%;
.nav {
font-family: museo-sans;
arial;
padding-left: 0px;
ul.nav li {
font-family: museo-sans; arial;
padding-bottom: 10px;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
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. */
text-decoration: none;
color: #333333;
background-color: #FFF;
font-family: museo-sans; arial;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 15px;
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 */
color: #C60651;
font-family:museo-sans; arial;
background-color: #FFF;
background-image: url(images/navbar2.gif);
padding-bottom: 10px;
.content img {
/* ~~The footer ~~ */
.footer {
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
padding-top: 0px;
padding-right: 0;
padding-bottom: 10px;
/* ~~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;
.container .content {
width: 50%;
font-size: large;
font-family: museo-sans; arial;
#footer { width: 100%;
background-color: #FFF;
.container .sidebar2 h4 img {
padding-left: 20px;
padding-top: 0px;
.sidebar2 p img {
border: medium solid #C60651;
#Insert_logo2 {
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
.container .content p .content strong {
font-family: museo-sans; arial;
.container .content .content {
font-family: museo-sans; arial;
.container .content ul li strong {
font-family: museo-sans;
arial;
font-size: 95%;
line-height: 150%;
list-style-type: disc;
.container .content ul {
test {
font-family: "Binary ITC Bold";
.container .sidebar2 p img {
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-color: #C60651;
border-right-color: #C60651;
border-bottom-color: #C60651;
border-left-color: #C60651;
li strong {
line-height: 130%;
list-style-type: circle;
color: #978980;
.container .content ul {
.container .sidebar1 .nav {
margin-top: 10px;
margin-bottom: 10px;
.sidebar1 .nav li {
padding-bottom: 10%;
.nav li a {
background-image: url(images/navbar2.gif);
background-repeat: no-repeat;
background-position: right center;
left: auto;
right: auto;
clip: rect(auto,auto,auto,auto);
.container .sidebar1 .nav li a {
.container .sidebar1 h6 {
padding: 0px;
color: #000000;
#footer h3 strong {
font-size: 60%;
color: #978980;
.container .content p {
padding-right: 0%;
padding-left: 0%;
font-size: 85%;
.container .sidebar2 p {
padding-right: 8%;
padding-left: 8%;
padding-top: 5px;
#Insert_logo2 #Insert_logo2 {
padding-left: 15px;
.container .content ul {
color: #C60651;
h6 {
color: #978980;
font-family: museo-sans;
arial;
font-size: 82%;
padding-left: 20%;
text-align: left;
text-indent: 8px;
.nav li a {
padding-bottom: 10px;
h8 {
font-family: museo-sans; arial;
font-size: 100%;
h4 {
font-family: museo-sans;
arial;
font-size: 100%;
color: #C60651;
padding-left: 17px;
padding-top: 5px;
padding-bottom: 0px;
.container .content p {
padding-left: 17px;
padding-right: 30px;
.sidebar1 h8 strong {
font-size: 80%;
font-family:museo-sans; arial;
.container .sidebar1 h7 {
font-size: 40%;
color: #978980;
h7 {
font-family: museo-sans; arial;
font-size: 15%;
.container .sidebar1 h8 {
font-family: museo-sans; arial;
.sidebar2 p img {
min-width: 200px;
max-width: 100%;
.container .content img {
padding-left: 3%;
img {
position: static;
text-align: left;
body,td,th {
font-family: museo-sans; arial;
h5 {
font-size: 150%;
color: #C60651;
padding-left: 0px;
font-family:museo-sans; arial;
.container .content p {
padding-left: 17px;
padding-right: 30px;
font-size: 87%;
.container .sidebar2 p {
font-size: 90%;
.container .sidebar1 .nav li {
font-family: museo-sans;
arial;
.container .sidebar1 .nav li a {
padding-left: 0px;
margin-bottom: 0px;
height: 30px;
li a {
padding-left: 2px;
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header"><!-- end .header -->
<p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
; display:block;" /></a></p>
<div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
<p class="clearfloat"> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">High School Students</a></li>
<li><a href="#">College Students</a></li>
<li><a href="#">Parents/Educators</a></li>
<li><a href="#">Professionals</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Q & A Blog</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
<br><br><li><strong>Considering your college choices & career options</strong></li>
<li><strong>Preparing for the world of work after college</strong></li>
<li><strong>Seeking a new position to further your career</strong></li>
<li><strong>In-transition and considering new opportunities</strong></li>
<li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
</ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
<p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
<p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
<p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
<p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
<div id="footer">
<h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
</div>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>Absolute positioning will always cause you problems so it's best to avoid unless absolutely necessary.
Having said that, your layout issues were a straight-forward fix. Modify your style sheet with the below sections and and it should be ok. You might need to modify your CSS for smaller screens as once you reduce the browser window to about 500px, the right sidebar disappears. Something to be aware of.
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
margin-top: 40px;
border-top-color: #FFF;
border-left: #FFF;
margin-left: 25px;
background-color: #FFF;
font-family: museo-sans; arial;
max-width: 200px;
min-width: 180px;
position: absolute;
.content {
float: left;
margin-top: 40px;
margin: 40px 0 0 0;
padding:10px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10;
font-family: museo-sans; arial;
margin-right: 250px;
margin-left: 220px;
width: 50%; /* You can increase this to 55%, or add a left and right margin to space the elements */
font-size: large;
.sidebar2 {
float: right;
float:left;
width: 20%;
background-color: #D3CCB2;
margin-top: 40px;
padding: 10px 0;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 5px;
font-family: museo-sans; arial;
font-size: 90%;
position: absolute;
clear: left;
right: 12%;
.sidebar2 p img {
min-width: 200px; /* This needs to be removed or made smaller if you are keeping it - or set a min-width on sidebar2 */
max-width: 100%;
width:100%;
height:100%;
.container .content {
width: 50%;
font-size: large;
font-family: museo-sans; arial;
EDIT:// I meant to say, you should probably spend some time tidying up your CSS as they are not in any obvious order and can get confusing with multiple styles for the same element. Having a clean and easy to understand CSS sheet makes it easier for you to figure out what is wrong. Will help you enormously in the long run.
Message was edited by: Rik -
Container ALV not working in background
Hi all,
I created an ALV grid, which runs fine foreground. In the background however the spool is created but cancelled.
REATE OBJECT g_custom_container
EXPORTING
container_name = 'G_CUSTOM_CONTAINER'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
lifetime_dynpro_dynpro_link = 5
OTHERS = 6.
IF sy-subrc <> 0.
Error in custom container instantiation. ALV cannot be displayed
MESSAGE e000 WITH text-015.
ENDIF.
CREATE OBJECT g_dyndoc_id
EXPORTING
style = 'ALV_GRID'.
Create a splitter and split the container for
the two parts of ALV contents
CREATE OBJECT g_splitter
EXPORTING
parent = g_custom_container
rows = 2
columns = 1.
Get container for top half of the report
CALL METHOD g_splitter->get_container
EXPORTING
row = 1
column = 1
RECEIVING
container = g_container_top.
Set the height of container for top half of the report
CALL METHOD g_splitter->set_row_height
EXPORTING
id = 1
height = 20.
Get Container for bottom half of the report
CALL METHOD g_splitter->get_container
EXPORTING
row = 2
column = 1
RECEIVING
container = g_container_grid.
Instantiate ALV grid main report
CREATE OBJECT g_grid
EXPORTING
i_parent = g_container_grid
EXCEPTIONS
error_cntl_create = 1
error_cntl_init = 2
error_cntl_link = 3
error_dp_create = 4
OTHERS = 5.
IF sy-subrc <> 0.
Error in grid instantiation. ALV caanot be displayed
MESSAGE e000 WITH text-016.
ENDIF.
Build field catalogue
PERFORM build_field_cat.
Inatntiate Top-of-Page event
CREATE OBJECT g_events.
SET HANDLER g_events->handle_top_of_page FOR g_grid.
IF it_comparednomatch[] IS INITIAL.
MESSAGE s000 with text-003.
EXIT.
ELSE.
Print ALV Contents of first half of report
g_grid->set_table_for_first_display( EXPORTING i_default = 'X'
CHANGING it_outtab = it_comparednomatch
it_fieldcatalog = it_fldctdrl
EXCEPTIONS invalid_parameter_combination = 1
program_error = 2
too_many_lines = 3
OTHERS = 4 ).
IF sy-subrc <> 0.
Error in displaying ALV
MESSAGE e000 WITH text-017.
ENDIF.
ENDIF.
ENDIF.
Call top-Of-Page
CALL METHOD g_grid->list_processing_events
EXPORTING
i_event_name = 'TOP_OF_PAGE'
i_dyndoc_id = g_dyndoc_id.
Please help me out.In Background only one ALV Print is coming, but the other one is giving not showing, This is not giving any Dump unlike previous case.
REPORT ztest_oo_a.
DATA: it_flight TYPE sflight_tab1.
DATA: dock TYPE REF TO cl_gui_docking_container,
split TYPE REF TO cl_gui_splitter_container,
grid1 TYPE REF TO cl_gui_alv_grid,
grid2 TYPE REF TO cl_gui_alv_grid,
doc1 TYPE REF TO cl_gui_docking_container,
con22 TYPE REF TO cl_gui_docking_container.
SELECT *
FROM sflight
INTO TABLE it_flight
UP TO 20 ROWS.
CALL SCREEN 100.
*& Module STATUS_0100 OUTPUT
* text
MODULE status_0100 OUTPUT.
SET PF-STATUS 'SATR'.
CREATE OBJECT dock
EXPORTING
repid = sy-repid
dynnr = '100'
extension = '600'
side = '1'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
lifetime_dynpro_dynpro_link = 5
OTHERS = 6
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
CREATE OBJECT doc1
EXPORTING
repid = sy-repid
dynnr = '100'
extension = '1000'
side = '4'
EXCEPTIONS
cntl_error = 1
cntl_system_error = 2
create_error = 3
lifetime_error = 4
lifetime_dynpro_dynpro_link = 5
OTHERS = 6
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
CREATE OBJECT grid1 EXPORTING i_parent = dock.
CALL METHOD grid1->set_table_for_first_display
EXPORTING
i_structure_name = 'SFLIGHT'
CHANGING
it_outtab = it_flight
EXCEPTIONS
invalid_parameter_combination = 1
program_error = 2
too_many_lines = 3
OTHERS = 4.
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
CREATE OBJECT grid2 EXPORTING i_parent = doc1.
CALL METHOD grid2->set_table_for_first_display
EXPORTING
i_structure_name = 'SFLIGHT'
CHANGING
it_outtab = it_flight
EXCEPTIONS
invalid_parameter_combination = 1
program_error = 2
too_many_lines = 3
OTHERS = 4.
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
ENDMODULE. " STATUS_0100 OUTPUT
*& Module USER_COMMAND_0100 INPUT
* text
MODULE user_command_0100 INPUT.
CASE sy-ucomm.
WHEN 'BACK'.
LEAVE TO SCREEN 0.
ENDCASE.
ENDMODULE. " USER_COMMAND_0100 INPUT -
Content not lining up in the sidebar with the content located in the main area?
Hello, I’ve created a website using Dreamweaver CS4 and have come across an issue while using a template. The template I’m using is: 2 column fixed, right sidebar, header and footer. The problem seems to be in the sidebar where the content does not start at the top, it seems to be about 15px below the content in the main area. I can't find any CSS or any reason why it's starts where it does. It seems to look like even and as it should in Firefox, Google Chrome and Safari but not in IE9. The page is live at www.Lots2Homes.com and you'll see the content is lower in the right sidebar than in the main area to the left. The code for the home page and CSS is below. This has me going in circles, any help or ideas would be much appreciated. Thanks!
<!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>
<!-- Start of no right click script -->
<script type="text/javascript" src="includes/no_right_click.js"></script>
<!-- End of no right click script -->
<meta name="norton-safeweb-site-verification" content="q5pn0zppxw16pngb17u9bt3gtuklju0mr-wug3hpwmudp0h70hgx44yjn2m3235nuxr6l17xlfnqszrz 3q3pjp75afqpecotqbh2pd6c485pxvehuee2wqihtjqa1uut" />
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Search the MLS, Professional Buyer Programs, Marketing Plans, NH Information, Free Guides, Short Sale Information, NH Buyer and Seller Representation"/>
<meta name="keywords" content="New Hampshire, Real Estate, Your Source for New Hampshire Real Estate, NH Real Estate Agent, Paul R. Martin, Buyer Agent, GRI, ABR, e-PRO, SFR, REALTOR, Listing Agent, Portsmouth, home for sale"/>
<meta name="rating" content="General"/>
<meta name="revisit-after" content="14 days"/>
<meta name="Robots" content="All"/>
<meta name="google-site-verification" content="hch3bvgPs2nwvn-waiOpfg4j9mJJTd5k-OZ-NiGFFr8" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
<link rel="icon" href="http://www.lots2homes.com/images/favicon.ico" type="image/favicon.ico"/>
<title>Lots2Homes.com - Your Source for NH Real Estate</title>
<link href="css/2012_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.twoColFixRtHdr #mainContent {
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
margin-top: 0;
margin-right: 344px;
margin-bottom: 0;
margin-left: 0;
background-image: url(images/2-column/main-middle.png);
background-repeat: repeat-y;
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 344px;
padding:0px;
margin:0px;
background-image: url(images/2-column/r-sidebar-middle.png);
background-repeat: repeat-y;
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<?php require_once('includes/back_ground.php'); ?>
</style>
<script type="text/javascript">
// <![CDATA[
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_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_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/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24136715-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>
<style type="text/css">
<!--
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
a:hover {
color: #F00;
-->
</style></head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header_flash_window">
<?php require('includes/header_flash.php'); ?>
</div>
<div id="header">
<?php require('includes/header.php'); ?>
<!-- end #header --></div>
<div id="navigation">
<?php require('includes/navbar.php'); ?>
</div><!--close nav-->
<div id="top"></div>
<div id="sidebar1">
<div id="content">
<div id="social-media-buttons">
<a href="http://www.facebook.com/EPRO.AGENT" target="_blank"><img src="images/social_media/facebook_32.png" name="facebook_icon" width="35" height="36" border="0" id="facebook_icon" alt="Paul Martin facebook" /></a>
<a href="http://www.flickr.com/lots2homes" target="_blank"><img src="images/social_media/flickr_32.png" name="flickr_icon" width="36" height="36" border="0" id="flickr_icon" alt="Paul Martin Flicker" /></a>
<a href="http://www.linkedin.com/in/paulrmartin" target="_blank"><img src="images/social_media/linkedin_32.png" name="linkedin_icon" width="35" height="37" border="0" id="linkedin_icon" alt="Paul Martin Linkedin" /></a>
<a href="http://www.lots2homes.com/weblog/" target="_blank"><img src="images/social_media/wordpress_32.png" name="wordpress_icon" width="35" height="36" border="0" id="wordpress_icon" alt="Paul Martin Wordpress" /></a>
<a href="http://www.youtube.com/user/EstatesNland" target="_blank"><img src="images/social_media/youtube_32.png" name="youtube_icon" width="36" height="37" border="0" id="youtube_icon" alt="Paul Martin Youtube" /></a>
<a href="http://www.delicious.com/save" target="_blank" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+ '&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="images/social_media/delicious_32.png" alt="Paul Martin Delicious" width="35" height="36" border="0" /></a>
<a href="http://twitter.com/#!/Lots2Homes" target="_blank"><img src="images/social_media/twitter_32.png" alt="Paul Martin Twitter" width="35" height="36" border="0" /></a>
</div>
<div id="index_like"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FEPRO.AGENT&a mp;send=false&layout=standard&width=292&show_faces=true&action=like&co lorscheme=light&font=tahoma&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:80px;" allowTransparency="true"></iframe></div>
<div id="stick"><div id="stik" style="width:225px;height:75px;text-align:center;"><a href= "http://www.stik.com/paul.martin" class="il" target="blank" style="position:relative;display:block;"><img src="http://www.stik.com/badge/image?v=1&stikid=1005641" alt="Paul Martin, Realtor at Keller Williams Coastal Realty, is Recommended and Reviewed at Stik.com" title="Paul Martin, Realtor at Keller Williams Coastal Realty, is Recommended and Reviewed at Stik.com" style="border:0px; margin:0px;" /><iframe src= "http://www.stik.com/badge/frame?v=1&stikid=1005641" frameBorder="0" scrolling="no" style="width:116px;height:36px; border:0px; position:absolute;left:98px; top:0px;"></iframe><br/></a><div class="l" style="height:18px;"><a href="http://www.stik.com/paul.martin" target="blank" style="font-family:Arial;font-size:9px;color:#3B5998;text-decoration:none;font-weight:nor mal;">Read Recommendations and Reviews on</a> <a href="http://www.stik.com" target="blank" style="font-family:Arial;font-size:9px;color:#3B5998;text-decoration:none;font-weight:nor mal;">Stik.com</a></div></div></div>
<hr/>
<div id="my_listings">
<h2>My Current Listings</h2>
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">$139,900 - Raymond Ranch</div>
<div class="AccordionPanelContent"><a href="listing_page_24_sesame.php"><img src="images/listings/24_sesame.jpg" width="299" height="198" alt="24 Sesame St St Raymond, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$194,900 - Northwood Ranch</div>
<div class="AccordionPanelContent"><a href="listing_page_27_bass.php"><img src="images/listings/Harvey-Lake-Home-Northwood,.jpg" width="299" height="198" alt="27 Bass Rd Northwood, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$249,900 - Milton Custom Cape</div>
<div class="AccordionPanelContent"><a href="listing_page_99_gold_milton.php"><img src="images/listings/99_gold_st.jpg" width="299" height="198" alt="99 Gold St Milton NH for sale by Paul Martin and Keller Williams Coastal Realty" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$159,900 - Effingham Multi Unit</div>
<div class="AccordionPanelContent"><a href="listing_page_108_champion_hill.php"><img src="images/listings/108_champion_hill.jpg" width="299" height="198" alt="108 Champion Hill Rd Effingham, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$324,900 - Epsom Colonial</div>
<div class="AccordionPanelContent"><a href="listing_page_206_copperline_epsom.php"><img src="images/listings/206_copperline/199x198.jpg" width="299" height="198" alt="206 Copperline Rd Epsom, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$189,900 - Middleton Ranch</div>
<div class="AccordionPanelContent"><a href="listing_page_60_lakeshore_middleton.php"><img src="images/listings/Sunrise-Lake-Home.jpg" width="299" height="198" alt="60 Lakeshore Dr Middleton, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$259,900 - Exeter Duplex</div>
<div class="AccordionPanelContent"><a href="listing_page_34_36_south_st.php"><img src="images/listings/34_36_south_st.jpg" width="299" height="198" alt="34-36 South St Exeter, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$249,900 - Sunrise Lake Ranch</div>
<div class="AccordionPanelContent"><a href="listing_page_86_lakeshore.php"><img src="images/listings/86-Lakeshore-Dr.jpg" width="299" height="198" alt="86 Lakeshore Dr Middleton, NH" /></a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$249,000 - Dover Point Colonial</div>
<div class="AccordionPanelContent"><img src="images/listings/Colonial-Condex.jpg" width="299" height="198" alt="Dover Point Colonial sold by Paul Martin" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$235,500 - Chichester Cape</div>
<div class="AccordionPanelContent"><img src="images/listings/26_cross_rd.jpg" width="299" height="198" alt="Sold by Paul Martin" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">$295,000 - Londonderry Colonial</div>
<div class="AccordionPanelContent"><img src="images/listings/25_king_henry.jpg" width="299" height="198" alt="Sold by Paul Martin" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Put Your Home for Sale Here!</div>
<div class="AccordionPanelContent"><img src="images/listing_ad.jpg" width="299" height="198" alt="List your home for sale on Lots2Homes.com" /></div>
</div>
</div>
</div>
<hr />
<div id="info_1">
<h2>Will 2012 See Improvement? </h2>
<p>by Carla Hill<br />
<br />
We’ve seen the effects of tight mortgage conditions over the last year. Existing and new homes sales have struggled and we are now left with sizable pent-up demand. Will this trend continue into 2012?<br />
<br />
For starters, consumer prices fell in October, meaning low wage workers and others struggling to make ends meet will find more affordability...
<br />
<br />
<a href="Read" _mce_href="http://realtytimes.com/rtpages/20111121_realestateoutlook.htm">Read">http://re altytimes.com/rtpages/20111121_realestateoutlook.htm">Read More</a></p>
</div>
<hr />
<div id="info_2">
<h2>Timing the Real Estate Cycle</h2>
<p>by Paul Martin<br />
<br />
Real estate cycles are created by an imbalance that occurs between the supply of available homes on the market and demand for these homes by ready willing and able buyers.<br />
<br />
The reasons for an over or under supply of homes and an over or under demand for these homes can differ from one cycle to another...<br />
<br />
<a href="Read" _mce_href="http://www.lots2homes.com/weblog/?p=84">Read">http://www.lots2homes.com/weblog /?p=84">Read More</a></p>
</div>
<hr />
<div id="info_3">
<h2>Thinking about a Short Sale?</h2>
<p>If you're looking for Short Sale Information and assistance, I can help. As an SFR (Short Sale and Foreclosure Resource Specialist) and a LMC (Loss Mitigation Consultant), Shorts sales are one of my specialties!<br />
<br />
Don't lose time, call me today! I work hand in hand with The Loan Workout Group out of the Cater Law Office in Londonderry, one of New Hampshire’s most experienced and premiere Short Sale specialists. Together we work as a team to get your short sale accepted and your home sold in time to save you from foreclosure. </p>
</div>
<hr />
<div id="sidebar_flash_ad">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="214" height="320" id="FlashID3" title="Loan Workout Group Ad">
<param name="movie" value="flash/loan_workout_group.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="flash/loan_workout_group.swf" width="214" height="320">
<!--<![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>
</div>
</div>
<div id="sidebar-bottom"></div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<div id="content">
<div id="welcome_message">
<h1>Welcome to Lots2Homes.com - Your Source for NH Real Estate</h1>
<p>As a New Hampshire REALTOR®, I designed and built <span class="bold">Lots2Homes.com</span> specifically to help people looking to purchase homes here in New Hampshire and to give our local home sellers an edge through technology driven marketing. The goal here on <span class="bold">Lots2Homes.com</span> is to become your leading source for NH real estate information and a helpful guide to purchasing and selling homes in the Rockingham, Strafford and Belknap county area.<br />
<br />
Here on <span class="bold">Lots2Homes.com</span> home buyers can search for available homes on the local MLS, sign up for automatic search notifications and look up information on every town found here in NH. Buyers also can receive great home buying tips through my complimentary <a href="buyer_guides.php">BUYER GUIDES</a> and get information on my full service <a href="my_buyers_program.php">Buyer Representation</a> as an <span class="bold">ABR REALTOR®</span>. My buyer program comes at no cost and can assist you from beginning to end in home buying process. It will help you to take advantage of the great buyer’s market were experiencing and it comes complete with a <a href="my_buyers_program.php">Buyer Bonus</a> just for signing up!<br />
<br />
Home sellers can get information here on how the local and <a href="housing_prices.php">national housing market</a> is trending and how leading edge marketing technology can help them sell their home in today’s challenging market conditions. Sellers will also be able to get information on how to price their home competitively with the help of a Pricing Study Analysis and find out how I’m helping NH home sellers succeed in today’s market as and <span class="bold">e-PRO Marketing Specialist</span> through <a href="my_marketing_plan.php">My Marketing Plan</a>. </p>
</div>
<hr/>
<h2>Search for available New Hampshire Homes Now!</h2>
<div id="quick_search_area"><img src="images/buttons/home-page-search.png" alt="Search for Homes Now" width="599" height="300" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="40,28,274,223" href="http://www.lots2homes.idxco.com/idx/6152/basicSearch.php" target="_self" alt="MLS Quick Search" />
<area shape="rect" coords="320,29,554,223" href="http://www.lots2homes.idxco.com/idx/6152/mapSearch.php" target="_self" alt="MLS Map Search" />
<area shape="rect" coords="407,263,557,291" href="http://www.lots2homes.idxco.com/idx/6152/advancedSearch.php" target="_self" alt="MLS Advanced Search" />
</map>
</div>
<br />
<hr/>
<div id="featured_property_title"><img src="images/featured_property_title.png" width="351" height="49" alt="Featured Property" /></div>
<div id="featured_listing">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="212" height="132" id="FlashID2" title="27 Bass Rd Northwood, NH">
<param name="movie" value="flash/27_bass.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="flash/27_bass.swf" width="212" height="132">
<!--<![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>
<a href="listing_page_27_bass.php"><img src="images/featured_properties/27_bass_northwood.jpg" width="630" height="480" alt="Featured Listing" /></a></div>
<br />
<hr />
<div id="buyer_program">
<h2>My Buyers Program</h2>
<p>In today's competitive real estate market, timing and knowledge is everything. Do you have your home buying strategy in place yet?<br />
<br />
As one of New Hampshire's Accredited Buyer Representative REALTORS®, helping home buyers to succeed is one of my specialties. My program can assist you with:</p>
<div id="abr_logo"><img src="images/icons/abr_oval_196.png" width="196" height="123" alt="ABR logo" /></div>
<ul id="list">
<li>Locating available homes that fit your search criteria in your preferred areas</li>
<li>Negotiate price, terms and conditions that fit your needs and protect your interest</li>
<li>Coordinate home inspections and the preparation of closing documents</li>
<li>Resolve any closing issues as they arise to keep you on track </li>
<li>help you get the keys to your new home!</li>
</ul>
<p><span class="bold">Contact me today or</span> <a href="my_buyers_program.php" class="bold">READ MORE HERE</a><span class="bold"> for more information on</span> <a href="my_buyers_program.php" class="bold">My Buyers Program</a></p>
</div>
<hr/>
<div id="marketing_plan">
<h2>My Marketing Plan</h2>
<p>Home Sellers face challenging market conditions these days. Gone are the days of just needing a sign out front to sell your home quickly and for a great price. Buyers today have a crowded market to choose from and most are tech savvy as well. <br />
</p>
<div id="epro-logo"><a href="epro.php"><img src="images/icons/ePRO_196.png" alt="e-PRO logo" width="196" height="107" border="0" usemap="#Map3" /></a>
<map name="Map3" id="Map3">
<area shape="poly" coords="3,39,32,64,32,104,83,103,82,71,143,67,184,55,192,39,188,23,158,8,99,1,46,5,19,14, 4,26" href="#" />
</map>
</div>
<p> They want to see as much as possible of your home online before making an appointment to see it in person.
That's where my marketing expertise excels.<br />
<br />
As one of the few<span class="italic_and_bold"> e-PRO REALTORS®</span> in New Hampshire, I've been trained in all the latest web marketing techniques. <br />
<br />
I combine the power of web marketing with traditional marketing methods to maximize your home's exposure in a crowded market place.</p>
<br />
<center><span class="bold">Contact me today or</span> <a href="my_marketing_plan.php" class="bold">READ MORE HERE</a><span class="bold"> for more information on</span> <a href="my_marketing_plan.php" class="bold">My Marketing Plan</a></center>
</div>
<hr/>
<div id="media-1">
<div id="video-1">
<embed src="http://c.brightcove.com/services/viewer/federated_f8/1465406675" bgcolor="#FFFFFF" flashvars="videoId=1288013534001&playerId=1465406675&viewerSecureGatewayURL=https://console.brightcove.com/services/amfgateway&servicesURL=http://services.brightcove. com/services&cdnURL=http://admin.brightcove.com&domain=embed&autoStart=false&" base="http://admin.brightcove.com" name="flashObj" width="400" height="320" seamlesstabbing="false" type="application/x-shockwave-flash" swliveconnect="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></e mbed>
</div>
<div id="video-1_text">
<h3>October Existing-Home Sales Rise, While the Unsold Inventory Continues to Decline</h3>
<hr />
<p>Washington, DC, November 21, 2011
Existing-home sales improved in October while the number of homes on the market continued to decline, according to the National Association of Realtors®.<br />
Read more and get the full story on <a href="REALTOR.Org.http://www.realtor.org/press_room/news_releases/2011/11/ehs_oct">REALTOR.Org.</a><a href="<img src="images/icons/Realtor_org-logo_thumb.jpg" width="160" height="90" alt="REALTOR.Org" />"><img src="images/icons/Realtor_org-small.jpg" width="80" height="47" alt="Realtor.org" /></a></p>
</div>
</div>
</div>
<div id="main-bottom"></div>
<!-- end #mainContent --></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">
<?php require('includes/footer_menu_6.php'); ?>
</div>
<!-- end #container --></div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID2");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#mainContent {
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
margin-top: 0;
margin-right: 344px;
margin-bottom: 0;
margin-left: 0;
background-repeat: repeat-y;
background-image: url(../images/2-column/main-middle.png);
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 344px;
padding:0px;
margin:0px;
background-repeat: repeat-y;
background-image: url(../images/2-column/r-sidebar-middle.png);
body {
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;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%;
background-color: #5783A6;
p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: justify;
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
text-decoration: underline;
margin: 0px;
h2 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
margin: 0px;
h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
h4 {
font-family: "Comic Sans MS", cursive;
font-size: 14px;
font-style: italic;
font-weight: normal;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
a {
font-weight: bold;
text-decoration: underline;
color: #900;
hr {
margin-top: 10px;
margin-bottom: 10px;
#container {
width: 1024px; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-image: url(../images/2-column/bg.png);
margin-top: 0px;
padding: 0px;
#header {
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(images/2-column/bg.png);
background-repeat: repeat-y;
#container #top {
background-image: url(../images/extention_page/2_column/2_column_top_wide.png);
background-repeat: no-repeat;
width: 1024px;
height: 38px;
padding: 0px;
#footer {
padding: 0;
background-image: url(images/2-column/bg.png);
background-repeat: repeat-y;
#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;
#container #header_flash_window {
position: absolute;
margin-top: 182px;
margin-left: 239px;
border: 1px solid #848484;
#container #sidebar1 #sidebar-bottom {
background-image: url(../images/2-column/r-sidebar-bottom.png);
background-repeat: no-repeat;
height: 33px;
#container #mainContent #main-bottom {
background-image: url(../images/2-column/main-bottom.png);
background-repeat: no-repeat;
height: 33px;
#container #sidebar1 #content {
padding-right: 16px;
padding-left: 13px;
padding-bottom: 10px;
padding-top: 0px;
margin-top: 0px;
#mainContent #content {
padding-right: 16px;
padding-left: 30px;
#mainContent #content #quick_search_area {
padding-left: 20px;
#content #featured_property_title {
padding-left: 140px;
#content #featured_listing #FlashID2 {
clear: both;
float: none;
margin-top: 292px;
margin-left: 391px;
position: absolute;
#mainContent #content #buyer_program #abr_logo {
width: 196px;
float: right;
#mainContent #content #buyer_program #list li {
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#mainContent #content #marketing_plan #epro-logo {
width: 196px;
float: left;
margin-right: 15px;
#container #mainContent #content #marketing_plan p .bold {
text-align: left;
#container #mainContent #content #media-1 {
width: 640px;
height: 340px;
#mainContent #content #media-1 #video-1 {
width: 400px;
float: left;
#mainContent #content #media-1 #video-1_text {
height: 320px;
width: 220px;
margin-left: 400px;
margin-top: 0px;
padding-top: 0px;
padding-right: 5px;
padding-left: 10px;
#mainContent #content #media-1 #video-1_text p a img {
float: right;
margin-right: 65px;
margin-top: 15px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#container #sidebar1 #content #stick {
padding-left: 44px;
#container #sidebar1 #content #social-media-buttons {
margin-bottom: 0px;
margin-left: 22px;
#container #sidebar1 #content #index_like {
padding-left: 12px;
#sidebar1 #content #my_listings {
padding-left: 7px;
#sidebar1 #content #info_1 {
padding-right: 15px;
padding-left: 15px;
#sidebar1 #content #info_2 {
padding-right: 15px;
padding-left: 15px;
#sidebar1 #content #info_3 {
padding-right: 15px;
padding-left: 15px;
#sidebar1 #content #sidebar_flash_ad {
padding-left: 50px;
#container #container #mainContent2 {
background-image: url(../images/2-column/thin-sidebar/main-middle.png);
background-repeat: repeat-y;
margin-right: 269px;
#container #container #sidebar2 {
width: 269px;
float: right;
background-image: url(../images/2-column/thin-sidebar/sidebar-middle.png);
background-repeat: repeat-y;
#container #sidebar2 #content {
padding-right: 15px;
padding-left: 11px;
#sidebar2 #content #info-1 {
padding-right: 10px;
padding-left: 10px;
#mainContent2 #main-bottom2 {
background-image: url(../images/2-column/thin-sidebar/main-bottom.png);
background-repeat: no-repeat;
height: 33px;
#mainContent2 #content {
padding-left: 30px;
padding-right: 15px;
#sidebar2 #sidebar-bottom2 {
background-image: url(../images/2-column/thin-sidebar/sidebar-bottom.png);
background-repeat: no-repeat;
height: 33px;
#sidebar2 #content #paul_logo {
margin-left: 7px;
#listings-table table tr td {
border: 1px solid 484848;
height: 199px;
width: 299px;
#listings-table table tr td img {
border: 1px solid #000;
#navigation {
height: 32px;
margin: 0px;Your template contains an IE Conditional Comment that is adding 30px of top padding to #sidebar1. This padding may required in older versions of IE but not IE9.
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
To fix it, change [if IE] to [if lt IE 9]
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Help with getting button color.
I'm trying to make a little paint program. i want to be able to click on a color button and then assign the color of that button to a variable Color brushColor.
funny thing is, when i compile this, it tells me that
C:\java\javaprograms\TryPainting.java:21: getBackground() in java.awt.Component cannot be applied to (java.awt.Button)
brushColor = paintTheBrush(getBackground(source));
strange, getBackground is explicitly listed as a method that Button inherits from Component in the API.
any suggestions on a way to accomplish this?
thanks in advance,
jason
------code follows-------
import javax.swing.*;
import javax.swing.text.*;
import java.awt.*;
import java.awt.event.*;
//colored buttons of "paint"
class OilPaint extends Button{
Color brushColor = Color.white;
OilPaint(String label, Color color) {
setLabel(label);
setForeground(color);
setBackground(color);
addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
Button source = (Button)e.getSource();
brushColor = getBackground(source);
public Color paintTheBrush(Color color) {
return color;
// canvas to paint on - this isn't working yet. can't even get the
// setSize to work, though it does compile.
class Canvas extends JPanel{
Canvas(){
setBackground(Color.white);
Dimension canSize = new Dimension(300,300);
setSize(canSize);
// displays the lsit of color button choices in a small panel at bottom
// of window
class ColorChoices extends JPanel{
ColorChoices() {
setBackground(new Color(220,255,255));
add(new OilPaint("paint",Color.blue));
add(new OilPaint("paint",Color.red));
add(new OilPaint("paint",Color.green));
add(new OilPaint("paint",Color.white));
add(new OilPaint("paint",Color.black));
//this is the main class of the program TryPainting.java
class TryPainting {
public static void main(String[] args) {
JFrame window = new JFrame();
Toolkit toolkit = window.getToolkit();
Dimension winSize=toolkit.getScreenSize();
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setBounds(5,5,winSize.width/2,winSize.height/2);
Container content = window.getContentPane();
content.setLayout(new BorderLayout());
content.add("North",new Canvas());
content.add("South",new ColorChoices());
window.setVisible(true);duh.. thanks man, that did the trick. i'm pretty new at this. i really appreciate the help. i got stuck thinking of the getBackground() as a function, rather than a method. this oop stuff is wacky weird fun!
jason -
I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?
I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar.
I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page. Can anybody look at this with me and let me know what changed to mess the page up on me.
Thanks a million.
Ted
site is located here http://www.subzerorefrigeration.com
None of the links are working I have just been playing with the spy menu for weeks. I finally figured it out and do not belive the error is in the spry style sheets.
Here is the code for my page. I know I am working with a template. I really do not want to start over if a <div> tag is missing.
Any other suggestions would be appreciated.
<!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>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 20;
color: #000;
background-color: #b7e3ea;
font-family: Tahoma, Geneva, 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. */
color: #000099;
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;
color: #000099;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/* ~~ 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: #b7e3ea;
padding: 0px;
/* ~~ 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. 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 180px;
padding-bottom: 10px;
background-color: #FFFFFF;
padding-top: 30px;
.content {
padding: 10px 0;
width: 780px;
float: left;
/* ~~ 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. */
/* ~~ 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 */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
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: #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: #ADB96E;
color: #FFF;
/* ~~ The footer ~~ */
.footer {
padding: 0px;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-color: #B7E3EA;
color: #000099;
width: 960px;
verybottomfooter {
padding: 10px;
.footerlightblue {
background-color: #B7E3EA;
.container .footer table tr th {
background-color: #FFF;
color: #000099;
/* ~~ 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;
.container .footer2 #footer3 .footer p {
text-align: center;
.container .footer2 #footer3 .footer p {
font-size: medium;
.container .footer2 #footer3 .footer p {
font-size: small;
background-color: #B7E3EA;
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header"><!-- end .header -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration "Subby" Logo">
<param name="movie" value="Images/SubbyMovie.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="7.0.70.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 data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="7.0.70.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>
<img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
</div>
<div class="container" id="navbar"> </div>
<div class="namephoto">
<ul id="MenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItem" href="#">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
<ul>
<li><a href="#">Bud Wagner</a></li>
<li><a href="#">Tim Wagner</a></li>
<li><a href="#">Dave Allen</a></li>
<li><a href="#">Terry Burke</a></li>
<li><a href="#">Larry Skarr</a></li>
<li><a href="#">Niko Opla</a></li>
<li><a href="#">Gina Ames</a></li>
<li><a href="#">Laura Kane</a></li>
</ul>
</li>
<li><a href="#">Our Service Area</a></li>
<li><a href="#">Our Mission Statement</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
<ul>
<li><a href="#">Our Review's</a></li>
<li><a href="#">Our Competition's Reviews</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Careers</a>
<ul>
<li><a href="#">HVAC Technician</a></li>
<li><a href="#">HVAC/R Installer</a></li>
<li><a href="#">Commercial Refrigeration Technician</a></li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
<ul>
<li><a href="#">On "YAHOO"</a></li>
<li><a href="#">On "YELP"</a></li>
<li><a href="#">On "MERCHANT CIRCLE"</a></li>
<li><a href="#">On "GOOGLE PLACES"</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Repair</a>
<ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning </a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Schedule A Service Call</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Sales</a>
<ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace </a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Schedule a "FREE" Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
<ul>
<li><a href="#">Commercial Refrigeration Service Agreements</a></li>
<li><a href="#">Commercial Rooftop Service Agreements</a></li>
<li><a href="#">Commercial Ice Machine Service Agreements</a></li>
<li><a href="#">Residential Air Conditioning Service Agreements</a></li>
<li><a href="#">Residential Boiler Service Agreements</a></li>
<li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
<li><a href="#">Heat Pump Service Agreements</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Products</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
<ul>
<li><a href="#">Beverage Air</a></li>
<li><a href="#">Beacon Smart Controller</a></li>
<li><a href="#">Continental</a></li>
<li><a href="#">Crown Tonka Walk Ins</a></li>
<li><a href="#">Delfield</a></li>
<li><a href="#">Heatcraft Refrigeration</a></li>
<li><a href="#">Hoshizaki Refrigeration</a></li>
<li><a href="#">International Cold Storage</a></li>
<li><a href="#">Kelvinator</a></li>
<li><a href="#">Kolpak</a></li>
<li><a href="#">Larkin Refrigeration</a></li>
<li><a href="#">Perlik Bar and Beverage Equipment</a></li>
<li><a href="#">True Refrigeration</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
<ul>
<li><a href="#">Arcoaire</a></li>
<li><a href="#">American Standard</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
<ul>
<li><a href="#">Hoshizaki Ice Machines</a></li>
<li><a href="#">Manitowoc Ice Machines</a></li>
<li><a href="#">Scotsman Ice Machines</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
<ul>
<li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
<li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
<li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
<ul>
<li><a href="#">Weil McLain Residential</a></li>
<li><a href="#">Weil McLain Commercial</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
<ul>
<li><a href="#">Arcoaire</a></li>
<li><a href="#">American Standard</a></li>
<li><a href="#">Mitsubishi</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
<ul>
<li><a href="#">Arcoaire</a></li>
<li><a href="#">American Standard</a></li>
<li><a href="#">Mitsubishi</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
<ul>
<li><a href="#">Aprilaire Humidifiers</a></li>
<li><a href="#">Honeywell Electronic Air Cleaners</a></li>
<li><a href="#">Honeywell Thermostats</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
<ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
<ul>
<li><a href="#">Monthly Specials</a></li>
<li><a href="#">Manufacturers Rebates</a></li>
<li><a href="#">Utility Rebates</a></li>
<li><a href="#">Website Coupons</a></li>
<li><a href="#">Customer Referral Program</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Social</a>
<ul>
<li><a href="#">"LIKE" Us on Facebook</a></li>
<li><a href="#">"FOLLOW" Us on Twitter</a></li>
<li><a href="#">Facebook Disclaimer</a></li>
</ul>
</li>
<li><a class="MenuBarItem" href="#">Contact Us</a> </li>
</ul>
<p><br />
</p>
<div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h1>Clearing Method</h1>
<p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<h4>Backgrounds</h4>
<p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
<!-- end .content --></div>
<div class="footer">
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="102" scope="col"> </th>
<th width="101" scope="col"> </th>
<th width="106" scope="col"> </th>
<th width="120" scope="col"> </th>
<th width="172" scope="col"> </th>
<th width="120" scope="col"> </th>
<th width="103" scope="col"> </th>
<th width="136" scope="col"> </th>
</tr>
<tr>
<td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
<td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
</tr>
</table>
</div>
<div class="footer2">
<div class="footer">
<table width="960" height="62" border="1" align="center" cellspacing="8">
<tr valign="middle">
<th width="234" scope="col">Schedule a Service Call</th>
<th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
<th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
<th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
<th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
<th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
<th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
</tr>
</table>
</div>
<div class="footer3" id="footer3">
<div class="footer">
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home | About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
Search Sub Zero Refrigeration Heating and Air Conditioning<br /> </th>
</tr>
</table>
<p><!-- end .container --> Copyright 1999-2013 | Last updated on
<!-- #BeginDate format:Am1 -->February 19, 2012<!-- #EndDate --> | Web designer's - Ted Wagner and Cherie White Cachampis </p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>I seem to have fixed it by putting <div class="clearfloat"></div> after the navigation bar?
-
Not able to see legends on Internet Explorer 8
I have a Flex Application that works great in Internet Explorer 9 and Firefox. However with Internet Explorer it does not show the colors for the legends, just the values. Do you guys could give me any ideas what I need to change in my code so that IE 8 shows the legend colors? You can see on the image attached that the colors show correctly on the map but the legend does not show the colors for each values.! Thank you for any help!
Here is the code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:esri="http://www.esri.com/2008/ags"
paddingBottom="8" paddingLeft="8"
paddingRight="8" paddingTop="8"
backgroundColor="0xffffff"
layout="vertical" >
<!-- Start Declarations -->
<fx:Declarations>
<esri:SimpleFillSymbol id="mouseOverSymbol" alpha="0.5" color="0x808080">
<esri:SimpleLineSymbol width="0" color="#000000"/>
</esri:SimpleFillSymbol>
<esri:SimpleFillSymbol id="defaultsym" alpha="0.01" color="#E0E0E0" >
<esri:SimpleLineSymbol width="1" color="#000000"/>
</esri:SimpleFillSymbol>
<!-- End Declarations -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.ags.Graphic;
import com.esri.ags.SpatialReference;
import com.esri.ags.events.GraphicEvent;
import com.esri.ags.geometry.Extent;
import com.esri.ags.layers.*;
import com.esri.ags.symbols.SimpleFillSymbol;
import com.esri.ags.symbols.SimpleLineSymbol;
import mx.collections.ArrayCollection;
import mx.controls.RadioButton;
import mx.controls.TextArea;
import mx.events.DropdownEvent;
import mx.events.ItemClickEvent;
private function closeHandler(evt:DropdownEvent):void
try
myLabel.text = ComboBox(evt.target).selectedItem.label;
catch(error:Error){
trace("Caught Error: "+error);
private function loadLayerName():void
myLegend.layers = null;
layerPanel.removeAllChildren();
//loop through each layer and add as a radiobutton
for(var i:uint = 0; i < (dynamicLayer.layerInfos.length); i++)
var radioBtn:RadioButton = new RadioButton;
radioBtn.groupName = "radioBtnGroup";
radioBtn.value = i;
radioBtn.label = dynamicLayer.layerInfos[i].name;
if (dynamicLayer.layerInfos[i].name == "Direct Impact (Million $)")
radioBtn.label = "Direct Impact";
else if (dynamicLayer.layerInfos[i].name == "Total Impact (Million $)")
{radioBtn.label = "Total Impact";
else if (dynamicLayer.layerInfos[i].name == "Total Impact (Jobs)")
{radioBtn.label = "Total Impact";
else if (dynamicLayer.layerInfos[i].name == "Direct Impact (Jobs)")
{radioBtn.label = "Direct Impact";
else
{radioBtn.visible= false;
layerPanel.addChild(radioBtn);
/* myDividerBox.getDividerAt(0).visible = false; */
//set the visible layer the first radio button
radioBtnGroup.selectedValue = 0;
dynamicLayer.visibleLayers = new ArrayCollection([0]);
myLegend.layers = [dynamicLayer];
myLegend.visible = true;
private function radioClickHandler(event:ItemClickEvent):void
myLegend.layers = null;
// update the visible layers to only show the layer selected
dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
myLegend.layers = [dynamicLayer];
myLegend.visible = true;
private function changeEvt(event:Event):void {
if (yearcombo.selectedItem.year == "2007")
measures.filterFunction=filter1
measures.refresh()
myURL.dataProvider=measures
myLegend.visible = true;
else if (yearcombo.selectedItem.year == "2009")
measures.filterFunction=filter2
measures.refresh();
myLegend.visible = true;
public function filter1(item:Object):Boolean
if (item.year=="2007") return true
else return false
public function filter2(item:Object):Boolean
if (item.year=="2009") return true
else return false
private function clickEvt(event:Event):void {
if (yearcombo.selectedItem.year == "2007")
measures.filterFunction=filter3
measures.refresh()
myURL.dataProvider=measures
else if (yearcombo.selectedItem.year == "2009")
measures.filterFunction=filter4
measures.refresh();
public function filter3(item:Object):Boolean
if (item.year=="2007") return true
else return false
public function filter4(item:Object):Boolean
if (item.year=="2009") return true
else return false
private function clickEv2(event:Event):void {
if (yearcombo.selectedItem.year == "2007")
measures.filterFunction=filter5
measures.refresh()
else if (yearcombo.selectedItem.year == "2009")
measures.filterFunction=filter6
measures.refresh();
else if (yearcombo.selectedItem.year == 2007 && myURL.selectedIndex==8)
myLegend.layers = null;
layerPanel.removeAllChildren();
public function filter5(item:Object):Boolean
if (item.year=="2007") return true
else return false
public function filter6(item:Object):Boolean
if (item.year=="2009") return true
else return false
/* IF YOU WANT TO INCLUDE OTHER VALUES IN THE MAP TOOLTIP LIKE COUNTY NAME AND THE LABEL OF THE SELECTED ITEM
if (myURL.selectedIndex==0)
myTextArea.htmlText = "<b>County: </b>" + gr.attributes.NAME + "\n"
+ "<b>Measure: </b>" + myURL.selectedItem.label + gr.attributes.ForDirIndOut.toString()
public function fLayer_graphicAddHandler(event:GraphicEvent):void
event.graphic.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverHandler);
event.graphic.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutHandler);
public function onMouseOverHandler(event:MouseEvent):void
//Place the lines of code that don't change based on the selections once.
var graphic:Graphic = Graphic(event.currentTarget);
graphic.symbol = mouseOverSymbol;
var htmlText:String = graphic.attributes.htmlText;
var textArea:TextArea = new TextArea();
textArea.width= 110
textArea.height = 25
//The particular year doesn't seem to have an impact on anything but the definetionExpression
//so there is no need to evaluate it each time
/* if (yearcombo.selectedItem.year == "2007"){
fLayer.definitionExpression = "DATA_YEAR_TXT like '2007'";
}else if(yearcombo.selectedItem.year == "2009"){
fLayer.definitionExpression = "DATA_YEAR_TXT like '2009'";
fLayer.definitionExpression = "DATA_YEAR_TXT like '"+ yearcombo.selectedItem.year+"'";
//This part is always the same so only do it once
textArea.htmlText = myURL.selectedItem.label; */
/* for each (var item:object in fLayer.getItemAt(i)
if (myURL.selectedItem.namefield == fLayer.tableDetails.fields){ */
/* if (myURL.selectedItem.namefield == fLayer.outFields
textArea.htmlText = graphic.attributes.ForDirIndOut.toString();
private function locateBoundary(event:Event) : void
layerCOUNTIES.definitionExpression = "STATE = '" + (event.currentTarget as TextArea).data.STATEFP + "'";
try{
if (radioBtnGroup.selectedValue == 0){
if(myURL.selectedIndex == 0){
textArea.htmlText = graphic.attributes.ForDirIndOut.toString();
}else if(myURL.selectedIndex == 1 ){
textArea.htmlText = graphic.attributes.ForDirEmp.toString();
}else if(myURL.selectedIndex == 2){
textArea.htmlText = graphic.attributes.ForDirLabInc.toString();
}else if(myURL.selectedIndex == 3){
textArea.htmlText = graphic.attributes.ForIndirBusTax.toString();
}else if(myURL.selectedIndex == 4){
textArea.htmlText = graphic.attributes.LogDirIndOut.toString();
}else if(myURL.selectedIndex == 5){
textArea.htmlText = graphic.attributes.LogDirEmp.toString();
}else if(myURL.selectedIndex == 6){
textArea.htmlText = graphic.attributes.LogDirLabInc.toString();
}else if(myURL.selectedIndex == 7){
textArea.htmlText = graphic.attributes.LogIndirBusTax.toString();}
else if(myURL.selectedIndex == 8){
textArea.htmlText = graphic.attributes.PrimaryPaperDirIndOut.toString();}
else if(myURL.selectedIndex == 9){
textArea.htmlText = graphic.attributes.PrimaryPaperDirEmp.toString();}
else if(myURL.selectedIndex == 10){
textArea.htmlText = graphic.attributes.PrimaryPaperDirLabInc.toString();}
else if(myURL.selectedIndex == 11){
textArea.htmlText = graphic.attributes.PrimaryPaperIndirBusTax.toString();}
else if(myURL.selectedIndex == 12){
textArea.htmlText = graphic.attributes.PrimarySolidIndOut.toString();}
else if(myURL.selectedIndex == 13){
textArea.htmlText = graphic.attributes.PrimarySolidEmp.toString();}
else if(myURL.selectedIndex == 14){
textArea.htmlText = graphic.attributes.PrimarySolidLabInc.toString();}
else if(myURL.selectedIndex == 15){
textArea.htmlText = graphic.attributes.PrimarySolidIndBusTax.toString();}
else if(myURL.selectedIndex == 16){
textArea.htmlText = graphic.attributes.SecondPaperDirIndOut.toString();}
else if(myURL.selectedIndex == 17){
textArea.htmlText = graphic.attributes.SecondPaperDirEmp.toString();}
else if(myURL.selectedIndex == 18){
textArea.htmlText = graphic.attributes.SecondPaperDirLabInc.toString();}
else if(myURL.selectedIndex == 19){
textArea.htmlText = graphic.attributes.SecondPaperIndirBusTax.toString();}
else if(myURL.selectedIndex == 20){
textArea.htmlText = graphic.attributes.SecondSolidDirIndOut.toString();}
else if(myURL.selectedIndex == 21){
textArea.htmlText = graphic.attributes.SecondSolidDirEmp.toString();}
else if(myURL.selectedIndex == 22){
textArea.htmlText = graphic.attributes.SecondSolidDirLabInc.toString();}
else if(myURL.selectedIndex == 23){
textArea.htmlText = graphic.attributes.SecondSolidBusTax.toString();}
myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
else if (radioBtnGroup.selectedValue == 1){
if(myURL.selectedIndex == 0){
textArea.htmlText = graphic.attributes.ForTotImpIndOut.toString();
}else if(myURL.selectedIndex == 1 ){
textArea.htmlText = graphic.attributes.ForTotImpEmp.toString();
}else if(myURL.selectedIndex == 2){
textArea.htmlText = graphic.attributes.ForTotImpLabInc.toString();
}else if(myURL.selectedIndex == 4){
textArea.htmlText = graphic.attributes.LogTotImpIndOut.toString();
}else if(myURL.selectedIndex == 5){
textArea.htmlText = graphic.attributes.LogTotImpEmp.toString();
}else if(myURL.selectedIndex == 6){
textArea.htmlText = graphic.attributes.LogTotImpLabInc.toString();}
else if(myURL.selectedIndex == 8){
textArea.htmlText = graphic.attributes.PrimaryPaperTotImpIndOut.toString();}
else if(myURL.selectedIndex == 9){
textArea.htmlText = graphic.attributes.PrimaryPaperTotImpEmp.toString();}
else if(myURL.selectedIndex == 10){
textArea.htmlText = graphic.attributes.PrimaryPaperTotImpLabInc.toString();}
else if(myURL.selectedIndex == 12){
textArea.htmlText = graphic.attributes.PrimarySolidTotImpIndOut.toString();}
else if(myURL.selectedIndex == 13){
textArea.htmlText = graphic.attributes.PrimarySolidTotImpEmp.toString();}
else if(myURL.selectedIndex == 14){
textArea.htmlText = graphic.attributes.PrimarySolidTotImpLabInc.toString();}
else if(myURL.selectedIndex == 16){
textArea.htmlText = graphic.attributes.SecondPaperTotImpIndOut.toString();}
else if(myURL.selectedIndex == 17){
textArea.htmlText = graphic.attributes.SecondPaperTotImpEmp.toString();}
else if(myURL.selectedIndex == 18){
textArea.htmlText = graphic.attributes.SecondPaperTotImpLabInc.toString();}
else if(myURL.selectedIndex == 20){
textArea.htmlText = graphic.attributes.SecondSolidIndOut.toString();}
else if(myURL.selectedIndex == 21){
textArea.htmlText = graphic.attributes.SecondSolidEmp.toString();}
else if(myURL.selectedIndex == 22){
textArea.htmlText = graphic.attributes.SecondSolidLabInc.toString();}
myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
myMap.infoWindow.content=textArea;
myMap.infoWindow.label = graphic.attributes.NAME;
myMap.infoWindow.closeButtonVisible = false;
myMap.infoWindow.width = 120;
catch(error:Error){
trace("Caught Error: "+error);
//Place the lines of code that don't change based on the selections once.
public function onMouseOutHandler(event:MouseEvent):void
var gr:Graphic = Graphic(event.target);
gr.symbol = defaultsym;
myMap.infoWindow.hide();
]]>
</fx:Script>
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace esri "http://www.esri.com/2008/ags";
@namespace components "com.esri.ags.components.*";
components|InfoWindow
background-alpha : 0.7;
border-style : solid;
</fx:Style>
<mx:HBox width="930" height="800" id="mapHbox" horizontalAlign="center" >
<mx:HBox width="80">
</mx:HBox>
<mx:HBox id="myHBox" width="800" height="600" backgroundColor="0xffffff" >
<mx:VBox height="590" width="358" >
<!-- <mx:Panel
width="356" height="100%"
color="0x000000"
borderAlpha="0.15"
>
-->
<mx:Canvas height="100%" width="100%" backgroundColor="0xffffff" >
<esri:Map id="myMap" openHandCursorVisible="false"
height="100%"
logoVisible="false"
doubleClickZoomEnabled="false"
scrollWheelZoomEnabled="false"
zoomSliderVisible="false"
scaleBarVisible="false" scale="4000000" >
<esri:extent>
<esri:Extent xmin="-10736651.061900" ymin="4024099.909700" xmax="-10409195.669800" ymax="3440153.831100" >
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISDynamicMapServiceLayer id="dynamicLayer2"
url="http://tfs-24279/ArcGIS/rest/services/RADIO_BUTTONS/counties_layer/MapServer" />
<esri:ArcGISDynamicMapServiceLayer id="dynamicLayer" name=" "
alpha="1"
load="loadLayerName()"
url="http://tfs-24279/ArcGIS/rest/services/{myURL.selectedItem.value}/MapServer" />
<esri:FeatureLayer id="fLayer"
graphicAdd="fLayer_graphicAddHandler(event)"
mode="snapshot"
outFields="*"
symbol="{defaultsym}"
url= "http://tfs-24279/ArcGIS/rest/services/RADIO_BUTTONS/feature_layer_0709_five/FeatureServer/ 0" />
</esri:Map>
</mx:Canvas>
<!-- </mx:Panel>-->
</mx:VBox>
<mx:VBox height="590" width="20" >
</mx:VBox>
<mx:Canvas height="500" width="400" backgroundColor="0xffffff"
horizontalScrollPolicy="off"
verticalScrollPolicy="off" >
<mx:VBox width="420" height="50%" paddingLeft="5" paddingTop="10" paddingRight="10" paddingBottom="10"
verticalGap="8">
<mx:Form >
<mx:FormItem label="Year :" >
<mx:ComboBox id="yearcombo" selectedIndex="0" labelField="label" width="100%" change="changeEvt(event)" >
<mx:ArrayCollection id="year" >
<fx:Object label="2007" year="2007" />
<fx:Object label="2009" year="2009" />
</mx:ArrayCollection>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="Measure:">
<mx:ComboBox id="myURL" selectedIndex="48" width="80%" mouseOver="clickEv2(event)" close="closeHandler(event)" >
<mx:ArrayCollection id="measures" >
<fx:Object id="forindout07" label="Forestry Industry Output" value="RADIO_BUTTONS/TFEI_07_forest_industry_output" year="2007" labeltext="Industry Output" />
<fx:Object id="foremp07" label="Forestry Employment " value="RADIO_BUTTONS/TFEI_07_forest_employment" year="2007" />
<fx:Object id="forlabinc07" label="Forestry Labor Income " value="RADIO_BUTTONS/TFEI_07_forest_labincome" year="2007" />
<fx:Object id="forindbustax07" label="Forestry Indirect Business Tax" value="RADIO_BUTTONS/TFEI_07_forest_business_tax" year="2007" />
<fx:Object id="forindout09" label="Forestry Industry Output " value="RADIO_BUTTONS/TFEI_09_forest_industry_output2" year="2009" />
<fx:Object id="foremp09" label="Forestry Employment " value="RADIO_BUTTONS/TFEI_09_forest_employment" year="2009" />
<fx:Object id="forlabinc09" label="Forestry Labor Income " value="RADIO_BUTTONS/TFEI_09_forest_labincome2" year="2009" />
<fx:Object id="forindbustax09" label="Forestry Indirect Business Tax" value="RADIO_BUTTONS/TFEI_09_forest_business_tax" year="2009" />
<fx:Object id="logindout07" label="Logging Industry Output" value="RADIO_BUTTONS/TFEI_07_logging_industry_output" year="2007" />
<fx:Object id="logemp07" label="Logging Employment " value="RADIO_BUTTONS/TFEI_07_logging_employment" year="2007" />
<fx:Object id="loglabinc07" label="Logging Labor Income " value="RADIO_BUTTONS/TFEI_07_logging_labincome" year="2007" />
<fx:Object id="logindbustax07" label="Logging Indirect Business Tax" value="RADIO_BUTTONS/TFEI_07_logging_business_tax" year="2007" />
<fx:Object id="logindout09" label="Logging Industry Output " value="RADIO_BUTTONS/TFEI_09_logging_industry_output" year="2009" />
<fx:Object id="logemp09" label="Logging Employment " value="RADIO_BUTTONS/TFEI_09_logging_employment" year="2009" />
<fx:Object id="loglabinc09" label="Logging Labor Income " value="RADIO_BUTTONS/TFEI_09_logging_labincome" year="2009" />
<fx:Object id="logindbustax09" label="Logging Indirect Business Tax" value="RADIO_BUTTONS/TFEI_09_logging_business_tax" year="2009" />
<fx:Object id="ppindout07" label="Primary Paper Industry Output" value="RADIO_BUTTONS/TFEI_07_primary_paper_industry_output" year="2007" />
<fx:Object id="ppemp07" label="Primary Paper Employment " value="RADIO_BUTTONS/TFEI_07_primary_paper_employment" year="2007" />
<fx:Object id="pplabinc07" label="Primary Paper Labor Income " value="RADIO_BUTTONS/TFEI_07_primary_paper_labincome" year="2007" />
<fx:Object id="ppindbustax07" label="Primary Paper Indirect Business Tax" value="RADIO_BUTTONS/TFEI_07_primary_paper_business_tax" year="2007" />
<fx:Object id="ppindout09" label="Primary Paper Industry Output " value="RADIO_BUTTONS/TFEI_09_primary_paper_industry_output" year="2009" />
<fx:Object id="ppemp09" label="Primary Paper Employment " value="RADIO_BUTTONS/TFEI_09_primary_paper_employment2" year="2009" />
<fx:Object id="pplabinc09" label="Primary Paper Labor Income " value="RADIO_BUTTONS/TFEI_09_primary_paper_labincome2" year="2009" />
<fx:Object id="ppindbustax09" label="Primary Paper Indirect Business Tax" value="RADIO_BUTTONS/TFEI_09_primary_paper_business_tax" year="2009" />
<fx:Object id="psindout07" label="Primary Solid Industry Output" value="RADIO_BUTTONS/TFEI_07_primary_solid_industry_output" year="2007" />
<fx:Object id="psemp07" label="Primary Solid Employment " value="RADIO_BUTTONS/TFEI_07_primary_solid_employment" year="2007" />
<fx:Object id="pslabinc07" label="Primary Solid Labor Income " value="RADIO_BUTTONS/TFEI_07_primary_solid_labincome" year="2007" />
<fx:Object id="psindbustax07" label="Primary Solid Indirect Business Tax" value="RADIO_BUTTONS/TFEI_07_primarysolid_business_tax" year="2007" />
<fx:Object id="psindout09" label="Primary Solid Industry Output " value="RADIO_BUTTONS/TFEI_09_primary_paper_industry_output" year="2009" />
<fx:Object id="psemp09" label="Primary Solid Employment " value="RADIO_BUTTONS/TFEI_09_primary_solid_employment" year="2009" />
<fx:Object id="pslabinc09" label="Primary Solid Labor Income " value="RADIO_BUTTONS/TFEI_09_primary_solid_labincome" year="2009" />
<fx:Object id="psindbustax09" label="Primary Solid Indirect Business Tax" value="RADIO_BUTTONS/TFEI_09_primarysolid_business_tax" year="2009" />
<fx:Object id="spindout07" label="Secondary Paper Industry Output" value="RADIO_BUTTONS/TFEI_07_secondary_paper_output" year="2007" />
<fx:Object id="spemp07" label="Secondary Paper Employment " value="RADIO_BUTTONS/TFEI_07_secondary_paper_employment" year="2007" />
<fx:Object id="splabinc07" label="Secondary Paper Labor Income " value="RADIO_BUTTONS/TFEI_07_secondary_paper_labincome" year="2007" />
<fx:Object id="spindbustax07" label="Secondary Paper Indirect Business Tax" value="RADIO_BUTTONS/TFEI_07_secondary_paper_business_tax" year="2007" />
<fx:Object id="spindout09" label="Secondary Paper Industry Output " value="RADIO_BUTTONS/TFEI_09_secondary_paper_output2" year="2009" />
<fx:Object id="spemp09" label="Secondary Paper Employment " value="RADIO_BUTTONS/TFEI_09_secondary_paper_employment" year="2009" />
<fx:Object id="splabinc09" label="Secondary Paper Labor Income " value="RADIO_BUTTONS/TFEI_09_secondary_paper_labincome" year="2009" />
<fx:Object id="spindbustax09" label="Secondary Paper Indirect Business Tax" value="RADIO_BUTTONS/TFEI_09_secondary_paper_business_tax" year="2009" />
<fx:Object id="ssindout07" label="Secondary Solid Industry Output" value="RADIO_BUTTONS/TFEI_07_secondary_solid_industry_output" year="2007" />
<fx:Object id="ssemp07" label="Secondary Solid Employment " value="RADIO_BUTTONS/TFEI_07_secondary_solid_employment" year="2007" />
<fx:Object id="sslabinc07" label="Secondary Solid Labor Income " value="RADIO_BUTTONS/TFEI_07_secondary_solid_labincome" year="2007" />
<fx:Object id="ssindbustax07" label="Secondary Solid Indirect Business Tax" value="RADIO_BUTTONS/TFEI_07_secondary_solid_business_tax" year="2007" />
<fx:Object id="ssindout09" label="Secondary Solid Industry Output " value="RADIO_BUTTONS/TFEI_09_secondary_solid_industry_output" year="2009" />
<fx:Object id="ssemp09" label="Secondary Solid Employment " value="RADIO_BUTTONS/TFEI_09_secondary_solid_employment" year="2009" />
<fx:Object id="sslabinc09" label="Secondary Solid Labor Income " value="RADIO_BUTTONS/TFEI_09_secondary_solid_labincome" year="2009" />
<fx:Object id="ssindbustax09" label="Secondary Solid Indirect Business Tax" value="RADIO_BUTTONS/TFEI_09_secondary_solid_business_tax" year="2009" />
<fx:Object id="blank" label=" " />
</mx:ArrayCollection>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
<mx:VBox id="layerPanel" width="50%" height="8%" verticalGap="3" paddingLeft="17">
<mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)" />
</mx:VBox>
<mx:VBox height="2%">
</mx:VBox>
<mx:VBox paddingLeft="17" height="10%" >
<mx:Canvas id="legendPanel" width="100%" >
<mx:Label id="myLabel" text=" " fontWeight="bold" />
<esri:Legend id="myLegend"
layers="{[dynamicLayer]}"
map="{myMap}" visible="false"
respectCurrentMapScale="false" />
</mx:Canvas>
</mx:VBox>
<mx:VBox>
<mx:TextArea width="275" borderAlpha="0" height="200" >
<mx:htmlText >
<![CDATA[<font size='11'><b>Note:</b> Counties in white indicate either no data is available for that measure or the data has been supressed due to confidentiality.</font>
]]>
</mx:htmlText>
</mx:TextArea>
</mx:VBox>
</mx:VBox>
</mx:Canvas>
</mx:HBox>
</mx:HBox>
</mx:Application>Here is the HTML
<!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>Texas Forestry Economic Impact</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #FFF;
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: 14px;
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. */
font-size: medium;
color: #333;
font-family: Calibri;
text-align: left;
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: #FFF;
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: #FFF;
text-decoration: none;
.container table tr td Menu a {
color: #FFF;
text-decoration: none;
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: underline;
color: #FFF;
font-size: small;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background: #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: #6f8d5c;
/* ~~ 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;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #6f8d5c;
/* ~~ 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;
.container .content table tr td {
color: #FFF;
font-weight: bold;
text-align: center;
.container table tr td {
text-align: center;
color: #FFF;
font-family: Calibri;
font-size: small;
.container table {
font-size: xx-small;
table {
font-size: 9px;
.container table tr td p a {
text-align: center;
table tr td p a {
text-align: center;
.container .footer table tr td .footer {
color: #FFF;
font-size: small;
text-align: center;
.container p {
font-size: medium;
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function updateSwfSize(myHeight, myWidth)
var flexibleGorillaSwf = document.getElementById("FlashID");
flexibleGorillaSwf.height = myHeight;
flexibleGorillaSwf.width = myWidth;
</script>
</head>
<body id="body" >
<div class="container">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#6f8d5c"><img src="assets/Banner5.jpg" width="960" height="120" alt="banner" /></td>
</tr>
<tr>
<td height="31" bgcolor="#6f8d5c"><a href="Home.html">Home</a> - <a href="Highlights.html">Highlights</a> - <a href="EcoImpactTX.html" title="Map" target="_self">Summary Tool</a> - <a href="maps.html" style="font-weight: bold; font-size:medium; target="_self">Maps</a> - <a href="charts.html" target="_self">Charts</a> - <a href="Report.html" target="_self">Download Reports</a> - <a href="FAQs.html" target="_self">FAQs</a> - <a href="ContactUs.html" target="_self"> Contact Us</a> - <a href="http://txforestservice.tamu.edu/main/default.aspx"> TFS Home</a><a href="http://txforestservice.tamu.edu/main/default.aspx"></a></td>
</tr>
<tr>
<td height = "0" bgcolor="#FFFFFF"> </td>
</tr>
</table>
<p > <span style="font-size:x-large; color:#000">Thematic Maps</span></p>
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="930" height="1950" id="FlashID" title="map">
<param name="movie" value="maps.swf" />
<param name="quality" value="high" />
<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" />
<param name="SCALE" value="exactfit" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="maps.swf" type="application/x-shockwave-flash" width="930" height="1950">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="SCALE" value="exactfit" />
<!-- 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>
</p>
<p><!-- end .content --></p>
<div class="footer">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="0" bgcolor="#6f8d5c"><p class="footer"><a href="Home.html">Home</a> - <a href="Highlights.html">Highlights</a> - <a href="EcoImpactTX.html" title="Map" target="_self">Summary Tool</a> - <a href="maps.html"><span style="font-weight:bolder"><span style="font-size:medium">Maps</span></span></a></a> - <a href="charts.html">Charts</a> - <a href="Report.html" target="_self">Download Reports</a> - <a href="FAQs.html" target="_self">FAQs</a> - <a href="ContactUs.html" target="_self">Contact Us</a> - <a href="http://txforestservice.tamu.edu/main/default.aspx">TFS Home</a><a href="http://txforestservice.tamu.edu/main/default.aspx"></a></p></td>
</tr>
</table>
</div>
</div>
<!-- end .container --></div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html> -
Preview in Browser and Adobe Browser Lab show website differently? Please help
Hi...working on my first website and I have a question about the differences in viewing the site through
choosing file...preview in browser....
from within Dreamweaver, and using the Adobe Browser Lab to view the website.
There seems to be a very significant difference between the two. When I preview firefox from within dreamweaver, my site is just how I want it.
When I go to browser lab, it is...well... a disaster.
I'm attaching screenshots of the two as well as my code, so it can show how different they are. Here is a screenshot of the website as it looks when I use the preview in browser function from within dreamweaver to view it in firefox. This is how I'd like it to look.
And here is a screenshot of what it looks like when I preview it in Adobe Browser Lab in Firefox.
The quote is underneath the logo, the left div text is flowing over the center div, the nav bar graphics are too narrow, the photo is hanging outside the div it should be contained in. Not what I want.
Does anyone have any insight into how I would fix this or which version is correct?
I'm stumped. This is my first website: shouldn't these two things be similar? And which one is correct?
and here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<style type="text/css">
<!--
@font-face {
font-family: 'museo_sans_500regular';
src: url('museosans-500-webfont.eot');
src: url('museosans-500-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans-500-webfont.woff') format('woff'),
url('museosans-500-webfont.ttf') format('truetype'),
url('museosans-500-webfont.svg#museo_sans_500regular') format('svg');
font-weight: normal;
font-style: normal;
@font-face {
font-family: 'museo_sans_500italic';
src: url('museosans-500italic-webfont.eot');
src: url('museosans-500italic-webfont.eot?#iefix') format('embedded-opentype'),
url('museosans-500italic-webfont.woff') format('woff'),
url('museosans-500italic-webfont.ttf') format('truetype'),
url('museosans-500italic-webfont.svg#museo_sans_500italic') format('svg');
font-weight: normal;
font-style: normal;
@font-face {
font-family: 'binary_itcregular';
src: url('binaritcbol-webfont.eot');
src: url('binaritcbol-webfont.eot?#iefix') format('embedded-opentype'),
url('binaritcbol-webfont.woff') format('woff'),
url('binaritcbol-webfont.ttf') format('truetype'),
url('binaritcbol-webfont.svg#binary_itcregular') format('svg');
font-weight: normal;
font-style: normal;
}body {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
line-height: 1.4;
background-image: url(images/background.gif);
background-repeat: 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;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
h1 strong {
color: #C60651;
font-size: 90%;
font-family: "Binary ITC Bold";
h1 strong em {
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;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF; /* 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%. */
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300";
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C60651;
border-left-color: #C60651;
/* ~~ 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 {
padding-top: 40px;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
#Quote {
float: right;
clear: left;
margin-right: 50px;
/* ~~ 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 15%;
padding-bottom: 10px;
margin-top: 40px;
border-top-color: #FFF;
border-left: #FFF;
margin-left: 25px;
background-color: #FFF;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.content {
width: 60%;
float: left;
margin-top: 40px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.sidebar2 {
float: left;
width: 30%;
background-color: #D3CCB2;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 5px;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding-top: 0;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 60px;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300";
font-size: 100%;
color: #666;
#Quote {
float: right;
clear: both;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the space between the navigation on the content below */
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
line-height: 250%;
.nav {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
ul.nav li {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
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. */
text-decoration: none;
color: #333333;
background-color: #FFF;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
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 */
color: #C60651;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
background-color: #FFF;
background-image: url(images/navbar2.gif);
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~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;
.container .content {
width: 50%;
font-size: large;
#footer { width: 100%;
background-color: #FFF;
.container .sidebar2 h4 img {
padding-left: 20px;
padding-top: 0px;
.sidebar2 p img {
border: medium solid #C60651;
#Insert_logo2 {
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
.container .content p .content strong {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.container .content .content {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.container .content ul li strong {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
font-size: 95%;
line-height: 150%;
list-style-type: disc;
test {
font-family: "Binary ITC Bold";
.container .sidebar2 p img {
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-color: #C60651;
border-right-color: #C60651;
border-bottom-color: #C60651;
border-left-color: #C60651;
li strong {
line-height: 130%;
list-style-type: circle;
color: #978980;
.container .content ul {
.container .sidebar1 .nav {
margin-top: 10px;
margin-bottom: 10px;
.nav li a {
background-image: url(images/navbar2.gif);
background-repeat: no-repeat;
background-position: right center;
left: auto;
right: auto;
clip: rect(auto,auto,auto,auto);
.container .sidebar1 h6 {
padding: 0px;
color: #000000;
#footer h3 strong {
font-size: 60%;
color: #978980;
.container .content p {
padding-left: 5%;
padding-right: 5%;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.container .sidebar2 p {
padding-right: 8%;
padding-left: 8%;
padding-top: 5px;
#Insert_logo2 #Insert_logo2 {
padding-left: 15px;
.container .content ul {
color: #C60651;
h6 {
color: #000;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
.sidebar1 h8 strong {
font-size: 80%;
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300";
.container .sidebar1 h7 {
font-size: 40%;
color: #978980;
.h7 {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
font-size: 15%;
.container .sidebar1 h8 {
font-family: "Museo Sans 500", "Museo Sans 500 Italic", "Museo 700", "Museo 500", "Museo 300", Arial;
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<body>
<div class="container">
<div class="header"><!-- end .header -->
<p class="clearfloat"><a href="#" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Insert Logo Here" name="Insert_logo" width="638" height="110" id="Insert_logo2" style="background: #FFF
; display:block;" /></a></p>
<div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
<p class="clearfloat"> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Parents/Educators</a></li>
<li><a href="#">Professionals</a></li>
<li><a href="#">Bio/Contact</a></li>
<li><a href="#">Q & A Blog</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<h8><strong>Your Career Direction</strong><br></h8>
<h6>96 Harvard Avenue<br>
Maplewood NJ 07040<br>
[email protected]<br>
(973) 996-0207</h6>
<h7>© Your Career Direction, LLC, 2012<br>
</h7>
<p> </p>
</div>
<div class="content">
<h1><strong><img src="images/Whether-you-are.gif" width="266" height="48" alt="Whether you are"></strong></h1>
<ul>
<li><strong>Considering your college choices & career options</strong></li>
<li><strong>Preparing for the world of work after college</strong></li>
<li><strong>Seeking a new position to further your career</strong></li>
<li><strong>In-transition and considering new opportunities</strong></li>
<li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
</ul>
<p> </p>
<h1><img src="images/One-thing-is-for-sure.gif" width="310" height="38" alt="One thing is for sure"></h1>
<p>We all need to direct our own careers, our own lives!</p>
<p>Given today's competitive job market, global economy, and changed corporate culture, we can no longer depend upon others to ensure our professional futures. Choosing or changing your career direction requires self-reflection, career education and an action plan. </p>
<p> Building a successful and rewarding career requires linking your interests, education and skills, with trending industries, job opportunities and your experience. It takes making smart decisions about your college major, vocational training and continuing education options. With motivation, persistence and top notch job search skills, you can succeed in finding a path to building a career that is right for you.</p>
<p>At Your Career Direction, we are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go. </p>
<p> </p>
<!-- end .content --></div>
<div class="sidebar2">
<p><img src="images/Counselingastudent.gif" width="321" height="256" alt="Lisa Mark counseling a student"></p>
<p>By combining an understanding of your interests and current skills with what’s happening in today's marketplace we’re able to partner with you to develop new career ideas, target companies, and generate job and internship opportunities. We provide step by step assistance to ensure success in your written communications, presentation skills, job search, interviews and life choices.</p>
<p>At Your Career Direction, YOUR career is our passion. Our mission is to educate and counsel you to choose your own path in life and become what you want to be. </p>
<p> </p>
<p> </p>
<!-- end .sidebar2 --></div>
<div class="footer">
<div id="footer">
<h3 align="center"> </h3>
</div>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Thanks for your help.You are using % widths for your layout which means it will look different depending of the size of each users monitor. Although this is probably the better way to go these days, it is not one size fits all and will work more effectively if you include min and max widths, and also media queries that change your layout depending on the monitor size. This is more advanced coding and will take time if you want to do that. Alternatively, you could design using pixel widths and have it look consistent across all desktop browsers and throw a few media queries in for the mobile side.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-7 5660
More on Media Queries
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mo bile-version-of-your-website/ -
How can I prevent children from shrinking to infinitesimal values on MouseEvents?
Hi.
I have the following code:
//http://forums.adobe.com/message/3450898#3450898
//square_mc.y property edited by kglad AND NedMurphy both
// but kglad introduced the yGap variable, allowing for
// user defined space between movie clips. This solved my
// problem of evenly distributed spacing between movie clips
// all of the other code I generated from either my own previous
// files or by thinking about the solution and plugging away
// at it.
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
var nextY:Number = 0;
var yGap:int = 2;
var container:MovieClip=new MovieClip();
var containerBig:MovieClip=new MovieClip();
containerBig.x=50;
containerBig.y=50;
containerBig.scaleX=1;
containerBig.scaleY=1;
addChild(container);
addChild(containerBig);
stage.addEventListener(Event.ENTER_FRAME, myFunc);
/*var imageHolder_mc:MovieClip=new MovieClip();
imageHolder_mc.graphics.beginFill(0x888888);
imageHolder_mc.graphics.lineTo(300,0);
imageHolder_mc.graphics.lineTo(300,200);
imageHolder_mc.graphics.lineTo(0,200);
imageHolder_mc.graphics.lineTo(0,0);
var myFrames:Array=new Array();
for (var i:int=0; i<12; i++){
myFrames.push("my_"+i+"_mc");
trace(myFrames+" myFrames");
var square_mc:MovieClip=new MovieClip();
square_mc.graphics.beginFill(0xFF0000);
square_mc.graphics.lineTo(200,0);
square_mc.graphics.lineTo(200,200);
square_mc.graphics.lineTo(0,200);
square_mc.graphics.lineTo(0,0);
container.addChild(square_mc);
square_mc.name="my_"+i+"_mc";
trace(square_mc.name);
square_mc.addEventListener(MouseEvent.MOUSE_OVER, myFunc2);
square_mc.addEventListener(MouseEvent.MOUSE_OUT, myFunc3);
//square_mc.scaleX=.25+(.13*Math.sin(i/Math.PI))*mouseY*.005;
square_mc.scaleX=.25;
square_mc.scaleY=square_mc.scaleX;
square_mc.alpha=i*.1+.3;
square_mc.y=nextY+mouseY*(-1);
nextY+=square_mc.height+yGap;
function myFunc(e:Event):void{
container.y=-1*mouseY+stage.height;
trace(container.y+" containerY");
function myFunc2(e:MouseEvent):void{
e.target.scaleX*=1.2;
trace(stage.height+" stageHeight");
e.target.addEventListener(MouseEvent.MOUSE_DOWN, myFunc4);
e.target.mouseChildren=false;
function myFunc3(e:MouseEvent):void{
e.target.scaleX/=1.2;
e.target.removeEventListener(MouseEvent.MOUSE_OVER, myFunc2);
//add ImageHolder_mc MovieClip from Library and go to frame
// coinciding with Array value in for loop . . .
var imageHolder_mc:ImageHolder_mc=new ImageHolder_mc();
function myFunc4(e:MouseEvent):void{
containerBig.addChild(imageHolder_mc);
for(var j:int=0; j<12; j++){
if(e.target.name=="my_"+j+"_mc"){
imageHolder_mc.gotoAndStop(j);
trace(e.target.y+" e.target.y");
you can troubleshoot the issue by adding a 12 frame MovieClip to your Library when you test this code and give it the names I referenced above in Bold.
That is, whomever will have time to help me out.
The problem I'm facing is not with loading the content of the Movie Clip, (though I might experience issues with that later when I try to load dynamic swfs) because as for now I just have placeholders on frames.
What I want to know is why my red squares on the left navigation keep getting smaller as I repeat the MouseOver and MouseOut events. It doesn't seem that these squares follow the logic of the code the way I have written it. Some of the code was generated from a previous post with the help of contributors.
Now I have again hit a slight snag with coding the math properly. Initially when I tested the code it worked fine without any "shrinking" going on. However, now with more code added the red navigation squares don't bounce back to their original states, they just keep getting smaller.
Can anyone help me with this?
Kindly thanking in advance,
-markerlinemy new code:
//http://forums.adobe.com/message/3450898#3450898
//square_mc.y property edited by kglad AND NedMurphy both
// but kglad introduced the yGap variable, allowing for
// user defined space between movie clips. This solved my
// problem of evenly distributed spacing between movie clips
// all of the other code I generated from either my own previous
// files or by thinking about the solution and plugging away
// at it.
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
//http://www.republicofcode.com/tutorials/flash/as3tweenclass/
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var nextY:Number = 0;
var yGap:int = 2;
var container:MovieClip=new MovieClip();
var containerBig:MovieClip=new MovieClip();
containerBig.x=50;
containerBig.y=50;
containerBig.scaleX=1;
containerBig.scaleY=1;
addChild(container);
addChild(containerBig);
stage.addEventListener(Event.ENTER_FRAME, myFunc);
/*var imageHolder_mc:MovieClip=new MovieClip();
imageHolder_mc.graphics.beginFill(0x888888);
imageHolder_mc.graphics.lineTo(300,0);
imageHolder_mc.graphics.lineTo(300,200);
imageHolder_mc.graphics.lineTo(0,200);
imageHolder_mc.graphics.lineTo(0,0);
var myFrames:Array=new Array();
for (var i:int=0; i<12; i++){
myFrames.push("my_"+i+"_mc");
trace(myFrames+" myFrames");
var square_mc:MovieClip=new MovieClip();
square_mc.graphics.beginFill(0xFF0000);
square_mc.graphics.lineTo(200,0);
square_mc.graphics.lineTo(200,200);
square_mc.graphics.lineTo(0,200);
square_mc.graphics.lineTo(0,0);
container.addChild(square_mc);
square_mc.name="my_"+i+"_mc";
trace(square_mc.name);
var alreadyExecuted:Boolean;
if(!alreadyExecuted){
alreadyExecuted=true;
square_mc.addEventListener(MouseEvent.MOUSE_OVER, myFunc2);
square_mc.addEventListener(MouseEvent.MOUSE_OUT, myFunc3);
//square_mc.scaleX=.25+(.13*Math.sin(i/Math.PI))*mouseY*.005;
square_mc.scaleX=.25;
square_mc.scaleY=square_mc.scaleX;
square_mc.alpha=i*.1+.3;
square_mc.y=nextY+mouseY*(-1);
nextY+=square_mc.height+yGap;
function myFunc(e:Event):void{
container.y=-1*mouseY+stage.height;
//trace(container.y+" containerY");
function myFunc2(e:MouseEvent):void{
//e.target.scaleX*=1.2;
var myTween:Tween = new Tween(e.target, "scaleX", Elastic.easeIn, e.target.scaleX*1, e.target.scaleX*1.5, .1, true);
//trace(stage.height+" stageHeight");
e.target.addEventListener(MouseEvent.MOUSE_DOWN, myFunc4);
trace(alreadyExecuted+" BOOLEAN");
function myFunc3(e:MouseEvent):void{
//e.target.scaleX/=1.2;
var myTween:Tween = new Tween(e.target, "scaleX", Elastic.easeIn, e.target.scaleX*1, e.target.scaleX/1.5, .1, true);
//e.target.removeEventListener(MouseEvent.MOUSE_OVER, myFunc2);
//add ImageHolder_mc MovieClip from Library and go to frame
// coinciding with Array value in for loop . . .
var imageHolder_mc:ImageHolder_mc=new ImageHolder_mc();
function myFunc4(e:MouseEvent):void{
containerBig.addChild(imageHolder_mc);
for(var j:int=0; j<12; j++){
if(e.target.name=="my_"+j+"_mc"){
imageHolder_mc.gotoAndStop(j);
trace(e.target.y+" e.target.y");
However, this code only ends up allowing the first thumbnail square to have the event listener. I tried several variations of placement of the Boolean within the code but in some cases I got that nothing was functioning at all and in some cases I got that the Boolean didn't prevent the shrinking from occuring. This code is as close as I got to calling the code to stop adding event listeners.
I also tried:
var alreadyExecuted+i:Boolean;
if(!alreadyExecuted+i){
code
but I got an error telling me that it expects a semicolon before plus. I guess you can't create numeric instances of Booleans in the for loop. The goal was to create a single boolean for each i in the loop to have a total of 12 booleans 0 through 11, one for each thumbnail so that the event listeners don't repeat as you suggested the Boolean would do.
Still stumped. -
Hi
I'm trying to create a spry accordian menu for a navbar and am having some trouble.
This is the first time I've tried it so I would appreciate any help.
The Client would like the tabs to be:
Home
Students
High School Students
College Students
Professionals
Parents/Educators
Seminars
Bio
Q & A Blog
Testimonials
So all they would like High School Students and College Students to be child tabs underneath the parent tabs and all other tabs to be parent tabs.
They asked for a spry accordian.
They want the nav bar to be on the left.
Here is the link to the website online:
http://www.elynncohen.com/index2spry2.html#
and here are my questions:
1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
Any help would be much appreciated!
Thanks!!!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Your Career Direction Career and College Counseling</title>
<meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
<meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
"In-transition and considering new opportunities"
"Seeking to make a significant and meaningful career change" />
<meta name="Publisher" content="Your Career Direction, LLC" />
<meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
<meta name="Author" content="Lisa Mark" />
<meta name="Language" content="en-US" />
<meta name="distribution" content="global" />
<meta name="revisit-after" content="10 days" />
<meta name="Robots" content="All" />
<link rel="Index" href="index.html" />
<link rel="Site Map" href="sitemap.html" />
<script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 100%;
line-height: 1.4;
background-image: url(images/background.gif);
background-repeat: 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;
.container .sidebar1 h3 {
padding-left: 0px;
color: #C60651;
font-size: x-large;
h1 strong {
color: #C60651;
font-size: 90%;
font-family: "Binary ITC Bold";
h1 strong em {
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;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF; /* 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%. */
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C60651;
border-left-color: #C60651;
/* ~~ 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 {
padding-top: 40px;
#Quote {
float: right;
clear: left;
margin-right: 1%;
/* ~~ 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 15%;
padding-bottom: 10px;
margin-top: 40px;
margin-left: 25px;
background-color: #FFF;
font-family: museo-sans;
arial;
max-width: 200px;
min-width: 180px;
.content {
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10;
font-family: museo-sans;
arial;
margin-top: 40px;
padding-right: 10px;
width: 50px;
font-size: large;
.container .content p {
padding-top: 0px;
.sidebar2 {
float: left;
width: 20%;
background-color: #D3CCB2;
margin-top: 40px;
padding-top: 10px;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 5px;
font-family: museo-sans;
arial;
font-size: 90%;
right: 12%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding-top: 0px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 40px;
font-family: museo-sans; arial;
font-size: 100%;
color: #666;
.container .content p {
font-family: museo-sans;
arial;
padding-top: 0px;
padding-left: 17px;
padding-bottom: 0px;
#Quote {
float: right;
clear: both;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the space between the navigation on the content below */
font-family:museo-sans; arial;
line-height: 250%;
.nav {
font-family: museo-sans;
arial;
padding-left: 0px;
ul.nav li {
font-family: museo-sans; arial;
padding-bottom: 10px;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
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. */
text-decoration: none;
color: #333333;
background-color: #FFF;
font-family: museo-sans; arial;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 15px;
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 */
color: #C60651;
font-family:museo-sans; arial;
background-color: #FFF;
background-image: url(images/navbar2.gif);
padding-bottom: 10px;
.content img {
/* ~~The footer ~~ */
.footer {
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
padding-top: 0px;
padding-right: 0;
padding-bottom: 10px;
/* ~~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;
.container .content {
width: 50%;
font-size: large;
font-family: museo-sans; arial;
#footer { width: 100%;
background-color: #FFF;
.container .sidebar2 h4 img {
padding-left: 20px;
padding-top: 0px;
.sidebar2 p img {
border: medium solid #C60651;
#Insert_logo2 {
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
.container .content p .content strong {
font-family: museo-sans; arial;
.container .content .content {
font-family: museo-sans; arial;
.container .content ul li strong {
font-family: museo-sans;
arial;
font-size: 95%;
line-height: 150%;
list-style-type: disc;
.container .content ul {
test {
font-family: "Binary ITC Bold";
.container .sidebar2 p img {
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-color: #C60651;
border-right-color: #C60651;
border-bottom-color: #C60651;
border-left-color: #C60651;
li strong {
line-height: 130%;
list-style-type: circle;
color: #978980;
.container .content ul {
.container .sidebar1 .nav {
margin-top: 10px;
margin-bottom: 10px;
.sidebar1 .nav li {
padding-bottom: 10%;
.nav li a {
background-image: url(images/navbar2.gif);
background-repeat: no-repeat;
background-position: right center;
left: auto;
right: auto;
clip: rect(auto,auto,auto,auto);
.container .sidebar1 .nav li a {
.container .sidebar1 h6 {
padding: 0px;
color: #000000;
#footer h3 strong {
font-size: 60%;
color: #978980;
.container .content p {
padding-right: 0%;
padding-left: 0%;
font-size: 85%;
.container .sidebar2 p {
padding-right: 8%;
padding-left: 8%;
padding-top: 5px;
#Insert_logo2 #Insert_logo2 {
padding-left: 15px;
.container .content ul {
color: #C60651;
h6 {
color: #978980;
font-family: museo-sans;
arial;
font-size: 82%;
padding-left: 20%;
text-align: left;
text-indent: 8px;
.nav li a {
padding-bottom: 10px;
h8 {
font-family: museo-sans; arial;
font-size: 100%;
h4 {
font-family: museo-sans;
arial;
font-size: 100%;
color: #C60651;
padding-left: 17px;
padding-top: 5px;
padding-bottom: 0px;
.container .content p {
padding-left: 17px;
padding-right: 30px;
.sidebar1 h8 strong {
font-size: 80%;
font-family:museo-sans; arial;
.container .sidebar1 h7 {
font-size: 40%;
color: #978980;
h7 {
font-family: museo-sans; arial;
font-size: 15%;
.container .sidebar1 h8 {
font-family: museo-sans; arial;
.sidebar2 p img {
max-width: 100%;
.container .content img {
padding-left: 3%;
img {
position: static;
text-align: left;
body,td,th {
font-family: museo-sans; arial;
h5 {
font-size: 150%;
color: #C60651;
padding-left: 0px;
font-family:museo-sans; arial;
.container .content p {
padding-left: 17px;
padding-right: 30px;
font-size: 87%;
.container .sidebar2 p {
font-size: 90%;
.container .sidebar1 .nav li {
font-family: museo-sans;
arial;
.container .sidebar1 .nav li a {
padding-left: 0px;
margin-bottom: 0px;
height: 30px;
li a {
padding-left: 2px;
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body><script type="text/javascript">
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
</script>
<div class="container">
<div class="header"><!-- end .header -->
<p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
; display:block;" /></a></p>
<div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
<p class="clearfloat"> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Home</a></div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Students</a></div>
<div class="AccordionPanelContent"><a href="#">High School</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Professional</a></div>
<div class="AccordionPanelContent">Content 3</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
<div class="AccordionPanelContent">Content 4</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Seminars</a></div>
<div class="AccordionPanelContent">Content 5</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Bio</a></div>
<div class="AccordionPanelContent">Content 6</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Q & A Blog</a></div>
<div class="AccordionPanelContent">Content 7</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
<div class="AccordionPanelContent">Content 8</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content">
<p>Given today's competitive job market, global economy, and changed corporate culture,
we can no longer depend upon others to ensure our professional futures. Choosing or
changing your career direction requires self-reflection, career education and an action plan.</p>
<img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
<ul>
<br><br><li><strong>Considering your college choices & career options</strong></li>
<li><strong>Preparing for the world of work after college</strong></li>
<li><strong>Seeking a new position to further your career</strong></li>
<li><strong>In-transition and considering new opportunities</strong></li>
<li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
</ul>
<img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
<br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
<p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
<img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
<div class="sidebar2">
<p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
<p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
<p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
<p>We provide step by step guidance to ensure your success during the college application, job interview
and decision making process.
</p>
</div>
<div class="footer">
<div id="footer">
<h6 align="left"> Your Career Direction, LLC • 96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
</div>
<p> </p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
1. Line 454
<div id="Accordion1" class="Accordion" tabindex="0" style="outline: none;">
2 & 3. Change your code from Line 455 - 491:
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Home</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Students</a></div>
<div class="AccordionPanelContent"><a href="#">High School</a><br/><a href="#" style="margin-top: -30px;">College</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Professional</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Seminars</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Bio</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Q & A Blog</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
</div>
</div>
</li>
</ul>
</div>
4. Append your HTML for child tabs like this:
<div class="AccordionPanelContent" id="submenu"><a href="#">High School</a></div>
Create a new #submenu css rule in your CSS document and set styling the way you want it. -
Layout problem for small devices
I have created a site using a three column liquid header and a template using it for almost all my pages. The sit is www.ituna.ca - views fine for me now but when I try to view on an ipaad or ipod, the page does not display correclty at all. Where did I go wrong and how can I fix it.
Thanks,
Pat
The css is below:
@charset "utf-8";
body {
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
font-family: 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;
font-size: medium;
text-align: left;
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
color: #000;
letter-spacing: 0.2em;
.container .content #maincontentleft {
float: left;
width: 50%;
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:#F60;
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: #090;
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;
color: #F90;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 90%;
max-width: 1260px; /* 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%. */
float: none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/* ~~ 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-image: url(PNG%20and%20PSD/layout5.jpg);
background-repeat: no-repeat;
background-color: #FFF;
.headerdiv {
padding-left: 15%;
background-image: url(PNG%20and%20PSD/greengrass.jpg);
/* ~~ 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 15%;
padding-bottom: 10px;
text-align: center;
background-color: #FC0;
background-repeat: repeat-x;
.content {
width: 50%;
float: left;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
background-color: #FFF;
.nocolumncontent {
float: left;
width: 80%;
margin-left: 40px;
.container .contentnocolums {
width: 80%;
margin-left: 40px;
.sidebar2 {
float: right;
width: 33%;
padding: 10px 0;
background-color: #FFF;
text-align: center;
.container .sidebar2narrow {
width: 10%;
float: left;
/* ~~ 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. */
font-size: 1em;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 3px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FFF;
text-align: center;
ul.nav li {
border: 2px solid #FFF;
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. */
text-decoration: none;
color: #000;
background-color: #FFF;
font-weight: bold;
border: 4px outset #FFF;
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 */
color: #FFF;
background-color: #FC0;
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-color: #FFF;
/* ~~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;
.container .content #maincontentleft {
width: 45%;
h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #F60;
h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #333;
font-weight: normal;
.floatrightrecreation {
float: right;
width: 400px;
.realestateheadings {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FC0;
background-color: #333;
.REALESTATECONTACT {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #666;
text-align: center;
.center {
text-align: center;
font-size: small;
.container .sidebar1 div {
background-color: #FFF;
text-align: center;
.listitems {
list-style-position: inside;
list-style-type: square;
.container .sidebar2 h2 em no bold {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #333;
font-size: .8em;Using Adobe's CSS templates put you behind the eight-ball from the
start. The tutorial linked to might have been a fairly good and reliable
tactic last year, but I'm afraid it might be a bit obsolete. If you
decide to deploy media queries, please read all of the comments
thoroughly and not just the tutorial.
If you'd like to use a more bulletproof method to support small devices,
we do have a product that will help you:
http://www.projectseven.com/products/templates/pagepacks/cssbuilder/index.htm
Here are the example pages (do view the code):
http://www.projectseven.com/products/templates/pagepacks/cssbuilder/csspbm_11.htm
You can read the user guide first, if you like:
http://www.projectseven.com/products/templates/pagepacks/cssbuilder/help/guide.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998 -
On my website you can see that there is white space at the bottom but it ends just short of the true bottom, is there anyway I can make this so white continues down all the way?
<!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>
<link rel="stylesheet" href="layout.css" ... />
<meta name="google-site-verification" content="_Plh0Sn97-RFeQaAZFoZgv8tZ9Ap9FhMbNGy3eq3CeM" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
background-image: url(Pictures/1276207208635.jpg);
/* ~~ 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. */
font-size: xx-large;
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:#09F;
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: #06F;
text-decoration: none;
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;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
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%. */
overflow: hidden; /* this declaration makes the .container clear all floated columns within it. */
/* ~~ 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
background: #93A5C4;
padding-bottom: 10px;
.content {
padding: 10px 0;
width: 60%;
float: left;
.sidebar2 {
float: left;
width: 20%;
background: #93A5C4;
padding: 10px 0;
/* ~~ 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. */
/* ~~ 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 */
color: #FFF;
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
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. */
text-decoration: none;
background: #8090AB;
color: #000;
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: #6F7D94;
color: #FFF;
/* ~~ 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;
.container .content h1 {
font-family: OCR A Extended;
body,td,th {
color: #000;
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<!--Analystics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19878287-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>
<!--Iphone Redirect-->
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('tnvkzuebf877', 'right-upper')</script>
<script type="text/javascript" src="http://hunterthornsberry.com/mobilejs.js"> if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://hunterthornsberry.com/mobile.html";
</script>
</head>
<body>
<div class="wrapper">
<div class="container" align="left">
<div class="sidebar1">
<ul class="nav">
<li><img src="../../Pictures/TDLLOGO.png" width="172" height="129" /></li>
<li><a href="index.html">Home</a></li> <li><a href="About.html">About Me</a></li>
<li><a href="Blog.html">Personal Blog</a></li>
<li><a href="tech.html">Tech Stuff</a></li>
<li><a href="Projects.html">Projects</a></li>
<li><a href="design.html">Design/Art</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
<p> <center><script type="text/javascript"><!--
google_ad_client = "pub-9636713487359174";
/* HunterThornsberry */
google_ad_slot = "9954026781";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center></p>
<!-- end .sidebar1 --></div>
<div class="content">
<center><h1>Home</h1>
<p><strong><em>UNDER CONSTRUCTION</em></strong></p>
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400" id="FlashID" title="This is my life">
<param name="movie" value="../../Intro.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" />
<param name="LOOP" value="false" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../../Intro.swf" width="550" height="400">
<!--<![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" />
<param name="LOOP" value="false" />
<!-- 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>
</p>
<p> </p>
</center>
</div>
<div class="sidebar2" align="right">
<script type="text/javascript"><!--
google_ad_client = "pub-9636713487359174";
/* Sky */
google_ad_slot = "5228573680";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- end .container --></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</div>
<!--Footer-->
<div class="push"></div>
<div class="footer">
<p><center>Copyright (c) 2008</p>
</div>
</body>
</html>Well its the 'footer' <div> and the <div> before that which need some attention.
Add the below to your css styles:
.footer {
width: 80%;
margin: 0 auto;
background-color: #fff;
.footer p {
margin: 0;
padding: 0;
Then remove the "push" <div> completely:
<div class="push"></div>
<div class="footer">
<p><center>Copyright (c) 2008</p>
</div>
To just leave:
<div class="footer">
<p><center>Copyright (c) 2008</p>
</div>
Maybe you are looking for
-
File paths and updating Libraries
Our website recently switched servers, in the switch they moved files in our FTP to a root folder www/ which has created some issues, most are resolved but I am really stuck on a Library folder which was originally in our root folder and now it is in
-
In documents I can open pdf files but none of the others
When I go to documents I can open pdf files but nothing else. Same on downloads. I have lots of info I've downloaded over time and I often use it. Can I just go back and use internet explorer for that and if so how?
-
Hi , I have two tables "table1" and "table2".Structure of the both tables are below: Table1: CustomerId CustFname CustLname Convertion_Date Table2: CustomerId DFname DLname CustomerId is used for joins . Now i need a query based on conversion_date. I
-
How to compare date between 2 file?
hi there... is there any possibility to compare date between 2 file and the file that is latest to open? thank you
-
How to change default properties when uploading role
Hi, all. Our env. is like the following. EP 6.0 SP9 patch1 J2EE SP9 Windows 2003 MS SQL Server When we upload a role from R/3 to EP, role is correctly uploaded but the problem is the following default behavior. - default property of entryPoi