View Full Version : Positioning problems with CSS/stylesheet and other questions

11-07-2007, 02:58 AM
I decided to try and play with the stylesheet type that's on this page: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ for a layout I'm working on, but have run into a problem with it. The first among them, how do I get it so that the thumbnails are toward the center of the page? I still want the larger image to open up to the right of the thumbnails and have figured out how to relocate that, but I can't seem to get the thumbnail columns/rows to move toward the center of the page.

The other problem I've had is that while everything appears to be working as it should in Firefox, Epiphany, and in Sea Monkey, the thumbnails don't appear for me in Opera but the larger image does when I mouse over where the thumbnails are supposed to be whereas in Konqueror, I seem to have the opposite problem (IE is the only browser I haven't tested it out with yet). It's especially strange as I can view the page on Dynamic Drive just fine in both browsers I'm having problems with.

The coding for the stylesheet is as follows:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/

.thumbnail img{
border: 0% solid white;
margin: 0 1% 1% 0;

background-color: transparent;

.thumbnail:hover img{
border: 0% solid black;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 1%;
left: 50%;
border: 0% solid white;
visibility: hidden;
color: black;
text-decoration: none;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1%;

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 30%; /*position where enlarged image should offset horizontally */
z-index: 50;


The second question I have is, if I'm using two stylesheets for different things how do I code that? For example, I have one stylesheet that is my "main" stylesheet that dictates the look of the navigation and to set up the main layout of the site (such as where the various divs are located). If I want to add this stylesheet for just the content portion (which would be in the center div), how would I do so and still be able to make use of both at the same time?

I know that if I were to use only one stylesheet, I'd have to set it so to where it looked like this: <link rel="stylesheet" href="[URL of stylesheet]" />

On a related note, for the main stylesheet I'm using, if I wanted to set things up so that visitors can choose from an alternate stylesheet for the "look" of the site, how would I go about setting something like that up and what would be the best way of doing so?

Any and all help will be appreciated!:)

11-12-2007, 05:02 AM
Don't forget the whole link:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

You can set up links. I know there is another way using Javascript, I think but:
<li>Alternate style one: <a href="http://mysite.com/styles/reddragon.css">RedDragon</a></li>
<li>Alternate style two: <a href="http://mysite.com/styles/greenfrog.css">GreenFrog</a></li>