...

View Full Version : 3-column Floated Layout - Positioning Elements



htsmith88
10-26-2011, 08:32 PM
Hello all,

This is a question about my site at http://www.productreviewsbytyler.com. I am moving to a 3-column float layout, but in doing so the images and text elements have been thrown off. You can see how all the elements are jumbled up and all over the place.

Anyone know how to fix this?

main.css:


@charset "utf-8";
/* Home Page CSS Document */
body{
background-image: url(bg.jpg);
background-position:top center;
background-color:#09F;
background-repeat:repeat;
margin:0 auto;
}

#wrapAroundAll{
width:1066px;
margin:0 auto;
overflow:hidden;
}


#leftside{
overflow:auto;
float:left;
background:url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
height:700px;
width:300px;
}
#middle{
width:626px;
margin:0 auto;
}
#rightside{
background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
min-height:800px;
margin-left:845px;
width:300px;
float:right;
overflow:visible;
}

#header{
background-image:url(header.jpg);
background-repeat:no-repeat;
width:626px;
height:206px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
margin:0 auto;
padding:0 auto;
}

#body{
background-image:url(body.jpg);
width:626px;
text-align: center;
margin:0 auto;
}

#footer{
background-image:url(footer.jpg);
width:626px;
height:60px;
text-align: center;
margin:0 auto;
padding:0;
}

#welcomestatement{
display:block;
background-color:#FF9;
text-align:left;
padding:3px 20px;
border-bottom:2px inset #F8CB87;
margin:auto;
width:400px;
position:relative;
top:10px;
text-shadow:1px 1px 1px #000;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}

.sideWindowHeaderText{
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
color:#090;
font-weight:bold;
width:120px;
/*text shadow*/
text-shadow:0px 0px 6px #06F, 2px 0px 12px #006;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=30, Color='#436EEE')";
}

.copytagatbottom{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-shadow:1px 1px 1px #000;
text-align:center;
color:#000;
display:block;
background-color:#FFF;
width:200px;
margin:0 auto;
padding:2px;
padding-bottom:4px;
border:1px dashed #6B6B6B;
}

#emailbox{
background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
bottom:100px;
top:380px;
position:absolute;
height:315px;
width:250px;
margin-left:10px;
margin-top:182px;
}
#go{width:70px; margin-top:200px; margin-left:24px;}

