Line25

Code a Textured Outdoors Website in HTML & CSS

Read the full post

Last week we went through the process of designing a detailed website design for Pinewood Forest. This week we’ll code up the Photoshop concept into a working web page. See how the design is exported into individual images, how the HTML skeleton is put together and how the CSS coding replicates the styling from the concept.

View the Pinewood Forest website

In case you missed last week’s tutorial, here’s the design we’ll be building. The site features a large static background image that allows the main content to scroll over it, and the content itself is broken up into key focus areas with photography used to draw in the user.

View the Photoshop tutorial

Exporting the background images

The first step of the build process is to chop up the concept into individual images. Some sections of the design can be replicated with pure CSS, but other areas will need to the help of a background image. The main portion of the design is the large photographic background image. With careful compression the filesize can be kept fairly low despite its huge size.

Due to the design having a fixed background image, the content will have to scroll over the top of it. This means elements like the logo will need to be exported with transparency using the PNG-24 file option.

The main content background also has a subtle element of transparency, so this also needs to be exported as a PNG graphic. The background will be split into three sections, the top, the bottom and a repeating section from the middle.

The final collection of images is made up of a mix of PNG and JPEG files. Some are small images that will repeat to form a textured background, others are text replacement images for titles and headers.

The HTML structure

View large code view

The index file is started out with the core HTML structure. A Strict doctype is used to maintain good practices, followed by the HTML <head> which contains the page title and link to the CSS stylesheet. A div is added to the <body> to contain all the following page structure.

View large code view

The design begins with a header div to contain the logo and navigation items. The logo itself is laid out as an image file inside an anchor. The title attribute inside the anchor provides a description for the user where the link will go, and the descriptive ALT attribute in the image tag describes the image as the Pinewood Forest logo for users without images enabled.
The good old <ul> is the universal element for navigation menus as it accurately depicts the menu system in plain HTML form. In the design concept the logo sits between the navigation items, but to keep the HTML structure clear the two elements are separated completely. Later the CSS styling will move the individual elements into place to replicate the design concept.

View large code view

Following the header is the main content area. To keep the HTML structure clean and tidy this is all contained in its own div element. The large feature area appears first on the homepage, so this is contained in a child div so it can be accurately positioned on the page. The first main heading on the page is the ‘Explore the forest’ text, so this is given <h1> status. A class of btn is added to a paragraph element in the feature section so this particular element can be transformed into a button graphic with CSS later.

View large code view

The next level heading for the intro to the content area is a <h2>. The main content area itself is split into two columns, the larger of which is created as a div with the ID of main. Inside this div the main body copy is written out as individual paragraph elements. Don’t forget to convert links into HTML anchors and switch out any characters such as the ampersand to HTML entities.
At the bottom of this column is an upcoming events section. The events list fits perfectly into the Definition List element, seeing as it compares two related elements – The date and the actual event. Using <span> tags inside the definition list will allow unique styling of certain elements with CSS.

View large code view

The smaller of the two columns is laid out as another div, this time with an ID of ‘side’. The sidebar contains three mini-features, each including an image heading and description. Because each image contains text inside the actual image, the text content is replicated in the ALT attribute to keep everything accessible.
At the bottom of the page the content div is closed, then a short footer div is added to contain a simple back to top anchor.

Unstyled HTML view

At this stage the design can be previewed without any CSS styling and the content should be clearly readable with the HTML elements creating a natural hierarchy. Validating the code will ensure our HTML is in tip-top shape without any errors which could affect the styling of the page when CSS is applied.

Styling with CSS

View large code view

Now the HTML structure is in place it’s time to style up the design with CSS. The first line in the stylesheet is a simple reset to remove any default browser styling, then the global font styling is added to the body. Also added to the body is the large photographic background image. Setting this image to ‘fixed’ at the top center will allow it to stay in place while the rest of the content scrolls over it.
For those without background images enabled, or those with supremely large monitor resolutions a background colour is also added so the page is still legible on a plain dark blue background.
The main container area is given a 960px fixed width and centred up using the common margin: 0 auto; declaration.

View large code view

The elements that make up the header are then moved into place and styled accordingly. The top section of the content panel is added as a background image to the bottom of the header div. The unique positioning of the logo and navigation menu is created using a mix of negative margin to align the elements according to the concept. Because the navigation items sit as either side of the logo the CSS3 nth-child property is used to target each individual list item and add an appropriate margin. The font is then styled to match the concept using letter-spacing to match the tracking used in the Photoshop design.

View large code view

The height of the content div will vary on each page, so a repeating background image is set to allow the content panel to expand without limitation. Left and right padding is also added to keep the page content away from the edges. Because the content area will contain two floating columns, the overflow:hidden; declaration is used to ensure these floats will be cleared.
Relative positioning on the feature section allows the content to be moved exactly into place, and a touch of negative margin compensates for the padding on the parent content div to allow the feature area to sit flush with the edges of the page. Simple image replacement is used on the h1 to display the image graphic in place of the standard HTML text, but the smaller paragraph is styled entirely with CSS font styling. The small button is another element that is converted to an image using the image replacement technique.

View large code view

