help reviewing code on template home page

Ant · June 17, 2010

After a lot of questions here I felt like I could finally post my code for my first page and see if anything strikes anyone as being incorrect etc.I realize theres probably a ton of unnecessary css, incorrect use of css/font etc, I'm hoping for any comments on the major problems. I realize not everything can be addressed. I'll just have to learn the nuances as I go of right/wrong usgae of elements.

I believe this sort of thing is done here. If it's asking too much, no problem, I can continue and hope I handled all the aspects of the design etc properly.

There are a few things I am not sure on and have NOT added to the site yet, but BELIEVE should be there.

1. meta tags ( keywords) There seems to be a lot of debate on it's use/effectiveness

2. site index

3. anything concerning seo that I have left out

4. extra content that is helpful in the footer, i.e. repeating the navigation at the top etc.

5. "if statement " I see them all the time in source codes but have not or do not know the correct uses for them concerning browser compatability etc Maybe most are just notes for the code???

If I have left out anything that I may have "skimmed over" in the web design 101 category also please let me know.

After this I will make my css external and begin trying to figure out what pieces of the site I should turn into PHP include pieces.

AGAIN, thanks to everyone that helped me get this far and answered all my questions.

Ant

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Streams of Dreams Fly Shop</title>

* {

margin:0; /* zero out margin */

padding:0; /* zero out padding */

}

html, body {

height:100%; /* gives layout 100% height */

overflow:inherit;

background-repeat: repeat-y;

}

#grey_bar_info {

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

font-size: 18px;

font-weight: normal;

text-transform: uppercase;

color: #CCCC99;

background-color: #333333;

height: 18px;

width: 972px;

text-align: center;

padding-top: 8px;

font-style: italic;

padding-bottom: 9px;

line-height: 18px;

}

#wrapper {

min-height:100%; /* gives layout 100% height */

width:1000px; /* centers #wrapper */

position:relative;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

top: 15px;

text-align: center;

background-image: url(images/BG_blurr.jpg);

background-repeat: repeat-y;

border-top-width: medium;

border-right-width: medium;

border-bottom-width: medium;

border-left-width: medium;

border-top-color: #000000;

border-right-color: #000000;

border-bottom-color: #000000;

border-left-color: #000000;

}

#header {

/*position: absolute;*/

width: 972px;

/*left: 0px;*/

/*top: 0px;*/

height: 145px;

text-align: center;

margin-right: auto;

margin-left: auto;

border-top-width: 1px;

border-top-style: solid;

border-top-color: #999999;

}

#left_main {

background-color: #FFFFFF;

width: 962px;

/*left: 0px;*/

/*top: 100px;*/

padding-bottom: 10px;

padding-top: 0px;/*110px;*/

padding-right: 5px;

padding-left: 0px;

text-align: center;

margin-right: auto;

margin-left: auto;

}

a {

color: #996600;

}

.style3 {

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

font-size: 12px;

font-style: normal;

line-height: 20px;

color: #FFFFFF;

text-align: center;

}

* html #wrapper {

height:100%; /* IE6 treats height as min-height */

}

p {

font-size:11.5pt;

text-align:left; /* bottom padding clears the #footer */

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

color: #333333;

line-height: 20px;

font-weight: normal;

}

#clearfooter {

height: 80px;

border: 0;

padding: 0;

background-color: #FFFFFF;

width: 972px;

text-align: center;

margin-right: auto;

margin-left: auto;

}

#footer {

height:70px;

width:972px;

background-color: #333333;

text-align: center;

margin-right: auto;

margin-left: auto;

padding-top: 15px;

padding-bottom: 15px;

margin-bottom: 30px;

}

.floatme_left {

float: left;

padding-right: 15px;

padding-bottom: 10px;

}

hr {

font-weight: bold;

margin-top: 15px;

margin-bottom: 15px;

clear: both;

}

#right_main {

width: 230px;/*110px;*/

/*padding-bottom: 80px;*/

float: right;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 5px;

padding-left: 10px;

top: 0px;

border-left-width: 2px;

border-left-style: solid;

border-left-color: #333333;

margin-right: 5px;

margin-left: 10px;

}

.clear { clear: both; width: 100%; height: 0; visibility: hidden; }

#float_left {

float: left;

width: 660px;

padding-top: 10px;

