Division based xhtml and css Template

To get the code visit ocgfx and copy and paste it from there.

1. Create a new folder, and open up a text editor (Notepad), and copy (Ctrl+C) and paste (Ctrl+V) the template code. then save (Inside the new folder) the document as a .html file

2. To view the template open up your browser and go to File > Open (Open File in Fire Fox)

3. To create an external stylesheet copy and paste all the css contained in the <style> tags. Create another document and save (Inside the new folder), as style.css

Note: You do not need to use style tags in the external stylesheet.

Adding content to the template

All tags (elements), must be closed…

<p></p>
<blockquote></blockquote>
<div></div>

…or self closed

<br />
<hr />
<img src="" alt="" />

Text

1. All text should be contained in <p> (paragraph) tags.

<p>Example of a paragraph</p>

2. Quotes should be enclosed in both Blockquote and Paragraph tags

<blockquote><p>Example of a quote</p></blockquote>

Images

1. Image tags should contain the alt attribute, to give an alternative text description if the image fails to load.

<img src="http://img.jpg" alt="my image" />

2. Images should be enclosed in <div> tags.

<div><img src="http://img.jpg" alt="my image"/></div>

3. You can also add some caption text to the image, enclosed in <p> tags.

<div><img src="http://img.jpg" alt="my image" /><p>caption</p></div>

4. To align the image on the left of the page add:

<div><img class="imgfl" src="http://img.jpg" alt="my image" /><p>caption</p></div>

5. To align the image on the right of the page add:

<div><img class="imgfr" src="http://img.jpg" alt="my image" /><p>caption</p></div>

Navigation and side bar links

These links are treated as list items (<li>) inside ordered lists (<ol>). To add more links, add another list item to the list:

<ol>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Another Link</a></li>
</ol>

If you are having any further difficulties, or want to modify the template, let me know

New Year Design Resolutions

My design resolutions (no design pun intended) for 2007.

Design for fluidity

Designing fluid layouts is the way forward in web design. Designing for the browser window rather than the monitor size and screen resolution. Graphically, this presents both limitations and new design challenges. I’d rather learn to find solutions to designing for fluidity rather than stick to a fixed layout that allows me to show off my design skills without limitation.

Focus on the graphics

Recently, I’ve focused on CSS and XHTML, opening up my graphics program to work on colours, and editing pre-existing images. I haven’t really applied myself to create anything unique, or spent hours working on specific design elements. When I first developed a taste for web design, I’d spend hours working on a banner, or designing icons, but lately I have become impatient and have lacked direction. I need to rebuild my skills, experiment more, follow more tutorials, and regain my confidence. Lack of confidence hurts my work the most. Also, I’d like to work with photos, more. I’m not so keen on using other people’s work, rather it’s time I splashed out on a digital camera.

Design shortcuts

It’s difficult when coming up with a new layout, not to fall into the trap of recycling design elements, such as glossy effects, dropshadows, rounded corners, reflections, etc, etc. I’m not planning on eliminating these design elements altogether. Rather, to use them purposely in relation to the design when and where they’re needed, rather than rely on them just to jazz things up.

Merry Christmas and happy new year to one and all. Hope you have lots of wonderful ones.

Mythological Victim Site Re-design

Mythological Victim is the first Site I created for the Web. I had pretty much given up on it, as it has received little interest, deciding instead to merge the material (along with another blog) into one mythology blog.

However, I really can’t let go of this one. The subject was why I started using the internet in the first place, and next to Web Design it is the only thing I really enjoy working on. And, really, I’m not entirely bothered if it’s a success or not, given the subject matter, I don’t really expect a smash hit or anything, it’s a personal passion.

I’ve worked on it almost solidly over the past week, and have pushed myself to come up with a quality design. Unlike a lot of creative types, I’m not a perfectionist, and as a result, my designs tend to suffer. The same can be said for this design, although I have spent more time working on graphical elements than I have on anything I’ve made in recent months, i’m happy with the results, concidering I’m a bit out of practice.

I’ve gone for a single column fluid layout this time around. I didn’t plan the layout, I just dived right in, and down the line I ran into a few problems, and so the CSS is a bit messy in places. One thing I’ve learned is the need to spend more time working with forms. I’ve been trying to cut down on the number of divisions used, but I think this has caused my overall markup, esp the css, to suffer. In the future, I’ll plan a sensible template structure, rather than trying to cut down on code.

I pixeled a favicon image, and quite liked the design, so I whipped out the pen tool, and turned it into a logo . I’ll most likely make a few modifications some time soon. I’m not sure about one or two things, so I’ll just see how it goes. I’ll leave things as they are for now though. Problems tend to pop up when I least expect them while surfing my sites. So far, it seems like I’ve got everything covered, although there’s usually something I’ve missed.

text-indent: -9999px; not working

I wanted to use this method to hide the hyperlink text while displaying an image, but it wasn’t having any effect. I messed around with the stylesheet trying to locate the problem, and finally figured out that the containing element had the property and value text-align:right;, and it was conflicting (for some reason) with the text-indent value. Including text-align:left; along with text-indent: -9999px; resolved the conflict, and the text disappeared

Problem floating form element in Internet Explorer 6

I wanted to float the search box on the right of the body of the webpage, by adding an ID to the form element, and using float:right; in the stylesheet.

XHTML Mark Up

<form id="search" method="get" action="/index.php">
<fieldset>
<input type="text" name="s" id="s" />
<input type="submit" value="Search" />
</fieldset>
</form>

CSS

#search {float:right;}

This worked fine in both IE7 and Firefox, but when I checked it in IE6, the float didn’t seem to have any effect. I tried defining the width of the form, and this did cause the search box to float almost to the right of the body.

In the end I added the ID to the fieldset element instead, and that seemed to do the trick .