Personal Website Suggestions wanted...

Zandor435 · Jul 16, 2005

Hi all,

I am relatively new to web design (6 months). I have just recently changed my personal site to CSS. I still have a lot to learn. I would appreciate any and all suggestions about my site design or just css in general.

I am also trying to learn anything that might be usefull in web design in the future. What tools have been most useful to you guys in the past in your web development. I know this is broad, I am just looking for any general direction.

Thanks in advance.

Zach

http://www.zacharymorgan.com

ChrisHunt · Jul 17, 2005

I see two main problems with your current design...

Firstly, the background images aren't working properly. The length of the yellow/orange columns extends way below the text. If you resize the text, it can extend below the ends of the columns. Furthermore, the content doesn't centre itself on smaller screen sizes.

Here's what you need to do. Structure your HTML like this:

Code:

<body>
   <div id="container">
      <div id="header">Header here</div>
      <div id="main">Main Content here</div>
      <div id="sidebar">Sidebar here</div>
      <div id="footer">Footer here (if you want one)</div>
   </div>
</body>

Now, you can build up the desired effect with CSS and a couple of carefully chosen background images:

Code:

body {
   text-align: center; /* fix for old IEs */
   background: #CCC url(/images/stripes.gif);
   margin: 0;
   padding: 0;
}

#container {
   text-align: left; /* undo IE fix */
   background: url(/images/cols.gif) repeat-y;
   margin: 0 auto;
   width: 660px;
   padding: 0 34px;
}

#main {
   float: left;
   width: 389px;
   margin-right: 10px;
}
#sidebar {
   float: left;
   width: 193px;
}
#footer{
   clear: both;
}

stripes.gif is a tiny image (1px wide x 2px high if you like) used just to get the white/grey stripes in the background. cols.gif is a horizontal slice through your two columns, extending horizontally from one shaded area to the other. It only needs to be a few pixels high. This'll give you two centred, coloured columns that'll repeat as far down as they're needed (and no further). You can use an image in your #header div (foreground or background) to hide the underlying columns.

The second problem with your page - and this is a more subjective judgement - is that it's very hard to read. Tiny text combined with reduced line-height and a narrow width (you could afford to make it 100px wider) make the whole think cramped and sometimes totally illegible. Can you read that paragraph under the numberplate? If you must have tiny text, at least give it enough line height to seperate it from underlines in the line above. Personally I've never understood this "make my site look like a credit card contract" trend.

Under the hood, there's a mess of unnecessary javascript and font tags near the top. But I'd get the layout working right before tackling them.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

johnwm · Jul 17, 2005

I definitely agree about the font sizes - at default settings they are just about unreadable. You might also consider taking your CSS into a separate file.
There also seems to be several broken links:

http://validator.w3.org/checklink?c...&summary=on&uri=http://www.zacharymorgan.com/

and a few validation errors to fix:

http://validator.w3.org/check?verbose=1&uri=http://www.zacharymorgan.com/

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

Zandor435 · Jul 17, 2005

Thanks for the comments, I knew I had alot of things to fix. That will give me some things to work on for a while. I might ask for more comments down the line, but for now appreciate the help.

Zach

http://www.zacharymorgan.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Personal Website Suggestions wanted...

Zandor435

Technical User

ChrisHunt

Programmer

johnwm

Programmer

Zandor435

Technical User

Similar threads

Part and Inventory Search

Sponsor