padding-left: 20px;

padding-right: 22px;

}

#new_one {

margin-left:auto;

margin-right:auto;

width:100%;

background-color:#FFFFFF;

text-align: center;

padding-top: 8px;

padding-bottom: 8px;

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

font-size: 20px;

font-weight: bold;

text-transform: uppercase;

margin-top: 15px;

}

#new_just {

margin-left:auto;

margin-right:auto;

width:100%;

background-color:#FFFFFF;

text-align: center;

padding-top: 8px;

padding-bottom: 8px;

font-style: italic;

color: #666666;

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

}

.photo_caption1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 24px;

font-style: normal;

font-weight: normal;

text-transform: uppercase;

color: #333333;

}

#new_two {

margin-left:auto;

margin-right:auto;

width:100%;

background-color:#FFFFFF;

text-align: center;

padding-top: 8px;

padding-bottom: 8px;

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

font-size: 20px;

font-weight: bold;

text-transform: uppercase;

margin-top: 15px;

}

#new_three {

margin-left:auto;

margin-right:auto;

width:100%;

background-color:#FFFFFF;

text-align: center;

padding-top: 8px;

padding-bottom: 8px;

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

font-size: 20px;

font-weight: bold;

text-transform: uppercase;

}

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 34px;

font-weight: normal;

text-align: left;

clear: both;

color: #000000;

}

h6 {

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

font-size: 12px;

color: #000000;

text-align: left;

font-weight: normal;

}

h5 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

font-weight: normal;

text-align: left;

}

h4 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: normal;

text-align: left;

}

h3 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: normal;

text-align: left;

}

.date {

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

font-size: 12px;

font-weight: normal;

color: #000000;

text-align: left;

}

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 24px;

color: #666666;

font-weight: normal;

line-height: 32px;

text-align: left;

}

#headerart {

height: 109px;

width: 972px;

text-align: center;

padding-top: 10px;

background-repeat: no-repeat;

}

/* nav styling */

#nav {

text-align:center;

height: 25px;

background-color:#333333;

}

#nav ul {

display:inline-block;

list-style:none;

}

* html #nav ul { /* Target IE6 */

display:inline;

}

*+html #nav ul { /* Target IE7 */

display:inline;

}

#nav li {

display:inline;

border-top-width: thick;

border-right-width: thick;

border-bottom-width: thick;

border-left-width: thick;

}

#nav a {

float:left;

text-decoration:none; /* variable width */

font-size: 15px;

height:25px;

line-height: 25px; /* vertically align text - set to the same value as the height */

display:inline;

padding-top: 0;

padding-right: 15px;

padding-bottom: 0;

padding-left: 15px;

}

#nav a:link

{

font-weight:normal;

color:#FFFFFF;

background-color:#333333;

text-align:center;

text-decoration:none;

text-transform:uppercase;

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

padding-top: 0px;

padding-right: 15px;

padding-bottom: 0px;

padding-left: 15px;

font-style: italic;

}

#nav a:visited

{

font-weight:normal;

color:#FFFFFF;

background-color:#333333;

text-align:center;

text-decoration:none;

text-transform:uppercase;

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

padding-top: 0px;

padding-right: 15px;

padding-bottom: 0px;

padding-left: 15px;

}

#nav a:hover

{

color:#FFFFFF;

background-color:#999999;

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

font-weight: bolder;

padding-top: 0px;

padding-right: 15px;

padding-bottom: 0px;

padding-left: 15px;

}

#nav a:active

{

color:#FFFFFF;

background-color:#333333;

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

font-weight: bolder;

padding-top: 0px;

padding-right: 15px;

padding-bottom: 0px;

padding-left: 15px;

}

/* nav styling END */

#mainimage {

height: 541px;

width: 972px;

background-color: #FFFFFF;

text-align: center;

margin-right: auto;

margin-left: auto;

padding: 0px;

}

.center_image {

display: block;

margin-left: auto;

margin-right: auto }

.photo_text {

margin-left:auto;

margin-right:auto;

width:100%;

background-color:#FFFFFF;

text-align: center;

padding-top: 8px;

padding-bottom: 8px;

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

font-size: 20px;

font-weight: bold;

text-transform: uppercase;

margin-top: 15px;

}

.text_images {

float: left;

}

#directions_etc {

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