.sideWindowLinks{
width:145px;
}
.sideWindowLinks li{
list-style:none;
position:relative;
top:50px;
padding-top:4px;
}
.sideWindowLinks li a{
text-shadow:1px 1px 1px #000;
font-size:10px;
color:#C60;
}
.sideWindowLinks a:hover, .sideWindowLinks li:hover a, .sideWindowLinks a:focus, .sideWindowLinks li:focus a, .sideWindowLinks a:active, .sideWindowLinks li:active a{color:#CC0; text-decoration:none;}

body{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}

Excavator
10-26-2011, 08:37 PM
Hello htsmith88,
Floats come first! Try re-arranging your markup so #middle comes last, like this
<div id="leftside">
<div id="rightside">
<div id="middle">


Have a look at this example (http://nopeople.com/CSS%20tips/simple3column/index.html).

htsmith88
10-26-2011, 09:56 PM
That did some good. :thumbsup: That brought the rightside up to near the top-right of the screen.

Now, to move this stuff around. How would you suggest moving the two side window graphics into their place neatly resting against the middle column? I don't know whether to use margins, paddings, or top, left, bottom, right properties. :confused:

Excavator
10-26-2011, 11:56 PM
That did some good. :thumbsup: That brought the rightside up to near the top-right of the screen.

Now, to move this stuff around. How would you suggest moving the two side window graphics into their place neatly resting against the middle column? I don't know whether to use margins, paddings, or top, left, bottom, right properties. :confused:

I would think you should go with floats and use margins to nudge things around a where you want. top/right/bottom/left positioning kind of wrecks the natural flow of the document.
Sometimes positioning is the way to go though.

Update the online version to your latest revision and let us have another look.

htsmith88
10-27-2011, 01:08 AM
Okay,
so the files are freshly uploaded to the server. www.productreviewsbytyler.com . As you can see, it's a total mess as I'm playing around with every element on the page because I want to make sure I'm positioning things correctly. I have used top, right, bottom, left on other elements.

Now I'm working on every element I have, because I think I've thrown in absolute positioning on a lot of these things. I'm especially curious working on the menus.

htsmith88
10-27-2011, 01:39 AM
I also tried to put margin-left on the leftside div. It made a total scrunch of the middle content. Everything got sandwiched inward.

Excavator
10-27-2011, 01:40 AM
I also tried to put margin-left on the leftside div. It made a total scrunch of the middle content. Everything got sandwiched inward.


See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Excavator
10-27-2011, 01:44 AM
What happened to your containing element? Your layout does not work well in a fluid sized body, you need a container to hold your three columns.

Look at that example I linked you to in an earlier post.

htsmith88
10-27-2011, 04:33 AM
After reading over the box model link and re-examining the example site, I am still HIGHLY confused. Boy, I mean confused when I say so. :eek:

I added the container back in and re-uploaded the files. It's a mess. I'm frustrated.

Just for kicks, I gave leftside a padding right value of 5000px. The element moved off the screen as expected, but the welcomestatement element fell down 400-500px like I had assigned padding-top to it. WHAT?!?!

Anyway, I'm thoroughly lost and don't have any clue how I'm going to get back to where I was with the layout nicely done. I'm afraid it's all fallen to pieces.

htsmith88
10-27-2011, 04:36 AM
Current code (all of it):

main.css


@charset "utf-8";
/* Home Page CSS Document */
body{
background-image: url(bg.jpg);
background-position:top center;
background-color:#09F;
background-repeat:repeat;
margin:0 auto;
}

#container{
height:auto;
width:1226px;
overflow:hidden;
}
#leftside{
overflow:auto;
float:left;
background:url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
height:700px;
width:300px;
}
#middle{
width:626px;
margin:0 auto;
}
#rightside{
background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
min-height:800px;
width:300px;
float:right;
overflow:visible;
}

#header{
background-image:url(header.jpg);
background-repeat:no-repeat;
width:626px;
height:206px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
margin:0 auto;
padding:0 auto;
}

#body{
background-image:url(body.jpg);
width:626px;
text-align: center;
margin:0 auto;
}

#footer{
background-image:url(footer.jpg);
width:626px;
height:60px;
text-align: center;
margin:0 auto;
padding:0;
}

#welcomestatement{
display:block;
background-color:#FF9;
text-align:left;
padding:3px 20px;
border-bottom:2px inset #F8CB87;
margin:auto;
width:400px;
position:relative;
top:10px;
text-shadow:1px 1px 1px #000;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}

.sideWindowHeaderText{
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
color:#090;
font-weight:bold;
width:120px;
/*text shadow*/
text-shadow:0px 0px 6px #06F, 2px 0px 12px #006;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=30, Color='#436EEE')";
}

.copytagatbottom{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-shadow:1px 1px 1px #000;
text-align:center;
color:#000;
display:block;
background-color:#FFF;
width:200px;
margin:0 auto;
padding:2px;
padding-bottom:4px;
border:1px dashed #6B6B6B;
}

#emailbox{
background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
bottom:100px;
top:380px;
position:absolute;
height:315px;
width:250px;
/*margin-left:10px;
margin-top:182px;*/
}
#go{width:70px; margin-top:200px; margin-left:24px;}

.sideWindowLinks{
width:145px;
}
.sideWindowLinks li{
list-style:none;
position:relative;
top:50px;
padding-top:4px;
}
.sideWindowLinks li a{
text-shadow:1px 1px 1px #000;
font-size:10px;
color:#C60;
}
.sideWindowLinks a:hover, .sideWindowLinks li:hover a, .sideWindowLinks a:focus, .sideWindowLinks li:focus a, .sideWindowLinks a:active, .sideWindowLinks li:active a{color:#CC0; text-decoration:none;}

body{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}


dropdownmenus.css


@charset "utf-8";
/* Drop Down Menus */

/*******************/
/*PERSONAL NAV MENU*/
/*******************/
#pMenu{
padding:105px 0 0 52px;
background:url(pMenuBG.gif) no-repeat scroll 50% 45px transparent;
height:746px;
z-index:999;
margin:0 auto;
}

#pMenu ul{
margin:0;
padding:0;
}

#pMenu li{
list-style:none;
float:left;
padding-right:10px;
position:relative;
}

#pMenu li li{
width:100%;
padding-top:1px;
margin-right:2px;
text-align:left;
list-style:square;
list-style-position:inside;
min-width:140px;
}

#pMenu a{text-decoration:none;}
#pMenu li a{
color: #FFF;
/*text shadow*/
text-shadow:1px 1px 1px #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
width:auto;
padding:3px;
border:5px groove #BB0013;
font-size:16px;

/*begin main gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
/*end main gradient*/
}

#pMenu a:hover, #pMenu li:hover a, #pMenu a:focus, #pMenu li:focus a, #pMenu a:active, #pMenu li:active a{
color:#FF0;

/*begin hover gradient top level*/
background: #a0030b; /* Old browsers */
background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
}

#pMenu div{
left:-999em;
position:absolute;
margin-top:8px;
border:2px solid #003;
padding-bottom:4px;
padding-left:2px;

/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

#pMenu li:hover div, #pMenu a:focus+div{left:0;}

#health{width:275px;}
#insurance{margin-left:-30px; width:260px;}
#general{margin-left:-45px; width:280px;}
#dating{margin-left:-93px; width:225px;}
#education{margin-left:-108px; width:225px;}
#pLegal{margin-left:-172px; width:225px;}

#pMenu li:hover li a, #pMenu li:focus li a, #pMenu li:active li a{
color:#0C0;
text-shadow:1px 1px 1px #000;
text-decoration:underline;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}

#pMenu div a:hover, #pMenu div li:hover a, #pMenu div a:focus, #pMenu div li:focus a, #pMenu div a:active, #pMenu div li:active a{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:none;
}

#pMenu h3, #pMenu h2{margin:0;}
#pMenu li li{padding:0 2px 0 0;}

#pMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
text-shadow:1px 1px 1px #000;
padding-left:3px;
}

#pMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
color:#999;
font-style:italic;
font-size:13px;
padding-left:20px;
}

#pMenu h3 span{
display:list-item;
list-style-type:disc;
list-style-position:inside;
}
/******************/
/*End Personal Nav*/
/******************/

/**************/
/*BIZ NAV MENU*/
/**************/
#bMenu{
background:url(bMenuBG.gif) no-repeat scroll 50% 32px transparent;
width:560px;
margin:0 auto;
height:420px;
margin-top: 1200px;
}

#bMenu li{
list-style:none;
float:left;
position:relative;
padding-right:11px;
}

#bMenu ul{margin:0; padding:0;}
#bMenu h2, #bMenu h3{margin:0;}
#bMenu li li{padding-top:0; padding-bottom:0; margin:0;}

#bMenu a{text-decoration:none;}
#bMenu li a{
color: #FFF;
/*text shadow*/
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);

width:auto;
padding:3px;
border:5px groove #09F;
font-size:16px;

/*main gradient*/
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #9cc5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#9cc5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc5e5',GradientType=0 ); /* IE6-9 */
}

#bMenu li:hover a, #bMenu a:hover, #bMenu li:focus a, #bMenu a:focus, #bMenu li:active a, #bMenu a:active{
color:#FF0;

