![]() |
Reviews, updates and in depth guides to your favourite mobile games - AppGamer.com
|
|
Pixelated Redesigned |
Page: 1 2 | Reply |
Mar 10th 2004 | #144990 Report |
![]() Posts: 810 |
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 |
Reply with Quote Reply |
Mar 10th 2004 | #144998 Report |
![]() Posts: 55 |
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. ;) |
Reply with Quote Reply |
Mar 10th 2004 | #144999 Report |
![]() Posts: 810 |
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? |
Reply with Quote Reply |
Mar 11th 2004 | #145024 Report |
![]() Posts: 1143 |
You are like the antithesis to Simon Cowell ;)
|
Reply with Quote Reply |
Mar 11th 2004 | #145025 Report |
![]() Posts: 586 |
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 ![]() |
Reply with Quote Reply |
Mar 11th 2004 | #145027 Report |
![]() Posts: 315 |
Its weird.... I tinkt eh background color and the content boxes should contrast a little more...
|
Reply with Quote Reply |
Mar 11th 2004 | #145028 Report |
![]() Posts: 1496 |
Looks bad in Mozilla, I do like the site in IE. I agree with Doolittle though, it could use a little more color contrasting. ![]() |
Reply with Quote Reply |
Mar 11th 2004 | #145036 Report |
![]() Posts: 810 |
so i should add some sort of eye candy? or just change the background.... what did you mean thehermit? im confused |
Reply with Quote Reply |
Mar 11th 2004 | #145038 Report |
![]() Posts: 1693 |
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. |
Reply with Quote Reply |
Mar 11th 2004 | #145044 Report |
![]() Posts: 55 |
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!!! |
Reply with Quote Reply |
Page: 1 2 | Back to top |
Please login or register above to post in this forum |
© Web Media Network Limited. All rights reserved. No part of this website may be reproduced without written permission. Photoshop is a registered trademark of Adobe Inc.. TeamPhotoshop.com is not associated in any way with Adobe, nor is an offical Photoshop website. |