Web design and development in London and Surrey » css http://zorinweb.com Just another Web design and development weblog Fri, 13 Jan 2012 14:56:03 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Design to HTML for www.theartofservice.co.uk http://zorinweb.com/2011/04/design-to-html-for-www-theartofservice-co-uk/ http://zorinweb.com/2011/04/design-to-html-for-www-theartofservice-co-uk/#comments Fri, 01 Apr 2011 18:51:43 +0000 ZorinWeb http://zorinweb.com/?p=307 Marked up the wonderful web designs designs in HTML for The Art of Service, a website set up to market a hospitality board game by Michel Roux Jnr’s co-host on the BBC2 series about service and hospitality, ‘Michel Roux’s Service’. From the site, ‘The Art of Service board game is a training tool for restaurant and hotel owners, F&B directors and hospitality lecturers’.

It’s an engaging concept, now live on the web. To see more, go to www.theartofservice.co.uk.

]]> http://zorinweb.com/2011/04/design-to-html-for-www-theartofservice-co-uk/feed/ 152 New Site for Surrey Contact Sports Specialist http://zorinweb.com/2010/09/new-site-for-surrey-contact-sports-specialist/ http://zorinweb.com/2010/09/new-site-for-surrey-contact-sports-specialist/#comments Fri, 03 Sep 2010 19:09:14 +0000 ZorinWeb http://zorinweb.com/?p=282 Whipped up version two of a site for the guys at Nova Forca. Along with a new design, the site moves up to the much improved WordPress 3.

]]> http://zorinweb.com/2010/09/new-site-for-surrey-contact-sports-specialist/feed/ 0 Yell! Microsite HTML/CSS http://zorinweb.com/2010/06/yell-microsite-htmlcss/ http://zorinweb.com/2010/06/yell-microsite-htmlcss/#comments Thu, 03 Jun 2010 17:56:04 +0000 ZorinWeb http://zorinweb.com/?p=254 Took designs for a Yell! campaign microsite and converted them to a functioning site. This was a pretty standard psd/design to (X)HTML job.

The site is a bid from Yell! to match up local businesses with local customers. Have a look over at yelltour.co.uk.


]]> http://zorinweb.com/2010/06/yell-microsite-htmlcss/feed/ 1 WordPress Coding for LegionLive.org http://zorinweb.com/2010/05/wordpress-coding-for-legionlive-org/ http://zorinweb.com/2010/05/wordpress-coding-for-legionlive-org/#comments Mon, 03 May 2010 18:16:42 +0000 ZorinWeb http://zorinweb.com/?p=264 I implemented a new front end design for LegionLive, The Royal British Legion’s online community. The site has a very engaging look and feel, and leverages a good number of web 2.0/social community mediums, providing a hub of activity for Royal British Legion members and friends alike.

I provided an interface for CMS functions, customised a slideshow for the home page, all the while making sure it was fully integrated with WordPress Mu.

]]> http://zorinweb.com/2010/05/wordpress-coding-for-legionlive-org/feed/ 66 PSD to WordPress of Sharply Designed Craftsman Website http://zorinweb.com/2010/03/psd-to-wordpress-of-clean-design-craftsman-website/ http://zorinweb.com/2010/03/psd-to-wordpress-of-clean-design-craftsman-website/#comments Wed, 10 Mar 2010 15:50:22 +0000 ZorinWeb http://zorinweb.com/?p=229 Coded up a talented designer’s clean tradesman layout. The design focuses on usability and straight to point content. Images play a large role as they’re an immediate endorsement of the craftsman’s ability and skill.

In order for the website owner to manage his own content, WordPress was used as a CMS (content management system). Each page is editable, while images can be uploaded to a specific category, which will then appear on the website automatically re-sized. The quotations and contact pages feature forms that check for incorrect email addresses and make sure compulsory fields are satified. Here’s a screenshot of the site:

To see it in action, go to here.

]]> http://zorinweb.com/2010/03/psd-to-wordpress-of-clean-design-craftsman-website/feed/ 102 Simple Property Website Spiced up with Jquery http://zorinweb.com/2010/03/simple-propery-website-spiced-up-with-jquery/ http://zorinweb.com/2010/03/simple-propery-website-spiced-up-with-jquery/#comments Sun, 07 Mar 2010 16:50:08 +0000 ZorinWeb http://zorinweb.com/?p=223 Coded up a nice clean design for a property and land agency. HTML and CSS are used, as is jQuery for an intersting introduction and page transitions.