/*main hover gradient*/
background: #9cc5e5; /* Old browsers */
background: -moz-linear-gradient(top, #9cc5e5 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9cc5e5), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* IE10+ */
background: linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cc5e5', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

#bMenu li li{
width:100%;
padding-top:1px;
padding-bottom:1px;
margin-left:2px;
text-align:left;
list-style:square;
list-style-position:inside;
}

#bMenu li:hover div, #bMenu a:focus+div{left:0;}

#bMenu div{
left:-999em;
bottom:25px;
position:absolute;
padding-top:4px;
border:2px solid #003;

/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

#bMenu li:hover li a, #bMenu li:focus li a, #bMenu li:active li a{
color:#0C0;
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
text-decoration:underline;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}

#bMenu div a:hover, #bMenu div li:hover a, #bMenu div a:focus, #bMenu div li:focus a, #bMenu div a:active, #bMenu div li:active a{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:none;
}

#bMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
padding-left:3px;
}

#bMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
color:#999;
font-style:italic;
font-size:13px;
padding:4px 0 4px 25px;
}

#bMenu h3 span{
display:list-item;
list-style-type:disc;
list-style:disc;
}

#bizopps{width:260px;}
#bizservices{width:220px; margin-left:-36px;}
#legal{width:200px; margin-left:-76px;}
/**************/
/**End Biz Nav*/
/**************/

#wrapper{height:1300px; width:826px; background:url("homepagedivider.gif") no-repeat 50% 20px;}

Excavator
10-27-2011, 10:51 AM
Here is a few changes that may help. It's not finished by any means but it should be enough to get you started.
It's pretty long so I'm posting it in 2 parts...

Part 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="You can find product reviews here for internet products and services. This is an unbiased site that exposes bad products and promotes the good ones." />
<meta name="Keywords" content="keyword1, keyword2,..." />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<base href="http://www.productreviewsbytyler.com/style/" />
<style type="text/css">
body {
margin: 0;
background: #09F url(bg.jpg) repeat center top;
}
#container {
width: 1226px;
margin: 0 auto;
overflow: auto;
}
#leftside{
height: 700px;
width: 300px;
float: left;
background: url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
}
#leftsideBox {
width: 145px;
float: left;
margin: 250px 0 0 120px;
overflow: auto;
}
.sideWindowLinks{
width:145px;
padding: 0;
}
.sideWindowLinks li {
list-style: none;
padding-top: 4px;
}
.sideWindowLinks li a {
text-shadow: 1px 1px 1px #000;
font-size: 10px;
color: #C60;
}
.sideWindowLinks a:hover,
.sideWindowLinks li:hover a,
.sideWindowLinks a:focus,
.sideWindowLinks li:focus a,
.sideWindowLinks a:active,
.sideWindowLinks li:active a{color:#CC0; text-decoration:none;}

#middle{
width:626px;
margin:0 auto;
}
#rightside {
height: 800px;
width: 300px;
float: right;
background: url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
}
#rightsideBox {
width: 145px;
float: right;
margin: 200px 120px 0 0;
overflow: auto;
}
#emailbox{
height: 315px;
width: 250px;
position: absolute;
top: 480px;
bottom: 100px;
background: url("emailbox.gif") no-repeat scroll 50% 0 transparent;
}
#header{
background: url(header.jpg) no-repeat;
width:626px;
height:206px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
margin:0 auto;
padding:0 auto;
}

#body {
width: 626px;
margin: 0 auto;
overflow: auto;
background: url(body.jpg);
text-align: center;
}

#footer{
background: url(footer.jpg);
width:626px;
height:60px;
text-align: center;
margin:0 auto;
padding:0;
}

#welcomestatement{
display:block;
background-color:#FF9;
text-align:left;
padding:3px 20px;
border-bottom:2px inset #F8CB87;
margin:auto;
width:400px;
position:relative;
top:10px;
text-shadow:1px 1px 1px #000;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}

