Topic: Reworking my site once again

And I'd like to think that I'm getting better at keeping things simple.

This is mostly a css upgrade from what I have now, and I've cleaned up my html somewhat, taking out some extra code that I probably should never have put in there in the first place. Eventually I'd like to be able to offer sytleswitching options, but that is still a bit beyond me yet. I want to work with what I (think I) know for now, and not worry about tossing a script in there, no matter how simple it might be.

I've validated both the css and the html, and they both pass with the exception of tracking script that my webhost puts at the end of each page. That generates errors every time and there is nothing I can do about short of changing webhosts, which isn't really possible at this time.

Please let me know what you think.

Sample page : http://lahutton.50megs.com/testing/lcdf/blogit5.htm
css : http://lahutton.50megs.com/testing/lcdf/coeur5.css

Thanks!

EDIT - *sigh* I checked the page that validated properly, and it came up with the menu wrong (it looked like a list instead of the bar that it currently is). I'm not sure what I'm doing wrong with my menu lists. If I put <ul> in there, then thepage validates, but doesn't display as I want it to. But if I take the <ul> out, then the page looks how I want it, but doesn't validate. Here is the html and the css that I've obviously got wrong somewhere :

<div id="nav">

	<li><a rel="nofollow" href="index.htm">home</a></li>

    <li><a rel="nofollow" href="graphics.htm">art</a></li>

	<li><a rel="nofollow" href="writings.htm">writings</a></li>

	<li><a rel="nofollow" href="blogit.htm">blogit!</a></li>

	<li><a rel="nofollow" href="links.htm">links</a></li>

	<li><a rel="nofollow" href="about.htm">about</a> </li>

	</div>

ul, ol, li {

	color: #A95288;

	font-family: Verdana, Arial, Helvetica, sans-serif; 

	font-size: 14px;

	padding: 0px 15px 0px 10px;

	margin: 0px 0px 0px 15px;

	}



#nav { 

	font-family: Verdana, Arial, Helvetica, sans-serif; 

	font-weight: bold; 

	font-size: 12px;

	display: inline;

	margin-left: 0px;

	text-decoration: none;

	}



#nav li {

	display: inline;	

	margin: 0;	

	padding: 2px 5px;

	border-left: 5px;

	float: none;

	}



#nav li a {

	}



#nav li a:link {

	color: #A264E4;

	padding: 2px 5px;

	border-left: 5px;	

	text-decoration: none;

	}



#nav li a:visited {

	color: #8B9E72;

	padding: 2px 5px;

	border-left: 5px;	

	text-decoration: none;

	}



#nav li a:hover	{

	background-color: transparent;

	padding: 2px 5px;

	border-left: 5px solid #5226AA;

	color: #5226AA;

	}



#nav li a:active {

	padding: 2px 5px;

	border-left: 5px;

	color: #A264E4;

	}

So now I really need some help!

_____________________

coeur de feu
Qui sème le vent récolte la tempête!

(Edited by RhyssaFireheart on 03-05-2005 09:44)

(Edited by RhyssaFireheart on 03-05-2005 09:52)

just a quick note for now: to make a list display horizontally, change that 'float:none;' to a 'float:left;'

from the quik look, I love the desgin - very pleasing to look at. running out the door as I type this, so will try to come back with more useful comments.

yeah, you have to use either <ul> or <ol> to start off a list or it just fails. to make the list display horizontally use : display:in-line;

i dig the design. nice and simple html which is great. no images in the html which will lend itself to be customized greatly. groovy

Later,

C:\

For clarity, knowing what these elements stand for helps put things into perspective:

<ul> Unorded List (Bulleted list items)
<ol> Ordered List (Numbered / Lettered list items)
<li> List Item


Thus, you can't say, "Here's a list item" without first saying "Here's a List". Browsers might be able to pick up the <li> and run with it guessing at what you mean, but it's no correct. That and the last thing you want is a web browser guessing at what you markup means!

Design wise it looks nice, but could probably benefit from more attention to the typography. Sizes, weights, italics and whitespace usage could be better IMHO. Things just look a little too bunched up and over styled. Pushing out the line spacing a little further and pulling those separating lines back in to sit flush with the edges of the paragraphs would help. The italic treatment on the dates seems overthought. Italics don't work too well with small sans-serif type faces, especially those presenting technically orientated data like a date (small italic sans-serif numbers are a pet hate of mine, others may very well disagree). The sub titles look ok at the moment but might be served better at a larger size. Play with it some and see how it feels.

The menu treatments could also use a little polish. The hover border-left is too close to the text and it appears suffocated and cramped. Add a little more padding in there and it should be fine.

