Hello, and thanks in advance for any suggestions.
The first problem is that I can't get the background image to appear. I've tried several combinations of changing the url line, but I'm not sure what I'm doing wrong. The image is located in the same root folder as both my css and html files. Any suggestions?
Second, I am not sure what to do about absolute/relative or float positioning. I initially tried using float positioning, but could not get overlapping boxes as I would like, so I changed to using absolute positioning with 760px width. Now, on larger screens it just looks like a bunch of space on the right. Is there any way to just center the whole thing no matter the screen size, I guess like centering the wrapper horizontally on the page - like the way yahoo looks? Thanks for any suggestions.
The page is located at ballersblock.com
Here is the html
Baller's Block
- Life
- Employment
- Starting a Business
- Education
Future
- Prenuptial Agreements
- Marriage
- Planning for Children
- Child Support/Custody
- Divorce
- Caring for Parents
Family
- Cars
- Travel
- Jewelry
- Treasure
Welcome to the Block
- Saving and Budgeting
- Investing
- Life/Health Insurance
- Trust Funds
- Retirement
- Wealth Preservation
Finances
- Lawyer Lookup
Find a Lawyer
Here is the CSS
a{
color: rgb(0,50,50);
}
a:hover {
color: red;
}
a:visited{
color: rgb(0,50,50);
}
ul{
text-align: center;
font-size: 1 em;
background-color: #ccc;
margin: 5px;
padding: 5px;
border-style: solid;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: rgb(0,150,150);
}
body{
background-image: url(awesomesunset.jpg);
}
#wrapper{
width: 760px;
}
h1{
font-style: neuropol;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
line-height: 26px;
}
h2{
font-style: arial narrow;
font-size: 10px;
line-height: 11px;
}
h3{
font-style: fantasy;
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: rgb(0,150,150);
}
#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: rgb(0,150,150);
}
.future{
position: absolute;
top: 210px;
left: 110px;
width: 180px;
}
.family{
position: absolute;
top: 165px;
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{
}
I've already checked out htmldog, which was VERY helpful, but I still couldn't figure these things out!
I could not get your
I could not get your awesomesunset.jpg file to load, so it must be a forsight on your part. check for case sensitive, ???
also to center create a parent box and add:
.boxname {
margin: auto auto;
}
page centering
thanks, jrock. you rock!