Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question 3-column Floated Layout - Positioning Elements

    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:
    Code:
    @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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    htsmith88 (10-26-2011)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up

    That did some good. 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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by htsmith88 View Post
    That did some good. 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.
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I also tried to put margin-left on the leftside div. It made a total scrunch of the middle content. Everything got sandwiched inward.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by htsmith88 View Post
    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. 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question

    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.

    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.

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Current code (all of it):

    main.css
    Code:
    @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
    Code:
    @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;}

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Part 2:
    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    htsmith88 (10-27-2011)

  • #13
    New Coder
    Join Date
    May 2011
    Posts
    28
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.
    Last edited by htsmith88; 10-27-2011 at 05:58 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •