first page, be gentle

[swissbeets]

this is the first site ive done and i know there is still alot of things that need done but let me know if you see anything that wont take me a week to learn to first, or anything someone knows how to explain

 

www.bigpeckersstuff.com

 

(i am getting a picture to put on the homepage right now it should be up soon)

 

thanks

[proggR]

I think being able to click on the shirts to get a larger view would be helpful because its hard to see the shirts that small.

Its also all too left justified. Try playing with different layouts for it.

[swissbeets]

i know how to display it and everything except have it pop up in a new window does anyone have an example of this code?

[KevinM1]

this is the first site ive done and i know there is still alot of things that need done but let me know if you see anything that wont take me a week to learn to first, or anything someone knows how to explain

 

www.bigpeckersstuff.com

 

(i am getting a picture to put on the homepage right now it should be up soon)

 

thanks

 

Right off the bat, I notice that you have a lot of wasted screen space.  I have a decently sized screen (1440 x 900), and about half of my browser window is empty yellow space.  Why not center it all?  Since you're going for a fixed-width look, center it, and do something to visually separate the functional part of the site from the background (border, slight drop shadow, something).

 

In fact, I think you should tone down the yellow.  It's not fun to look at for any length of time.  You don't want to annoy/blind potential customers.

 

As for the rest...

 

The most beneficial thing I can say is that if you're really serious about doing this for a living, then you should learn the technologies behind it.  At the very least, you should learn HTML, Cascading Style Sheets (CSS), and rudimentary JavaScript.  Why?  Because relying on a program to do all the technical work - even one as good as Dreamweaver - results in inefficient, and even ugly, code.

 

Your page, for example, could be built with much less overall code.  Those mouseover effects you have?  There's no need to have dozens of lines of JavaScript to create those.  It can be done simply with a few lines of CSS.  The same goes for the overall layout.  Tables really aren't used for layouts any more.  Instead, <div> blocks, positioned and arranged with CSS, is considered to be best practice.

 

I don't say this to discourage you.  Hell, your first attempt here is much, much better than my first few attempts.  So, keep at it, and keep learning.  Your sites will improve even more with time.

[swissbeets]

i am reading a book on CSS right now so dont know that much just yet but how hard will it be to take out the tables and use CSS? also i basically did the lynda.com tutorial and changed it to fit my needs, i have never used php before nor have i really made a live site before. I basically just wanted to learn how to do this and figured the best way would be just dive in.

 

the yellow is bright but i wanted it to match the big peckers logo. but i will keep that in mind

 

yea, i heard it would be much easier to do the rollovers in css but i didnt wana fix something that was already working

 

thank you very much for your input

[KevinM1]

Right now, since you're getting your feet wet with CSS, you should probably stick with the table layout.  CSS layouts aren't hard to construct from a pure coding point of view (in fact, they're easier, which is one of the prime reasons why that method is prefered), but from a conceptual standpoint, CSS layouts tend to give newbies trouble.

 

If you're interested in trying it anyway, read up on the Box Model and CSS positioning.

 

You might want to consider changing your font in some sections.  It looks okay on the bigger things, but with the shirt info and especially the contact info, it looks pretty cluttered and hard to read.

[proggR]

CSS layouts aren't hard to construct from a pure coding point of view (in fact, they're easier, which is one of the prime reasons why that method is prefered), but from a conceptual standpoint, CSS layouts tend to give newbies trouble.

 

I'm the opposite. I never learned tables. They confuse me.

Aside from the graphical section of the site, kudos for incorporating the cart and everything. I haven't even started looking into that stuff yet because I don't trust myself to handle other people's money with my own code lol. I need to eventually though, but not for another 6 months or so. You've got a headstart there which is good. The CSS book will help out with a lot.

[swissbeets]

yea i didnt want to take the responsiblty of actually taking the money and the guy wanted me to have all of the credit card info emailed to him, needless to say i had to talk him out of that and after a day or two i got the google checkout to work.

 

i am trying to center the whole page right now, but have have no idea what the first step would be 

 

any suggestions?

[proggR]

I haven't looked, are you still using tables?

In css I'd have a div that uses the id "wrapper" or something to that effect and the code would be

<style>

#wrapper{

width:800px;

left:50%;

margin-left:-400px

}

</style>

Plus whatever formatting you want. Then you put all your existing code in that div so:

<div id="wrapper">

//your code

</div>

 

Basically what it does is says that the section in the middle is going to be 800 px wide. Then it says the left should start half way into the page. However when you do this it would actually start the left side of your navigation half way into the page. So then you put margin-left:-400px (because thats half of the 800 you said earlier, if it was 900 you'd put 450) which moves the start of the div back another 400px which essentially centers the whole thing. Its the only solution I've managed to find but it does have a downfall. If they shrink their screen to smaller than 800px then because you're moving the start of the left over by -400, it actually goes off the page and isn't accessible by the scroll bars. Does it make sense? Play with it and I'm sure it will, but make sure you're not overwriting your old code just in case you don't like it.

If anyone knows of any better ways to center a div I'd also appreciate them since its something I need to look into soon.

[KevinM1]

I haven't looked, are you still using tables?

In css I'd have a div that uses the id "wrapper" or something to that effect and the code would be

<style>

#wrapper{

width:800px;

left:50%;

margin-left:-400px

}

