...

View Full Version : Another C PAWD Review



Scootertaj
11-11-2005, 12:13 AM
Since I didn't get too many replies on the last, I am looking for another review.

Site: C PAWD (http://c-pawd.moved.in)

Looking for critique on everything: code, content, design, accessibility, etc.

Thanks!

Scootertaj
11-12-2005, 03:03 AM
Don't mean to be rude and bump, but other threads have gotten replies but this hasn't.

harbingerOTV
11-12-2005, 04:48 AM
I would say to either center the navigation or to make right side bar where the 'blog' link ends. making a side bar, even if just for color would break up the long lines of text.

Since your site is fixed width why does it pad on the left side?

I think the plainness of it hurts it. The header part and nav loks finished enough but the content is just some text hanging out there. Needs something to pull it together.

If this is is buisness type site leave the blog off of it.

Style the W3C buttons to match your site.

The logo looks good enough. but the way the bottom line of text extends past the cpawd look sodd. try making them even on the right side and see how it looks.

Scootertaj
11-12-2005, 02:47 PM
Thanks for the critique harbringer.
I guess I should have explained it a little better. It is a business site but mainly only for people in my city, so I don't think that taking away the blog is necessary. If it was a bigger company, then sure.

I'm kind've confused by what you mean with a sidebar by the blog.

Yea I agree with the navigation and header being good, but the content lacks some "pizazz"

I've been meaning to style the validation different, thanks for the reminder.

I padded on the left side because if I didn't I thought it looked too cramped up against the side.

As for centering the navigation, it's early and can't think of how to do this, maybe I should look at it later as it is probably really easy, any help on that?

Thanks again for the critique, others are more than welcome.

harbingerOTV
11-14-2005, 01:08 AM
I'm kind've confused by what you mean with a sidebar by the blog.


What I meant was, see how after the 'blog' link you have like some 200px of just blue. What about making a sidebar the same width and run it down the right side. That would condense the content up some and might also help on the 'lost look' the content seems to have.



I padded on the left side because if I didn't I thought it looked too cramped up against the side.


What I was getting at was not the content padding but the site padding. If you scale the browser down you'll see it maitntanis a %(?) based left margin. Im guessing the site is to be centered. At 1152 it is but I would figure at 800 it sits off the left side more than the right. Then a little smaller and you have the horizontal scrollbar show up. Ah I see in your code that you have the body at 80% and then fixed widths for the header and so on. That causes the 'padding'. Not really an issue I guess.



As for centering the navigation, it's early and can't think of how to do this, maybe I should look at it later as it is probably really easy, any help on that?


you have the #navcontainer width:700px. You have the same thing for the #navconatiner ul. No need to float the ul then. If it's the same size as the container it can't really float anywhere.

something like this might work. I din't try it so...



#navcontainer ul
{
background-color: #036;
/* original #036; */
color: White;
font-family: arial, helvetica, sans-serif;
margin: 0 auto;
position: relative;
}


If you give the side bar idea a go don't center the navigation. That will look funny.

A plus on the side bar would be that it would make the copy thinner. Making it look more like it fits in. And it would give you a nice place to hold the W3C buttons so they dont just float like they are now.

And, may I suggest a little line height on your content? And mabe this as well:



.welcome
{
text-align: left;
padding-top: .5;
padding-left: 3em;
padding-right: 3em;
padding-bottom: .5em;
font-size: .9em;
color:#000;
line-height: ?em;
}

Scootertaj
11-14-2005, 11:06 PM
I got rid of the float in the ul, it was pretty pointless to have it there.

I changed the .welcome with the line height, I think that made it look better, good suggestion :thumbsup:

As for the sidebar, still confused :confused:
Attached is the visual of what I think you are saying.

Please try to provide a visual, and where the w3c buttons would go.

Also, for some reason FF isn't doing the padding-top: 1em I put in the h1.
Any idea?

Thanks again harbinger!!

harbingerOTV
11-15-2005, 02:04 PM
on the h1 problem. Try using margin instead of padding.

I'm alm,ost off to work. If it's still a problem tonight I'll copy your code and play with it.

the pic you posted is what I'm talking about. I attached one with possible link placement. Ithink if you do a side bar it would help the look of the content text. Making the lines not as long and making it feel more comfortable.

You might look into loosing the top and bottom padding on the whole page and slap on one of those side gradients to the left and right sides. Might help it stand out and look less flat.

Scootertaj
11-15-2005, 11:25 PM
I did the margin instead of the padding, worked in IE, caught off some of the nav in FF. Tried adding padding and margin to it, still didn't work.

I agree with the sidebar, will get working on that soon.

What color do you think would look best as the background if I included the gradient?

Thanks again for the help, ideas and time harbinger!

harbingerOTV
11-16-2005, 03:00 AM
#navcontainer
{
height: 25px;
padding-top: 0px;
width: 700px;
margin: 0 auto;
text-align: center;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: #036;
/* original #036; */
}

#navcontainer ul
{
padding: 0;
margin: 0;
color: White;
width: 700px;
font-family: arial, helvetica, sans-serif;
margin: 0 auto;
font-size: 16px;
}


What's height: inheirent? Give it a height. 25px worked. Than theres going to be a problem of text resizing throwing it off so I used 16px to hold them true. And I gave the navcontainer the background color not the UL. Since there isnt a ul at the end the container needs the color.

That solves the H1 problem.

I see by your new css your trying to make a side bar and make it expand to make the background color. DONT. save yourself the trouble. Make an image with the rightside blue stripe. (I think 170px wide works).

you dont need the body{ width: 80% } everything in the body is 700px wide so it strecthes to fit anyways.

so a quick sidebar mock up.


<body>
<div id="container">
<div id="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt, lectus id pretium

molestie, risus elit pretium enim, non hendrerit ipsum felis vitae tellus. Quisque id orci non tortor sodales

pellentesque. Aliquam erat volutpat. Pellentesque turpis nibh, semper nec, dignissim sed, pretium vitae, libero.

Suspendisse potenti. Vestibulum at libero vel turpis vulputate commodo. Nulla sem massa, euismod a, sagittis ac,

sodales non, purus. Donec tempus erat at tellus. Sed urna felis, convallis a, laoreet ac, ultrices eget, eros.

Donec consectetuer dignissim turpis. Nam feugiat. Cras libero metus, consectetuer eu, porttitor in, congue vel,

tortor. Donec feugiat lorem quis est. Fusce et risus vel augue consequat adipiscing. Etiam ac metus eget metus

pretium varius.</div>
<div id="header">


just added in the sidebar below body and above header

css


* {
margin:0;
padding:0;
}
/* Original
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 80px;
*/

body {
margin: 0 auto;
background: #6382b5 url(fill1.jpg) top center repeat-y;
/* original #6382b5; */
}
#container {
width: 700px;
margin: 0 auto;
text-align: left;
}
#sidebar
{
float: right;
width: 135px;
border: 12px solid #036;
color: #fff;
border-left: none;
}
#sidebar[id] {
border: 14px solid #036;
}
#header
{
width: 550px;
/* grey #B5B5B5; */
height: 70px;
}
#header a {
margin-left: 1px;
}
#header h1
{
color: #FFFFFF;
}

