10 replies [Last post]
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 7 weeks 1 day ago
Los Angeles
Timezone: GMT-8
Joined: 2009-09-26
Posts: 206
Points: 262

The Entire Site Will Follow This Framework Will Someone Give me their thoughts on the code aspect?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Speak: Creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "master_container">
  <div class = "hundred left">
  <img src="images/speak-creative-photography-marketing-and-design-in-los-angeles.png" width="318" height="59" alt="Speak: Creative Photography and Design" title = "Speak: Creative Photography and Design. A creative Company by Travis Glodt" class = "logo">
</div>  <ul class = "navigation left">
  <li><img src="images/creative-sections.png" width="65" height="20"></li>
  <li class = "left_five"><span class = "red italic">Home</span></li>
  <li class = "left_five"><a href = "photography.html">Photography</a></li>
  <li class = "left_five"><a href = "web-design.html">Web Design</a></li>
  <li class = "left_five"><a href = "graphic-design.html">Graphic Design</a></li>
  <li class = "left_five"><a href = "marketing.html">Marketing</a></li>
  <li class = "left_five"><a href = "digital-post.html">Digital Post</a></li>
  <li class = "left_five"><a href = "motion-production.html">Motion Production</a></li>
  <li class = "left_five"><a href = "videos.html">Videos</a></li>
  <li class = "left_five"><a href = "blog.html">Blog</a></li>
  <li class = "left_five ten_bottom"><a href = "contact.html">Contact</a></li>
  <li>&nbsp;</li>
  <li><img src="images/recent-blog-posts.png" width="128" height="21"></li>
  <li class = "left_five"><a href = "blog.html">Blog</a></li>
</ul>  
  <div class = "holder left">
    <img src="images/body-head.png" width="993" height="6" class = "left top_twenty">
    <div class = "main_container left">
	  <img src="images/sections/home/header/santa-monica-pier-by-travis-glodt.jpg" width="599" height="287" alt="Santa Monica Pier, Photography by Travis Glodt" title = "Santa Monica Pier by Travis Glodt" class = "left pier">
<ul class = "art_description left">
  <li><span class = "arial_black grey">Santa Monica Pier</span></li>
  <li class = "top_twenty"><span class = "eight_five">Photography by Travis Glodt</span></li>
  <li class = "top_five"><span class = "eight_five">Winter 2010</span></li>
</ul> 
<ul class = "tags left">
  <li><a href = "http://en.wikipedia.org/wiki/Los_Angeles">Los Angeles, California</a></li>
  <li><a href = "http://www.santamonicapier.org/">Santa Monica Pier</a></li>
</ul>  
    </div>
    <img src="images/body-foot.png" width="993" height="7" class = "left">
  </div>
  <div class = "hundred">
	<div class = "facebook"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.speakphoto.com" send="true" width="450" show_faces="true" action="like" colorscheme="dark" font="lucida grande"></fb:like></div>
<p class = "copyright right">Travis Glodt &#169; Copyright 2011 All Rights Reserved</p>  </div>
  <div id = "right_container">
  <ul class = "plaques right">
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
  	<h2 class = "section_titles left">PHOTOGRAPHY</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">WEB DESIGN</h2>
    <img src="images/sections/home/sections/web-design.jpg" width="274" height="374" alt="Photography Section" class = "left section_view_two">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">GRAPHIC DESIGN</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">MARKETING</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">DIGITAL POST</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">MOTION</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">VIDEOS</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">BLOG</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>
  <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">CONTACT</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>  
</ul>  </div>
</div>
<div id = "foot_container">
  <div id = "internal_margin">
    <div id = "foot_container2">
      <div id = "internal_margin2"> <img src="images/speak-creative-photography-marketing-and-design-in-los-angeles.png" width="318" height="59" alt="Logo" class = "logo_two left">
        <ul class = "foot_navigation right">
  <li><span class = "red italic">Home</span></li>
  <li><a href = "photography.html">Photography</a></li>
  <li><a href = "web-design.html">Web Design</a></li>
  <li><a href = "graphic-design.html">Graphic Design</a></li>
  <li><a href = "marketing.html">Marketing</a></li>
  <li><a href = "digital-post.html">Digital Post</a></li>
  <li><a href = "motion-production.html">Motion Production</a></li>
  <li><a href = "videos.html">Videos</a></li>
  <li><a href = "blog.html">Blog</a></li>
  <li><a href = "contact.html">Contact</a></li>
</ul>      </div>
    </div>
  </div>
</div>
</body>
</html>

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 7 weeks 1 day ago
Los Angeles
Timezone: GMT-8
Joined: 2009-09-26
Posts: 206
Points: 262

For some Reason The Link Did not Work

I wrote in the hrefs and the link above did not work

