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
#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