Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 38
  1. #1
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    I think I'm ready for an honest review

    I tried very hard to get away from tables with this and I think I did ok...

    I ran this page through validation and it came up with a couple of errors - namely the images in the right column - that I'm not sure how to correct so by all means offer any suggestions.

    The other pages have not been corrected yet - they're quite out of alignment

    I've also found that although I've changed the left column links to a list - FF is not displaying it properly - any thoughts?

    Okey dokey then - let the games begin!!

    Thanks everyone!

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    The image validation errors are because you don't have the height and width values in double quotes, e.g. height="127"

    You also have a link tag in your body and it doesn't have a closing /
    OracleGuy

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Location
    Nottingham NH
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Pretty easy fixes for the errors.

    1) Get the second link for the CSS out of the div in the body. Not needed as you have it in the head as it should be already.

    2) p align="center" should be in the CSS for a class. ie, p class="center"
    Code:
    .center {
    text-align : center;
    }
    3) Not an error, but... you have a class called pageimages with style in the image as well. I'd suggest putting the float in the css in the class, or make another for the float. Change from this...
    Code:
    <img src="images/usbcLogo.gif" alt="USBC Logo" style="float:left" width="139" height="80" class="pageimages" />
    To this...
    Code:
    <img src="images/usbcLogo.gif" alt="USBC" width="139" height="80" class="left" />
    With this new left class...
    Code:
    img.left {
    float : left;
    }
    4) As it says, quote your attributes... height="value". Easy one.

    5) border="0" belong in your CSS
    Code:
    pageimages {
    border : 0; (or border : none;)
    }
    6) The target attribute is deprecated in XHTML. Remove that. IF you simple MUST force people to open links in a new window (a practice which is falling out of favor) do it like this.
    Code:
    onclick="target='_blank'" onkeypress="target='_blank'"
    "onkeypress" is for keyboard users, and if scripting isn't enabled, it'll open internally.

    7) You need to do something like image replacement for your banner so your heading is seen if images are off and CSS is on.

    8) Padding is needed for your content are.

    9) Nav links are broken, but I didn't invesitigate. I only see home and then the list goes bad.

    10) Same with the CSS. I'd go through it and fix things up a bit: It's missing a lot of the basics, heading, etc, but has a ton of classes.

    It's not bad, though. Looks pretty good in the mark-up, aside from the errors. I applaud your effort.

    Hope this helps.
    Mike

    (Used Firefox 1.0.7 to check it out, broadband, 1024x768)

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    On the list not working correctly:

    you have this in your css:
    Code:
    #left-col-nav a{
    	width:100%;
    	float: left;
    	margin: 0px;
    	text-decoration: none;
    	background-color: #003366;
    	padding: 0px;
    }
    your floating the links.

    and you have a typo of sorts
    Code:
    <div id="left-col"><link href="../css/3-col-css.css" rel="stylesheet" type="text/css">
    I don't know for sure if that makes a difference but your trying to call your style sheet again.

    You have a lot of redundant code in there from what I see. I took everything from your source and css that had anything to do with the lezt column (the column, navigation, lists, links, etc...) and cut it down to this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Suncoast USBC Bowling Association - Welcome</title>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <style type="text/css">
    #left-col {
    	width:167px;
    	float: left;
    	text-decoration: none;
    	font-family: "Trebuchet MS";
    	font-size: 12px;
    	color: #FFFFFF;
    	background-color: #003366;
    }
    #left-col ul, li {
    	padding: 0;
    	margin: 5px 5px 5px 0;
    	list-style: none;
    }
    #left-col li a:link, a:visited, a:active {
    	width:100%;
            display: block;
            color: #fff;
            text-decoration: none;
            padding: 5px;
            text-indent: 10px;
    }
    #left-col li a:hover {
            background: #fff;
     	color: #036;
    }
    
    </style>
    </head>
    <body>
    <div id="left-col">
      <ul>
        <li><a href="index.cfm">Home</a></li>
        <li><a href="president.cfm">President's Letter</a></li>
        <li><a href="bylaws.cfm">Bylaws</a></li>
    
        <li><a href="boardmembers.cfm">Board Members</a></li>
        <li><a href="committees.cfm">Committees</a></li>
        <li><a href="statetournament.cfm">State Tournament</a></li>
        <li><a href="calendar.cfm">Calendar</a></li>
        <li><a href="#">West Zone</a></li>
        <li><a href="#">Yearbook</a></li>
    
        <li><a href="#">Guest Book</a></li>
        <li><a href="#">Join Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    </body>
    It seems to work fine for me this way. Maybe it's more of what you had in mind.

    if you need anymore help with it feel free to ask away.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Seem to have a case of the d-u-u-u-h's

    OG - don't know how I missed that with the quotes and I looked for the link but couldn't find it

    GB - I knew there was something easy about it...question about the target - I don't want for people to click on these links and then leave my site - I'd like for my site to see have some focus - any other suggestions to achieve that?

    Harbinger - thank you for taking so much time - I will test your css and see how it goes

    Thanks again - will probably repost some time tonight

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Nottingham NH
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harlequin2k5
    GB - I knew there was something easy about it...question about the target - I don't want for people to click on these links and then leave my site - I'd like for my site to see have some focus - any other suggestions to achieve that?
    I understand. If the content is good though, you shouldn't lose anyone.

    Regarding focus, on the links I assume, yes? You can do it by simply adding a:focus, a:active to the a:hover, or you can make a separate entry for just those two if you want the styling to differ from the a:hover styling. Hover get one thing, click and get another.

    Hope this helps.
    Mike

  • #7
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Green Beast
    Regarding focus, on the links I assume, yes?
    I meant for the site in general - in general I will tend to hit the back button if I click to another site - but not everyone does and I wanted to make sure that my site doesn't get lost.

    I remember a long time ago I used to use frames to achieve that - but I'm finding the frames are not recommended and I don't think that our site really needs frames anyway.

    Does that make sense? Or am I being selfish?

  • #8
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV
    your floating the links
    Corrected

    Quote Originally Posted by harbingerOTV
    <div id="left-col"><link href="../css/3-col-css.css" rel="stylesheet" type="text/css">
    Corrected

    Quote Originally Posted by harbingerOTV
    I took everything from your source and css that had anything to do with the lezt column (the column, navigation, lists, links, etc...) and cut it down to this...#left-col {
    width:167px;
    float: left;
    text-decoration: none;
    font-family: "Trebuchet MS";
    font-size: 12px;
    color: #FFFFFF;
    background-color: #003366;
    }...
    Did you mean that I should leave out the #left-col-nav altogether?

  • #9
    Regular Coder
    Join Date
    Jul 2005
    Location
    Nottingham NH
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Focus on content. Make your content so enriching, rewarding, and all those other good "ings" that not only does the visitor come to your site, but they stay a while. Remember that they came to your site volutarily, they should be allowed to leave the same way. You just focus on your content, keep it as fresh as possible, quality stuff, and enhance the experience of the visitors by doing the very best you can to accommodate their needs.

    It's like a store, the customers will come and go as they please, but if you have rides for the kiddies, coffee for the parents, and something for those in between, they'll stay, they'll buy, and they'll likely come again. Thank you have a nice day.

    --

    And yes, frames would be a very poor choice.

    --

    Regarding the CSS above, you're going to want to add a generic value to the font-family property:
    Code:
    font-family : 'Trebuchet MS', sans-serif;
    Also, I'd either use em, % or a relative value (small, smaller, etc) for your font-sizing. Using pixels will effectively disable user text sizing for those using an IE browser.

    Hope this helps.
    Good luck.
    Mike
    Last edited by Green Beast; 11-04-2005 at 12:32 AM.

  • #10
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thanks Mike - it does help - but unfortunately I don't have a copy of the original left-col-nav I was using to get that "centered" column look and I copied over it and messed it all up

    *chuckles*

    back to the drawing board!

  • #11
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harlequin2k5
    unfortunately I don't have a copy of the original left-col-nav I was using to get that "centered" column look and I copied over it and messed it all up

    *chuckles*

    back to the drawing board!
    I got it back - prolly better than it was before thanks to harbinger

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Location
    Nottingham NH
    Posts
    208
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks a lot better.

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    glad i could of some use finally

    Code:
     <p><a href="http://www.bowl.com"><img src="images/usbcLogo.gif" alt="USBC Logo" width="139" height="80" class="pageimages" /></a> 
          </p>
    take off the <p></p> around the image link. IE is messing up the float of the image and not handling the paragraphs below it the way Mozilla is. I assume you want the effect FF/Moz is doing rather than IEs.

    Your center column needs alittle more margin-left. it's not quite centered.

    Try bumping up the text size of your rol-col to match the font size of the left-col. Its a little hard to read right now. Then try bumping up the font size of the center a few sizes bigger than the left-col font size. But a little more emphasis on the center column that way since that's where all the important stuff is.

    All in all its working the same on IE6 Opera and Mozilla to me. Good job.

    Now work on that header image. The text is all grainy.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #14
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    harbingerOTV's tip of the day:
    Always save a .psd of everything.
    grrr...
    Dunno what I did with the original image *chuckles* - I'll get working on that once I get these columns worked out

    but if you look at the original site I think you'd agree that this new one is far better on it's worst day rofl

  • #15
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    yeah, i agree. It's deffinately copme a long way.

    On your middle and right columns add a little line-height: to them and space those lines out a little.

    i'd probally give your right-col p a little margin-left and margin-right. It feels a little too snug on the sides. You might need to un-justify the text though in those p's.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •