I have been working with html, javascript and css for about 3 months. I put up a web site for my family (which I am using for a lot of my practice in web design). The page in question is <!-- w --><a class="postlink" href="http://www.mjmcdonaldfam.com">www.mjmcdonaldfam.com</a><!-- w -->. On the home page I am running into a lot of problems. On my monitor I don't have many, but other monitors I run into problems. People tell me the Van Gogh is sometimes covering parts of text. Also when I shrink the browser window everything in the center starts to move to the left and cover my side bar. I have noticed on other sites, such as html goodies, that when the window is "shrunk" that everything in the middle just stays in the middle and centers itself accordingly. I know I can fix this with css, but I am not sure how. I used the z-index thing for the pic, but its not working right, in case you were wondering. Any help would be appreciated. ThanksIf for some reason you cant get the source from the page here is the css at least:
The linkbar is were I have my left-hand navigation sidebar.
<style type="text/css">
<!--
div.linkbarh {
font-family:sans-serif;
font-weight:bold;
color:black;
line-height:40px;
top:55px;
width:200px
}
div.linkbarl {
font-family:helvetica,serif;
line-height:30px;
margin-left:20px;
width:200px
}
.blink {
text-decoration:blink
}
a:link {
color:#000073;
text-decoration:none
}
a:hover {
color:red;
font-variant:small-caps
}
.stuff {
color:#000073;
z-index:2;
font-family:avantgarde,serif;
font-size:15pt;
line-height:1.1
}
.copy {color:black;
font-family:avantgarde,serif;
font-size:8pt
}
#centpic {
position:absolute;
z-index:1;
margin-left:50%;
margin-right:50%;
left:-180px;
top:200px
}
#date {
position:absolute;
margin-left:50%;
left:-90px;
top:44em;
}
-->
</style>
The linkbar is were I have my left-hand navigation sidebar.
<style type="text/css">
<!--
div.linkbarh {
font-family:sans-serif;
font-weight:bold;
color:black;
line-height:40px;
top:55px;
width:200px
}
div.linkbarl {
font-family:helvetica,serif;
line-height:30px;
margin-left:20px;
width:200px
}
.blink {
text-decoration:blink
}
a:link {
color:#000073;
text-decoration:none
}
a:hover {
color:red;
font-variant:small-caps
}
.stuff {
color:#000073;
z-index:2;
font-family:avantgarde,serif;
font-size:15pt;
line-height:1.1
}
.copy {color:black;
font-family:avantgarde,serif;
font-size:8pt
}
#centpic {
position:absolute;
z-index:1;
margin-left:50%;
margin-right:50%;
left:-180px;
top:200px
}
#date {
position:absolute;
margin-left:50%;
left:-90px;
top:44em;
}
-->
</style>