#header img
{
height: 100%;
}

.ad
{
padding: 0;
margin: 0;
text-align: right;
float: right;
}

#navcontainer
{
height: 25px;
padding-top: 0px;
width: 550px;
text-align: center;
background-color: #036;
/* original #036; */
}

#navcontainer ul
{
padding: 0;
margin: 0;
color: White;
width: 550px;
font-family: arial, helvetica, sans-serif;
margin: 0 auto;
font-size: 16px;
}


#navcontainer ul li {
display: inline;
}

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
float: left;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

#content
{
border-bottom: none;
width: 550px;
min-height: 700px;
font-family:Arial, Helvetica, sans-serif;
}

ul.bullets
{
padding-left: 3em;
color: #000;
font-size: 1em;
list-style-type: none;
}

ul.bullets1
{
padding-left: 4.5em;
color: #000;
font-size: .85em;
list-style-position: inside;
}

.welcome
{
text-align: left;
padding-top: .5;
padding-left: 3em;
padding-right: 3em;
padding-bottom: .5em;
font-size: .9em;
color:#000;
line-height: 1.5em;
}


#contact
{
padding-top: 1.75em;
padding-bottom: 1em;
padding-left: 4em;
}


TEXTAREA
{
width: 250px;
height: 150px;
}


h1
{
font-size: 1.5em;
color: #35598b;
text-align: left;
padding-top: 1em;
padding-bottom: .5em;
padding-left: .75em;
}

h2
{
padding-left: 1.5em;
padding-top: 1em;
padding-bottom: .75em;
font-size: 1.25em;
color: #000;
}

h3
{
font-size: 1em;
color: #000;
padding-left: 1em;
padding-top: 1em;
padding-bottom: 2em;
}


#websearch
{
color: #000;
padding-top: 8em;
padding-bottom: 1em;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
}

#validation
{
padding-bottom: 0em;
padding-top: 7em;
}

#validation img
{
width: 88px;
height: 31px;
margin-left: 1px;
}



#footer
{
width: 700px;
height: 20px;
background-color: #036;
font-family:Arial, Helvetica, sans-serif;
margin:auto;
border-bottom: 10px solid #fff;
}



#footer p
{
padding: 0;
text-align: center;
color: #FFF;
font-size: 1em;
background-color: #036;
width: 700px;
height: 20px;
margin:0 auto;
}

img
{
border: none;
}

.required
{
padding-bottom: .75em;
}

.note
{
font-size: 1em;
color: #ff0000;
padding-left: 1em;
padding-top: 2em;
font-style: oblique;
}


a
{
color: #036;
}

a:visited
{
color: #036;
}

a:hover
{
color: #E3170D;
}

a:active
{
color: #E3170D;
}


just plaopped in the bg image and added the styling to a few divs. all the 700's are now 550 to make room for the side bar.

I'd move the search and the w3c buttons into the side bar.

and the image i used:

Scootertaj
11-16-2005, 03:34 AM
Thanks for the continued help harbinger, everything works, except the sidebar thing.
Attached is what the result is.
Wouldn't you have to have the sidebar AFTER the header and the navigation?

Thanks again!

harbingerOTV
11-16-2005, 01:05 PM
I thnik that was my mistake. I wrapped the whole page in a container and forgot to mention it.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css"><title>C PAWD - Computer Production and Web Design</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Computer Production and Web Design, also known as C PAWD, is a business dedicated to people who want to get their business on the World Wide Web, or just to have a fun, personal web site. C PAWD offers quality web sites and custom made computers for an amazing low price.">
<meta name="keywords" content="c pawd, computer, production, web, web design, design, web site, site, web services, HTML, internet, computer production, development, designers">
<meta name="robots" content="index,follow"></head>



<body>
<div id="container">
<div id="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt, lectus id pretium molestie, risus elit pretium enim, non hendrerit ipsum felis vitae tellus. Quisque id orci non tortor sodales pellentesque. Aliquam erat volutpat. Pellentesque turpis nibh, semper nec, dignissim sed, pretium vitae, libero. Suspendisse potenti. Vestibulum at libero vel turpis vulputate commodo. Nulla sem massa, euismod a, sagittis ac, sodales non, purus. Donec tempus erat at tellus. Sed urna felis, convallis a, laoreet ac, ultrices eget, eros. Donec consectetuer dignissim turpis. Nam feugiat. Cras libero metus, consectetuer eu, porttitor in, congue vel, tortor. Donec feugiat lorem quis est. Fusce et risus vel augue consequat adipiscing. Etiam ac metus eget metus pretium varius.</div>
<div id="header">

<a href="http://c-pawd.moved.in/index.html">
<img src="C%20PAWD%20-%20Computer%20Production%20and%20Web%20Design_files/cpawd.gif" title="C PAWD" alt="C PAWD"></a>
</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://c-pawd.moved.in/index.html">Home</a></li>
<li><a href="http://c-pawd.moved.in/services.htm">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="http://c-pawd.moved.in/contact.htm">Contact Us</a></li>
<li><a href="http://c-pawd.moved.in/projects.htm">Projects</a></li>
<li><a href="http://c-pawd.moved.in/blog">Blog</a></li>

</ul>

</div>

<div id="content">
<h1>Welcome!</h1>

<p class="welcome">Welcome to C PAWD! Computer Production and Web
Design, also known as C PAWD, is a new business dedicated to people who
want to get their business on the World Wide Web, or just to have a
fun, personal web site. C PAWD offers quality web sites and custom made
computers for an amazing low price. Feel free to check out the prices
of a website by viewing the <a href="http://c-pawd.moved.in/services.htm">services</a> page.</p>

<h1>C PAWD Services</h1>
<p class="welcome">C PAWD offers numerous services from Web Design and Development to online demos and tutorials:</p>

<ul class="bullets1">
<li class="bullets1">Graphic Design</li>
<li class="bullets1">Web Page Coding</li>
<li class="bullets1">Valid XHTML and CSS coding</li>
<li class="bullets1">Online Multimedia</li>
<li class="bullets1">Easy to use tutorials for Microsoft Office Suite</li>
<li class="bullets1">Web Animation and Banners</li>
</ul>





<div id="websearch">
<form action="http://www.exchangead.com/ea.exe?vmain" method="post">
<p>
<input name="account" value="Scootertaj" type="hidden">
Web Search:&nbsp;&nbsp;<input name="Keyword" size="20" type="text">&nbsp; <input name="Submit" value="Find It" type="submit"></p>
</form>

</div>


<div id="validation">

<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fc-pawd.moved.in"><img src="C%20PAWD%20-%20Computer%20Production%20and%20Web%20Design_files/valid-html401.png" alt="Valid HTML 4.01 Strict"></a>



<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://c-pawd.moved.in/">
<img src="C%20PAWD%20-%20Computer%20Production%20and%20Web%20Design_files/vcss.png" alt="Valid CSS!">
</a>
</div>



</div>
</div>
</body></html>


The way I made the sidebar it satrts at the top of the entire page. So that way it needs to be above the header in the HTML since it floats right.

If you wanted the side bar to start under the navigation you would place it under the navcontainer in the HTML and then in the css change the header & navcontanier width back to 700px.

Scootertaj
11-16-2005, 02:09 PM
Yea I wanted it below the navigation, I got it working.
Added a footer so it looks like it wraps around the content, kinda messes up the aligning a little, will play with it after school.

Here's the (pre)Final HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css"><title>C PAWD - Computer Production and Web Design</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Computer Production and Web Design, also known as C PAWD, is a business dedicated to people who want to get their business on the World Wide Web, or just to have a fun, personal web site. C PAWD offers quality web sites and custom made computers for an amazing low price.">
<meta name="keywords" content="c pawd, computer, production, web, web design, design, web site, site, web services, HTML, internet, computer production, development, designers">
<meta name="robots" content="index,follow"></head>



<body>
<div id="container">

<div id="header">

<a href="http://c-pawd.moved.in/index.html">
<img src="cpawd.gif" title="C PAWD" alt="C PAWD"></a>
</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://c-pawd.moved.in/index.html">Home</a></li>
<li><a href="http://c-pawd.moved.in/services.htm">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="http://c-pawd.moved.in/contact.htm">Contact Us</a></li>
<li><a href="http://c-pawd.moved.in/projects.htm">Projects</a></li>
<li><a href="http://c-pawd.moved.in/blog">Blog</a></li>

</ul>

</div>

<div id="content">
<div id="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt,
lectus id pretium molestie, risus elit pretium enim, non hendrerit ipsum felis vitae tellus.
Quisque id orci non tortor sodales pellentesque. Aliquam erat volutpat. Pellentesque turpis nibh,
semper nec, dignissim sed, pretium vitae, libero. Suspendisse potenti. Vestibulum at libero vel
turpis vulputate commodo. Nulla sem massa, euismod a, sagittis ac, sodales non, purus. Donec
tempus erat at tellus. Sed urna felis, convallis a, laoreet ac, ultrices eget, eros.
Donec consectetuer dignissim turpis. Nam feugiat. Cras libero metus, consectetuer eu,
porttitor in, congue vel, tortor. Donec feugiat lorem quis est. Fusce et risus vel augue
consequat adipiscing. Etiam ac metus eget metus pretium varius.<div id="validation">

<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fc-pawd.moved.in"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict"></a>



<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://c-pawd.moved.in
/">
<img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</div></div>
<h1>Welcome!</h1>

<p class="welcome">Welcome to C PAWD! Computer Production and Web
Design, also known as C PAWD, is a new business dedicated to people who
want to get their business on the World Wide Web, or just to have a
fun, personal web site. C PAWD offers quality web sites and custom made
computers for an amazing low price. Feel free to check out the prices
of a website by viewing the <a href="http://c-pawd.moved.in/services.htm">services</a> page.</p>

<h1>C PAWD Services</h1>
<p class="welcome">C PAWD offers numerous services from Web Design and Development to online demos and tutorials:</p>

<ul class="bullets1">
<li class="bullets1">Graphic Design</li>
<li class="bullets1">Web Page Coding</li>
<li class="bullets1">Valid XHTML and CSS coding</li>
<li class="bullets1">Online Multimedia</li>
<li class="bullets1">Easy to use tutorials for Microsoft Office Suite</li>
<li class="bullets1">Web Animation and Banners</li>
</ul>





<div id="websearch">
<form action="http://www.exchangead.com/ea.exe?vmain" method="post">
<p>
<input name="account" value="Scootertaj" type="hidden">
Web Search:&nbsp;&nbsp;<input name="Keyword" size="20" type="text">&nbsp; <input name="Submit" value="Find It" type="submit"></p>
</form>

</div>



<div id="footer">Copyright C PAWD</div>
</div>

</div>
</body></html>

harbingerOTV
11-17-2005, 12:29 AM
#footer
{
width: 700px;
height: 30px;
background-color: #036;
font-family:Arial, Helvetica, sans-serif;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0;
text-align: center;
font-size: 1em;
padding: 0;
color: #FFF;
font-size: 1em;
margin:0 auto;
}


you left out a ;. That fixes the footer.


and you can try this to make the links line up right


#navcontainer ul li a
{
width: 92.3px;
height: 24px;
line-height: 24px;
background-color: #036;
color: White;
float: left;
text-decoration: none;
border-right: 1px solid #fff;
}


and a little fudge for IE


#sidebar
{
background-color: #036;
float: right;
width: 125px;
height: 100%;
min-height: 90%;
border-right: 1px solid #000000;
margin-left: 3em;
padding-left: .5em;
padding-right: .5em;
font-size: .9em;
color: white;
font-size: .9em;
font-color:#FFFFFF;
}
* html #sidebar {
width: 127px;
}





* {
margin:0;
padding:0;
}
body {
text-align: center;
background: #6382b5 url(fill2.jpg) top center repeat-y;
}
#container {
width: 700px;
margin: 0 auto;
text-align: left;
position: relative;
}
#sidebar
{
background-color: #036;
float: right;
width: 125px;
height: 100%;
border-right: 1px solid #000000;
margin-left: 3em;
padding-left: .5em;
padding-right: .5em;
font-size: .9em;
color: white;
font-size: .9em;
color:#FFFFFF;
}
* html #sidebar {
width: 127px;
}
#header
{
width: 700px;
/* grey #B5B5B5; */
height: 70px;
background-color: #fff;
}
#header a {
margin-left: 1px;
}
#header h1
{
color: #FFFFFF;
}

#header img
{
height: 100%;
}

.ad
{
padding: 0;
margin: 0;
text-align: right;
float: right;
}

#navcontainer
{
height: 25px;
padding-top: 0px;
width: 700px;
background-color: #036;
/* original #036; */
}

#navcontainer ul
{
padding: 0;
margin: 0;
color: White;
width: 700px;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
}


#navcontainer ul li {
display: inline;

}

#navcontainer ul li a
{
text-align: center;
width: 92.7px;
height: 24px;
line-height: 24px;
background-color: #036;
color: White;
float: left;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer[id] ul li a
{
width: 91.9px;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

#content
{
border-bottom: none;
width: 700px;
font-family:Arial, Helvetica, sans-serif;
}

ul.bullets
{
padding-left: 3em;
color: #000;
font-size: 1em;
list-style-type: none;
}

ul.bullets1
{
padding-left: 4.5em;
color: #000;
font-size: .85em;
list-style-position: inside;
}

.welcome
{
text-align: left;
padding-top: .5;
padding-left: 3em;
padding-right: 3em;
padding-bottom: .5em;
font-size: .9em;
color:#000;
line-height: 1.5em;
}

.welcome1, #websearch
{
text-align: left;
padding-top: .5em;
padding-left: 3em;
padding-right: 4em;
padding-bottom: .5em;
font-size: .9em;
color:#000;
line-height: 1.5em;
}
#websearch {
padding-top: 8em;
}
#contact
{
padding-top: 1.75em;
padding-bottom: 1em;
padding-left: 4em;
}


TEXTAREA
{
width: 250px;
height: 150px;
}


h1
{
font-size: 1.5em;
color: #35598b;
text-align: left;
padding-top: 1em;
padding-bottom: .5em;
padding-left: .75em;
}

h2
{
padding-left: 1.5em;
padding-top: 1em;
padding-bottom: .75em;
font-size: 1.25em;
color: #000;
}

h3
{
font-size: 1em;
color: #000;
padding-left: 1em;
padding-top: 1em;
padding-bottom: 2em;
}



#validation
{
padding-bottom: 0em;
padding-top: 7em;
}

#validation img
{
width: 88px;
height: 31px;
margin-left: 1px;
}



#footer
{
width: 700px;
height: 30px;
background-color: #036;
font-family:Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
clear: both;
}



#footer p
{
padding: 0;
text-align: center;
color: #FFF;
font-size: 1em;
background-color: #036;
width: 700px;
height: 20px;
margin:0 auto;
}

img
{
border: none;
}

.required
{
padding-bottom: .75em;
}

.note
{
font-size: 1em;
color: #ff0000;
padding-left: 1em;
padding-top: 2em;
font-style: oblique;
}


a
{
color: #036;
}

a:visited
{
color: #036;
}

a:hover
{
color: #E3170D;
}

a:active
{
color: #E3170D;
}

Scootertaj
11-18-2005, 03:47 AM
Ahh, thanks for that harbinger.
Once again, thank you.
Next time I will try to do a little more on my own, but it seems you really were interested in helping :)

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum