jaidanwolf

Thanks so much, that works perfectly! The only question is that now the black footer background seems to disappear, but it's not a big deal. I don't even know if I want a footer so I'm sure it'll be fine. Thanks again!

Hey guys, can anyone tell me how I would go about altering this template, so that the left column with the links is about half the size and the content from the right column is properly extended (ie. has more room)? http://www.freecsstemplates.org/preview/thebarn Here's the CSS code for the content area: /* Content */ #content { width: 592px; margin: 0 auto; background: #786E50 url(images/img5.gif) repeat-y; border: 4px solid #000000; } #colOne { float: left; width: 166px; padding: 10px; } #colOne h3 { margin: 3px 0 10px 0; color: #786E50; } #colOne ul { margin: 0; padding: 0; list-style: none; } #colOne a { color: #645B43; } #colTwo { float: right; width: 346px; padding: 10px; }

Oops, I thought I made note of it here but I guess not. The problem was resolved within the hour - someone offered the really simple solution of increasing the line height and it fixed everything. Thanks! :*)

Hi guys, I'm having an issue with one particular page format being a bit glitchy in IE. It works fine in Firefox but in IE, the text on certain pages isn't always showing up/rendering properly...if you scroll down the page, some text appears to be missing or cut off on random lines here and there, but then reappears if you highlight it or scroll down and back up again. It seems to be a problem with the black/gray background blocks that the text is on, because if I remove that element from the stylesheet, the text on those pages looks just fine. Here is the CSS file Here is an example of the pages using that stylesheet And here what I believe to be the problem section of the code...the text-related issues seem to lie with this particular item (the back/gray background blocks). Everything checks out with the CSS and Site/XHTML validators. So if anyone knows how to fix up what's happening in IE, that would be stellar, because I'm lost. div.blogitem { background: #000 url('images/pfade.jpg') repeat-x bottom; padding: 20px 15px 50px 10px; }

Never mind...everything's working now so consider this thread closed. Thanks for your time!

Okay...I've fixed the settings so that now the background image (bg.gif) extends the full length of the page regardless of individual page content and screen res. However, unfortunately, now these extra vertical scrollbars have appeared within the content area, which I can't have. Any suggestions on how to get rid of them without having the bg image cut off again? Revised Code: /* BASIC INFO */ html { height:100%; padding:0; margin:0; border:0; font-size:76%; font-family: Georgia; background:#000;} /* GENERAL LAYOUT */ div#wrapper{ width: 1006px; height: 100%; } body {height:100%; padding:0; margin:0; border:0;} #content {display:block; height:100%; overflow:auto; padding-left:160px; padding-top: 100px; position:relative; z-index:3; color: #ffffff; background-image: url('images/bg.gif'); background-repeat: repeat; #000000;} #head {position:fixed; margin:0; padding-left: 134px; display:block; width: 872px; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;} #foot {position:fixed; margin:0; padding-left: 150px; bottom:0px; display:block; width:856px; height:50px; background:url(images/footer.gif) #000000; color:#000000; text-align:center; font-size:10pt; z-index:4; font-family: verdana;}

Hey there, unfortunately still having the same problem. I altered the CSS to repeat in both the html and content portions. But it doesn't seem to be working. Basically, on the pages with very little content, that's where the problems arise. On the longer pages, there's no issue because it takes up enough space length-wise. But on the shorter pages, the bg.gif image cuts off before the footer, leaving varying lengths of black space. Any thoughts as to why this is happening?

Hey guys, last tech problem I seem to have with my site - everything else is checking out but this one issue is still giving me real trouble. On my laptop, the background image looks fine and extends all the way down to the bottom of the page, however long that page is. However, on a friend's computer (he has a higher screen resolution), the background image is cutting off and not going all the way down to the bottom. I'm working with a 1280 x 800 res. My site is optimized for 1024 x 768 res. On both my screen and when testing the latter resolution, everything's great. But on larger screens, it seems to cut off and not repeat vertically, no matter what I do. I've tried the standard "repeat-y" settings and a lot of other stuff, and nothing seems to make it take up the full length of the page on my friend's screen. Any suggestions? Site: http://www.tigersjunkyard.com/xilon/main.shtml CSS Code /* BASIC INFO */ html { height:100%; max-height:100%; padding:0; margin:0; border:0; font-size:76%; font-family: Georgia; background:#000 url() -18px 0 no-repeat; /* GENERAL LAYOUT */ div#wrapper{ width: 1006px; height: auto; } body {height:100%; max-height:100%; padding:0; margin:0; border:0;} #content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:160px; padding-top: 100px; position:relative; z-index:3; color: #ffffff; background: url(images/bg.gif); #000000;} #head {position:fixed; margin:0; padding-left: 134px; display:block; width: 872px; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;} #foot {position:fixed; margin:0; padding-left: 150px; bottom:0px; display:block; width:856px; height:50px; background:url(images/footer.gif) #000000; color:#000000; text-align:center; font-size:10pt; z-index:4; font-family: verdana;}

Thanks, I've sorted out the problem now :*)

Hey guys, for some reason my FAQ page links are not jumping down to the right points on the page. This has never happened to me before, and I use anchors a lot. Any ideas? FAQ PAGE http://www.tigersjunkyard.com/xilon/faq.shtml HTML CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Xilon Project</title> <link rel="stylesheet" href="xilon.css" type="text/css" /> </head> <body> <div id='wrapper'> <!--#include virtual="header.inc"--> <!--#include virtual="footer.inc"--> <div id="left"> <!--#include virtual="menu.inc"--> </div> <div id="content"> <br/> <h2 class="title"> Frequently Asked Questions<br/> <img src="trans/faq.gif" alt="faq" /></h2> <p><i>Here is a list of FAQs. If you've got a question of your own, please feel free to <a href="contact.shtml">email</a> and ask it.</i></p> <a href="#galleries">Why aren't the galleries showing up for me?</a><br/> <a href="#1">I downloaded and installed the font properly, so why is it giving me trouble?</a><br/> <a href="#11">How do I produce the special characters with the Xilon font?</a><br/> <a href="#2">Can I buy prints of these images?</a><br/> <a href="#3">I'd like to use one/some of these images for nonprofit purposes. Is that okay?</a><br/> <a href="#5">What are your policies on linking?</a><br/> <a href="#8">Why can't just anyone upload artwork?</a><br/> <a href="#7">I've got stories or thoughts inspired by the concept; can I submit those instead of actual art?</a><br/> <a href="#9">For contributing artists, are there restrictions on image content?</a><br/> <a href="#4">Do you have a mailing list or RSS feed? How can I receive updates?</a><br/> <a href="#6">I have some suggestions for how to improve the site. Where can I send them?</a><br/> <br/><hr><br/> <a name="galleries"></a> <p>Why aren't the galleries showing up for me?</p> <p>The galleries are run on Javascript Lightbox, so to view them properly, you need to have Java installed and enabled. Most people already do, since it's a common necessity for many websites. If for some reason you don't have Java installed or enabled, or aren't sure if you do, simply google the info and take the necessary, very easy steps to get it running.</p> <br/> <a name="1"></a> <p class="faq">I downloaded and installed the font properly, so why is it giving me trouble?</p> <p>Unfortunately, due to the way the font was created, it requires a bit of an extra kick to get it looking just right. Once you've decided on a font size, you'll need to adjust the character tracking so that the letters are properly spaced. When that's done, most of the characters will fall together with no problem. Certain letters (F, I, K, R, S, T, U, Y) require an extra space added in before the following character. It's a bit of a pain at first but once you get the hang of it, it's quite easy to make the adjustments.</p> <br/> <a name="11"></a> <p class="faq">How do I produce special characters with the Xilon font?</p> <p>Easy enough ... lif = the pound sign (#), ryx = quotation mark ("), saen = ampersand (&), kal = period (.), jks = question mark (?). Enjoy.</p> <br/> <a name="2"></a> <p class="faq">Can I buy prints of these images?</p> <p>This is strictly a nonprofit online gallery, so regrettably, there are no prints for sale. However, there are links to view and download large, high res versions of each image. Additionally, some individual artists may have prints of their images for sale, so you are always welcome to inquire about a particular render and we will let you know for sure.</p> <br/> <a name="3"></a> <p class="faq">I'd like to use one/some of these images for nonprofit purposes. Is that okay?</p> <p>As much as we would like for people to share their interest in this site, images may not be used without permission. All images, concepts and stories found on this site are copyrighted works; therefore, you must legally speak to the artist/designer first, even for nonprofit use. Please view the <a href="legal.shtml">legal section</a> for further details.</p> <br/> <a name="5"></a> <p class="faq">What are your policies on linking?</p> <p>You are welcome to provide actual links (ie. "http://siteaddress.com/image.jpg") anywhere you please, as long as you are not violating the policies outlined in the <a href="legal.shtml">legal</a> section. However, you absolutely may not hotlink to anything on this site (ie. directly display an image from here on your own page as "img src="tigersjunkyard.com/xilon/image.jpg").</p> <br/> <a name="8"></a> <p class="faq">Why can't just anyone upload artwork?</p> <p>Because this isn't a general user-based art community. It is a visual-narrative experience depicting an original, fictitious region of space. The stories and artwork here all work together as a collaborative whole, to tell a story and give outside viewers a look at this unique place. If just anyone uploaded their work without moderation, it may or may not properly depict the concept and the point of the site would likely become moot.</p> <br/> <a name="7"></a> <p class="faq">I've got some stories or thoughts inspired by the concept; can I submit those instead of actual art?</p> <p>If you're interested in the material but are not much of an artist, yet you have an idea in your head for either a narrative backstory that falls under the "Stories & Myths" section, or even a suggested scene for contributing artists to consider, you are certainly welcome to get in touch and send it over.</p> <br/> <a name="9"></a> <p class="faq">For contributing artists, are there restrictions on image content?</p> <p>No, not in the traditional sense. Nudity or even pornographic scenes are acceptable, as well as any form of coupling, whether straight or gay...however, we insist that all images here have substance. So gratuitous nudity or sexual situations are generally looked down upon, not because we've got an inherent problem with them, but because they bore us unless they're part of a bigger story within the image. If adult situations are required as an integral part of the scene that the image is capturing, then they are perfectly welcome. But nudity and sex just for the sake of it are pointless and overdone, and don't lend much to the overall story that this site is telling.</p> <br/> <a name="4"></a> <p class="faq">Do you have a mailing list or RSS feed? How can I receive updates?</p> <p>Since this is not an open submission forum, updates are far from overwhelming, though they do occur as contributing artists get new ideas here and there. You can simply check the <a href="newart.shtml">new image additions</a> section now and then to see what else has been added to the galleries. Keep an eye on the <a href="news.shtml">news section</a> as well for additional updates.</p> <br/> <a name="6"></a> <p class="faq">I have some suggestions for how to improve the site. Where can I send them?</p> <p>You may contact <a href="contact.shtml">Reese</a> with any suggestions.</p> <br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/> </div></div> </body> </html>

Hi ElanMan, I've actually got working gallery now! Thank you so much for taking the time to help me out, I really appreciate it!

Hey blue...thanks but actually, the two examples I gave are the ideal styles. Your example seems to be hover-based rather than click-based? And I'm not sure where the captions would go. I'm basically looking for a way of tweaking one of those two galleries I mentioned, or something that has the same type of effect (thumbnails, enlarge to medium size with captions, click for full view). Any ideas?

Hey guys, now that my site is validating and the overall layout is finished, the last thing I'm having trouble with is the 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.html 1) 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.shtml 1) 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 #;} .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;}

After hours of talking to someone last night, the problem was finally sorted out. Many thanks to those who responded!

Hey, there's a link in my first post already :*) But here it is again: www.tigersjunkyard.com/xilon/main.shtml If you just open that page and try making the browser window smaller and larger, you should see the problem. Hopefully someone will know how to fix it!

Thanks! I'm still not sure exactly what to remove from or change in the stylesheet to make it work. Like I said, when I add in the container code, the main content scrollbar disappears. And the same resizing issue is still occurring when I shrink or enlarge the browser window. I'm just not familiar enough with all the elements to know exactly what to fix. Thanks, noted :*)

Hey notbanksy, thanks so much for answering. Where exactly would I start and end the container code? I added the second code to the stylesheet. Then in the page itself, I added <div id="container"> above <body>, and </div> below </body> but the problem was still occurring. You said to remove the specified body width percent and height, but I'm not sure exactly which part to take out...I edited my initial post here to include the codes for the main page and the stylesheet. Would you be able to tell me which bits to remove from the stylesheet? Also, adding the container code seems to get rid of the main content scrollbar. Any thoughts? Thanks again, I really appreciate your help!

Hi guys, I put this site together for a personal project I've got in progress and am having some issues with the header and footer. My resolution is 1280 x 800, and when my browser is full screen, the page looks perfect. However, if I make the browser window smaller, two problematic things happen...one, the header squishes to accomodate the smaller window and overlaps the main content. Two, the footer text gets cut off on both ends and also overlaps the main body scrollbar. If I view the page on a larger screen, there is a black space between the header/footer and the content scrollbar. So my question is, is there a way to set a fixed size for the page, so that it stays the same no matter what sized window it's being viewed in (ie. if the browser window is small, then there would be a standard horizontal scrollbar on the bottom as opposed to the page resizing)? I'd basically just like to have the header and footer exactly lined up with the edge of the main content scrollbar at all times, regardless of screen resolution/browser window size. Everything but the header and footer seems fine. If anyone can help me fix this issue, I'd really, really appreciate it. The page: http://www.tigersjunkyard.com/xilon/main.shtml Page code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Xilon Project</title> <link rel="stylesheet" href="xilon.css" type="text/css" /> </head> <body> <div id="head"> <div id="pad1"></div> The Xilon Project</div> <div id="foot"> <div id="pad3"></div> <br> Do not use anything from this site without the express permission of the owners.<BR> All conceptual elements belong to and are copyright to Reese Nanavati. All artwork belongs to and is copyright to the individual artists.</div> <div id="left"> <div class="pad2"></div> <!--#include virtual="menu.inc"--></div> <div id="content"> <div class="pad2"></div> <BR> <h2 class="title"> Welcome to the Aeradisphere</h2> <p>This is a collaborative online exhibition that displays artwork depicting a fictional region of the universe called the Xilon System. The images here were created by a range of artists, based on detailed descriptions of this imaginative corner of the sky. <a href="about.shtml">Read More</a></p> </body> </html> The CSS code /* BASIC INFO */ html { height:100%; max-height:100%; padding:0; margin:0; border:0; font-size:76%; font-family: Georgia background:#fff url(.jpg) -18px 0 no-repeat; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } /* GENERAL LAYOUT */ body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;} #content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:165px; position:relative; z-index:3; background: #000000; color: #ffffff;} #head {position:fixed; margin:0; top:0; right:13px; display:block; width:100%; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;} #foot {position:fixed; margin:0; bottom:0px; right:12px; left:85px; display:block; width:92.3%; height:50px; background: #660000; color:#ffffff; text-align:center; font-size:10; z-index:4; font-family: verdana;} /* TITLES */ h1, h2, h3 { font-weight: normal; color: CBA61A; } h1 { letter-spacing: -2px; font-size: 3em; } h2 { letter-spacing: -1px; font-size: 2em; color: #CBA61A; } h3 { font-size: 1em; } p, ul, ol { line-height: 150%; } .title { margin: 0; border-bottom: 2px solid #0F0F0F; } body { margin: 0; padding: 0; background: #000000; font-size: 13px; color: #ffffff } body, th, td, input, textarea, select, option { font-family: Georgia; } /* LINKS WITHIN BODY */ a {text-decoration: none; color: #3AA0B9;} a:visited {text-decoration: none; color: #3AA0B9;} a:active {text-decoration: none; color: #3AA0B9;} a:hover {text-decoration: overline underline; color: #660000;} 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;} /* IMAGE GALLERY STRUCTURE AND HOVER CODES */ div.img { margin: 0px; border: 1px solid #3AA0B9; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 0px; border: 1px solid #ffffff; } div.img a:hover img {border: 1px solid #660000;} div.desc { text-align: center; font-weight: normal; width: 120px; margin: 0px; } img.floatLeft { float: left; margin: 4px; } img.floatRight { float: right; margin: 4px; } /* POSITION */ #left {position:fixed; left:0; top:0; height:100%; width:150px; background:url(images/stars.gif) #aaa; background-position:0 100px;; font-size:1em; color:#fff;z-index:4;} * html #head, * html #foot,* html #left {position:absolute;} #pad1 {display:block; width:175px; height:100px; float:left;} #pad3 {display:block; width:18px; height:50px; float:left;} .pad2 {display:block; height:100px; color: #ffffff;} #content p {padding:5px;} /* SIDE MENU */ #menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:right; height:360px; background:url(images/stars.gif) #000000;} #menu ul {list-style-type:none; padding:0; margin:0;} #menu li {float:left; background:#000000 url(slide/slide_0.gif) no-repeat;} #menu li.sub {background:#000000 url(slide/slide_0.gif) no-repeat;} #menu li, #menu li a {display:block; color:#ffffff; font-family:Arial; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;} #menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;} #menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;} #menu :hover {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;} #menu :hover > a {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;} #menu :hover ul {position:static; height:180px; margin-top:-1px; background:#000000;} #menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #660000;} #menu :hover ul li, #menu :hover ul li a {background:#000000; text-align:left; text-indent:10px; } #menu :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;} #menu :hover ul :hover {background:#660000; position:relative; z-index:100;} #menu a:hover ul li.fly a:hover {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul :hover ul li, #menu :hover ul :hover ul li a {background:#000000;} #menu :hover ul :hover ul :hover ul li {background:#660000; z-index:500;} #menu :hover ul :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;} #menu :hover ul :hover ul :hover {z-index:500; background:#660000; color:#ff0;} #menu a:hover ul a:hover ul li.fly a:hover {background:#000000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul :hover ul :hover ul li, #menu :hover ul :hover ul :hover ul li a {background:#000000;} #menu :hover ul :hover ul :hover ul :hover {background:#660000; color:#ff0;} #menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}