.sideWindowHeaderText{
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
color:#090;
font-weight:bold;
width:120px;
/*text shadow*/
text-shadow:0px 0px 6px #06F, 2px 0px 12px #006;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=30, Color='#436EEE')";
}

.copytagatbottom{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-shadow:1px 1px 1px #000;
text-align:center;
color:#000;
display:block;
background-color:#FFF;
width:200px;
margin:0 auto;
padding:2px;
padding-bottom:4px;
border:1px dashed #6B6B6B;
}
#go{width:70px; margin-top:200px; margin-left:24px;}

body{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
#wrapper {
width: 626px;
background: url("homepagedivider.gif") no-repeat 50% 20px;
}

/* Drop Down Menus */

/*******************/
/*PERSONAL NAV MENU*/
/*******************/
#pMenu{
padding:105px 0 0 52px;
background:url(pMenuBG.gif) no-repeat scroll 50% 45px transparent;
height:746px;
z-index:999;
margin:0 auto;
}

#pMenu ul{
margin:0;
padding:0;
}

#pMenu li{
list-style:none;
float:left;
padding-right:10px;
position:relative;
}

#pMenu li li{
width:100%;
padding-top:1px;
margin-right:2px;
text-align:left;
list-style:square;
list-style-position:inside;
min-width:140px;
}

#pMenu a{text-decoration:none;}
#pMenu li a{
color: #FFF;
/*text shadow*/
text-shadow:1px 1px 1px #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
width:auto;
padding:3px;
border:5px groove #BB0013;
font-size:16px;

/*begin main gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
/*end main gradient*/
}

#pMenu a:hover, #pMenu li:hover a, #pMenu a:focus, #pMenu li:focus a, #pMenu a:active, #pMenu li:active a{
color:#FF0;

/*begin hover gradient top level*/
background: #a0030b; /* Old browsers */
background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
}

#pMenu div{
left:-999em;
position:absolute;
margin-top:8px;
border:2px solid #003;
padding-bottom:4px;
padding-left:2px;

/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

#pMenu li:hover div, #pMenu a:focus+div{left:0;}

#health{width:275px;}
#insurance{margin-left:-30px; width:260px;}
#general{margin-left:-45px; width:280px;}
#dating{margin-left:-93px; width:225px;}
#education{margin-left:-108px; width:225px;}
#pLegal{margin-left:-172px; width:225px;}

#pMenu li:hover li a, #pMenu li:focus li a, #pMenu li:active li a{
color:#0C0;
text-shadow:1px 1px 1px #000;
text-decoration:underline;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}

#pMenu div a:hover, #pMenu div li:hover a, #pMenu div a:focus, #pMenu div li:focus a, #pMenu div a:active, #pMenu div li:active a{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:none;
}

#pMenu h3, #pMenu h2{margin:0;}
#pMenu li li{padding:0 2px 0 0;}

#pMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
text-shadow:1px 1px 1px #000;
padding-left:3px;
}

#pMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
color:#999;
font-style:italic;
font-size:13px;
padding-left:20px;
}

#pMenu h3 span{
display:list-item;
list-style-type:disc;
list-style-position:inside;
}
/******************/
/*End Personal Nav*/
/******************/

/**************/
/*BIZ NAV MENU*/
/**************/
#bMenu{
background:url(bMenuBG.gif) no-repeat scroll 50% 32px transparent;
width:560px;
margin:0 auto;
height:420px;
margin-top: 1200px;
}

#bMenu li{
list-style:none;
float:left;
position:relative;
padding-right:11px;
}

#bMenu ul{margin:0; padding:0;}
#bMenu h2, #bMenu h3{margin:0;}
#bMenu li li{padding-top:0; padding-bottom:0; margin:0;}

#bMenu a{text-decoration:none;}
#bMenu li a{
color: #FFF;
/*text shadow*/
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);

width:auto;
padding:3px;
border:5px groove #09F;
font-size:16px;

