Why won't my images work?, Please help :( I'm really stressing out. |
Why won't my images work?, Please help :( I'm really stressing out. |
alymarcotte |
Jul 29 2010, 02:53 PM
Post
#1
|
Newbie Group: Members Posts: 11 Joined: 3-September 08 Member No.: 6,579 |
Why won't my images work here:
http://www.djcarchitect.com/portfolio/museums.html the nav bar images work, but the main image isn't showing up.. i'm very confused and stressed about this. Thank you. |
alymarcotte |
Jul 29 2010, 04:02 PM
Post
#2
|
Newbie Group: Members Posts: 11 Joined: 3-September 08 Member No.: 6,579 |
ok if i swap out the first part of the html of the template with mine, it works better. so where is my problem ?
this is the template html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } This is my html: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 0px; } /* begin gallery styling */ #jgal { list-style: none; width: 150px; height:337px; overflow:auto;} #jgal li { opacity: .5; float: right; display: block; width: 50px; height: 50px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 6px; margin-bottom: 6px; } #jgal li img { position: absolute; top: 0px; left: 160px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; width: 500px; height:337px; display: block; } #gallery li { float: left; margin: 0 0px 0px 0; } there seems to be something within this part that is different and causing the problem.... |
Lo-Fi Version | Time is now: 26th April 2024 - 01:55 AM |