Topic: New site layout (Page 1 of 1)

Ok here's the latest re-design of the curves site. I've taken all advise into consideration and
tweaked the layout with CSS styles, no tables, form mail beind tweaked as we speak...
www.curveshawaii.com

Hopefully it's a lot better.

Much better than the last one

Code wise there isn't much to comment on. The only thing I noticed is that you're using <h1> tags for the 'member spotlight' and 'gift cert...' titles. It is good that you're using a <h> tag for it, but the <h1> tag should usually be used only for page titles, in your case the top 'Curves' text. It isn't a big deal, but you should switch those from <h1> to <h2>. If you want to get really picky about it you should display the top graphic ('Curves'-image) using CSS to better your position in search engines. How you do this is explained in this article from Digital Web.

Your code also lacks a small little thing to validate as XHTML 1.0. The <img> tag on line 11 isn't closed and it lacks an alt attribute. It should look like <img rel="nofollow" href="..." alt="some fancy text" />.

Another nitty picky thing about your code is that your navigation should be a list since it in reality is a list of links. How to do this is explained over at A List Apart.

There is another little thing about the menu. The link leading to the page that the user is currently on should not be a link, since it won't really take the user anywhere. That link should also be displayed differently than the other ones so the user easily can see where he is on your page.

In your CSS file you've also used px to specify the font size. This is generally a bad idea. I every browser (except IE) the user can change the font size even if you use absolute measurements, so you might as well use relative sizes from the beginning and that way giving IE users the same option.

You've also specified the widht of the page in px. I don't see any reason why you can't use % to specify the width. That way it would look good on more resolutions, since it will look rather small on a large resolution as it is now.

I'm not that much of a fan of the colors you use, but that is probably because I don't like that pinkish tone. So considering that I don't like the color from the beginning I think you've done a very good job with it. But the link color could need some adjustments. Right now it is rather hard to read against the white background. Maybe darken it a tad so it contrasts better with the background.

The contact link should lead to a contact page, not directly to a mail adress. The reason for this is mainly that the link looks exactly like the others so the user would expect the link to behave similarily. It might also seem 'more proffesional' if you gave the user a contact form to use along with an optional e-mail adress. Giving away the adress in clear text like you've done a couple of places are also a certain way to make sure you recieve spam mail. It would be better if you used some fancy document.write javasript to display the mail. This way the user would see the mail as normal, but the spam bot would only read the javascript which it wouldn't exepct as a mail.

Keep up the good work!
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

[This message has been edited by Veneficuz (edited 09-16-2003).]

i do see one thing ... update the link for the image of the member spotlight .. is pointing to a drive .. not a location on the webserver .. doesnt load up over here.

For me in IE 5.5 the pink box at the top is about 10px wider than the white box with your content. That's probably because of box model errors in IE 5.5.
http://faq.ozoneasylum.com/1316

There's the section in the faq that will explain a quick and easy hack to take care of that.

:::11oh1:::

Great feedback Veni... This is my first real attempt at a complete CSS designed site.
I will go over the little details and tweak what I can. The colors are there mainly
because they are my wife's favorite colors and it is for her facility... (chic thing)

Im working on a form mail feedback page but have been having some problems getting
it to work properly. Sorting it out on gurursnetwork as thats where I got the tut for
that part. www.curveshawaii.com/fb.php


Thanks Flea for that tidbit... should have caught that myself...

Is there an easy way to change the menu color when Im on a certain page? Something
like an if then statement for CSS? All my files are broken down as external php pages
that way it's easier to update and keep current. Im open to any ideas there.

Overall I was pretty pleased with the coding, being that I did it mostly manual and not
with Dreamweaver. (well i did it in dw but I coded it all myself)

any other thoughts?

Use PHP to give the body tag a unique class, like "about" if you were on the about page, and give the about link the same class. Then use css like so:
.about #menu .about {
background-color: green;
}

And repeat as desired... My site uses this technique if you wanna have a peek.

why bother giving the body a class?
In fact, why bother giving the link a class?

If you're going to go that route, it would make more sense to make the "link" not be a link at all if it's the current page.

a couple of if statements in PHP would do that easily enough....

Im not really sure of the most accurate way of using
div id="?????" or div class="??????" I dont know the difference personaly.
I don't follow in regards to the links thing DL... can you elaborate a little?

First the class vs id thing:
A class (ie .className in the CSS file) is used to specify a styling that is used by a lot of elemts of the page. You could for example which to have different words in a text color red. This would be accomplished by first creating a class:
.redText { color: #f00; }
Then in the paragraph you would color the selected words like this:
...this is a <span class="red">red</span> word. This is another <span class="red">red</span> word...

When your are using the id (ie #idName in the CSS file) you are specifying styles for an element that only occures once on the entire page. Examples of this are navigation bar, header etc. An example of this might be:
#menu { float: left; width: 100px; }
and in the html file:
<div id="menu">
...
</div>

Hope that helps

The link thing that DL mentions is regarding having the link leading to the current page look different and preferable not be a link. The reasons this is good are mentioned in my previous post.

The method Quisja mentioned solves the first 'problem'. It gives the link a different style, but the link still remains a link. DL's solution (which is the one I use on my page as well) is better, since it solves both problems. One way to implement DL's solution first create two classes, one for the 'normal link' and one for the 'abnormal link'. For example:
.normal {color: #0f0; }
.abnormal { color: #00f; }
Then to create the menu you could first create an array holding each menu-element, and create a variable showing which page the user is currently on. The code could then look something like this:

<?php



$pages = array('link1.php', 'link2.php');

$currentPage = 1;



/* create menu */



for ($i=0; $i<sizeof($pages); $i++) {

    if ($i == $currentPage) {

        echo "<span class=\"abnormal\">link</span>";

    } else {

         echo "<a rel="nofollow" href=\"".$pages[$i]."\" class=\"normal\">link</a>";

    }

}



?>

That code would create a link for each link in the $pages array, but when it comes to the link leading to the current page it creates a normal text (instead of a link) with the class 'abnormal'.

If you're unfamiliar with php it might be better to use Quisja's method in the beginning since it solely relies on CSS to format the links....

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

[This message has been edited by Veneficuz (edited 09-18-2003).]

what ^he said =)

On my page, I have a handful of other things that I change based on the current page, so I use some if statements to set a few variables instead. For just setting the links state, Veneficuz' code is nice and simple.

Sorry for the late reply....

Only thing, right now the site is broken into different page elements and I am placing them using an "include". (header, menu, content1, footer)
That way I just have to change 1 file and it will change them all. Would that code you placed above work with this type of usage?
It's getting a little confusing here.... sorry about that.

My biggest glitch is trying to fix a form mail feedback form. www.curveshawaii.com/fb.php It's put together correctly as far as I can tell but
it's not working. To me that is a more crucial element that needs a fixin.

thnx!

Yup. You still have each section loading a different .php file in the url, so it is very easy to detect which page you're on using $PHP_SELF - this will return the last trailing slash and whatever follows it. So if you're on the "promotions" page, calling $PHP_SELF will return "/promo.php". I use the if statements to check $PHP_SELF and spit out variables accordingly, for various uses down in the page.

It's too early for me here to see how veneficuz is detecting which page you're on (and this sinus infection isn't helping my cognitive abilities....) so I'll let him explain that =)

As for the form mail - it's not something I've dealt with yet, so I can't really be of much help. Your best bet is to drop into the server-side scripting forum and give the code and the particular problems there.

If the problem with the form is the display you could take a look at how I've done it one my page. There are no tables and it works in all modern browsers (as far as I know...). If you need help with the server-side bit of it, we might need some more information...

For the other thing, there are many ways to extract the page name (and everything else you need) from the $PHP_SELF variable. The way I've done it on my page might be a bit cumbersome to understand, but you can take a look at it if you want...

But from the top of my an easier to understand code would be:

<?php



$str = $PHP_SELF;



$links = array (

    "index" => "0",

    "fb" => "1",

    "promo" => "2",

    ...

    );



$pages = array("index.php", "fb.php", "promo.php"...);



$currentPage = 0;

if ( preg_match("/\/(\w+).php/", $str, $matches) ) {

    // the regexp should work, but it might need some minor adjustment. 

    // What it should do is exract what is between the \ and .php 

    // and place it in the $matches array

    $currentPage = $links[$matches[0]];

}

That would put a number $currentPage representing the page. And then using a loop resembling the one I posted before you can loop through the array printing the links as you go along. It might also be nice to add a array holding the $titles so you can use a print statment like:

echo "<a rel="nofollow" href=\"".$pages[$i]."\" class=\"normal\">".$title[$i]."</a>";

All of this code should go into your 'menu'-file.

The code should work, but since I don't have time to test it right now there might be some mistakes in it. But at least you should get the general idea...

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

[This message has been edited by Veneficuz (edited 09-25-2003).]

[This message has been edited by Veneficuz (edited 09-25-2003).]

Thanks Veni... as soon as I get a free moment from building my video/photo studio I will make an attempt at it!

Wow Veni,
Just got a chance to peep that code.... very nice! I should have something working before the weekends up. (gotta try it between
pop warner football games in the morning)...