Agent Green Posted March 11, 2013 Share Posted March 11, 2013 (edited) 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> Edited March 11, 2013 by Agent Green Link to comment Share on other sites More sharing options...
Krewe Posted March 12, 2013 Share Posted March 12, 2013 You won't get much help/good help until you upload. But one suggestion I can give you is to test is every browser possible. It will teach you how to fix bugs, what to look for, and make you better rounded developer. Link to comment Share on other sites More sharing options...
sunziun Posted March 12, 2013 Share Posted March 12, 2013 (edited) Hi, you could try this plugin for your gallery, compatible with all browsers :)And its free! Edited March 12, 2013 by sunziun Link to comment Share on other sites More sharing options...
Agent Green Posted March 13, 2013 Author Share Posted March 13, 2013 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? Link to comment Share on other sites More sharing options...
Krewe Posted March 13, 2013 Share Posted March 13, 2013 Uploaded on the internet so we can view it like a regular website. So we can actually find faults/bugs/issues. Because we are lazy and don't want to read line by line of code if it is perfect. I'd rather test, find an imperfection, look in the code at the specific point, then read. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now