To see it in action, visit: www.montrose-partnership.com

]]> http://zorinweb.com/2010/03/simple-propery-website-spiced-up-with-jquery/feed/ 0 Web Development for London Jewellery Store http://zorinweb.com/2010/01/web-development-for-london-jewellery-store/ http://zorinweb.com/2010/01/web-development-for-london-jewellery-store/#comments Mon, 04 Jan 2010 14:47:05 +0000 ZorinWeb http://zorinweb.com/?p=150 Front end Web development for London Jewellert Store

Carried out for a West London based design agency, this job entailed taking a psd design and bringing it to life via XHTML/CSS and the wonderful jQuery JavaScript library. The vertical menu is set to stay in place while the content area to the right changes to reflect whatever the user chooses to click on.

jQuery’s chaining ability is put to thorough use as each menu link sets off a series of events; the menu itself – inc. child elements – expands and contracts, and the content area is repopulated. The following picture illustrates what happens when a specific wedding ring is clicked. The content area changes to a large ring with a column of thumbnail rings situated to the side. The thumbs can be navigated with arrows and clicked to expand and fill up the content area. Again, this is all performed using jQuery.

Content area changed with jQuery

CSS sprites were implemented for the menu’s hover states, however, the selected ‘active’ state is actioned using jQuery. Here’s one of the sprites:

All in all, an interesting exercise in the uses of CSS and jQuery, which indeed makes for clean uncomplicated code.

]]> http://zorinweb.com/2010/01/web-development-for-london-jewellery-store/feed/ 0 Converting a Design to a WordPress Website http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/ http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/#comments Thu, 17 Dec 2009 19:09:22 +0000 ZorinWeb http://zorinweb.com/?p=103 There doesn’t appear to be too many psd to HTML tutorials on the net, so I thought I’d write one. Given the popularity of the WordPress blogging software, I’ll code the design up for WordPress rather than a static HTML site.  To reiterate, this is about taking a design (in whatever format), slicing it up in Photoshop, or similar (Gimp), then applying the CSS to the HTML. WordPress features intuitive markup, so I’ll base the HTML around theirs.

The slicing of the design will be dealt with first, followed by a look at the HTML, then proceeded by the all important CSS. To begin with, let’s look at the design in the slicing environment.

1-overview

This is the psd of a recently completed website opened up and ready to slice in Photoshop. It’s a clean, uncomplicated design, so should be ideal for a tutorial. For demonstration purposes, I’m using the ‘crop’ tool instead of slicing tool, and saving each piece as a jpg in turn. There’s not a particular preference for image formt, so use what you wish; jpgs load up quicky, that’s all. Right, let the cutting begin.

background-slice

A slice is taken from the top of the psd going through the white space to just below the thick green line. It will be repeated across the <body> of the document, covering the width of the screen. Next, the little house with the lightbulb is cut out.

cutting-out-the-little-hous

The house is cut out from the top to just beneath the green like. It will later be layered over repeated background strip. Now for the logo and introductory text.

cutting-out-the-logo

cutting-out-logo

A similar effect for the text could have been gained using sIFR, but on this occassion opted for a CSS text replacement technique. After cutting out the navigation buttons – both the blue and ‘hover effect’ orange – and other bits and pieces, the last substantial piece of cutting is the Twitter section.

cutting-out-twitter

That’s all the cutting; let’s run through the pieces.

  • Background strip
  • Logo
  • Introductory text
  • House with lightbulb
  • Navigation buttons
  • Twitter section
  • Twitter button
  • Contact and Twitter headings

The HTML

Assuming you’ve installed a copy of WordPress, let’s navigate to the default theme to inspect the markup – ‘wp-content’, ‘themes’, ‘default’ directory. Open the index.php to view the following:

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<div id="content" role="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The WordPress loop, in bold, doesn’t have any bearing on this tutorial, so we can ignore it. get_header() renders the header part of the HTML, while get_sidebar() and get_footer() render the sidebar and footer, respectively. I’ve gone through the index.php file to avoid confusion; what I’d like to do is go through the rendered HTML as that’s what we’re going to style. Here’s the rendered HTML of index.php without the PHP ‘loop’ (I’ve deleted a few unordered lists fro the sidebar as they’re not relevant):

<body>
<div id="page">
<div id="header" role="banner">
<div id="headerimg"><h1><a href="Blog name"</a></h1>
<div><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
<div id="content" role="main">
</div>
<div id="sidebar" role="complementary">
<ul role="navigation">
<li><h2>Archives</h2></ul></li>
<ul><li><h2>Meta</h2></li></ul>
</div>
<hr />
<div id="footer" role="contentinfo">
</div>
</div>
</body>

Minus a few unordered listed from the sidebar, the above is more or less the standard HTML from the default theme. The site we’re working on in this tutorial is customised, so has slightly different HTML, but importantly, a similar structure. Here’s the HTML from DRC Electrical:

