Need help with 3 elements for site sprucing

[jaidanwolf]

Hey guys, now that my site is finally validating and solidly structured, there are a few things that I was hoping to add to get it just right. If anyone can let me know how to achieve any of these, I would very much appreciate it!Main Page (to show you the layout): http://www.tigersjunkyard.com/xilon/main.shtmlStylesheet Code: http://www.tigersjunkyard.com/xilon/xilon.cssWhat I need help with...1) BORDERI'd love to have a side border (or something similar...a solid line) on the right side of the page, aligned with the edge of the header/content area/footer, so that they seem to be clearly closed in together as opposed to just cutting off. It doesn't look bad as it is now, but something more clearly defined would be preferable.2) TEXT SHADOWSI have a shadow on the header text ("The Xilon Project"), which appears in IE7 but not Firefox, and probably not any other browser. I understand that different browsers each require different codes for text shadows. Is there a way of making the header shadow visible on various browsers?In the same vein, I tried using the exact same IE-compatible code to put a shadow on the page title ("Welcome to the Aeradisphere") but it didn't show up. However, I'm assuming that's because the background is black. Is there a way to alter the shadow color?3) GALLERYThe 2nd, 3rd and 4th examples on this page are a near-perfect for what I'd like: http://www.cssplay.co.uk/menu/gallery_clickIt would be great if I could adapt a larger, revised version of one of those...thumbnails under or next to a box; click a thumbnail and a larger version of that image loads into the box, with the image information just above or below. But I would then either need that larger image to be a link, so that people can click on it to pop up a separate window of the full sized image, or I can just include a "view full size" link in the caption area, which would need to be much larger - 8 lines long, actually (artist, title, description, programs, dimensions, file size, copyright, full view link). And obviously, it would need to go into the main content area of the pages :*)If anyone can help me out with setting up and incorporating any of these elements, I can't tell you how grateful I'd be! Thanks!

[Ingolme]

Border:It sounds like you might want to simply put a border on the body element. For example:

body { border: 2px solid red; }

Text shadow:The CSS filter property only works in Internet Explorer. The W3C recommendation specifies the text-shadow property, but it is not compatible with most browsers at the moment. If you want shadow under your text it's best to make an image instead.Gallery:It sounds like you might want a full gallery application made with either Javascript or PHP.You would have to have links that reload the page and show the image and description extracted from a database, referencing the image in a query string. Or you would use Javascript to read an XML document with the descriptions and image URLs, which would work faster than PHP and without reloading, but it's not guaranteed to work on all browsers and it won't work if clients have Javascript off.

[rzea]

For your drop shadows, go here, there's all you need: http://www.workingwith.me.uk/articles/css/...er-drop-shadowsFYI, Gecko engine (Firefox, Netscape, Mozilla) will not render drop shadows as "nicely" (take a note on the air quotes) as IE or Safari do (this drop shadow property is the only thing Safari beats Firefox at. IE's drop shadow, umm... sorry but no, I REALLY don't like it, at all!).If you really want your site to have a professional CSS concept, I suggest to stay away from the filter:shadow; class and use a 32bit PNG with Alpha channel for Gecko engines and the rest of modern browsers, it will add download time to your site but believe me, it will look 100 million times more professional.And since IE6 doesn't support 32bit PNG with Alpha channel images, you could either use a GIF image, or if you definitely want to use that drop shadow, then you can create a only IE6 class in your CSS file that uses the filter:shadow; class.Let us know how it goes.Bytes,

[rzea]

Mmm... Ingolme's code for the border, that's obvious, why didn't I think of that Wouldn't this work too?

body {	border-right:#f00 10px solid;}

--For the Gallery, Ingolme's got the explanation now.

[jaidanwolf]

It sounds like you might want to simply put a border on the body element.

I just tried that and it didn't seem to work. Does that just get added into the #body section of the stylesheet? Is there anything else that needs to be done? Maybe I just missed something (as usual lol).

If you really want your site to have a professional CSS concept, I suggest to stay away from the filter:shadow; class and use a 32bit PNG with Alpha channel for Gecko engines and the rest of modern browsers, it will add download time to your site but believe me, it will look 100 million times more professional.

Thanks, I'll check out the site you mentioned. I personally really like the way the drop shadow is looking on IE7 right now (as used on my site). But it's a matter of personal taste, of course. I happen to like it :*)Your png or gif suggestion does sound nice but I have no idea how to do that. I like the way the "j" in the header text overlaps the main content, and if I created an image I'm not sure how I would maintain that effect without getting in the way of the menu or having the full header background overlapping the elements below. I'll see what I can come up with though.

It sounds like you might want a full gallery application made with either Javascript or PHP.

Heh...funny you should say that. I've tried to work with PHP before and failed miserably. Javascript was even more of a disaster. The thing is, the page I listed with those examples seems to be pure CSS, no? If I could just sort of adjust the colors and sizing on one of those, I think that would be ideal. I'm just not sure if it's possible. I'll have to mess around with it when I get home tonight.I actually was interested in installing Coppermine photo gallery but like I said...lost when it comes to PHP. I read all the instructions, etc. and still couldn't figure out what to do (this just isn't my field) so if I can achieve an altered version of one of the examples I gave, I think that would be the best way for me to go, if it's possible to do.

[jaidanwolf]

Just to follow up...Ricardo's border suggestion seemed like it worked at first, but then when the browser window is sized down, the border bar jumps to the middle of the main content Regarding the image gallery...I've done two different test galleries (using modified templates) and could really use some help with making them work.Gallery A: http://www.tigersjunkyard.com/xilon/gallery-test.html1) Is there a way to use this type of layout, but add in code that pops up caption information upon hover? For example, when someone hovers over a thumbnail, and that slightly larger version of the image pops up, I'd love to also have the image information appear either in the black space at the bottom of the box, or even more preferably, in a separate box just to the right or left of the thumbnail box. Is that possible?2) You'll notice this test gallery isn't incorporated into the main layout of my site like the other one...that's because when I tried to add it into a page with the proper layout, it doesn't appear in the main content area like it should. It seems to be caught in the title area. This is what it looks like: http://tigersjunkyard.com/xilon/gallery.jpg -- any idea why that's happening?Gallery B: http://www.tigersjunkyard.com/xilon/gallery-test.shtml1) In the hover caption, when I try to make the "Download full size" text a link, it does become a link but a double link appears up in the thumbnail section as well. Similar issue if I try to make the medium sized image itself a link. But I have to have an option to view the full sized image.2) Having adapted someone else's template, I'm having trouble figuring out if there's a more practical way to set up the code. As of now, all of the thumbnails are individual background images listed in the stylesheet...example - a.slidea {background:url(image.jpg);} - this is obviously not useable if I want to have many images and multiple gallery pages. Is there a way to set up a gallery with this layout, but without having to make each thumbnail a separate item in the stylesheet?So...does anyone have any ideas on how to make either of these work? Preferably the first one, since it doesn't require thumbnails, but getting either one functional would be great. The codes are below:Gallery A - All Code

<style type="text/css">body { margin: 0; padding: 0; background: #000000; font-size: 13px; color: #ffffff}/* common styling */a {color:#000;}a:hover {text-decoration:none;}a:visited {color:#000;}/* slides styling */.photo {width:635px; text-align:left; position:relative; margin:0 auto;}.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}.photo ul.topic li {display:block; width:125px; height:31px; float:left;}.photo ul.topic li a ul, .photo ul.topic li ul {display:none;}.photo ul.topic li.active a{color:#ffffff; background:#000000; text-decoration: none;}/*BOX PADDING */.photo ul.topic li.active ul{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:425px; background:#000000; width:464px; padding:10px 10px; border:20px solid #660000; z-index:1;}.photo ul.topic li ul li{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}.photo ul.topic li ul li a{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}.photo ul.topic li ul li a img{display:block; width:100px; height:75px; border:5px solid #eee;}.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;}.photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}  p.link a:hover {background-color: #2B2E21;color:#fff;}  p.link a:link span{display: none;}  p.link a:visited span{display: none;}  p.link a:hover span {  position: absolute;  margin:15px 0px 0px 20px;  background-color: #ffffff;  max-width:300;  padding: 2px 10px 2px 10px;  border: 5px solid #660000;  font: normal 16px verdana;  color: #000000;  text-align:left;  display: block;} </style></head><body><div class="photo"><ul class="topic"> <li class="active"><a class="set" href="#Landscapes"><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->  <ul>   <li><a href="lightbox3.html" alt="" title="" /><img src="landscapes/Kappa Crucis - Desert Shadows - Martin Roes.jpg" /></a></li>   <li><a href="landscapes/Kappa Crucis - Misty Mountains - Martin Roes.jpg"><img src="landscapes/Kappa Crucis - Misty Mountains - Martin Roes.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Risus - Blue Ice Desert - Martin Roes.jpg"><img src="landscapes/Risus - Blue Ice Desert - Martin Roes.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Risus - Lakeside Sunset - Dobromir Dimitrov.jpg"><img src="landscapes/Risus - Lakeside Sunset - Dobromir Dimitrov.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Risus - Misty Dawn - Dobromir Dimitrov.jpg"><img src="landscapes/Risus - Misty Dawn - Dobromir Dimitrov.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Risus - Sunset Shadows - Jerome.jpg"><img src="landscapes/Risus - Sunset Shadows - Jerome.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Xilon - Alkadine Mountains at Dawn - Brian Simes.jpg"><img src="landscapes/Xilon - Alkadine Mountains at Dawn - Brian Simes.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Xilon - Alkadine Mountains at Twilight - Brian Simes.jpg"><img src="landscapes/Xilon - Alkadine Mountains at Twilight - Brian Simes.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Xilon - Lukanen Mountains - Paul Gibson.jpg"><img src="landscapes/Xilon - Lukanen Mountains - Paul Gibson.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Zenon - Distant Rain - Thomas Broadfoot.jpg"><img src="landscapes/Zenon - Distant Rain - Thomas Broadfoot.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Zenon - Rogue Rock at Dusk - Thomas Broadfoot.jpg"><img src="landscapes/Zenon - Rogue Rock at Dusk - Thomas Broadfoot.jpg" alt="" title="" /></a></li>   <li><a href="landscapes/Zenon - The Andaline Shallows - Thomas Broadfoot.jpg"><img src="landscapes/Zenon - The Andaline Shallows - Thomas Broadfoot.jpg" alt="" title="" /></a></li>  </ul><br class="clear" /></div></body></html>

Gallery B - Page

<div id="container_left"><div class="thumbs"><a class="gallery slidea" href="#nogo"><em><img src="galleries/landscapes/Risus - The Road to Drakken - Jeff Hindmarsh.jpg" width="402px" alt="landscapes" /></em><span><b><i>Download full size</b></i><br/><br/><b>Artist:</b> Jeff Hindmarsh<br/><b>Title:</b> The Road to Drakken</b><br/><b>Description:</b> A view of the ice road to Drakken Village<br/><b>Dimensions:</b> 1600 x 1200 px<br/><B>File Size:</b> 452 kb<br/><b>Programs:</b> Terragen<br/><b>Notes:</b> This image is the property of the artist and may not be used without his/her permission</span></a><a class="gallery slideb" href="#nogo"><em><img src="galleries/landscapes/KC - After the Rain - Stephen A. Zimmerman.jpg" width="402px" alt="landscapes" /></em><span><b>Artist:</b> Stephen A. Zimmerman<br/><b>Title:</b> After the Rain</span></a><a class="gallery slidec" href="#nogo"><em><img src="galleries/scenes/Acadia Minor - The Watering Hole - Gigi.jpg" alt="scenes" /></em><span><b>Artist:</b> Gigi Holacik<br/><b>Title:</b> The Watering Hole</span></a><a class="gallery slided" href="#nogo"><em><img src="galleries/scenes/Kappa Crucis - Calling the Children - Kreegan.jpg" alt="scenes" /></em><span><b>Artist:</b> Kevin Mall<br/><b>Title:</b> Calling the Children</span></a><a class="gallery slidee" href="#nogo"><em><img src="galleries/space/Risus - Ice World - Paul Gibson.jpg" alt="space" /></em><span><b>Artist:</b> Paul A. Gibson<br/><b>Title:</b> Ice World I</span></a><a class="gallery slidef" href="#nogo"><em><img src="images/space.jpg" alt="space" /></em><span>None<br />Header image</span></a><a class="gallery slideg" href="#nogo"><em><img src="images/stars.gif" alt="space" /></em><span>None<br />Sidebar image</span></a></div>

Gallery B - CSS

/* ALTERNATE IMAGE GALLERY STRUCTURE *//* all galleries */a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}a.slidea {background:url(galleries/landscapes/Risus - The Road to Drakken - Jeff Hindmarsh-tn.jpg);}a.slideb {background:url(galleries/landscapes/KC - After the Rain - Stephen A. Zimmerman-tn.jpg);}a.slidec {background:url(galleries/scenes/Acadia Minor - The Watering Hole - Gigi-tn.jpg);}a.slided {background:url(galleries/scenes/Kappa Crucis - Calling the Children - Kreegan-tn.jpg);}a.slidee {background:url(galleries/space/Risus - Ice World - Paul Gibson-tn.jpg);}a.slidef {background:url(images/space-tn.jpg);}a.slideg {background:url(images/stars.gif);}a.gallery em, a.gallery span {display:none;}a.gallery:hover {border:1px solid #fff;}/* styling for LEFT gallery */#container_left {position:relative; width:600px; height:450px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}#container_left img {border:1px; width: 402px; height: 250px;}#container_left .thumbs {width:170px; position:absolute; left:0; top:0;}#container_left a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:175px; padding:5px; color:#000;  z-index:100;}#container_left a.gallery:hover span:first-line {font-style:normal; font-size:1.1em; color:#000;}#container_left a.gallery:active, #container_left a.gallery:focus {border:1px solid #000;}#container_left a.gallery:active em, #container_left a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:5px; left:180px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}#container_left h1 {clear:both; margin:0; padding-top:80px; padding-left:250px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}#container_left h1 em {font-size:0.6em; color:#000;}

[jaidanwolf]

Previous post updated...

[rzea]

Just to follow up...Ricardo's border suggestion seemed like it worked at first, but then when the browser window is sized down, the border bar jumps to the middle of the main content

I just tried it myself and it worked. I haven't looked at your code, it's just too much, but be sure to put it in the body NOT the #body class:

body {	border-right:#f00 10px solid;	margin:0;	padding:0;}

[jaidanwolf]

Thanks guys, my site is all sorted out now so we can consider this thread closed. I really appreciate your input!

[rzea]

Your site has horizontal scrolls at 1024x768... that's the most used resolution today.Glad to have helped you.Bytes,