That "Heart of Fire" block irks me. Just seems way too over styled. The dashed outline is out of context (or simply lacking context) and the pink backing kills that nice semi-transparent feel you've got going on with the background image. Perhaps this would be better served by removing the outline and background color but giving it some punch though a different type face and a larger font size. I'd also suggest you consider simplifying the text, it's a tad long winded for such a simplistic introduction. Be witty, but be brief.

Furthermore, why not get down and funk with the title "le coeur feu". It looks like it's been set in Tahoma or some other mundane body typeface and it just feels, blah. Get funky, get bold, but also try and keep it simple. Simplistically bold or elegant perhaps?

As for the background, I luuuuv the image. Nice colours, perhaps a tad blurry, but the only way you're likely to fix that is to shrink and sharpen it some (which might work well, big isn't always better, as much as I'd like it to be). I'm a tad miffed that the nice fat green stripe doesn't reach the edge of my browser window (res: 1280x960 ua:firefox). There also seems to be some nasty clipping issues happening when I resize the window (in regards to the background at least). Not sure what the problem is as I don't have time to peek at the code but I'm sure you'll get it sorted.

You might also want to try it with background-position:fixed (background will stay in place as content scrolls over). Just and idea to play a little more on that sweet transparent effect you've got going on there.

The copyright box... Nix it. Keep the copyright message by all means, you're entitled to it, but the box isn't doing your design any favours. It's dark, over styled anchor and the content within it looks like a fish-out-of-water. A simple seperating line might work better, as would some additional whitespace below the copyright message to add a little breathing space (or eye resting space if you prefer not to inhale your websites) About half that of the whitespace employed at the top of the page would be enough.

Colour wise I think it's perfect. It feels like you plucked the pallet right from the feature photography - maintaining a good relationship between element colours and the depth of elements in the photo. Nice work.

Oh and of course, take all that a grain of salt.

Thanks DL-44, CPrompt and Cameron for your advice.

Working off what Cameron wrote, I've made some more changes to the layout. I'm still not happy with how the intro section looks, but I also agree that having the solid pink background wasn't adding anything to the look of the page.

site: http://lahutton.50megs.com/testing/lcdf/blogit5.htm
css: http://lahutton.50megs.com/testing/lcdf/coeur5.css

(Note, you might have to refresh to see the changes since I didn't rename the page itself.)

Changes made:

Redid the page title to not be so plain-jane looking, but it's still not overly fancy either.

Background image should now resize properly and not leave any blank space on the right side. Unless your monitor is wider than 22 inches and if so, tough.

I added in line height to my paragraphs, and gods does it make a difference. I honestly never thought about that before, thanks for the tip!

Changed the padding on the menu bar so that the left side border doesn't look like it's on top of the text on hover.

Removed the block around the footer/copyright notice.

Things I didn't do :

Set the background position to fixed. I tried, but whenever I set the background of the container (basically the transparent white area) the background image would center itself and the right side of the flower would disappear. Also, the entire content bacground would shift downwards about 10px. I checked my css several times, and tried several different things, but it just wasn't working. While having the background be fixed would be nice, it's not breaking the site as it is now.


Again, thanks for the advice and I hope I've done a bit better this time around. I know I'm feeling better about the code and css overall, mostly because I'm getting more comfortable with both.

_____________________

coeur de feu
Qui sème le vent récolte la tempête!

Execelent, that's looking heaps better.

The only thing I really have to pick at now is the relative right margin(s). When I start to drag the window down to around 800px wide, I can notice that the left margins are fixed, but the right margins seem to scale with the page width. Keeping them unified (both relative or both fixed) would help maitain the symmetry of the design. On and a little padding under the copyright message would be nice too, just to give a nice white gutter to the bottom of the design mirroring the whitespace at the top.

Lastly, the menu now seems a little low on contrast. The hover styles are nice, but the default styles seem to blend into the background somewhat. If that's what was intended then great, but i generall prefer the main navagation to be a strictly foreground affair... again, that's more of a personal thing.

The bakground? Bah, looks good as is. No need to fuss over something that already looks great.

Yup, digg'n it.

Just a quicky, the site looks great btw.

In regards to the way that the right side of the flower is lighter, have you tried a gradient from bright to dark, its just it strikes me as odd or something having such a straight line in the middle of a flower. Even better than a fade, you could try follow the contours of the flower. Just an idea.

Nice work! I like it. Although there's not much differentiation between the nav and the overall content. Perhaps a little more space in between might help, it'll also bring that text at the bottom, which is one the flower petal on the white, making it look much better. Now it's good but just needs a little touching up