<body>
<div id="page">
<div id="header">
<h1><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();"><span>DRC Electrical Services</span></a></h1>
<ul id="nav">
<li><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();">Home</a></li>
<li><a href="/services/" onfocus="if (this.blur)this.blur();">Services</a></li>
<li><a href="/testimonials/" onfocus="if (this.blur)this.blur();">testimonials</a></li>
<li><a href="/blog/" onfocus="if (this.blur)this.blur();">blog</a></li>
<li><a href="/contact/" onfocus="if (this.blur)this.blur();">contact</a></li>
</ul>
<div><span>Hello, we are a company offering electrical services</span></div>
<div></div>
</div><!--end of header-->
<div id="content">
<div id="sidebar">
<div>
<div>
<h1><span>Contact DRC Electrical</span></h1>
<p>We always like to talk to people.
Just drop us an email or call us.</p>
<div>020 8287 7907</div>
<p>Mobile:</p>
<div>07985 279916</div>
<p>Email:</p>
<div>info@drcelectrical.co.uk</div>
</div>
<div>
<h1><span>Twitter</span></h1>
<div>
Going to elex expo at sandown should be good <a href="http://twitter.com/DRC_Electrical/statuses/6218208623" class="twitter-link">Go</a> <span class="twitter-timestamp"><abbr title="2009/12/01 00:24:04">2009/12/01</abbr></span>
</div> <!--end of twitter-message-->
<a href="http://twitter.com/DRC_Electrical/"></a>
</div><!--end of Twitter-div-->
<ul><li>
</ul>
</div><!--end of sidebar-content-->
</div><!--end of sidebar-->
<div id="content-left"><!--post/content goes in here-->
<div id="post-3">
<h2>DRC Electrical….</h2>
<div>
<p>provide electrical services to the London and Surrey areas. Fully qualified, and with years of experience on hand, our typical jobs range from electrical testing to full rewires. Emergency callouts, or jobs booked well in advance, we cover them all.</p>
<p>Our work is balanced between domestic and corporate customers alike. Onsite commercial electrical work is an area we’re very familiar with. From quotation to completion, we handle everything including sourcing products to disposal.</p>
<p>If you’re after a competitive rate from an company that’ll provide peace of mind, please don’t hesitate to get in touch. For emails, we aim to respond within 12-hours, while for enquiries that need immediate attention, please telephone.</p>
</div>
</div><!--end of post-->
</div><!--end of content-left-->
</div><!--end of content-->
<div id="footer">
<div><a href="http://www.zorinweb.com" target='blank' title="Website by Zw">Site by Zw</a></div>
<div>&copy; 2009 DRC Electrical</div>
</div><!--end of footer-->
</div>
</body>

That’s the generated HTML from the home page which I’ve commented as best as possible. The structure’s very similar to the default theme; we still have the ‘page’ DIV, ‘header’, ‘content’, ‘sidebar’ and ‘footer’. Assuming you’ve cut out the images, place them in an appropriate folder, and set up the development environment (if you use one), and let’s begin the styling.

The CSS

First, the body:

body {
margin: 0;
padding: 0;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 13px;
color: #fff;
height: 100%;
background: #1479c7 url(images/background-repeat.jpg) repeat-x;
}

Importantly here, we’ve taken our initial bit of slicing, ‘background-repeat.jpg’, and repeated it across the body’s x axis, and set the background to #1479c7. That’s the top of the sorted out, margin and padding zeroed in, etc.. As for the structure:

#page {
width: 810px;
margin: 0 auto;
}

The outer DIV, page, is set to 810px wide and placed in the centre.

#header {
width: 810px;
height: 380px;
position: relative;
}

With the header’s styling in place, we can now plonk the logo, navigation and introductory sentence in.

#header h1 {
margin:0px;
font-weight:bold;
}
#header h1 a {
height:100px;
width:350px;
background: url(images/logo.jpg) no-repeat 0px 10px;
float:left;
margin:20px 0 0 0;
}
#header h1 a span {
display: none;
}

Adhering to best practices and accessibility, the logo’s attached to a link within an H1 one heading. The actual HTML for DRC Electrical is inserted between span tags set to ‘display: none’. Here’s the navigation’s CSS:

#nav {
width: 800px;
position: relative;
padding: 3px;
margin: 0 0 0 7px;
height: 30px;
float: left;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav li {
width: 120px;
float: left;
list-style: none;
}
#nav a {
height: 26px;
color: #FFF;
display: block;
text-decoration: none;
text-align: center;
background: url(images/nav-button.jpg) no-repeat;
padding: 4px 0 0 0;
}
#nav a:hover {
background: url(images/nav-button-hover.jpg) no-repeat;
}

