Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 1 Time in 1 Post

    CSS Problem with Menu and Slideshow

    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...

    Code:
    .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!
    Last edited by tomtrain; 02-13-2012 at 10:59 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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/b...rowser-support
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tomtrain (02-13-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 1 Time in 1 Post
    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?
    Last edited by tomtrain; 02-13-2012 at 10:53 PM.

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 1 Time in 1 Post
    Sorry to bump this but can anyone take a look?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •