tomtrain
02-13-2012, 04:23 AM
Hi, I'm working on a site layout for my school but I've run into two problems that I've been trying to resolve for awhile with no luck.
Here is the site:
http://papertestsite.webs.com/index.htm
My problem is in the image slideshow I would like to set up. I got it as a freeware example and in the demo worked fine, but in my version the previous image doesn't disappear when the new one comes in, it is still partially visible on the left, and there's an annoying white space at the top. I want that black border near the top to be around the actual image.
Here is the relevant CSS...
.slideimage{
width:615px;
height:350px;
z-index:30;}
#container{
position:relative;
background:#FFFFFF;
height:350px;
z-index:10;}
#slider{
float:left;
position:relative;
overflow:hidden;
width:615px;
height:350px;
border:1px solid #000000;
margin-left:2px;
z-index:20;}
#slider ul{
position:absolute;
list-style:none;
top:0;
left:0;}
#slider li{
float:left;
width:615px;
height:350px;}
My other problem (resolved now)
I'm trying to get the text in the main link menu at the top under the banner to be centered (both vertically and horizontally). While I've had some luck using padding to space out the text, I've had no luck whatsoever getting it to be vertically centered in the middle, it refuses to budge from the top (if vertical-align:center is even the solution)
First problem resolved!
Any help would be greatly appreciated!
Here is the site:
http://papertestsite.webs.com/index.htm
My problem is in the image slideshow I would like to set up. I got it as a freeware example and in the demo worked fine, but in my version the previous image doesn't disappear when the new one comes in, it is still partially visible on the left, and there's an annoying white space at the top. I want that black border near the top to be around the actual image.
Here is the relevant CSS...
.slideimage{
width:615px;
height:350px;
z-index:30;}
#container{
position:relative;
background:#FFFFFF;
height:350px;
z-index:10;}
#slider{
float:left;
position:relative;
overflow:hidden;
width:615px;
height:350px;
border:1px solid #000000;
margin-left:2px;
z-index:20;}
#slider ul{
position:absolute;
list-style:none;
top:0;
left:0;}
#slider li{
float:left;
width:615px;
height:350px;}
My other problem (resolved now)
I'm trying to get the text in the main link menu at the top under the banner to be centered (both vertically and horizontally). While I've had some luck using padding to space out the text, I've had no luck whatsoever getting it to be vertically centered in the middle, it refuses to budge from the top (if vertical-align:center is even the solution)
First problem resolved!
Any help would be greatly appreciated!