‘#nav’ sets the container’s dimensions, ‘#nav li’ sorts out the individual elements, while ‘#nav a’ style’s out the actual links assigning the background of each to ‘images/nav-button.jpg’, the blue button cut out earlier on. Lastly for the navigation, ‘#nav a:hover’ gives a nice little hover effect with the orange button, ‘nav-button-hover.jpg’.

The introductory sentence is encased within ‘hello’ DIV.

.hello {
background: url(images/intro-text.jpg) no-repeat;
float: left;
height: 140px;
margin: 30px 0 0;
width: 470px;
}
.hello span {
display: none;
}

Again, the background’s set to images/intro-text.jpg, with a span styled to display none for the HTML to make it accessible. Closing out the header section, a DIV with a class of ‘lamp’. The following should be self explanatory:

.lamp {
float: right;
height: 200px;
margin: 16px 70px 0 0;
width: 230px;
background: url(images/lightbulb4.jpg) no-repeat;
}

Moving onto the ‘content’ portion:

#content {
width: 810px;
float :left;
}
#content-left {
width: 530px;
min-height: 650px;
position: relative;
float: left;
}

‘content-left’ is simply floated to the left to make way for the sidebar which appears before ‘content-left’ in the markup. Here’s the sidebar and it’s paragraph element:

#sidebar {
margin: 0 0 0 6px;
min-height: 600px;
width: 258px;
float: right;
display: table;
}
#sidebar p {
margin:4px 0;
color:#B8B291;
width:220px;
}

Incidentally display is set to ‘table’; I’ll explain about that in another tutorial. The next DIV in the sidebar is ‘side-content’.

.side-content {
float: left;
width: 258px;
padding: 0;
min-height: 500px;
}

The first piece of content in the sidebar deals with contact details, which is inserted in:

.contact {
border-bottom: 1px #7ab3df solid;
}

This gives us a nice border at the bottom.

h1.contact-sidebar  {
width: 226px;
height: 38px;
background: url(images/sidebar-contact.jpg) no-repeat -6px 0;
margin: 0;
}
h1.contact-sidebar span {
display: none;
}

The above styling’s for the ‘contact’ heading. sidebar-contact.jpg is cut out of the psd and assigned to an H1 heading with a class of .contact-sidebar. The same applies to the Twitter heading.

h1.twitter-sidebar  {
width: 226px;
height:38px;
background: url(images/sidebar-twitter.jpg) no-repeat -6px 0;
margin:0;
}
h1.twitter-sidebar span {
display:none;
}

Finishing off the sidebar is Twitter feed box and the corresponding ‘follow me’ button:

.twitter-div {
background:transparent url(images/twitter-box.jpg) no-repeat -10px 55px;
border-bottom:1px solid #7ab3df;
height:205px;
padding:10px 0;
}
.twitter-message {
color:#B8B291;
margin:18px 0 0 8px;
padding:0;
width:240px;
height:82px;
}
.followme {
background:url(images/follow-me-button.jpg) no-repeat;
display:block;
margin-top:25px;
height:30px;
width:145px;
}

The .twitter-div has it’s background set to  url(images/twitter-box.jpg) no-repeat -10px 55px; this is the Twitter box cut out earlier on. The ‘twitter-message’ fits in the box and styles the input, while ‘follow me’ button has it’s background set appropriately.

That takes care of all the images; here’s the rest of the CSS to go with the remaining markup:

#footer {
float:left;
height:39px;
padding:40px 0 0;
width: 810px;
color:#7ab3df;
}

Hope you enjoyed the tutorial.

]]> http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/feed/ 5 Fixing Internet Explorer CSS Problems with Conditional Comments http://zorinweb.com/2009/12/fixing-internet-explorer-css-problems-with-conditional-comments/ http://zorinweb.com/2009/12/fixing-internet-explorer-css-problems-with-conditional-comments/#comments Thu, 17 Dec 2009 16:13:15 +0000 ZorinWeb http://zorinweb.com/?p=93 You’ve developed a site using W3C best practices; it validates, the markup’s semantic or as clean as possible, and looks great in Firefox. The problem is, Internet Explorer doesn’t quite see it as the designer intended. The CSS is out and in need of a few hacks; but there’s a better, more effecient and tidier solution – conditional comments.

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

The above piece of code targets selects all IE versions less than or equal to 7, and is Microsoft’s recommended method for aiming CSS as one of its browsers.  Include all the problematic CSS in stylesheet ‘ie.css’ and leave the conditional comment below the main stylesheet. Try this rather than resorting to a hack, or giving up entirely and whacking a table in.

]]> http://zorinweb.com/2009/12/fixing-internet-explorer-css-problems-with-conditional-comments/feed/ 0