</style>

Plus whatever formatting you want. Then you put all your existing code in that div so:

<div id="wrapper">

//your code

</div>

 

Basically what it does is says that the section in the middle is going to be 800 px wide. Then it says the left should start half way into the page. However when you do this it would actually start the left side of your navigation half way into the page. So then you put margin-left:-400px (because thats half of the 800 you said earlier, if it was 900 you'd put 450) which moves the start of the div back another 400px which essentially centers the whole thing. Its the only solution I've managed to find but it does have a downfall. If they shrink their screen to smaller than 800px then because you're moving the start of the left over by -400, it actually goes off the page and isn't accessible by the scroll bars. Does it make sense? Play with it and I'm sure it will, but make sure you're not overwriting your old code just in case you don't like it.

If anyone knows of any better ways to center a div I'd also appreciate them since its something I need to look into soon.

 

I only have time for a quick reply.

 

Put everything, including navigation, in a 800px wide wrapper div.  So:

#wrapper{
   width: 800px;
   margin: 0 auto;
}

 

The auto margin tells it to center itself.

 

Next, a div for the header image:

#header{
   width: 800px;
}

 

For the navigation, use another div.  Give it the width of your link images and 2px padding all the way arround.  You need to float it to the left so it goe to the right place:

#nav{
   width: /* however wide your link images are */
   padding: 2px;
   float: left;
}

 

Finally, for the main content, create a div with a width of 800px - the width of the navigation, and float it left as well:

#content{
   width: /* 800px - the width of the navigation */
   float: left; 
}

 

That should more or less give you a centered layout.

[KevinM1]

A quick code example to show a common centered fixed-width two-column layout:

<!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" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>Layout</title>
   <style>
      #wrapper{
         width: 800px;
         margin: 0 auto;
         border: 1px solid black;
      }

      #header{
         width: 800px;
         border: 1px solid blue;
         text-align: center;
      }

      #nav{
         width: 20%;
         padding: 2px;
         float: left;
         border: 1px solid green;
      }

      #content{
         width: 78%;
         padding: 2px;
         float: left;
         border: 1px solid red;
         text-align: center;
      }

      #footer{
         clear: both;
         width: 800px;
         border: 1px solid purple;
         text-align: center;
      }

      ul{
         list-style-type: none;
         margin: 0;
         padding: 2px;
      }

      li{
         border: 1px solid gray;
      }
   </style>
</head>

<body>
   <div id="wrapper">
      <div id="header">Put header image here.</div>

      <div id="nav">
         <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
         </ul>
      </div>

      <div id="content">This is where your main content would go.</div>

      <div id="footer">This is where your footer info (copyright, etc) would go.</div>
   </div>
</body>
</html>

 

In a real-world setting, the CSS would be in its own separate file, but I kept it here so you can see what I did.  As you can see, there's much less HTML here than in your original code.  Also, if you use an external style sheet (that is, if you put all of the CSS in a separate file), then you can have one file supplying the formatting for your entire site, which, again, saves you on writing/debugging code.

 

I also hope this helps hopelessX.  There's no need to pull fancy positioning/margin tricks to center an element on the page.

[proggR]

Sweet. I didn't know about the auto margin. I'll change that tonight on my project

Thanks.

[Grayda]

Not bad for a first website, but I'm not a fan of the bright colours, the font or the navigation

 

The colour needs to be toned down a little, especially for myself, who has an eye condition where any bright lights make a trail of light appear under the bright light, and that hangs over the text a little. I suggest a nice dark-ish shade of blue to go with the surfing theme you have going. Even a simple gradient from a lighter blue to a darker blue, set as the background, would look nice:

 

body {
  background: url(blue_grad.jpg) repeat-x #31475B;
}

 

And have the gradient start off as #4B8DB1 (R: 75, G: 14, B: 17) then fade it down to #31475B (R: 49 G: 71 B: 91) over say, 300 pixels

 

As for the font, I suggest a widely used font. I don't think Snap ITC is a widely used font on the internet, so perhaps Verdana, Helvetica or something would look good? It's easy on the eye too

 

And finally the navigation. It might be good to have a plain navigation, or get rid of the "bend" in the text. Oh, and it could use a text-only navigation at the bottom too, for those who don't want to scroll all the way up, or for those using a screenreader. It all comes down to readability and user comfort I reckon

 

But, for your first site, it's coming along nicely, and good luck with CSS. It's tricky at first, but now, I can barely breathe without it

[rmt99e]

Congrats on your first site. Keep working at it. A few comments/suggestions - colors are very intense and don't play off eachother too well - maybe add some dark colors or switch it up a little. Also, try using some boxes - it will look more organized.