The main div is the wider of the two columns at 536px. The width of ‘main’ plus the width of ‘side’ along with the margin between them equates to the width of the parent content div minus its left and right padding. General font styling is added to the h2, anchors and paragraph elements, then the definition list is styled to match the layout in the design concept. The definition title is transformed into the date icon by giving it a specific width and height along with a grey background. The font styling displays the date as large white text, and the span is made slighly smaller so the month sits neatly underneath the larger number. Floated alongside the definition title is the definition description which contains the header and paragraph. One fancy CSS trick here is the visibility:hidden; declaration on the more info span. This is set to remain hidden until the description is hovered with the mouse, the span will subsequently turn to visible to display the ‘View more info’ link.

View large code view

Each aside element is given the textured watercolour graphic as a background, then the image headers are moved into place with a touch of padding. The following font styling is automatically added by the CSS set on the content div, which is continued down through each child element unless it is altered with specificity. The footer div is given a background image to close off the content panel and padding is added to accommodate this image. The back to top link sits outside the content div, so new styling for the anchor is needed. Because this link sits on a dark background rather than the light background the colours need to be altered from the main link styling on the rest of the page to keep it legible.

Pinewood Forest styled webpage

This leaves us with a completely styled design as a fully working webpage. But we’re not finished quite yet! Firefox, Safari and Chrome have no problem rendering the CSS3 nth-child property, but Internet Explorer fails as usual. A couple of lines of jQuery soon sort that out though.

View large code view

The jQuery library and an ‘iefix.js’ Javascript file is linked from the HTML document. jQuery supports and implements the nth-child property without any problem even in Internet Explorer, so the appropriate margins are replicated from the CSS stylesheet in jQuery.

View the Pinewood Forest website

Our webpage is now fully working in the latest Internet Explorer, Firefox, Safari and Chrome. The use of PNG graphics scare the pants off earlier versions of IE, but those could soon be fixed with a separate IE-only stylesheet and the help of the Belated PNG fix. I’d rather tear off my fingernails than fix IE bugs all day, so I’ll leave that task for you ;-)

View the finished Pinewood Forest webpage

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

19 Comments

  1. John says:

    Awesome! been checking back regularly waiting for this. I enjoy watching other people go through their process, to see how/if I can improve upon my own.

    Never used definition lists, time to change that.

    Thanks for the great content and sharing with the design community.

  2. saurabh shah says:

    Nice tutorial Chris.

  3. Ye nicely done, like john sed, I like to see how other people code to see if I match or can improve my own code.

    But really well noted.

  4. Netpaths says:

    Thanks for sharing this and very good html & css tutorial.

  5. edurup says:

    very nice work thanks for sharing chris

  6. George E. says:

    Hi Chris!

    I love your tutorials, they are so informative and well done compared to others. :)

    Keep up the good work.

  7. Shaun Bent says:

    Hi Chris!

    Great article as always, I have been looking forward to this tutorial since I saw the design last week.

    I would like to express my concern for the way in which you suggest people compensate for Internet Explorers lack of support for the CSS pseudo selector :nth-child.

    From a development point of view to apply styles directly with jQuery to compensate for IE lack of support seems every dirty and I would consider this bad practice and not something I would wish to encourage as a good way of solving this problem.

    The solution you have offered does indeed solve the problem, but it is also applying these styles to all browsers including the browsers which do support :nth-child.

    A nicer solution would be to apply a class of "nth-child-1, nth-child-2, etc" to each element and then use this to apply the styles, thus keeping your styles in your style-sheet where they should be and making this code more maintainable. This JavaScript could then be wrapped in an if IE selector so that it is ignored by other browsers.

    However, this solution is then mimicking what could be achieved using the JavaScript utility 'Selectivizr' (http://selectivizr.com/), which would apply the class's and create the styles automatically without the need for any code, it would be as simple as just including selectivizr below jQuery.

    This is just my view and would love to hear anyone else's take on this.

    Regards

    Shaun

    • lewismc says:

      I would agree with this. Use ‘Selectivizr’ (http://selectivizr.com/) to add the classes to IE then reference them in your CSS rather than use JQuery to apply your CSS (which affects all browsers anyway effectively making your hard work in the CSS redundant)

      Great Tutorial!

  8. Joshua Chase says:

    Fantastic tutorial Chris. What application do you use to write the notes over your code?

    Awesome found on this post :)

  9. rajasegar says:

    Thanks for sharing the tutorial , Chris, you have done a great job, i have suggestion, regarding the code, instead of putting them in a lightbox , why don't you give them in downloadable format along with the demo, that will be easy to read…

  10. August says:

    thank you….so nice

  11. Buzz says:

    Brilliant tutorial, better than many commercial things i've seen… thanks for sharing!

  12. Thach says:

    well…. rất tốt

  13. Amr Boghdady says:

    That was quite easy to follow, and the end-result is amazing!
    Very well done Chris!

  14. Konrad says:

    IE can use :nth-child and much more thanks to this project http://ie7-js.googlecode.com/svn/test/index.html :)

  15. Juan says:

    Great tutorial, greetings from Panamá

  16. Diogo Dantas says:

    Someone can help me? Where i put the css code?

  17. Ian Kirk says:

    Wow thanks for the tut, i've been trying to find out how to code a large backgrounded website efficiently and here it is! Cheers

Comments are now closed