Pixelated Redesigned

This time..... I have stepped away from the sort of business and old looking site and gone for the more personal "holdall" site...... so..... without further ado

Pixelated - A One Man Band

and something else...... its validates with xHTML :D

Comments? Critisiscms?

Marc

The site looks strange in Opera 7.2, you should check it out: a column's width varies depending on the text width of each line in it.

In IE it looks nice and I have to mention that it's too wide for my screen because of the white box on the left for which I have found no use. It's great that you're using CSS to separate content from presentation. ;)

thanks..... i know that it is weird in Opera..... but i dont know how to fix that :S

the aim was that it would be a scroll across website as all of my other sites are scroll down...... thanks for the crit .....

Anymore?

You are like the antithesis to Simon Cowell ;)

Lazyroll: Interesting site you got there man. I like the side scroll. The structure is nice, but to be honest with you, the gray kinda dulls me out a bit. There also seems to be a bit of white space at the bottom, are you planning to clear that out?

It's good tho' I really enjoyed reading your stuff, and the shout you give to 3jorn is cool too. It's awesome to see a designer give props to another. All in all it's a great site man, keep up the good work and preach 'till you drop

Its weird.... I tinkt eh background color and the content boxes should contrast a little more...

Looks bad in Mozilla, I do like the site in IE. I agree with Doolittle though, it could use a little more color contrasting.

so i should add some sort of eye candy? or just change the background....

what did you mean thehermit? im confused

Wow thanks Lazyroll, that was sweet of you! :P
About the site:
I agree with the colors of the background, I think that background color doesn't really fit that well with the white background.
Too much difference.
I would make the gray background a bit more softer gray and then check the # color for that color and then make the boarders around just tiny bit darker instead of just black borders.
I have nothing against horizontal scroll but I know that there are some people that do...don't really understand why, I like when a site isn't like every other site out there.

I have taken a look at the markup and I know why it looks strange in
Opera. It's because it doesn't respect the standards at all, the
content isn't separated from the presentation, and it's all
Dreamweaver's fault. It seems as though it has created IE-compatible
markup and not a standards compliant one.

Long story short, I have cleaned the site's markup and I have
gotten it to work both in Opera and in IE (including 5 and 5.5).

The problem is the vertical scroll, which is a design artifice.
The solution I have found doesn't involve absolute positioning for all boxes
(no time to do that), the gray boxes act just like text and wrap
if you have anything less than 1024*768. To fix that you have
to use absolute CSS positioning, but that also has its disadvantages
for higher resolutions, because the content remains in the same position.

The following recipe uses relative positioning for the pic and the
first three boxes and absolute positioning for the last one. You
can modify each box to position it absolutely so it wouldn't wrap on
lower resolutions.

The HTML:
You have a <.div> for each content box and one for the picture (the
Dreamweaver code added lots of junk divs). Another problem with
dreamweaver is that it didn't add styles
to the CSS file or between <.style><./style> but it added them in
the style property of each tag. That just makes files bigger and
harder to modify. All the CSS is in the site.css file now.
-----------------------------------------------------
[code]
<.div id="mypic">your pic<./div>

<.div class="box">
<.img src="about.jpg />
The text goes here. Notice that unlike Dreamweaver which kept the
header pic in a separate layer we add it here. It's to
the same effect. That goes for the other boxes too.
<./div>
<.div class="box">show<./div>
<.div class="box">tell<./div>
<.div class="box">go see<./div>

<.div id="footer">the footer<./div>

The dots are here so that the HTML tags show, it seems the forum parsed
them... :(
[/code]
-----------------------------------------------------
And here is the CSS:
[code]
body
{
font: 11px/15px Verdana, Geneva, Helvetica, Arial, sans-serif;
background-color: #d8d0c8;
padding: 0;
margin: 0;
margin-right: 10px;
}
#mypic
{
margin: 0;
margin-top: 10px;
background-color: #fff;
padding: 5px;
border: 1px solid #000;
width: 215px;
height: 500px;
display: block;
float: left;
}

.box
{
margin-left: 10px;
margin-top: 10px;
padding: 0;
width: 215px;
height: 510px;
background-color: #666;
border: 1px solid #000;
float: left;
}

.lastbox
{
position: absolute;
padding: 0;
margin: 0;
top: 10px;
left: 920px;
width: 215px;
height: 510px;
border: 1px solid #000;
background-color: #666;
}

#footer
{
position: absolute;
left: 3px;
bottom: 15px;
width: 1130px;
height: 30px;
border: 1px solid #000;
background-color: #666;
}

a:link
{
font: 10px/11px Verdana, Helvetica, sans-serif;
color: #000;
}

h3
{
color: #ccc;
font: 12px/15px Verdana, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
The h3 is for heading text such as the "YOU", "Mark" and "Worst week".
[/code]

If you decide to use it, you should start with a blank HTML and add
the content, it would be way easier than modifying the existing one.
If you want to use absolute positioning create a #box_name tag for each box in the
CSS file and copy everything except the left attribute which is different.

Since your doctype is transitional xHTML you could use a table for
layout and get rid of all the trouble, since this particular design
is tricky to implement in CSS. The moral of the story is don't rely on
Dreamweaver too much for CSS!!!