/*main gradient*/
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #9cc5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#9cc5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#9cc5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc5e5',GradientType=0 ); /* IE6-9 */
}

#bMenu li:hover a, #bMenu a:hover, #bMenu li:focus a, #bMenu a:focus, #bMenu li:active a, #bMenu a:active{
color:#FF0;

/*main hover gradient*/
background: #9cc5e5; /* Old browsers */
background: -moz-linear-gradient(top, #9cc5e5 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9cc5e5), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* IE10+ */
background: linear-gradient(top, #9cc5e5 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cc5e5', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

#bMenu li li{
width:100%;
padding-top:1px;
padding-bottom:1px;
margin-left:2px;
text-align:left;
list-style:square;
list-style-position:inside;
}

#bMenu li:hover div, #bMenu a:focus+div{left:0;}

#bMenu div{
left:-999em;
bottom:25px;
position:absolute;
padding-top:4px;
border:2px solid #003;

/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

#bMenu li:hover li a, #bMenu li:focus li a, #bMenu li:active li a{
color:#0C0;
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
text-decoration:underline;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}

#bMenu div a:hover, #bMenu div li:hover a, #bMenu div a:focus, #bMenu div li:focus a, #bMenu div a:active, #bMenu div li:active a{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:none;
}

#bMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
padding-left:3px;
}

#bMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
color:#999;
font-style:italic;
font-size:13px;
padding:4px 0 4px 25px;
}

#bMenu h3 span{
display:list-item;
list-style-type:disc;
list-style:disc;
}

#bizopps{width:260px;}
#bizservices{width:220px; margin-left:-36px;}
#legal{width:200px; margin-left:-76px;}
/**************/
/**End Biz Nav*/
/**************/

</style>
<title>Atlanta Review Group- Product Articles</title>
</head>

Excavator
10-27-2011, 10:51 AM
Part 2:

<body>
<div id="container"><!-- containing element -->
<!-- these divs are for the three columns to be established -->
<div id="leftside">
<div id="leftsideBox">
<h2 class="sideWindowHeaderText">Most Popular</h2>
<ul class="sideWindowLinks">
<li><a href="http://www.atlantareviewgroup.com/food/peapod1.html">Peapod</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/dieting/southbeach1.html">South Beach Diet</a></li>
<li><a href="http://www.atlantareviewgroup.com/coupons/brandcaster1.html">Brandcaster Coupons</a></li>
</ul>
<!--end leftsideBox--></div>
</div><!-- end leftside div -->
<div id="rightside"><!-- begin rightside div -->
<div id="rightsideBox">
<h2 class="sideWindowHeaderText">The 'Bad' List</h2>
<ul class="sideWindowLinks">
<li><a href="#">This Site Sucked</a></li>
<li><a href="#">Another Terrible Product</a></li>
<li><a href="#">What a Dumb Idea this Was!</a></li>
</ul>
<!--end rightsideBox--></div>
<form id="emailbox" name="form1" method="post" action="">
<div>
<input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)"/>
<input type="submit" value="Join" />
</div>

</form>
</div><!-- end rightside div -->
<div id="middle">
<div id="header">&nbsp;</div><!-- end header div -->
<div id="body">
<p id="welcomestatement">Hello everyone, <br /> This site is dedicated to consumer reviews on current products in many different markets. This site is here to promote the good ones and expose the bad ones. Thank you for visiting!</p>
<div id="wrapper"><!-- begin Personal navigation menu -->

<ul id="pMenu">
<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
<div id="health">
<h2>weight loss</h2>
<h3><span>fitness</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>

<li><a href="http://www.atlantareviewgroup.com/health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/turbofire1.html">TurboFire Fitness</a></li>
</ul>
<h3><span>dieting</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/dieting/healthetrimdiet1.html">Health&eacute; Trim Diet</a></li>

