1 reply [Last post]
abromell
Offline
newbie
DC
Last seen: 13 years 30 weeks ago
DC
Joined: 2008-04-17
Posts: 4
Points: 0

Hi,
Thanks for trying to answer my question! My website is http://www.ballersblock.com and I am having trouble centering the page horizontally. From what I've learned in html, I just wanted to put all the element blocks inside my wrapper, and center the page. I used absolute positioning and I've tried several ways to get the whole wrapper centered. Suggestions? Also, I used paint .net for my background images, and they do not show up properly. When I upload images from my camera, they are fine, but for some reason I'm having trouble with .jpg and .png images. Any suggestions? Thanks in advance.

Baller's Block






  • Future


  • Life

  • Health

  • Employment

  • Starting a Business

  • Education



  • Family


  • Prenuptial Agreements

  • Marriage

  • Planning for Children

  • Child Support/Custody

  • Divorce

  • Caring for Parents



  • Welcome to the Block


  • Cars

  • Travel

  • Jewelry

  • Treasure



  • Finances


  • Saving and Budgeting

  • Investing

  • Life/Health Insurance

  • Trust Funds

  • Retirement

  • Wealth Preservation




  • Find a Lawyer


  • Lawyer Lookup



a{ color: rgb(0,50,50); } a:hover { color: red; } a:visited{ color: rgb(0,50,50); }

body{
background-image: url('Storm.JPEG');
background-color: purple;
text-align: center;
width: 760px;

}

.wrapper{
width: 760px;
text-align: left;
margin-left: auto;
margin-right: auto;


}

#banner{
color: rgb(0,50,50);
font-family: arial, helvetica, sans-serif;
height: 90px;
width: 760px;
text-align: center;
background-color: #ccc;
border-style: solid;
border-width: 2px;
border-left-width: 10px;
border-right-width: 10px;
border-color: green;
}

.future{
position: absolute;
top: 210px;
left: 110px;
width: 180px;
}
.family{
position: absolute;
top: 190px;
left: 470px;
width:180px;
}
.ballersblock{
border-width: 3px;
text-align: center;
position: absolute;
left: 290px;
top: 310px;
width: 180px;
}
.finances{
position: absolute;
left: 110px;
top: 410px;
width: 180px;
}
.lawyer{
position: absolute;
left: 470px;
top: 410px;
width: 180px;
}

#footer{

}

ul{
text-align: center;
font-size: 12px;
background-color: #ccc;
margin: 5px;
padding: 5px;
border-style: solid;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: green;
}

h1{
font-style: oblique;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
line-height: 26px;
}
h2{
font-style: oblique;
font-size: 10px;
line-height: 11px;
}
h3{
font-style: oblique;
font-size: 7.5px;
line-height: 6px;
font-style: italic;
font-weight: lighter;
}
h4{
text-align: center;
border-style: solid;
border-width: 1px;
border-left-width: 5px;
border-right-width: 5px;
border-color: green;
}

//mod edit: link made clickable
--gary.turner

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

#wrapper has to enclose the

#wrapper has to enclose the rest of the page. You have all those divs as siblings. Further, you're using absolute positioning, which means nothing exists as far as any other element is concerned.

Fix the wrapper, and make it position relative (you'll need that for the next step).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.