Topic: New site version test (Page 1 of 1)

I've been working on a new version of my site using just css and trying to get rid of all the tables I have floating around. I think I've got something simple and workable that I like. Please take a look and C&C please. Right now it's pretty basic, but I'm stil learning the basics. I'm rather proud of the fact that I did the editting and updating in wordpad, and not through Dreamweaver at all.

New index : http://lahutton.50megs.com/testing/index.htm

CSS file : http://lahutton.50megs.com/testing/coeur.css

I've looked at the page in Netscape and Opera and both are doing ugly things to my right colum, wrapping it around the bottom of my left column. I'm not sure how to fix that.

I've validated the pages, and except for not closing my img tags properly (dammit! I keep forgetting to do this! - FIXED!), everything seem to validate fine html-wise. The script issues are from something that my webhost drops on every page, and I can't do anything about those. The CSS also validates properly, but I still need to figure out the problem with my right column wrapping around my left column.

The writings and blogit pages are also active (I was testing the changes on more than my index page), but that's all so far.

Thanks for taking a look and any advice.

_____________________

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

Wordpad?

You're kidding right?

Do yourself a favor and get a decent text editor - something that supports Syntax highlighting so you can see whenever you make a type or something. There are heaps of them around. Max's HTML Beauty ++ is popular among the inmates here. I use EditPlus2, mainly because it integrates well when running a local web server for developing simple web apps. A lot of others also swear by TextPad. If you're ona Mac then BBedit is also one to look into.

As for the layout, well, it has issues like you mentioned.

A lot of this stems from the way you're marking things up because quite frankly the CSS is a mess. Your "menu-item" class doesn't have the "." class descriptor, and it's only assigned to the first <li> element of the menu list. God knows what that's meant to do.

I suggest you strip all of your ids and classes to start afresh. It'll be easier than trying to salvage what you currently have.

Start with the basics. Use a template someone else has built to get the two columns happening (www.glish.com would be a good place to start). After that, you can start to do the visual (colours & fonts) styles. Always begin with the layout styles (Blocks, floats, margins, padding etc...), once those are all working well move onto the visual ones or you'll get confused as to where the error(s) might be.

Also be sure to maximize your use of inheritance, and try to use as few class and id attributes as you can.

For example:

<div id="columnl">

	<div id="menu" class="navbar">

		<ul class="nav">

			<li><div class="menu-item"><a rel="nofollow" href="index.htm">home</a></div></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>

		</ul>

	</div>

</div>

could be done jusr=t as well like this:

<ul 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>

</ul>

Which is much easier to read and style.

You CSS would be something like:

#nav {

	width: 100px;

	background-color: transparent;

	padding: 0;

	margin: 0;

	float: left;

}



#nav li {

	list-style-type: none;

	padding: 5px 10px 5px 5px;

	margin: 0;

	font-weight: bold;

}



#nav li a {

	text-decoration: none;

}

#nav li a:link, #nav li a:visited {

	color: #003333;

}



#nav li a:active {

	color: #DFDF4A;

}		



#nav li a:hover	{

	color: #DFDF4A;

}

You don't need to declare everything as "float left" of you'll end up with elements overlapping in strange places like you do now. You also don't need to re-declare every style when using pseudo elements or when overriding an element's style based on a class name. Precedence will always be given to the style rule with the highest precision for any given element. body {color:red} will make all of the text red but p{color:green} will override the red body text in paragraph elements as the p{} style rule is more specific. Thus the name Cascading Style Sheets.

I also strongly suggest you read through the Gurus Network CSS tutorials. You seem to be miss understanding how CSS works at the moment and until you get a firm grasp on it then you're just going in circles.

Thanks for the tips, Cameron.

As for using wordpad, I figured it was enough of a marvel that I was weaning myself from letting dreamweaver do all my code for me, much less what I was switching to using. I'll look into those editors you mentioned, and see about using those.

_____________________

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

I've been writing html since 1996, and PHP for a few years, and learned both in notepad. Now i use dreamweaver for its code coloring, auto-tabbing, and ftp features. I would never think of letting it write a line of code, but it works great for what I use it for.

Hadn't thought about using DW for handwriting my code, even though I do tend to do that as well sometimes in the past. I think I had stepped away from using DW as a way of separating myself from the self-coding aspect of the program. I've been letting DW do it all for me for a while now, and when I was redoing the blogit page, I saw just how messed up the program-generated code was. I hadn't paid any attention because it worked for me, so why worry? I'm learning better now. Learning slowly, but at least I'm trying.

_____________________

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

Ok, I went back and redid what I had, and I think I've fixed the problems I was having, and hopefully managed to clean up my html and css a bit more.

I've been working to make the nav menu work properly in IE, Netscape and Opera (I don't have Firefox to test with), and at first I had a problem with the "blogit" link overlapping the "links" link in NS7.1, so I tried fixing that problem. I also streamlined my nav code a bit as Cameron suggested. Well, in the process of fixing the issue with NS, the nav menu now seems to be totally broken in Opera 7.11. All the links are squished up on top of each other. I cleaned up a different problem I had while trying to fix this, but I can't seem to work the nav in Opera.

Also, my footer hangs down below the middle section somewhat, but only sometimes, and again only in Opera.

So, looking for evaluations on this version of code. I'd like to think I'm on the right track, but I tend to be overly optimistic at times.

Main index link : http://lahutton.50megs.com/testing/index.htm

CSS file link : http://lahutton.50megs.com/testing/coeur.css

As before, the writings and blogit links are also active for testing purposes.

Thanks for reviewing.

_____________________

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

Try nPad (search on www.snapfiles.com) lots of cool features, very very lite on size, supports everything web/java/text/vb/c-c++ and pascal I always use.

Oh and nice site RF, clean and simple I like that. I got Opera 7.2 latest fix no problems here good work.

*thumb up*

------------------Edit------------------
After reviewing the site one more time I notice a tincy bit of a buggy bug... there's no flow. Here's what I suggest, it's no biggy. The image in the center of the header, place a div in the header and just make that the
background image simple now jus set the main container to what ever width in percentage.

------------------Edit------------------
One more thing... your links don't seem to stand out, might want to look that up.



Templar654's signature below... then again you already knew that!
-----------------------------------------------------------------------------
Still using IE? Please don't say yes! >>
Opera; because it's the only one!

Online Portfolio | Journal | Community | Paintings | Cell #23041

(Edited by templar654 on 09-06-2004 03:26)

(Edited by templar654 on 09-06-2004 03:29)

What do you mean "there's no flow"? That doesn't make any sense to me.

I'll think about your suggestion on the additional divs in the header.

Which links don't stand out? The ones in the body of the text, or the navigation menu? The navigation menu is rather obvious, and the text body should be as well, since they are underlined links. I might change the active link color though, haven't decided yet.

_____________________

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

Mabye I didn't make myself clear there. By 'flow' I mean fluidity. You expand the browser or contract it and the size stays the same. That just seems like the site is just sitting and doesn't care about the browser. If there's was some 'flow' it would look much more neat and clean, you see you've got all this space on the side empty and that's nice but if the window became smaller that space would vanish thus making the site look a bit ugly. If you want to fix it thats very easy just replace where you've written:

#header { 

width: 700px;

...

To something in percentage like 60 or 70% and the site will have 'flow'.

You should really do something about the body links not the nav it's ok how it is the body links are literally invisible to the naked eye, you need to really look closely to find it!! Also increase line height that would make the current links more visible and also make the rest of the content more easily readable.

-----------------------------------------------------------------------------
Templar654's signature below... then again you already knew that!
-----------------------------------------------------------------------------
Still using IE? Please don't say yes! >>
Why Opera? Because it's the only one!

Online Portfolio | Journal | Community | Paintings | Cell #23041