Jump to content

nano

Members
 View Profile  See their activity

  • Posts

    90

  • Joined

  • Last visited

    Never

 Content Type 

Posts posted by nano

    Please review my new website

    in Website Critique

    Posted

    Directory sites always seem to be the same, very busy and not as exciting as they could be.

     

    It's hard to design and develop a site that houses so much information and has to deliver a lot to its users but could you not simplify it a little.

     

    Maybe more of a feature of the navigation and search - then just have a basic list that looks clean and simple.

     

    Try not to flood it with adverts too, though a source of income - you don't want to scare away the user.

     

    Good luck

    My website need criticism

    in Website Critique

    Posted

    This website is best viewed in: Mozilla Firefox

     

    Awesome  8)

     

    For a first website, it's not too bad but there is a lot to learn. Though my first site was one static image, so you're doing well ;)

     

    You need to think about structuring your code, make sure you separate style from content.

     

    You need to think about optimisation, don't use a lot of large images and if images are required, use a tool like smushit to optimise them: http://www.smushit.com/ysmush.it/

     

    Check you code is valid and that means both the HTML and CSS.

     

    The background is a little off putting so maybe use a natural colour (though I am no designer), and make sure your site advertises your brand and online purpose.

     

    And finally - make sure it works with multiple browsers. Test, test and test again with something like Spoon:

     

    http://www.spoon.net/browsers

     

    Good work though!

     

    CSS: Postioning Elements

    in CSS Help

    Posted

    Could you not create a new list item within your unordered list with class navigation?

     

    Then just place your text size div inside that UL, and give the list item a class so you can style it differently to the normal list items?

     

    Or just place it below the UL and float it right, float your nagivation left, then float an overall wrapper right?

    How to load external page inside IFrame when I click on a tab?

    in HTML Help

    Posted

    I take it you stripped some code out from the body because there are table cells all over the place  :-\

     

    Here is sample HTML template page that you can review and rework:

     

    <!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">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="" /> 
	<meta name="description" content="" />
	<title>TAB ELEMENT HTML</title>	 
	<style type="text/css">
	ul.tabs {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		height: 32px; /*--Set height of tabs--*/
		border-bottom: 1px solid #999;
		border-left: 1px solid #999;
		width: 100%;
	}
	ul.tabs li {
		float: left;
		margin: 0;
		padding: 0;
		height: 31px; /*--Subtract 1px from the height of the unordered list--*/
		line-height: 31px; /*--Vertically aligns the text within the tab--*/
		border: 1px solid #999;
		border-left: none;
		margin-bottom: -1px; /*--Pull the list item down 1px--*/
		overflow: hidden;
		position: relative;
		background: #e0e0e0;
	}
	ul.tabs li a {
		text-decoration: none;
		color: #000;
		display: block;
		font-size: 1.2em;
		padding: 0 20px;
		border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
		outline: none;
	}
	ul.tabs li a:hover {
		background: #ccc;
	}
	html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
		background: #fff;
		border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
	}
	.tab_container {
		border: 1px solid #999;
		border-top: none;
		overflow: hidden;
		clear: both;
		float: left; width: 100%;
		background: #fff;
	}
	.tab_content {
		padding: 20px;
		font-size: 1.2em;
	}
	</style>
    </head>
    <body>

	<ul class="tabs">
		<li><a href="#tab1">First Tab</a></li>
		<li><a href="#tab2">Second Tab</a></li>
		<li><a href="#tab3">Third Tab (iFrame)</a></li>
	</ul>

	<div class="tab_container">

		<div id="tab1" class="tab_content">
			<p>Content for Tab 1</p>
		</div>

		<div id="tab2" class="tab_content">
			<p>Content for Tab 2</p>
		</div>

		<div id="tab3" class="tab_content">
			<iframe src ="page1.html" width="100%" height="300">
				<p>Your browser does not support iframes.</p>
			</iframe>
		</div>

	</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

		//When page loads...
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content

		//On Click Event
		$("ul.tabs li").click(function() {

			$("ul.tabs li").removeClass("active"); //Remove any "active" class
			$(this).addClass("active"); //Add "active" class to selected tab
			$(".tab_content").hide(); //Hide all tab content

			var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
			$(activeTab).fadeIn(); //Fade in the active ID content
			return false;
		});

	});
	</script>

</body>
</html>

     

    Your markup is not very semantic, it's always best to make sure you separate the content from the styles. Try to avoid using line breaks, inline styles and make sure you validate your code.

     

    I put the JS at the bottom of the page, just before the closing body tag as this helps with the page load time.

     

    Good luck and let me know if you need a hand :)

    FULL SITE REVIEW:

    in Website Critique

    Posted

    A lot of your core content like headings and navigation are images. Possibly look at font replacement techniques like Cufon or Sifr, or use background images with your text indented negatively so it's hidden.

     

    Also a nice way to help search engines is to have a HTML site map on your site and also submit an XML version to Google via its web master tools.

     

    Then utilise social tools like Twitter and Facebook to direct external traffic to the site and it should be a lot better.

     

    For me though, I would try to review the heavy use of images, good optimised pages always rank well ;)

     

    CSS ON hover?

    in CSS Help

    Posted

    They are talking about the Top 20 Experiences carousel towards the bottom.

     

    It looks like they have a div, hidden inside the container that is set to display:none;

     

    When you hover over the container, that is then set to display block.

     

    So yes JavaScript or jQuery would be a requirement.

     

    Firebug is your friend :)

    Justifying Multiple Lines of Text

    in HTML Help

    Posted

    Stay away from line breaks - I am not even sure they are semantic?

     

    Wrap each line in its own <p></p> to represent a paragraph. As this is a block level element, it will push them onto new respective lines.

     

    Then in you css just have: text-align:justify;

     

    You could give each paragraph a fixed width to achieve what you want, or put them inside a wrapper with a fixed width.

     

    Good luck

    Texelate - web design in Leeds

    in Website Critique

    Posted

    Site design is very clean, professional and I am sure future clients will be impressed.

     

    My only issue is the massive use of images, with things such as:

     

    http://www.texelate.co.uk/img/v4/gui/homefeature.jpg

     

    http://www.texelate.co.uk/img/v4/gui/home.gif

     

    http://www.texelate.co.uk/img/v4/gui/footer.jpg

     

    That can't be too healthy for optimisation or SEO. Why don't you turn to technologies like Cufon or Sifr to handle custom fonts?

     

    Utilise firebug plug-ins like Page Speed and YSlow to check the optimisation and see if things can be tweaked.

     

    Also that moving footer is nice functionality but drives me personally mad :P

     

    Overall, nice looking site and good luck with the company.

    jQuery - show/hide help

    in Javascript Help

    Posted

    Hello,

     

    I have the following HTML markup:

     

    <div class="filter">
<h3>Filter</h3>
<ul>
	<li><a href="#all" title="All">All</a></li>
	<li><a href="#brand" rel="brand" title="Brand">Branding</a></li>
	<li><a href="#iphone" rel="iphone" title="iPhone">iPhone</a></li>
	<li><a href="#web" rel="web" title="Web">Web</a></li>
</ul>
</div>
<div class="projects">
<div class="project iphone"></div>
<div class="project iphone"></div>
<div class="project web"></div>
<div class="project branding"></div>
</div>

     

    What I want to do, is click on the filter parameters, and only show the content that it relates to.

     

    So for example, clicking on iPhone, will only show the iPhone related projects.

     

    Here is my jQuery:

     

    $('.filter li a').click(function(){

$('.projects .project').fadeOut();

var content = $(this).attr('href');
var contentClass = content.substring(1,content.length);

if(contentClass == 'all') {
	$('.projects .project').fadeIn(); 
} else {
	$('.projects .project').hasClass(contentClass).fadeIn();
}
return false;

});

     

    This currently doesn't work.. Does anyone understand how I can resolve this? Or maybe there is a better way to write what I am trying to do?

     

    Cheers.

    iframe to display form

    in HTML Help

    Posted

    No AJAX is required and nor are iFrames.

     

    Basically you have a hidden container div, that contains your thank you message.

     

    When user posts the form, the mail is sent etc, then you simply Hide your form with jQuery/JavaScript and then show the thank you div.

     

    Have a look at the link I posted above, it should give you a good understanding.

    <td> regards

    in CSS Help

    Posted

    It's all about widths.

     

    Set a width on your table first, maybe to 100% so it stretches the width of your container.

     

    Then your td width can be a % of the table. So say td {width:50%;} etc

    designer

    in HTML Help

    Posted

    I have no idea what ctp files are, though you are talking about syntax highlighting. Just have a Google for snytax highlighting support for your particular file extension - you may need to use a different editor (Notepad++, Komodo Edit etc)

     

    With regards to design, listen to thorpe. I can't stress enough how much a good designer is required. I can't use PhotoShop or Illustrator to save my life, I'm a developer through and through, and if you can find a strong designer to work with you - your product will definitely up-sell. Also utilise someone elses skill to strengthen your products in areas that they are experienced in and you are not.

    iframe to display form

    in HTML Help

    Posted

    I wouldn't think there is a need for use of an iframe. What you could do is a mixture of JS/jQuery and PHP.

     

    When user submits form, the form is then hidden and a container which houses a Thank You message is then shown.

     

    http://www.raymondselda.com/php-contact-form-with-jquery-validation/

     

    The above is a nice tutorial and basically in this bit:

     

    <?php if(isset($emailSent) && $emailSent == true) { ?>

     

    <?php } ?>

     

    You could put JavaScript to trigger a function that hides the form and shows your message :)

     

    Try and stay away from iframes, they are horrible things!

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.