Jump to content
Agent Green

Novice website (help)

Recommended Posts

post-129037-0-52842400-1363008847_thumb.jpg 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 :good: Any critique will be helpful as I am stumbling around in the dark with my legs tied together :boredom: 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 by Agent Green

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi, you could try this plugin for your gallery, compatible with all browsers :)And its free!

Edited by sunziun

Share this post


Link to post
Share on other sites

Thanks sunziun, if I can't get this one to work I will probably have a try with that one :good: 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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...