http://www.speakphoto.com/v2/

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

It's really wordy. There

It's unnecessarily wordy. There seems to be a class or ID on everything even if it's not needed. <li class = "left_five"> could be simply <li>

There are a whole lot of DIVs for the footer.

<div id = "foot_container">
  <div id = "internal_margin">
    <div id = "foot_container2">
      <div id = "internal_margin2">
Do you need more than one?

"Sections:" shouldn't be part of the list. It's the header of the list not a member.

In the footer navigation you have

<li>
<span class="red italic">Home</span>
</li>
Why the extra SPAN? Why not just <li class="red italic">Home</li> instead?

You seem to want to make a really heavy, all encompassing scheme of generic style definitions to fit all occasions. It feels like an exercise in futility. That would drive me mad. There is no point making another class when adding a declaration to an already existing selector makes much more sense and will be much lighter.

yet again.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 7 weeks 1 day ago
Los Angeles
Timezone: GMT-8
Joined: 2009-09-26
Posts: 206
Points: 262

Thanks!!

Hey Verschwindende you rock for taking the time to give my your thoughts!!

Below is a php include issue where I did not remove the code before putting it in an external PHP file.

<div id = "foot_container">
  <div id = "internal_margin">
    <div id = "foot_container2">
      <div id = "internal_margin2">

If that is the correct way to do it. I really appreciate the feedback and will deff change that.

<li>
<span class="red italic">Home</span>
</li>

Another question I might pick your brain about is whether this is correct? Having an h2 embedded in an unordered list? I like the way a list handles what I need below because it essentially is a visual list of sections . . . And the titles need headings . . . Any thoughts?

 <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">GRAPHIC DESIGN</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>

Thanks again!!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

I updated my post above as

I updated my post above as you were posting. Added a few more things I noticed. Smile

yet again.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

t-bone_two wrote: ... Another

t-bone_two wrote:

... Another question I might pick your brain about is whether this is correct? Having an h2 embedded in an unordered list? I like the way a list handles what I need below because it essentially is a visual list of sections . . . And the titles need headings . . . Any thoughts?

 <li>
  <img src="images/marketing.png" width="326" height="7" class = "left">
  <div class = "plaque_body left">
    <h2 class = "section_titles left">GRAPHIC DESIGN</h2>
    <img src="images/sections/home/sections/photography.jpg" width="274" height="374" alt="Photography Section" class = "left section_view">
  </div>
  <img src="images/advertising.png" width="326" height="6" class = "left"> 
  </li>

Thanks again!!

There's nothing invalid about it but it still feels a bit heavy. Is the DIV necessary in the LI? Can you style the LI instead?

yet again.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 7 weeks 1 day ago
Los Angeles
Timezone: GMT-8
Joined: 2009-09-26
Posts: 206
Points: 262

Thank you so Much!

Hi Verschwindende Smile

I really appreciate your time and your feedback. In regard to this "There's nothing invalid about it but it still feels a bit heavy. Is the DIV necessary in the LI? Can you style the LI instead?" It is necessary as the image above and below the div specifying the plaque body are the rounded corner. And the div holding the plaque body contains the shadow set to repeat-x. If I added the style to the li it would bring the shadow above and below the rounded corner graphic element. Do you have a suggestion to do it differently? I would love anything to make the code lighter.

I really really appreciate your time, insight and excellent suggestions. Smile

-Trav

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

I guess it's best to show

I guess it's best to show rather than explain. http://feelerdealer.com/t-bone_two/

I didn't test in anything other than Opera. It's just a suggestion anyway. Smile

yet again.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 7 weeks 1 day ago
Los Angeles
Timezone: GMT-8
Joined: 2009-09-26
Posts: 206
Points: 262

Thank You

I think Brevity is the ultimate sign of respect.

All I can say is Thank You. And I really mean it. Thank you for showing me that. It made me do this. Big smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

It seems you're overthinking

It seems you're overthinking just about everything. Code is an art as much as it is technical. Succinctness is key. Do only what is necessary to get the desired result.

If you've ever heard of Robert Fripp. He is an incredible guitarist. One of his teachings is "economy of movement". His fingers move only as much as necessary. No more, no less. This increases his speed and accuracy while playing. It's a very similar concept.

yet again.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 7 weeks 1 day ago
Los Angeles
Timezone: GMT-8
Joined: 2009-09-26
Posts: 206
Points: 262

Some Issues I have

I think you are spot on with that comment. And therein lies the realization of a lacking of some areas for which I could greatly improve on my technique. Primarily in the successful addition of a class to a given set of styles.

I also probably over float everything as I have found it seems to create more stability.

I enjoyed the simplicity of your example and attaining that degree of precision is my goal.