...

View Full Version : CSS Problem with Menu and Slideshow



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!

abduraooft
02-13-2012, 06:17 AM
It's easy to centre them vertically, by just set line-height: 40px; to #linkmenu li a

However, it's not easy to centre them horizontally since you can't get the exact width required to hold all the list items. Have a look at the technique given at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

tomtrain
02-13-2012, 06:59 AM
Thanks, the line-height worked great, I had tried using that but I think I put it in on linkmenu li instead so it didn't work.

I bookmarked the page you showed me and I'll look into that tomorrow, looks like a great walkthrough and there's probably some other stuff I can learn there as well.
(edit) that worked great!

Any idea why the slideshow is not sticking to the 615x350 space I want it to?

tomtrain
02-17-2012, 11:46 PM
Sorry to bump this but can anyone take a look?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum