nano
-
Posts
90 -
Joined
-
Last visited
Never
Everything posted by nano
-
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
-
Awesome 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!
-
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?
nano replied to geekisthenewsexy's topic in HTML Help
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 -
Where is the DIV that should be shown when you select an anchor tag? A better approach for this functionality would be done through JavaScript or jQuery - this then gives you the option of adding a selected class on your navigation item.
-
Adam for the win, semantic HTML rocks Separate your style from your content and use proper markup and you will increase rankings hands down.
-
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
-
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
-
Do you mean text-align? I would just add padding on the td cells. No need to play with positions. Have a look and see if padding solves your issue.
-
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
-
Red Dot Inc - Design, Develop and Publish iPhone and Web
nano replied to nano's topic in Website Critique
haha I wasn't a fan of white and wanted the brand to stand out.. maybe it stands out a bit too much I will let it run for a little while to see the wider thought behind the colours, maybe we will have to tone it down a little if it gets too much for people. Thanks for the input. -
Hey Guys, I have recently put together a new website for my company called Red Dot Inc. Please let me know your thoughts, as you never know how the true user will react Link to site: http://www.reddotinc.co.uk Have a play and let me know if I need to tweak/update anything, while it's still in its early stages. Cheers.
-
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 Overall, nice looking site and good luck with the company.
-
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.
-
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.
-
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
-
Possible the toggle method would be better? http://api.jquery.com/toggle/ You would utilise the toggle method with a nice fadein/fadeOut and will show and hide your side bars nicely.
-
The best jQuery plugins by far are the following: Orbit: http://www.zurb.com/playground/orbit-jquery-image-slider (very small in size and does the job) Or a more advanced carousel with more options would be this: http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm If you are just after image slide show, I would say use Orbit. Its awesome
-
160px because of the payment icons you have below, that covers everything within the main wrap. Overflow:hidden; will then also make sure you have covered your bases
-
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.
-
With IE you usually have to set widths on the items being floated. Have you done this?
-
It's because of your 35px width. Increase that to something more realistic and you should be ok.. Had a quick look and you would need a width of 160px width overflow set to hidden. Good luck.
-
I think he is after the border-style property. Different options can be seen here: http://www.w3schools.com/css/css_border.asp You may be after the following: border: inset 1px #000; Good luck
-
Check out Firebug for Firefox addon: https://addons.mozilla.org/en-US/firefox/addon/1843/ It will let you inspect respective elements from your HTML and highlight issues such as paddings or margins. You can also edit on the fly. Good luck.
-
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!