<li><a href="http://www.atlantareviewgroup.com/health/dieting/southbeach1.html">South Beach Diet</a></li>
</ul>
<h2>skin care</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
</ul>

<h2>supplements</h2>
<h3><span>vitamins</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/libigrow1.html">Libigrow</a></li>

</ul>
<h3><span>stop smoking</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/smokedeter1.html">Smoke Deter</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/ecig1.html">Electronic Cigarettes</a></li>
</ul>
</div>

</li>

<li><a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
<div id="insurance">
<h2>home/property insurance</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/homeinsurance1.html">LowerMyHomeInsuranceRate.com</a></li>
</ul>
<h2>auto insurance</h2>

<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/save5001.html">Save500.com</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/usinsuranceauto1.html">USInsuranceOnline.com- Auto</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/quotewizard1.html">Quote Wizard</a></li>
</ul>
<h2>health insurance</h2>
<ul>

<li><a href="http://www.atlantareviewgroup.com/insurance/healthquoteinsider1.html">Health Quote Insider</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/cobraalternatives1.html">COBRA Alternatives to Health Insurance</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/usinsurancehealth1.html">USInsuranceOnline.com- Health</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/quoteit4me1.html">Quote It 4 Me- Health Insurance</a></li>
</ul>
<h2>life insurance</h2>

<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/lifequoteinsider1.html">Life Quote Insider</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/usinsurancelife1.html">USInsuranceOnline.com- Life</a></li>
</ul>
</div>
</li>

<li><a href="http://www.atlantareviewgroup.com/general.html">general</a>

<div id="general">
<h2>electronics</h2>
<h3><span>gaming</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/gaming/haltgame1.html">Haltgame 3D</a></li>
<li><a href="http://www.atlantareviewgroup.com/gaming/battlestargalactica1.html">Battlestar Galactica</a></li>
<li><a href="http://www.atlantareviewgroup.com/gaming/gsn1.html">GSN Gaming</a></li>

</ul>
<h3><span>electronic gadgets</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/electronics/kindle1.html">Kindle e-Reader</a></li>
</ul>
<h2>style &amp; fashion</h2>

<h3><span>make up</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/makeup/dinair1.html">Dinair Airbrush Makeup</a></li>
<li><a href="http://www.atlantareviewgroup.com/makeup/simplykaren1.html">Simply Karen</a></li>
</ul>
<h2>food/dining</h2>
<h3><span>net grocers</span></h3>

<ul>
<li><a href="http://www.atlantareviewgroup.com/food/efooddepot1.html">eFood Depot</a></li>
<li><a href="http://www.atlantareviewgroup.com/food/peapod1.html">Peapod</a></li>
</ul>
<h3><span>coupons</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/coupons/brandcaster1.html">Brandcaster Coupons</a></li>

</ul>
<h2>cars/auto</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/auto/carfax1.html">Carfax Vehicle History Reports</a></li>
<li><a href="http://www.atlantareviewgroup.com/auto/carprices1.html">CarPrices.com</a></li>
</ul>
<h2>security</h2>

<ul>
<li><a href="http://www.atlantareviewgroup.com/security/adtalarm1.html">ADT Alarm System</a></li>
</ul>
<h2>hobby</h2>
<h3><span>music</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/guitartricks1.html">GuitarTricks</a></li>

<li><a href="http://www.atlantareviewgroup.com/jamorama1.html">Jamorama- Learn Guitar</a></li>
</ul>
</div>
</li>

<li><a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
<div id="dating">
<ul>
<li><a href="http://www.atlantareviewgroup.com/dating/realmaturesingles1.html">RealMatureSingles</a></li>

<li><a href="http://www.atlantareviewgroup.com/dating/seniorpeoplemeet1.html">SeniorPeopleMeet</a></li>
<li><a href="http://www.atlantareviewgroup.com/dating/adultfriendfinder1.html">Adult Friend Finder</a></li>
<li><a href="http://www.atlantareviewgroup.com/dating/benaughty1.html">BeNaughty.com</a></li>
</ul>
</div>
</li>

