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.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Photography Website, Please Review

    Hi,

    I am doing a website for a friend who is a photographer. Can people honestly review and tell me what they think? She loves it but the content area I think needs to be spiced up a little. The light gray area. But I like the links.

    http://www.rodgame.org/projects/photo/

    P.S. I know there is 15 validation errors, but those remaining ones I am not sure how to fix.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    First impressions...

    Well it looks like a nightmare in IE7 (might be related to the validation errors). I'd say don't use the blurry photoshopped image for the picture of (presumably Jessika?) in the body. The blurry treatment of the header image can work as a stylistic choice though.

    I'd make the page width stick with the width of the header image. Right now if I increase my browser window size the gray part extends beyond the width of the logo which looks a bit tacky. If you want a fluid layout width instead -- which it kind of looks like you do -- I'd say you should blend the header image into the background that will extend beyond it (shouldn't be hard to do with semi-transparent PNG version of this image).

    I agree that the gray area is a bit bland but without any more content it's hard to say what it needs.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    The validation errors are all very easy to fix, instead of using FONT style your text with CSS, add ALT to the image and </body /> isn't that hard to fix either

    I'd change the photo in main content area, it doesn't look too good as it is. Something a bit bigger [higher], and more professional would be better for a photographer's site. Also move the text more to the center and down a bit, maybe trying to reach equal margins on the left and right side.

    Not sure about those little separators in the menu, a minor detail but they don't fit too well there IMHO.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Also, your validation errors are due to a missing </div> tag for the footer, the lack of an "alt" attribute for an image (jess.jpg), the incorrect use of the "/>" closing tag on the </body> tag at the end of the page, and finally the use of five <font> tags, which are not allowed in HXTML strict. You need to use CSS to achieve your styling goals for text or at the very least you should use the "style" attribute on the div or paragraph you want to change the font for.

    The code block below fixes all issues EXCEPT for the <font> tags...

    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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Jessikas Photography</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="cool.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">
    	<div id="logo">
    		<h1><a href="#"><font color="black">Jessikas Photography</font></a></h1>
    	</div>
    
    </div>
    
    <div id="page">
    	<div id="menu">
    		<ul>
    			<li><a href="#"><font color="black">Home</font></a></li>
    			<li><a href="#"><font color="black">About Me</font></a></li>
    			<li><a href="#"><font color="black">Portfolio</font></a></li>
    			<li><a href="#"><font color="black">Store</font></a></li>
    			<li><a href="#"><font color="black">Contact</font></a></li>
    		</ul>
     </div>
    	<div id="content">
    
    		<div class="post vline">
    
                   Hi I am Jessika, welcome to my website. I have been doing photography for 4 years, and have over 100 available photos. Below is some things about me.<br /><br />
                   I attended <b>Rockridge Artist School</b> in Orlando, Florida 2001 - 2002. Then I attended <b>McIntire Art School</b> 2003 - 2004 and received my art degree.<br /><br />
                   I do freelance photography and looking to expand into commercial photography. Feel free to take the time to browse my portfolio and contact me.<br /><br />
                   -Jessika
    
    		</div>
    	</div>
    
    	<div id="sidebar">
    		<ul>
    			<li>
       <img src="images/jess.jpg" alt="Jessika" />
    			</li>
    
    
    		</ul>
    	</div>
    	<!-- end sidebar -->
    </div>
    <!-- end page -->
    <div id="footer">
      <p id="legal">&copy;2009 Jessika Photography. All Rights Reserved. | Designed by <b>Success Web Designs</b></p>
    </div>
    </body>
    </html>
    As a side note, when running the HTML validator (http://validator.w3.org/) go to the "More Options" section and be sure to check the boxes for "Show Source" and "Verbose Output" to make debugging MUCH easier. The verbose output gives more explanation to why the code is wrong and what some possible solutions are. Displaying the source code allows you to see exactly what line they are talking about.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Oh awesome I didn't know the show source would actually show me the correct things to change. Ok let me tweak it and post back later on today. Thanks!

  • #6
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    This document was successfully checked as XHTML 1.0 Strict!

    Alright got that part fixed. Now to move on to the other stuff!!

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    OK, still very scary in IE7.

    Try this for starters:
    Code:
    #page {
      /*padding-left: 15px;*/
    	width: 1024px;
    	margin: 0 auto;
            /*background: #f00;*/
    }
    
    #content {
    float:left;
    width:60%;
    }
    
    #sidebar {
    float:right;
    padding-top:30px;
    /*width:10%;*/
    }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    With that it ruins it in FF3. It's really hard to find something that works in both.
    I use FF2 but she uses FF3 and it was messed up badly, so I had to tweak it to how it is.


  •  

    Posting Permissions

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