Help centering divs
Okay I'm tearing my hair out here!
I'm working on a Web design for a class. I'm trying to make a fixed header that is centered on the screen. The block containing the header is 950 pixels wide and should auto-center.
Here's a link:
http://pjutter.com/Sessions/AdvancedCSS/Lesson3/indexNew.html
This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).
I cannot figure out how centering works. Supposedly margin: 0 auto should center a div, but that only occasionally works. I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.
The CSS file for the header is the one called headernav. The others are part of the Blueprint framework which I'll be using on the grid underneath the header. So just ignore the others.
Can anyone help me with this?
Thanks, Phyllis
Can't see your page. But static (unspecified) positioning is all that's required for 98% of page layouts. I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus. And then I wrap them inside a position:relative container.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Similar Messages
-
Need help centering DIV in CSS
Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.
I did a sketch up of what I want in layout terms.
Any suggestions on how to center a 980px div?
Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
Any help is appreciated.This is a very common question, so an article has been published in the Dreamweaver FAQ
Centering a page:
http://forums.adobe.com/thread/454036
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap -
I need help Centering a div box to a background image using dreamweaver cs5.5.
I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.comHave you looked at your page with images disabled?
I urge you to re-think this approach to web design because images of text are not indexed by search engines, screen readers or translators. Given the demographic group your site is targeting, you really need to ensure maximum web accessibility for all users.
Navigation, headings and descriptions all need to be in real text -- not images of text.
Ken is right. Absolute positioning is pure poison for such a simple layout. My advice is to start over with one of the pre-built Starter Pages in DW. Go to File > New > Blank page > HTML. Select a layout from the 3rd column and hit CREATE button.
Nancy O. -
Help centering a box in a jpanel
hi every1,
I need some help centering a box in a jpanel both
horizontally and vertically.
which layout is the correct one?
could you post a scrap of code please?
thanxalot
stefanoWith the GridBagLayout you basically can do everything. Are there more components in the panel or just this box. If it's just the box, change the Layout of the panel to GridBagLayout and the anchor of the box to center. That should beeverything to do.
Cheers
Jonas -
Help centering background video in fluid grid layout inside div
Hopefully this all makes sense. I am trying to center the background video (the animation on the website towards the bottom)... I have tried all sorts of things to try and center this. If it can't be done, it can't be done. The banner on top works as should. If all else fails I will just not use a fluid grid page and that will be that. I self taught myself Adobe After Effects to make that animation (took me a month and 1/2) and I have self taught myself Dreamweaver.. coming from Frontpage and Expression Web.
Here is the website (thank you in advance for your input):
http://a1customcomputers.com/Web%20Development/A1CC/Main.html
I just tested it and it's not playing how it should.. I'll figure that out later but where it says "Enter", that is what I need centered. Thanks
My html so far:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet"/>
<link href="assets/style.css" rel="stylesheet"/>
<script src="respond.min.js"></script>
<script type="text/javascript" src="assets/jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script type="text/javascript" src="assets/script.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<div align="center"><img src="A1_Banner.jpg" /></div>
</div>
<p> </p>
<p> </p>
<div id="div2" class="fluid"></div>
</div>
</body>
</html>
my style.css so far:
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 90%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
.fluid {
clear: none;
width: 400px;
float: left;
display: block;
padding-left: auto;
padding-right: auto;
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 100%;
clear: none;
float: none;
height: 100%;
margin-top: 20px;
padding-left: 0.7851px;
padding-right: .7851px;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
padding-left: 0.7581%;
padding-right: 0.7581%;
clear: none;
float: none;
margin-top: 20px;
height: 100%;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
margin-top: 20px;
clear: none;
float: none;
padding-left: 0.7581%;
padding-right: 0.7581%;
height: 100%;
#div1 {
width: 100%;
margin-bottom: 13%;
#div2 {
width: 400px;
margin: 0 auto;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
/* DEMOS */
#div2 {
width: 400px;
margin: 0 auto;Not trying to argue with you and I know you are only trying to help and I know that you know ALOT more about this than I do.. you do... I don't know if background was the correct "place" to call it.. but nevertheless.. what I beleive it is, is in the background.. and maybe that is part of the problem. It is supposed to be called from a JQuery plugin, and where I have it now is in a "div [div2]" in the "gridcontainer". It was working and my latest attempts it was working great.. but wasn't centered. But I've changed a bunch of code around lately and so that is why it is not working right now... The "Enter" that you see on the link I provided is the "poster". When I get a chance I will work on it and get the animation working again.. or back to normal.. just not centered. At first I was thinking "centered vertically".. and so for like a week, maybe longer.. everthing that I was searching for and trying was for "vertically center a div".. then it hit me.. you jacka$$.. you want to horizontally center it... Haha! Again, thank you for your input.
-
Hi!
So i'm attempting to set up all the body content in my website so that it is always in the center of my webpage dispite the size of the browser. I had it going fine for a while, but then something happened and I lost it. What did I do wrong?
Help!!
Here is my complete code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-image: url(images/images/images/images/baby_03.png);
#apDiv1 {
position:absolute;
width:202px;
height:153px;
layer-background-color:#000;
border:1px none #000000;
z-index:1;
left: 41px;
top: -1px;
#apDiv2 {
position:absolute;
width:200px;
height:115px;
layer-background-color:#000;
border:1px none #000000;
z-index:2;
left: 480px;
top: 148px;
#apDiv3 {
position:absolute;
width:200px;
height:43px;
layer-background-color:#000;
border:1px none #000000;
z-index:2;
left: 254px;
top: 2px;
#apDiv4 {
position:absolute;
width:200px;
height:40px;
layer-background-color:#000;
border:1px none #000000;
z-index:3;
left: 285px;
top: 2px;
#Layer1 #apDiv4 pre {
font-family: helvetica;
font-size: 18px;
color: #EAEAEA;
#apDiv5 {
position:absolute;
width:200px;
height:115px;
layer-background-color:#000;
border:1px none #000000;
z-index:4;
left: 588px;
top: 135px;
#apDiv6 {
position:absolute;
width:200px;
height:115px;
layer-background-color:#000;
border:1px none #000000;
z-index:4;
left: 539px;
top: 80px;
#apDiv7 {
position:absolute;
width:200px;
height:115px;
layer-background-color:#000;
border:1px none #000000;
z-index:4;
left: 537px;
top: 62px;
#apDiv8 {
position:absolute;
width:549px;
height:115px;
layer-background-color:#000;
border:1px none #000000;
z-index:4;
left: 556px;
top: 64px;
#apDiv9 {
position:absolute;
width:200px;
height:115px;
layer-background-color:#000;
border:1px none #000000;
z-index:5;
left: 66px;
top: 177px;
#menue {
background-color:#2C2929;
padding:1px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
body,td,th {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
color: #FFFFFF;
#textone {
font-family:Arial, Helvetica, sans-serif;
#Layer1 div #menue pre {
font-family: Arial, Helvetica, sans-serif;
</style>
</head>
<div id="Layer1" style="margin-left:auto; margin-right:auto; width:938px; height:100%; z-index:1; layer-background-color: #9999FF; border: 1px none #000000;"><body text="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="text-align:center; width: 938px;">
</div>
<div id="menue">
<pre>PORTFOLIO RESUME CONTACT</pre>
</div>
<img src="images/images/images/images/autumn_06.png" width="938" height="439" />
<div>
<table width="938" border="0" cellspacing="10px" cellpadding="0">
<tr>
<th scope="col"><p align="center">WHO I AM:</p>
<p align="center">People often remark that I'm pretty lucky. Luck is only important in so far as getting the chance to sell yourself at the right moment. After that, you've got to have talent and know how to use it. - Fank Sinatra</p>
<p align="center">Similar to Ol' Blue Eyes, I've got talent and I know how to use it. I'm an ambitious graphic designer from New York. I love design and am constantly learning more about this ever changing trade. I also dabble in scientific illustration and gardening.</p></th>
<th scope="col"><p align="center">WHAT I DO:</p>
<p align="center">I'm knowledgeable in Adobe Photoshop, Illustrator, InDesign, Dreamweaver, and Flash. I create print material, design logos, and build websites that stand out amoungst the rest. Currently an intern at Flourish Design Studio and a student a Marywood University, I have developed this site in order to showcase my work for future employers.</p>
<p align="center">Some examples of my work can be found here.</p>
<p align="center"><th scope="col"><script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
tweets: {
background: '#000000',
color: '#ffffff',
links: '#0a8082'
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}).render().setUser('SaraLynnLuciano').start();
</script></th></p></th>
</tr>
</table>
</div>
</div>
</body>
</html>APDivs, oh my! I don't recommend building primary layouts with APDivs. In the long-run you will regret it. Here's why:
http://apptools.com/examples/pagelayout101.php
That said, wrap your content inside a #wrapper division that has a stated width in pixels, a margin-left and margin-right of auto, AND position:relative to contain those pesky APDivs.
CSS:
#wrapper {
position:relative;
width: 990px;
margin:0 auto;
HTML:
<body>
<!--begin wrapper-->
<div id="wrapper>
your page content goes here.....
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Dreamweaver CS4 help centering please
Hi everyone,
I'm trying to center my website using Dreamweaver. When I preview my site in Dreamweaver it looks good and centered. When I upload the site to Godaddy my site left justifies. Can anyone please help me. I'm a novice and I'm trying to create a page for a small business. Here is the coding for the site. I've tried several help tips online and nothing seems to work. Any help will be highly appreciated. Thanks for your time! Also, I think it has something to do with the CSS part. I'm also using a CSS style sheet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loan Modification Reviews For You | Get a Loan Modification Today!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.header .header_center p {
font-size: 16px;
text-align: left;
.header .woman p {
color: #75B4EA;
font-weight: bold;
font-size: 36px;
font-family: helvitca;
.content p {
text-align: center;
color: #C1D3FB;
.content p {
color: #000;
.content p {
font-size: 12px;
text-align: left;
.a {
font-size: 24px;
.content a {
color: #545454;
a2 {
color: #545454;
.a3 {
color: #000;
font-size: 24px;
text-align: center;
p {
text-align: left;
font-size: 11px;
.content .a3 .a3 {
text-align: center;
.content .a3 .a3 {
text-align: center;
.a5 {
font-size: 36px;
.input br {
text-align: center;
.a15 {
text-align: center;
a:link {
color: #FF3;
a:visited {
color: #033;
body {
margin-left: auto;
margin-right: auto;
text-align:center;
#contents
margin-top: 10px;
margin-bottom: 10px;
margin-right:auto;
margin-left:auto;
width: 766px;
padding: 10px;
background-color: #FFF;
color: #000;
text-align: center;
body {
background-color:#fff;
width:766px;
text-align:center;
margin:0 auto;
position:relative;
font-size: 24px;
#contents
margin-top: 5px;
margin-bottom: 10px;
margin-right:0;
margin-left:0;
width: 766px;
padding: 10px;
background-color: #FFF;
color: #000;
text-align: center;
margin:0;
padding:0;
font-size:11px;
font-family:Tahoma,sans-serif;
color:#545454;
img {
border:0;
text-align: center;
a {
text-decoration:none;
a:hover {
text-decoration:underline;
text-align: left;
color: #D6D6D6;
.clearing {
clear:both;
height:0px;
width:0px;
font-size:0px;
.float_l {
float:left;
.header {
height:290px;
background:url('images/border_top.jpg') repeat-x;
.woman {
background:url('images/woman_top.gif') top right no-repeat;
width:766px;
height:119px;
color: #FFEA00;
font-size: 24px;
.woman img {
margin:45px 0 0 48px;
.header_center {
background:url('images/woman_center.jpg') no-repeat;
height:114px;
text-align: left;
.header_center p {
width:505px;
font-size:25px;
font-family:Helvetica;
color:#fff;
text-align:center;
padding-top:20px;
.header_center span {
font-family:Verdana;
font-weight:bold;
color:#215489;
vertical-align:top;
padding-left:55px;
.header_center a {
font-size:24px;
font-family:Helvetica;
font-weight:bold;
color:#ffea00;
vertical-align:top;
.navigation {
background:url('images/navigation.jpg') no-repeat;
height:57px;
.navigation_links {
color:#fff;
padding:15px 0 0 70px;
text-align: center;
.navigation_links img {
margin: 0 6px;
.content {
background:url('images/border.gif') repeat-y;
margin-top:15px;
border:1px solid #fff;
color: #4179B6;
font-size: 24px;
text-align: right;
.colum_left {
width:214px;
margin-left:20px;
html>body .colum_left {
margin-left:50px;
.news {
width:200px;
height:auto;
margin:0 0 15px 5px;
.news_title {
background-color:#f2f2f2;
color:#437fbe;
margin:5px 0;
padding:1px 0 0 10px;
.news h1 {
margin-left:10px;
.news p {
margin-bottom:5px;
margin-left:10px;
.news span {
background:url('images/link.gif') no-repeat;
background-position:right;
padding-right:25px;
margin-left:10px;
.news a {
color:#8f969c;
font-weight:bold;
font-size:10px;
.search {
width:190px;
background-color:#f2f2f2;
color:#4b4b4b;
padding:10px 0 0 10px;
margin:5px 0 0 5px;
.search span {
background:url('images/search.gif') no-repeat;
background-position:left;
padding-left:10px;
margin-left:10px;
.input {
margin:5px 0 15px 0;
.ok {
margin-top:6px;
vertical-align:top !important;
vertical-align:middle;
.colum_right {
width:400px;
margin-left:40px;
.top {
margin-bottom:17px;
.top img {
margin:0 10px 5px 0;
.top p {
margin-bottom:5px
.top span {
background:url('images/link.gif') no-repeat;
background-position:right;
padding-right:25px;
.top a {
color:#8f969c;
font-weight:bold;
font-size:10px;
.bottom img {
margin-bottom:5px;
.column {
width:200px;
.column img {
margin:0 10px 5px 0;
.column p {
margin-bottom:8px
.column span {
background:url('images/link_icon.gif') no-repeat;
background-position:left;
padding-left:10px;
.column a {
color:#87ad1f;
text-decoration:underline;
.column a:hover {
text-decoration:none;
.spacer {
clear:left;
height:1px;
.footer {
background:url('images/footer_background.gif') no-repeat;
height:63px;
margin-top:15px;
color:#fff;
text-align:right;
padding:20px 40px 0 0;
.footer a {
color:#fff;
.bbb {
text-align: center;
.header .header_center pppp {
text-align: left;
.a5 br {
font-size: 11px;
-->
</style>
</head>
<body>
<div id="container">
<div class = "header">
<div class = "woman">
<p> </p>
<p>LoanModificationReviews.com</p>
</div>
<div class = "header_center">
<p>GET THE TOOLS YOU NEED TO MODIFY YOUR MORTGAGE<br />
</p>
<p><a href = "#">Loan Modification Tool Reviews For You</a> </p>
</div>
<div class = "navigation">
<div class = "navigation_links"></div>
</div>
</div>
<p> </p>
<p> </p>
<h1 align="center" class="a5"> Loan Modifications are Easy </h1>
<h1 align="center" class="a5">Loan Modification Reviews For You</h1>
<p align="center"> </p>
<p><strong>Do not be fooled</strong> by any guru, system or web site that tells you that you can not do Loan Modiciationst . Making your home affordable requires agent hard work and the right tools you need to modify your mortgage.<br />
<br />
We've reviewed all of the popular Loan Modification Kits out there and we're going to tell you <strong>which are worth the money and which to avoid! </strong><br />
<br />
<strong>save you time, money </strong>and help you generate Loan Modifications and <strong>succeed</strong> at making your home more affordable</p>
<p> </p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://e2429jtwou38ok2j6aer5gkc22.hop.clickbank.net/"><img src="images/160minloanmodfixed.jpg" alt="" width="300" height="252" /></a></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div class="a3"><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> 60-Minute Loan Modification</p>
<p><strong>Website:</strong><a href="http://e2429jtwou38ok2j6aer5gkc22.hop.clickbank.net/"> http://www.60-minuteloanmod.com</a><br />
<strong>Rank:</strong> #1<br />
<strong> Cost:</strong> $87.95<br />
<strong>Guarantee:</strong> 100% Money Back up to 60 Days<br />
<strong><img src="images/spacer.gif" alt="" width="1" height="1" />Description: </strong><br />
</p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p> </p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/4thediymortgagemodkitfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="92%" border="0">
<tbody>
<tr>
<td><div>
<div class="input"><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong></p>
<p class="input"><strong>Website:</strong><br />
<strong>Rank:</strong> #2<br />
<strong>Cost:</strong><br />
<strong>Guarantee:</strong><br />
<strong>Description: </strong>sdafsdfsdf asdf sadfsd fasdf asdf asdf asdf asd fsdaf asdf asd fasd fasd fasd fas df asdf asdf asd fasd f asdf dasf asd fasd fa sdf asdf asd fsad fasd fa sdf asd fasd f asdf asd fasd fasd f asdf asd fasd f asdf asd fasd fasd f asdf asd fasd f asdf daf das fsda fda fas df asdf asdf asd fad sfads f asdf ads fasd fasd fdas f <br />
</p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p> </p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/5loanmodguidebookfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">1000+ Asset Management - ListingREO.com</a></p>
<p><strong>Website:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">www.ListingREO.com</a><br />
<strong>Rank:</strong> #1<br />
<strong>Cost:</strong> $99.00<br />
<strong>Guarantee:</strong> 60 Day Money Back<br />
<strong>Description: </strong>Absolutely, hands down, the best list of Banks, Lenders and Asset managers we have found! With over 1,000 contacts on this list, <strong>ANYONE</strong> can start listing REOs and processing BPOs! While most lists include main contact numbers and general websites, this list contains individual contact information for the key decision makers at each bank. This is the critical information you need to succeed as a BPO and REO agent! In addition, this list provides a monthly update to ensure your REO list is fresh and up to date.</p>
<br />
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<br />
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/2doityourselfloanmodfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">1000+ Asset Management - ListingREO.com</a></p>
<p><strong>Website:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">www.ListingREO.com</a><br />
<strong>Rank:</strong> #1<br />
<strong>Cost:</strong> $99.00<br />
<strong>Guarantee:</strong> 60 Day Money Back<br />
<strong>Description: </strong>Absolutely, hands down, the best list of Banks, Lenders and Asset managers we have found! With over 1,000 contacts on this list, <strong>ANYONE</strong> can start listing REOs and processing BPOs! While most lists include main contact numbers and general websites, this list contains individual contact information for the key decision makers at each bank. This is the critical information you need to succeed as a BPO and REO agent! In addition, this list provides a monthly update to ensure your REO list is fresh and up to date.</p>
<br />
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p><br />
</p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/3theloandmodkitfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">1000+ Asset Management - ListingREO.com</a></p>
<p><strong>Website:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">www.ListingREO.com</a><br />
<strong>Rank:</strong> #1<br />
<strong>Cost:</strong> $99.00<br />
<strong>Guarantee:</strong> 60 Day Money Back<br />
<strong>Description: </strong>Absolutely, hands down, the best list of Banks, Lenders and Asset managers we have found! With over 1,000 contacts on this list, <strong>ANYONE</strong> can start listing REOs and processing BPOs! While most lists include main contact numbers and general websites, this list contains individual contact information for the key decision makers at each bank. This is the critical information you need to succeed as a BPO and REO agent! In addition, this list provides a monthly update to ensure your REO list is fresh and up to date.</p>
<br />
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p> </p>
<p align="center"> </p>
<div class = "footer"> Copyright 2007 © LoanModificationsReviews. All rights reserved<br />
<a href = "#">Term of Use</a> / <a href = "#">Privacy Policy</a><br />
</div>
<p class="a3"> </p>
</div>
</body>
</html>
<script language='javascript' src='https://a12.alphagodaddy.com/hosting_ads/gd01.js'></script>Hi Nadia,
I followed your instructions but it is still left justifying the site. The site link is http://www.seanwooduf.com
I'll paste the html code again. Thank you for you fast response!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loan Modification Reviews For You | Get a Loan Modification Today!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.header .header_center p {
font-size: 16px;
text-align: left;
.header .woman p {
color: #75B4EA;
font-weight: bold;
font-size: 24px;
font-family: helvitca;
.content p {
text-align: center;
color: #C1D3FB;
.content p {
color: #000;
.content p {
font-size: 12px;
text-align: left;
.a {
font-size: 24px;
.content a {
color: #545454;
a2 {
color: #545454;
.a3 {
color: #000;
font-size: 24px;
text-align: center;
p {
text-align: left;
font-size: 11px;
.content .a3 .a3 {
text-align: center;
.content .a3 .a3 {
text-align: center;
.a5 {
font-size: 36px;
.input br {
text-align: center;
.a15 {
text-align: center;
a:link {
color: #FF3;
a:visited {
color: #033;
font-size: 18px;
body {
text-align:center;
background-color: white;
#contents
margin-top: 10px;
margin-bottom: 10px;
margin-right:auto;
margin-left:auto;
width: 766px;
padding: 10px;
background-color: #FFF;
color: #000;
text-align: center;
#container {
width: 766px;
margin: 0 auto;
-->
</style>
</head>
<body>
<div id="container">
<div class = "header">
<div class = "woman">
<p> </p>
<p>HomeLoanModificationReviews.com</p>
</div>
<div class = "header_center">
<p>GET THE TOOLS YOU NEED TO MODIFY YOUR MORTGAGE<br />
</p>
<p><a href = "#">Loan Modification Tool Reviews For You</a> </p>
</div>
<div class = "navigation">
<div class = "navigation_links"></div>
</div>
</div>
<p> </p>
<p> </p>
<h1 align="center" class="a5"> Loan Modifications are Easy </h1>
<h1 align="center" class="a5">Loan Modification Reviews For You</h1>
<p align="center"> </p>
<p><strong>Do not be fooled</strong> by any guru, system or web site that tells you that you can not do Loan Modiciationst . Making your home affordable requires agent hard work and the right tools you need to modify your mortgage.<br />
<br />
We've reviewed all of the popular Loan Modification Kits out there and we're going to tell you <strong>which are worth the money and which to avoid! </strong><br />
<br />
<strong>save you time, money </strong>and help you generate Loan Modifications and <strong>succeed</strong> at making your home more affordable</p>
<p> </p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://e2429jtwou38ok2j6aer5gkc22.hop.clickbank.net/"><img src="images/160minloanmodfixed.jpg" alt="" width="300" height="252" /></a></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div class="a3"><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> 60-Minute Loan Modification</p>
<p><strong>Website:</strong><a href="http://e2429jtwou38ok2j6aer5gkc22.hop.clickbank.net/"> http://www.60-minuteloanmod.com</a><br />
<strong>Rank:</strong> #1<br />
<strong> Cost:</strong> $87.95<br />
<strong>Guarantee:</strong> 100% Money Back up to 60 Days<br />
<strong><img src="images/spacer.gif" alt="" width="1" height="1" />Description: </strong><br />
</p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p> </p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/4thediymortgagemodkitfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="92%" border="0">
<tbody>
<tr>
<td><div>
<div class="input"><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong></p>
<p class="input"><strong>Website:</strong><br />
<strong>Rank:</strong> #2<br />
<strong>Cost:</strong><br />
<strong>Guarantee:</strong><br />
<strong>Description: </strong>sdafsdfsdf asdf sadfsd fasdf asdf asdf asdf asd fsdaf asdf asd fasd fasd fasd fas df asdf asdf asd fasd f asdf dasf asd fasd fa sdf asdf asd fsad fasd fa sdf asd fasd f asdf asd fasd fasd f asdf asd fasd f asdf asd fasd fasd f asdf asd fasd f asdf daf das fsda fda fas df asdf asdf asd fad sfads f asdf ads fasd fasd fdas f <br />
</p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p> </p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/5loanmodguidebookfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">1000+ Asset Management - ListingREO.com</a></p>
<p><strong>Website:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">www.ListingREO.com</a><br />
<strong>Rank:</strong> #1<br />
<strong>Cost:</strong> $99.00<br />
<strong>Guarantee:</strong> 60 Day Money Back<br />
<strong>Description: </strong>Absolutely, hands down, the best list of Banks, Lenders and Asset managers we have found! With over 1,000 contacts on this list, <strong>ANYONE</strong> can start listing REOs and processing BPOs! While most lists include main contact numbers and general websites, this list contains individual contact information for the key decision makers at each bank. This is the critical information you need to succeed as a BPO and REO agent! In addition, this list provides a monthly update to ensure your REO list is fresh and up to date.</p>
<br />
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<br />
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/2doityourselfloanmodfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">1000+ Asset Management - ListingREO.com</a></p>
<p><strong>Website:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">www.ListingREO.com</a><br />
<strong>Rank:</strong> #1<br />
<strong>Cost:</strong> $99.00<br />
<strong>Guarantee:</strong> 60 Day Money Back<br />
<strong>Description: </strong>Absolutely, hands down, the best list of Banks, Lenders and Asset managers we have found! With over 1,000 contacts on this list, <strong>ANYONE</strong> can start listing REOs and processing BPOs! While most lists include main contact numbers and general websites, this list contains individual contact information for the key decision makers at each bank. This is the critical information you need to succeed as a BPO and REO agent! In addition, this list provides a monthly update to ensure your REO list is fresh and up to date.</p>
<br />
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p><br />
</p>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/3theloandmodkitfixed.jpg" alt="" width="300" height="252" /></td>
<td><img src="images/spacer.gif" alt="" width="10" height="10" /></td>
<td valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td><img src="images/t1.jpg" alt="" width="527" height="33" /></td>
</tr>
<tr>
<td background="images/t2.jpg"><table cellspacing="0" cellpadding="0" width="90%" border="0">
<tbody>
<tr>
<td><div>
<div><img src="images/title_customer_rating.gif" alt="" width="111" height="13" /><img src="images/check.gif" alt="" width="18" height="17" hspace="5" /><img height="17" alt="" hspace="0" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /><img height="17" alt="" hspace="5" src="images/check.gif" width="18" /></div>
<p><strong> Company:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">1000+ Asset Management - ListingREO.com</a></p>
<p><strong>Website:</strong> <a href="http://1.reosecret.hop.clickbank.net/?tid=REO4AGENT" target="_blank">www.ListingREO.com</a><br />
<strong>Rank:</strong> #1<br />
<strong>Cost:</strong> $99.00<br />
<strong>Guarantee:</strong> 60 Day Money Back<br />
<strong>Description: </strong>Absolutely, hands down, the best list of Banks, Lenders and Asset managers we have found! With over 1,000 contacts on this list, <strong>ANYONE</strong> can start listing REOs and processing BPOs! While most lists include main contact numbers and general websites, this list contains individual contact information for the key decision makers at each bank. This is the critical information you need to succeed as a BPO and REO agent! In addition, this list provides a monthly update to ensure your REO list is fresh and up to date.</p>
<br />
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><img src="images/t3.jpg" alt="" width="527" height="33" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="3"><img height="10" alt="" src="images/spacer.gif" width="10" /></td>
</tr>
</table>
<p> </p>
<p align="center"> </p>
<div class = "footer"> Copyright 2009 © Home LoanModificationsReviews. All rights reserved<br />
<a href = "#">Term of Use</a> / <a href = "#">Privacy Policy</a><br />
</div>
<p class="a3"> </p>
</div>
</body>
</html>
<script language='javascript' src='https://a12.alphagodaddy.com/hosting_ads/gd01.js'></script> -
Hi, I am looking for some help getting this layout using divs working correctly. It will be going inside an existing spry tabbed panel. At the moment the styles are inline but I will be moving them to my external style sheet once it is working. What I am looking to do is create a div that will containg the details of a product, also contained in the div will be another div floated to the right containing the product image. The outer div will vary in height so I want the inner div that contains the image to match the height of the outer div, with the image being centered horizontaly and vertically if possible, the image will probably vary in size as well. See mockedup image below. Below that I have put the code I have got so far
<div style="border:solid 1px #000; padding:0px 0px 0px 10px; margin: 5px 0px 0px 0px">
<div style="width:150px; border:solid 0px 0px 0px 1px #000; float:right;"><img name="" src="" width="100" height="100" alt="" /> </div>
<h4>Universal Framing Anchor (A35)</h4>
<p>The A35 Anchor features an exclusive bending slot which allows instant and accurate bending on-site. The balanced and completely reversible design of the A35 makes it suitable for a wide variety of applications.</p>
<p><a href="http://www.strongtie.co.uk/products/type.php?typeID=10&familyID=7" target="_blank">"A35" Tech Data @ www.strongtie.co.uk</a></p>
</div>
Thanks for any help,
RichardI would argue against this method for the following reasons.
First, resizing the image dynamically would require bringing in a library like JQuery to read the height of an element after the page loads and then adjust the image accodingly.
Second, as you increase the size of an image it will be more blurry, or on the flip side, if the image is large and has to be scaled down, you force users to download images larger than what is necessary increasing your page load times depending on the amount of products per page.
From a user's standpoint, my experience has been that if you make images larger, it will draw more attention to that item over your other items, is that what you want to do?
Then depending on how long the descriptions are, you also increase the amount of scrolling on your page. If the descriptions are that long your best bet may be to do a brief description on this "listing" page and then have the user click on something to bring them to a detailed page.
if you still want to move forward with the JQuery method post back and we can try to help you go that route. -
I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
width:97%;
#container {
min-height: 1000px;
width:100%;
min-width:850px;
border-color:#000;
border: solid 2px;
alignment-baseline:middle;
margin:25px;
#header {
float:left;
#collage {
float:right;
width:202px;
#menu {
margin-top:20px;
height:30px;
float:left;
clear:left;
#MenuBar1 {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
clear:inherit;
#meat {
float:left;
clear:left;
/* [disabled]max-width:600px; */
padding:20px;
padding-left:40px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
clear:both;
width:100%;
height:auto;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Welcome to KIDS care Colorado.com!</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><span id="MenuBar1"><a href="#">Home</a>
</span>
</div>
</li>
<li><span id="MenuBar1"><a href="#">Programs</a></span></li>
<li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
<li><span id="MenuBar1"><a href="#">Donate</a></span></li>
<li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>
<!-- TemplateBeginEditable name="meat" -->
<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>
<!-- TemplateEndEditable -->
<div id="footer">
<div align="center">
<p> </p>
<p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
<p>PO Box 19442 • Boulder, CO 80308
</p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Need Help Centering Page in Browser Window
I'm designing my pages by creating a graphic framework in
Photoshop, slicing and exporting images into css using Fireworks to
a Dreamweaver html page. These pages look great; but they load into
the upper left corner of the browser window
I was taking a Dreamweaver class at the Denver Art Institute,
that was worthless. I dropped the class after the 4th week and am
now teaching myself. I asked the teacher how to center this kind of
page in a browser window, so the page would behave like most
webpages, centering as you change the width of the browser window.
I also wanted to add a repeating pattern in a background image. She
told me that she didn't know how, that I would have to build the
background into my Photoshop file. So, that's what I've been doing.
However, when people with smaller monitors change pages within a
site the built-in background requires them to recenter the page
manually each time.
Is there a way to center the page and add a background image
that is not built in? I've tried using Dreamweaver's background
image and margins in the Page Properties; but that just pushes the
page to the upper left and adds the background to the right and
bottom of the page.
Please visit:
http://www.livingwater.la,
http://www.renegadegraphics.biz
and
http://www.dentalmatchmakers.net
for examples.
Thanks for your help.
Mary>I was taking a Dreamweaver class at the Denver Art
Institute, that was worthless
Yes, those classes usually are worthless because they focus
on using the tool without giving you the proper foundation for
understanding and managing html and css. Unfortunately, all of the
example sites you gave you AP Divs (layers) as a primary layout
method, which is a terrible approach. AP Divs should be used rarely
if ever, and only when you understand how they work. When the
visitors font is sized differently than you expected, the site
falls apart. The correct approach is to learn web
design/development outside of the context of a specific
application.
http://www.w3schools.com/html/
is a good place to start for a basic understanding of html and css.
And some basic layout techniques can be found here:
http://apptools.com/examples/pagelayout101.php -
Help centering text in horizontal Nav bar
I have just built my styles for my Nav bar and i am trying to figure out how to place everything centered in the div.
at the moment they are offset to the left. Fairly new to this.
here is my CSS code and underneath the HTML
Thanks so much for any help you can give me
J
ul.nav {
background-color: #FFF;
padding-left: 15px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #ababab;
border-top-color: #afafaf;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
text-decoration: none;
color: #666;
line-height: 2.5;
display: inline-block;
padding-right: 15px;
padding-left: 15px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ababab;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #09F;
background-color: #FFF;
ul.nav li {
display: inline;
/* ~~ The footer styles ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
</div>
<div id="navbar">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Articles</a>
</li>
<li><a href="#">Archives</a>
<li><a href="#">Local Reporter</a>
</li><li><a href="#">Sign up</a>
</li><li><a href="#">Contact Us</a></li></ul>
</div>
Thanks again!ahh sorry...here you go
ul.nav {
background-color: #FFF;
padding-left: 15px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #ababab;
border-top-color: #afafaf;
width: 960px;
margin-right: auto;
margin-left: auto;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
text-decoration: none;
color: #666;
line-height: 2.5;
display: inline-block;
padding-right: 15px;
padding-left: 15px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ababab;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #09F;
background-color: #FFF;
ul.nav li
/* ~~ The footer styles ~~ */
.footer
.weather
#weather sidebar1
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a
or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1
-->
</style></head> -
AP a Div inside a centered DIV
I've never got this understood. I have a Container DIV, set
to auto center. I'm using one of the presets that DW8 gives you. I
need put a small DIV in the upper right corner, that stays in the
exact spot even when browsers are widened...let me re-phrase. I
want the little DIV to be Absolutely Positioned, but using the XY
coordinates of my main, centered container.
I made a DIV, called it Absolute, moved it where I want it,
and of course it stays put when I widen the browser window. It is
using the whole browser window for the XY coordinates. That's fine,
and I understand it's supposed to work that way.
But, I also thought that if you put a DIV inside another, it
will use the XY of that div, not the whole page.
How do I do this?This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"synterx" <[email protected]> wrote in
message
news:[email protected]...
> I've never got this understood. I have a Container DIV,
set to auto
> center. I'm
> using one of the presets that DW8 gives you. I need put
a small DIV in the
> upper right corner, that stays in the exact spot even
when browsers are
> widened...let me re-phrase. I want the little DIV to be
Absolutely
> Positioned,
> but using the XY coordinates of my main, centered
container.
>
> I made a DIV, called it Absolute, moved it where I want
it, and of course
> it
> stays put when I widen the browser window. It is using
the whole browser
> window
> for the XY coordinates. That's fine, and I understand
it's supposed to
> work
> that way.
>
> But, I also thought that if you put a DIV inside
another, it will use the
> XY
> of that div, not the whole page.
>
> How do I do this?
> -
Help! Divs extend beyond parent container! Clearing doesn't seem to work!
My "mainContent" div extends beyond the "Container" div. It seems that I've tried everything--clearing doesn't seem to work.
Help!
Here is my css:
@charset "UTF-8";
/* CSS Document */
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFF;
.twoColFixRtHdr #container {
width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
text-align: left; /* this overrides the text-align: center on the body element. */
font-family: Arial, Helvetica, sans-serif;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
top: 10px;
padding-top: 10px;
clear: both;
.twoColFixRtHdr #header {
height: 180px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #999;
border-bottom-color: #000;
margin-top: 5px;
margin-bottom: 0px;
.twoColFixRtHdr #container #sidebar1 img {
padding-top: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
margin-bottom: 0px;
padding-bottom: 10px;
padding-left: 10px;
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixRtHdr #sidebar1 {
width: 315px;
padding: 0px;
top: 200px;
float: right;
.twoColFixRtHdr #mainContent {
width: 643px;
padding-top: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
overflow: hidden;
top: 230px;
position: absolute;
clear: right;
.twoColFixRtHdr #footer {
background:#DDDDDD;
top: 50px;
clear: both;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 0px;
line-height: 0px;
.spacer {
clear: both;
.twoColFixRtHdr #container #mainContent #article_main_head {
font-family: Arial, Helvetica, sans-serif;
top: 10px;
width: 635px;
float: left;
.twoColFixRtHdr #container #mainContent #article_img {
width: 630px;
float: left;
margin-top: 10px;
clear: both;
.twoColFixRtHdr #container #mainContent #article_main_txt {
float: right;
width: 450px;
clear: both;
padding-top: 10px;
height: 500px;
.twoColFixRtHdr #container #mainContent #article_main_pq {
clear: both;
float: left;
width: 180px;
margin-top: 100px;
Here is my html:
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
Loading news. please wait...
Loading news. please wait...
Loading news. please wait...
FooterThis CSS sends up a red flag:
.twoColFixRtHdr #mainContent {
width: 643px;
padding-top: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
overflow: hidden;
/******DELETE THE FOLLOWING*****/
top: 230px;
position: absolute;
clear: right;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Hi, I'm kind of new to CSS and I want to make a website that
has an IFrame centered in the middle of the page. I cannot seem to
figure out how to do this.
I have attached the code.
Thanks!Wrap two DIV tags around your slide show and create a style rule for the first DIV as text-align: center; and for the second DIV text-align: left;
I hope this helps.
Ben -
Please help centering website!!
Hello,
After researching and getting lost with so many different responses, I figured I'd ask myself to get the response I needed. I use Dreamweaver CS 5.5 and I am having a ton of trouble figuring out how to make it so my website is centered on all monitors and devices. Here is the current website: http://www.kyledake.com/
However, I am removing and adding a lot of stuff, so I thought now would be a good time to fix things. Here is the code of the homepage I am fixing up; after removing a lot fo the content. I apologize for posting all of it, I don't know specifially where to look. I use a lot of DIVs too, so if anyone has an alternate solution to get things on the site where I want them, please let me know:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Kyle Dake Official Website</title>
<style type="text/css">
#apDiv1 {
position:absolute;
left:247px;
top:16px;
width:1041px;
height:1336px;
z-index:1;
background-color: #FFFFFF;
#Menu {
font-family: arial;
</style>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
a:link {
color: #8A0404;
text-decoration: none;
a:visited {
text-decoration: none;
color: #8A0404;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
color: #000000;
text-align: center;
#apDiv5 strong {
font-size: 15px;
#apDiv16 {
position:absolute;
left:436px;
top:398px;
width:633px;
height:939px;
z-index:16;
background-image: url(background_content.png);
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
#apDiv17 {
position:absolute;
left:1290px;
top:-5px;
width:2392px;
height:1350px;
z-index:17;
background-color: #000000;
background-image: url(background.png);
#apDiv18 {
position:absolute;
left:-5px;
top:-5px;
width:251px;
height:1350px;
z-index:18;
background-color: #000000;
background-image: url(Background_1.png);
#apDiv19 {
position:absolute;
left:763px;
top:597px;
width:397px;
height:166px;
z-index:19;
body {
background-repeat: no-repeat;
background-color: #000;
</style>
<style type="text/css">
#apDiv4 {
position:absolute;
left:430px;
top:125px;
width:633px;
height:257px;
z-index:20;
</style>
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="dakevid_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="dakevid_videolb/overlay-minimal.css"/>
<script src="dakevid_videolb/jquery.js" type="text/javascript"></script>
<script src="dakevid_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="banner_files/banner-rotator.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="banner_files/jquery.banner-rotator.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#JQBannerRotator1").fdBannerRotator({keyboardEnabled:true,frameShadowEnabled:true,slid eWidth:615,slideHeight:250,slideScaleMode:"none",slideTransition:{type:"fade",duration:300 ,easing:"easeOutQuad"},slideDuration:5000,slideAutoplay:true,slidePauseOnHover:true,timerP osition:"top",timerVisible:true,captionAnimationSpeed:500,captionAnimationEasing:"easeOutQ uad",controlDirectionEnbled:false,controlDirectionHide:true,controlPlayEnabled:false,navig ationEnabled:true,navigationPositionTop:235,navigationPositionMargin:15,navigationAlign:"r ight",navigationThumbEnabled:false,navigationThumbServerScipt:"",navigationThumbSearch:".j pg",navigationThumbReplace:"_thumb.jpg",navigationThumbWidth:150,navigationThumbHeight:65, navigationThumbAnimationSpeed:200,navigationThumbAnimationEasing:"easeOutQuad"});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#apDiv24 {
position:absolute;
left:441px;
top:406px;
width:627px;
height:91px;
z-index:25;
text-align: center;
#apDiv16 p .twitter-timeline {
text-align: center;
#apDiv25 {
position:absolute;
left:435px;
top:1294px;
width:636px;
height:29px;
z-index:26;
font-size: 13px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
#apDiv26 {
position:absolute;
left:438px;
top:1276px;
width:633px;
height:23px;
z-index:27;
font-size: 13px;
text-align: center;
#apDiv26 a {
color: #000;
font-weight: bold;
#apDiv25 a {
color: #000;
#apDiv35 {
position:absolute;
left:437px;
top:1250px;
width:202px;
height:39px;
z-index:36;
a {
font-family: Arial, Helvetica, sans-serif;
#apDiv7 {
font-weight: normal;
font-size: 30px;
#apDiv8 {
position:absolute;
left:592px;
top:516px;
width:327px;
height:334px;
z-index:39;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
#apDiv10 {
position:absolute;
left:599px;
top:806px;
width:107px;
height:36px;
z-index:41;
#apDiv11 {
position:absolute;
left:806px;
top:804px;
width:95px;
height:35px;
z-index:42;
</style>
</head><body onload="MM_preloadImages('facebook-button-1hover.png','twitter_1hover.png')">
<div id="apDiv1"><a href="index.html"><img src="Header.png" width="1041" height="92" vspace="15" border="0" /></a></div>
<div id="apDiv16">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="JQBannerRotator" id="apDiv4">
<div id="JQBannerRotator1" class="JQBannerRotator">
<div class="overlay"></div>
<ul class="data">
<li><a href="eiwahof.html"><img class="slide" src="banner_files/slides/eiwa.jpg" alt=" "/></a></li>
<li><a href="grandprix.html"><img class="slide" src="banner_files/slides/grandprix.jpg" alt=" "/></a></li>
<li><a href="USAvRussia.html"><img class="slide" src="banner_files/slides/RUSSIAMATCH.jpg" alt=" "/></a></li>
<li><a href="dakejoinscornell.html"><img class="slide" src="banner_files/slides/coaching.jpg" alt=" "/></a></li>
</ul>
</div>
</div>
<div id="apDiv24"><img src="Header2.png" width="338" height="93" align="middle" /></div>
<div id="apDiv25">All Rights Reserved <a href="http://x-celworldwide.com/index.html">X-Cel Worldwide 2013</a> | © Kyle Dake 2013 | This is the official Kyle Dake Website </div>
<div id="apDiv26">Site Design <a href="http://www.riccioproductions.com/" target="_new">Riccio Productions LLC</a></div>
<div id="apDiv35"><a href="http://www.ai-sport.com/" target="_new"><img src="ai_wrestling.png" width="205" height="43" border="0" /></a></div>
<div id="apDiv8"> Welcome to KyleDake.com, the official home to wrestling's most prominent young super-star, Kyle Dake. Here you will find everything related to Kyle, from news, photos, videos, merchandise, and more.Browse the site, and check out the new videos, photos, and merchandise. Also, stay updated on Kyle Dake wrestling events, news, and developments from speaking occasions, award receptions, and all other public appearances. Be sure to follow Kyle on Twitter and Like the Official Fan Page on Facebook! </div>
<div id="apDiv10"><a href="https://www.facebook.com/KyleDakeOfficial" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','facebook-button-1hover.png',1)"><img src="facebook-button-1.png" name="Image19" width="81" height="33" border="0" id="Image19" /></a></div>
<div id="apDiv11"><a href="https://twitter.com/kyledake444" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','twitter_1hover.png',1)"><img src="twitter_1.png" name="Image22" width="81" height="33" border="0" id="Image22" /></a></div></div>
</body>
</html>Sorry for the wait, had unexpected visitors.
Have a look at the following. It will give you an idea of a layout without the nasty AP-divs.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
background: #000000; /* place background image here */
body {
width: 1041px;
margin: auto; /* keeps the page centered */
font-family: Arial, Helvetica, sans-serif;
a {
color: #8A0404;
text-decoration: none;
a:hover {
color: #000;
.header {
height: 92px;
background: url(Header.png);
.header .nav {
width: 450px;
float: right;
margin-top: 55px;
.header .nav span {
font-size: 12px;
font-weight: bold;
color: #8a0404;
margin-left: 25px;
.navbar {
background: #FFFFFF;
line-height: 35px;
padding: 10px;
.navbar .nav {
width: 50%;
float: left;
.navbar .hashtag {
text-align: right;
font-size: 30px;
color: #8a0404;
font-weight: bold;
.content {
background: #FFFFFF;
.aside {
width: 395px;
float: right;
color: #8a0404;
background: #FFFFFF;
.section.main {
background: #FFFFFF;
width: 646px;
float: left;
.article {
background: #FFFFFF url(background_content.png) repeat-y;
min-height: 889px;
padding: 15px;
.centertxt {
text-align: center;
.righttxt {
text-align: right;
padding-right: 15px;
img.center {
display: block;
margin: auto;
</style>
<link rel="stylesheet" href="dakevid_videolb/videolightbox.css" />
<link rel="stylesheet" href="dakevid_videolb/overlay-minimal.css"/>
<link rel="stylesheet" href="banner_files/banner-rotator.css" />
<body>
<div class="header">
<div class="nav">
<img src="twitter_birdhover.png" alt=""/>
<img src="fbhov.png" alt=""/>
<span>
<a href="index.html">Home</a> | <a href="about.html">About</a> | <a href="http://www.xcelonlinestore.com/collections/kyle-dake-official-merchandise" target="_new">Merchandise</a> | <a href="media.html">Media </a>| <a href="sponsors.html">Sponsors </a> | <a href="contact.php">Contact</a><span>
</div>
</div>
<div class="navbar">
<div class="nav">
<a href="index.html">Home</a> | <a href="news.html">News</a> |<a href="representation.html"> Representation</a> | <a href="events.html">Events</a>
</div>
<div class="hashtag">
<span>#Dakecountry</span>
</div>
</div>
<div class="content">
<div class="section main">
<div id="JQBannerRotator1" class="JQBannerRotator">
<div class="overlay"></div>
<ul class="data">
<li><a href="eiwahof.html"><img class="slide" src="banner_files/slides/eiwa.jpg" alt=" "/></a></li>
<li><a href="grandprix.html"><img class="slide" src="banner_files/slides/grandprix.jpg" alt=" "/></a></li>
<li><a href="USAvRussia.html"><img class="slide" src="banner_files/slides/RUSSIAMATCH.jpg" alt=" "/></a></li>
<li><a href="dakejoinscornell.html"><img class="slide" src="banner_files/slides/coaching.jpg" alt=" "/></a></li>
</ul>
</div>
<div class="article">
<h3>Article</h3>
<p>It is the star to every wand'ring bark, oh, no, it is an ever fixed mark within his bending sickle's compass come. But bears it out even to the edge of doom. Love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove. Within his bending sickle's compass come; admit impediments; love is not love let me not to the marriage of true minds.</p>
<p>But bears it out even to the edge of doom. If this be error and upon me proved, that looks on tempests and is never shaken. Admit impediments; love is not love or bends with the remover to remove.</p>
<p>Which alters when it alteration finds, love's not time's fool, though rosy lips and cheeks whose worth's unknown, although his height be taken. If this be error and upon me proved, oh, no, it is an ever fixed mark let me not to the marriage of true minds. Or bends with the remover to remove. But bears it out even to the edge of doom. That looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks whose worth's unknown, although his height be taken.</p>
</div>
</div>
<div class="aside">
<img src="gear.jpg" alt=""/>
<img src="signed.png">
<img src="dakevid_videolb/thumbnails/0.png" alt=""/>
<div class="centertxt"><small>Kyle Dake Career Highlight - Official</small></div>
<p class="righttxt">View Full Video Gallery</p>
<img src="photostring.png" alt=""/>
<p class="righttxt">View Full Video Gallery</p>
<img src="cf2.png" alt="" class="center"/>
<img src="mil_tools.png" alt="" class="center" style="margin-top: -60px;"/>
</div>
</div>
</body>
</html>
As said, it is only the layout, I ran out of time. You will have to apply the finishing touches.
Maybe you are looking for
-
In windows 8 I can't print to an Adobe PDF printer
Upgraded to windows 8 (forced to) and reloaded Adobe 8. Even though it created the printer (PDF) it returns a printer error everytime you try to print to it.
-
Illustrator running very slowly, problem with layers. Nothing happens when clicking on triangles to open and collapse layers. Can turn them on and off by clicking the eye. Can also create new layers and delete things. What should I do? Working in win
-
"camera is in use by another application" message
Hi there, I've been dealing with this problem for a whole day now... I tried following the troubleshooting steps described in some posts here and nothing. Deleted QT, trashed its preferences, done the same thing AV chat and its preferences. Repaired
-
Hey everyone, I'm installing a Pioneer radio and I have to use the VGA to Lightning connector, that leaves me with a 2' long lightning cable. I could run an extension cable, then I'd just always have that cable hanging there, I wanted to see if I cou
-
Hi all, I have created an extension to an IDoc SISCSO01 and using the process code SD10.Where exactly should I write the code to fill the extended segments? Can we use customer exits in Function module of the process code to write the code? If so whi