position: absolute;

z-index: 2;

height: 31px;

width: 276px;

top: 24px;

font-size: 14px;

text-transform: uppercase;

text-align: right;

right: 30px;

}

/* LIGHTBOX */

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: bold; }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* LIGHTBOX */

</style>

</head>

<body>

</map></div>

<ul>

<li><a href="#">Photos</a></li>

<li><a href="#">Trips</a></li>

<li><a href="#">Events</a></li>

<li><a href="#">Lessons</a></li>

<li><a href="#">Guide Services </a></li>

<li><a href="#">Contact Us </a></li>

<li><a href="#">About Us</a></li>

</ul>

</div>

<div id="grey_bar_info">April <strong>2010</strong></div>

</div>

</div>

<div id="new_one"> <img src="images/makos.jpg" alt="mako reels" width="82%" height="163" class="photo_text"><span class="photo_caption1">MAKO REELS</span><br>

</div>

</div>

<h2>Casting Clinics</h2>

<p><span class="date">(April 28, 2010) </span></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Bonefish Trip</h2>

<p><span class="date">(January 3, 2010) </span></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr>

<h2>The Hendricksons have arrived</h2>

<p><span class="date">(April 28, 2010)</span></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr>

<h2>Saracione Mark IV Salmon and Steelhead Reels.</h2>

<p><span class="date">(April 28, 2010)</span></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<img src="images/saracione_reel.jpg" alt="saracione reel" width="234" height="256" class="floatme_left"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr> </p>

<h2>Thomas and Thomas fly rod blanks </h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<hr>

<h2>Patagonia deep wading jacket</h2>

<p><span class="date">(April 28, 2010)</span> </p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class="style3" id="footer">Copyright © 2010 Streams of Dreams Fly Shop <strong> |</strong> 324 Route 17 North <strong> |</strong> Upper Saddle River, NJ 07458 <strong> |</strong> ph (201) 934-1138 <strong> |</strong> fax (201) 934-1180<br>

Open Tuesday through Saturday, closed Sunday, Monday by appointment<br>

Mailing list signup • Directions • Contact us

</div>

</body>

</html>

Andrea · June 18, 2010

That is a lot of code to work through - in general, I recommend the following:

Use CSS shortcuts: http://www.csstutorial.net/2010/02/css-shortcuts/

Whatever your main font choice is, add that to your body tag in CSS - you then do NOT have to repeat the font-family --- unless you would like a different font for a specific tag.

You only need to set the right and left margins to auto to center your wrapper - it is NOT needed for text-align: center.

You only use background-repeat if you're using a background image - it's not needed for just colors.

Points is a print measurement - for the web, use em or px.

Don't use empty p or h tags - if you want space, use margins or padding.

Instead of writing >p><span class="date"> write <p class="date"> --- same effect, less code.

font-weight: normal is default - you'd only have to write that if a default font (for example for the h tags, which are bold by default) is something other than normal - and you don't want bold.

Use meaningful class and ID names - new or style 3 won't mean a thing when you look at that a month later. (or if you're like me - after lunch).

When something is zero, no need to add a unit of measure - zero is zero, regardless of px, cm, lbs, or $.

CSS comments can be very helpful later on, but explaining that margin: 0 zeroes out the margin might be a bit overkill. That's pretty obvious as it is.

If all your h tags have a different font than the rest, don't add that to every single h - just add an h {font-family: whatever;} - which covers all of them. Same effect, less writing.

Making above changes will cut down your coding immensely and make it easier to spot errors, etc. Is the page uploaded somewhere?

Ant · June 18, 2010

Andrea, THANK YOU!.

No the site is not live yet. The old site is.

I am making the changes you brought up.

A few things:

I chose to use the "normal" characteristic because at some point I noticed setting the font to "normal" changed it's appearance. SO, I guess I used it in a bunch of places. Maybe I noticed it when doing my h tags but didn't realize it was because h's were bold by default etc. So I blanketed everything with "normal" I'll remove them where they are not necessary.

I removed the one bg repeat.( It was left there when I was testing as to where in the css the bg should go) The other BG repeat is because I used a BG blur effect on the whole site and repeated the bg blur effect to get the site to have a shadow behind it.

I removed the empty P/H tags to create the space after on my body copy. It was supposed to use the hr tag with margins. It's just so easy to use a return than trying to decide NOW where in the sites content I may need to place a SET space after which tags etc.

BTW any thoughts to these points.

1. meta tags ( keywords) There seems to be a lot of debate on it's use/effectiveness

2. site index (should I have it? )

Thanks

Ant

Andrea · June 18, 2010

I'm not sure about the meta-tags. I use some of them.

And if by site index you mean a site map, I'd say it depends on how bit the site is and how 'branched' the navigation. Most mine have 5 or so pages, and I don't see the point in it for something that small.

Ant · June 18, 2010

Thanks Andrea.

my site will probably have about 18 pages not including the add-on pages when there is a new product or new event etc.

Maybe I should research "site map" feature on web pages and see what they are all about. I thought it was all about SEO.

I guess I'll add the metatags/keywords to the site as well.

Ant

Andrea · June 18, 2010

Sitemaps do help the spiders, but if the navigation is pretty straight forward and all pages are directly linked from the front, they can find things on their own. However, I'm not an SEO expert - but we really could use one here.

falkencreative · June 18, 2010

I wouldn't call myself an SEO expert just yet, but here are my two cents...

Like Andrea said, a sitemap is really only useful from an SEO perspective if you have a large site with a lot of different levels. Having a sitemap will give the search engine spiders one convenient place to find all of your pages, even pages that may be hard to find or multiple levels deep. Other than that though, I don't believe it provides any additional SEO benefits. (Obviously, if you have a large site, a sitemap will also help visitors find specific pages as well.)

As far as meta tags go, in general, I don't believe they help out with SEO that much. The "keywords" meta tag is too easily faked, so search engines primarily look at the content on your site and who is linking to your site. I know that Google ignores the keywords tag entirely, though I'm not sure about the other search engines. I've heard mixed advice as to whether you should still include the keywords meta tag... My opinion is that it probably doesn't matter that much. I can't ever see search engines returning and using that tag to help determine search engine placement since it's so easy to fake.

In regards to the description tag, I'm not sure how much it affects search engine ranking. Like the keywords tag, I'd imagine it's pretty little. However, search engines display this text below your site title in the search results and (at least Google does this) bolds any words in the description that the user was searching for. This helps indicate to the user that your site might have the answer they are looking for and encourages them to visit your site.

Overall, the main focus on SEO work should be on the content. Are you providing fresh, quality content? Are you able to provide the answers that visitors to your site want? Are other sites seeing the value of your content, and linking their sites to yours? Are you making it as easy as possible for search engine spiders to understand and index your content?

Ant · June 18, 2010

Thanks guys.

I guess I will put in the meta tags as I assume they cant hurt.

The sitemap, I guess I can research it and see how it's done and if I want to include it.

Falken thanks for the rundown, it was very informative.

Ant

falkencreative · June 18, 2010

In regards to the few questions that no one has answered yet:

repeating the navigation at the top etc.

This one depends... In general, I'd say it isn't necessary, unless you have long pages (having links at the bottom saves the user from scrolling all the way to the top) or your navigation for some reason (this shouldn't happen -- it it does, you need to rethink how you are creating your navigation) relies entirely on Javascript, so that if Javascript is turned off, users can't see your navigation.

5. "if statement " I see them all the time in source codes but have not or do not know the correct uses for them concerning browser compatability etc Maybe most are just notes for the code???

There are a couple possibilities here:

-- Are you talking about PHP if statements? I'm assuming you are talking about seeing them in the source code of online tutorials or in themes that you may have downloaded? These won't show up in the actual source code that you see by viewing the page source in your browser.

-- You might also be talking about Javascript if statements... those will show up in the browser's page source. Whether it's PHP or Javascript if statements, that is adding conditional logic to the page. It's saying if "x" (exists, is true, holds a specific value, etc) do something

-- You might also be talking about conditional comments. Conditional comments allow you to target IE (or specific versions of IE). Code placed within the if/endif will only display within the browser specified. For example, this is a conditional comment for IE6:

<!--[if IE 6]>

Special instructions for IE 6 here

<![endif]-->

If you looked at that in the browser, you'd get a blank page in all browsers except for ie6, which would display "Special instructions for IE 6 here".

Sign In

help reviewing code on template home page

Recommended Posts

Ant

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

Ant

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

Ant

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

Ant

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support