my CSS is it wrong ?

Involved Joined: Apr 05, 2006 Posts: 263

hi
i have made a website for a freind of mine and designed it with CSS
it validates at 2.1 so i`m happy.

the problem being is when i try to add a 2nd css just for the Gallery page with Lightbox2

it break`s my page up and overrides the layout.css puting everything to the left instead of staying centered.

is there a way to fix this or should i use (dare i say it) Tables.

Posted: Fri May 20, 2011 7:08 am

Are there overlapping names/classes? Just curious.

Here is the css for the lightbox:

Code:

#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}


#lightbox img{ width: auto; height: auto;}


#lightbox a img{ border: none; }





#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }


#imageContainer{ padding: 10px; }





#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }


#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }


#imageContainer>#hoverNav{ left: 0;}


#hoverNav a{ outline: none;}





#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }


#prevLink { left: 0; float: left;}


#nextLink { right: 0; float: right;}


#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }


#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }





#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }





#imageData{   padding:0 10px; color: #666; }


#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   


#imageData #caption{ font-weight: bold;   }


#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         


#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}       





#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Posted: Fri May 20, 2011 7:23 am

thanks for that let you know how it goes

this is the website [ Only registered users can see links on this board! Get registered or login! ]

Posted: Fri May 20, 2011 7:32 am

Not sure if you know or not... but I'm working on a gallery module as I type this for RN specifically. It uses a lightbox as well. Just an FYI.

Check the "modules" forum and look for "Swank Xibit" for screenshots.

Posted: Fri May 20, 2011 10:23 am

no i did not see it yet , i had a quick look for a cms it look alright tbh. i might add it to my own when its finished ofcourse.

how would i add the css your wrote above, i`m a little confused when it comes to adding a second. i have tried it my way and it still puts my page out , so i guess it`s maybe me doing something wrong as i have only just started to learn to put css in my pages.

Posted: Fri May 20, 2011 10:26 am

You don't "add" the css I provided above... I was just pointing out the css of the lightbox you're using. I have no idea what you layout css is so I was asking if you happen to have overlapping names both css files that might cause an issue.

Posted: Fri May 20, 2011 10:55 am

no totaly different names

Posted: Fri May 20, 2011 11:00 am

Not sure then... is this lightbox live on the site you provided?? When I clicked an image earlier trying to test... it didn't show in the lightbox but rather showed the image directly.

Posted: Sat May 21, 2011 6:12 am

no
i got the code in the the header and the files uploaded ,the only thing i have not got is the href="css/lightbox.css" as it messes the page up i could upload it so you can see for yourself if it helps, cannot think of a way round it
without writing a complete new css just for my gallery page. frustrating it is.

Posted: Sun May 22, 2011 12:15 am

I would pad your main-body div. It looks odd having the text right next to the edge like that, IMO.

Posted: Sun May 22, 2011 8:07 am

it does look odd does it without padding, thanks for the 2nd opinion

Posted: Sun May 22, 2011 6:24 pm

(THIS ASSUMES YOU'RE USING RAVENNUKE)

the only thing i have not got is the href="css/lightbox.css" as it messes the page up

If you're trying to add the css this way... then you're going about it wrong and I could see how it would mess up.

if you want to add css (and javascript) to a page... this is the proper way to do it.
(not sure if caps mean anything... this is just the way I do it. This also assumes your css is housed within your module)

Css:

Code:

addCSSToHead('modules/Your_Module/css/lightbox.css','file');

Javascript:

Code:

addJSToHead('modules/Your_Module/js/script.js','file')

Posted: Mon May 23, 2011 5:16 am

its not raven i`m using.

its straight forward html with <head>href="layout.css" </head>for styling
i found a gallery to use using javascript, . i was on the clock so needed a quick fix till i have more time.

thanks for the help killing-hours

Posted: Mon May 23, 2011 12:11 pm

No problem. I understand you were just trying to throw something up there for them... but you may wan to take a look at how that gallery script doesn't work correctly on the page.

Try colorbox instead of that flash gallery script you have.
[ Only registered users can see links on this board! Get registered or login! ]

Simple to setup and get going. Make sure to associate the images so that they are in a "gallery" rather than individual images. Will look and act alot better than what you have there now. Just my .02 Wink

If you use this script or any other lightbox for that matter... put your images in a table so they are uniformed and try to size them all the same (say 100x100px) Will make your page look tons better and more professional.

-----------------------------

Edit****

Took about 10 mins to setup a 3 image gallery on your webpage. Use it as an example and build them something they will truly like. Wink

You can setup your entire gallery in about 15 mins total.

download: (THIS IS YOUR ACTUAL PAGE WITH COLORBOX INSTEAD OF THAT FLASH JUNK)
[ Only registered users can see links on this board! Get registered or login! ]

Posted: Mon May 23, 2011 3:52 pm

thanks for that, found colorbox yesterday and did it in 15 mins like you said , got to resize my images now.
finished all my little edits Sad

thanks for the help Killing-hours much apreciated.

Posted: Mon May 23, 2011 3:56 pm

Anytime.

Hope they like it.

Involved Joined: Jul 03, 2006 Posts: 273

I took a quick look at source and you have conflicting CSS tag names not to mention you call layout.css twice in head and your litebox.css is actually styled like an html document with document declaration and a body etc. You need to clean that file up and remove/rename duplicate CSS declarations.