Jump to content

Agent Green

Members
  • Posts

    2
  • Joined

  • Last visited

Agent Green's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Thanks sunziun, if I can't get this one to work I will probably have a try with that one Krewe what do you mean exactly? Until I have the website uploaded on the internet or is there some way to upload it onto here?
  2. Working on a website for my new venture into making ceramics. Good computer skills but basically a beginner in HTML/CSS..etc Need a simple usable website advertising the business and showing some of the work in a gallery (http://smoothgallery...ng-started/faq/). Been working on it for about a week and only just beginning to understand what I have been doing :facepalm:Created a 'liquid' design with a simple menu bar with a mishmash of HTML/CSS/JAVA and my biggest problem now is with browser compatibility. Works in Safari, used to work in Opera but now the gallery has broken, vaguely works in IE and not tested with anything else.I will upload the files ASAP but post anything that could help Any critique will be helpful as I am stumbling around in the dark with my legs tied together It is a concoction of code found on various internet sites. <!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" /> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" /> <style type="text/css"> <!-- body { background-image:url(images/background.jpg); cursor:inherit; } div { cursor:auto; } /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */ .container { text-align: center; width:100%; max-width:1440px; min-width:1024px; cursor:inherit; z-index: 5; } .centerwrapper { margin-left:auto; margin-right:auto; width:1008px; } .centerwrapper2 { margin-left:auto; margin-right:auto; width:1056px; } /* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */ .header { float: left; margin-left:auto; margin-right:auto; margin-top:0px; } .content { margin-right:auto; margin-left:auto; display: block; cursor:default; margin-top:20px; margin-bottom:20px; } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ float: left; margin-right: 8px; } .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */ clear:both; height:0; font-size: 1px; line-height: 0px; } /* ~~ The footer ~~ */ .footer { padding: 10px 0; } #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative; } #cssmenu ul { list-style: none; } #cssmenu > ul > li { float: left; } #cssmenu ul ul { display: none; position: absolute; top: 85px; min-width: 100%; text-align: center; z-index:1; } #cssmenu li:hover ul { display:inline-block; } #cssmenu a { color: #ffffff; display: inline-block; min-width: 35px; min-height: 81px; text-align: center; } #cssmenu > ul > li a:hover { background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom; background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252)); background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0); filter: none; } --> </style></head> <body> <div class="container"> <div class="centerwrapper"> <div class="content"><a href="home.html"><img src="images/titleCreations.png" alt="" width="340" height="102" hspace="0" vspace="0" border="0" class="content" /></a> <!-- end .header --></div> <!-- end .container --></div> </div> <div class="container"> <div class="centerwrapper"> <div id='cssmenu'> <ul> <li><a href='#'><img src="images/thePottery.jpg" width="252" height="81"></a> <ul> <li><a href='#'><img src="images/Ethos.jpg" width="252" height="81"></a></li> <li><a href='#'><img src="images/Synopsis.jpg" width="252" height="81"></a></li> <li><a href='#'><img src="images/Artists.jpg" width="252" height="81"></a></li> </ul> </li> <li><a href='index.html'><img src="images/creations.jpg" width="252" height="81"></a></li> <li><a href='#'><img src="images/bespoke.jpg" width="252" height="81"></a></li> <li><a href='#'><img src="images/contactUs.jpg" width="252" height="81"></a></li> </ul> </div> </div> </div> <div class="container"> <div class="centerwrapper2"> <div class="content"> <div id="myGallery"> <div class="imageElement"> <h3>Item 1 Title</h3> <p>Item 1 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/Gallery/testGallery01.jpg" class="full" /> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 2 Title</h3> <p>Item 2 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/Gallery/testGallery02.jpg" class="full" /> <img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 3 Title</h3> <p>Item 3 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/Gallery/testGallery03.jpg" class="full" /> <img src="images/brugges2006/3-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 4 Title</h3> <p>Item 4 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/Gallery/testGallery04.jpg" class="full" /> <img src="images/brugges2006/4-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 5 Title</h3> <p>Item 5 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/5.jpg" class="full" /> <img src="images/brugges2006/5-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 6 Title</h3> <p>Item 6 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/6.jpg" class="full" /> <img src="images/brugges2006/6-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 7 Title</h3> <p>Item 7 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/7.jpg" class="full" /> <img src="images/brugges2006/7-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 8 Title</h3> <p>Item 8 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/8.jpg" class="full" /> <img src="images/brugges2006/8-mini.jpg" class="thumbnail" /> </div> </div> </div> </div> </div> <script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="scripts/mootools-1.2-more.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> <script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: false, }); } window.addEvent('domready',startGallery); </script> </body></html>
×
×
  • Create New...