<li><a href="http://www.atlantareviewgroup.com/education.html">education</a>

<div id="education">
<ul>
<li><a href="http://www.atlantareviewgroup.com/education/scholzone1.html">Scholarship Zone</a></li>
<li><a href="http://www.atlantareviewgroup.com/education/speedstudytechniques1.html">Speed Study Techniques</a></li>
</ul>
</div>
</li>

<li><a href="http://www.atlantareviewgroup.com/legal.html">legal</a>

<div id="pLegal">
<h2>mortgage</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
<li><a href="http://www.atlantareviewgroup.com/mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
</ul>
<h2>debt</h2>

<h3><span>bankruptcy</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/debt/evalbankruptcy1.html">Evaluate Bankruptcy</a></li>
</ul>
<h3><span>credit debt</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/debt/debtnegotiator1.html">Debt Negotiator</a></li>

</ul>
<h2>DUI</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/DUIattorney1.html">DUI Attorney</a></li>
</ul>
</ul>
<!-- end Personal navigation menu-->

<!-- begin Business navigation menu-->

<ul id="bMenu">
<li><a href="http://www.atlantareviewgroup.com/bizopps.html">business opportunities</a>
<div id="bizopps">
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizopps/freesitesignup1.html">Cash-Pulling Affiliate Marketing Websites</a></li>
<li><a href="http://www.atlantareviewgroup.com/bizopps/anthonymorrison1.html">Anthony Morrison's Big Profits Secret</a></li>
</ul>

<h2>affiliate marketing</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizopps/mobilemassmoney1.html">Mobile Mass Money</a></li>
<li><a href="http://www.atlantareviewgroup.com/bizopps/autopilothomeprofits.html">Autopilot Home Profits</a></li>
</ul>
<h2>start your own business</h2>
<ul>

<li><a href="http://www.atlantareviewgroup.com/bizopps/milliondollarpips1.html">Pips Forex Trading Robot</a></li>
<li><a href="http://www.atlantareviewgroup.com/bizopps/pennystockprophet1.html">The Penny Stock Prophet</a></li>
</ul>
<h2>trading/investing</h2>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/bizservices.html">business services</a>

<div id="bizservices">
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizservices/1choicesolutions.html">Telecom Master Quote Agency</a></li>
</ul>
<h2>technology solutions</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizservices/projmgmttemplates1.html">Project Management Templates</a></li>

</ul>
<h2>project management</h2>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/legal.html">legal services</a>
<div id="legal">
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>

</ul>
<h2>bankruptcy</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/willcreator1.html">Create My Will</a></li>
</ul>
<h2>personal will</h2>
<ul>

<li><a href="http://www.atlantareviewgroup.com/legal/divorcedocuments1.html">Divorce Documents</a></li>
</ul>
<h2>divorce</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/personalinjury1.html">Personal Injury Attorneys</a></li>
</ul>
<h2>personal injury</h2>

</div>
</li>
</ul>
<!-- end Business navigation menu-->
</div><!-- end wrapping div -->
</div><!-- end body div -->
<div id="footer">&nbsp;</div><!-- end footer div -->
<h3 class="copytagatbottom">&copy;AtlantaReviewGroup.com<br />Updated August 3, 2011</h3>

</div><!-- end middle div -->
</div><!-- end containing div -->
<script type="text/javascript" src="Scripts/mainpage.js"></script>
</body>
</html>

htsmith88
10-27-2011, 03:18 PM
Files updated. Got the menus back to center by resetting the width of wrapper to the same of #middle, 626 px. I don't know what I did to make the bottom menu to disappear.

Using either margins or padding to move the leftside and rightside is causing there to be a huge drop in the yellow box in the middle, welcomestatement.

I changed the text in welcomestatement to text with no opacity. I changed the emailbox image to text that's easily legible.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum