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

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





    Future


  • Life
  • 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



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!

jrock
jrock's picture
Offline
Regular
Last seen: 13 years 25 weeks ago
Timezone: GMT-5
Joined: 2008-04-16
Posts: 34
Points: 0

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;
}

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

page centering

thanks, jrock. you rock!