Thu, 2009-01-08 00:59
Hey guys please review my website.. its beta for now. Feel free leave comments, feedbacks, corrections it will be helpful big time..
preview url projectconcept.com/index.php
source code css and html here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background: url(assets/img/bkg.gif) repeat scroll center top; font: lighter 12px Arial, Helvetica, sans-serif; } #wrapper { width: 781px; height: auto; position: relative; margin: 25px auto; } .clear { height: 1px; clear: both; } .fl { float: left; } .fr { float: right; } .ls { background: url(assets/img/bkg_s_ls.gif) no-repeat left top; width: 101px; height: 956px; float: left; } .rs { background: url(assets/img/bkg_s_rs.gif) no-repeat left top; width: 101px; height: 956px; float: left; } #content { width: 579px; float: left; background: #131515 url(assets/img/bkg_header.gif) no-repeat left top; margin: 0px; padding: 0px; } .content { padding: 0px; margin-top: 41px; margin-bottom: 0px; background: url(assets/img/bkg_body.gif) repeat-y; } .contentEND { background: url(assets/img/bkg_footer.gif); height: 36px; } #welcome { background: url(none); width: 530px; margin-right: auto; margin-left: auto; } #welcome h2 { background: transparent url(assets/img/f_welcome.gif) no-repeat left top; height: 19px; width: 112px; margin: 0px; padding: 0px; } #welcome p { color: #666; margin: 8px auto; padding: 0px; width: 499px; } #welcome img { float: right; margin: 9px 24px 4px 5px; } #twittering { width: 530px; margin: 0px auto; } #twittering h2 { background: url(assets/img/f_twitter.gif); height: 27px; width: 124px; margin: 0px; padding: 0px; } #twitter_div { padding:10px; margin-right: 17px; margin-left: 17px; height: 124px; } #twitter_div ul { margin:0px; padding:0px; } #twitter_div ul li { list-style:none; text-align: left; margin: 0px 0px 10px; padding: 0px; color: #555356; font: lighter 12px Arial, Helvetica, sans-serif; } #twitter_div ul li a { width:70px; display:block; top:-43px; left:-90px; text-transform:capitalize; color: #9A3B14; font-size: 12px; font-weight: normal; } #portfolio { margin: 0px auto; width: 530px; } #portfolio h1 { background: url(assets/img/f_showcases.gif) no-repeat right top; margin: 7px 30px -10px 0px; padding: 0px; } #portfolio h2 { background: url(assets/img/f_design.gif) no-repeat right top; margin: 7px 30px 0px 0px; padding: 0px; } #portfolio .boxes { padding: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #box_1 { width: 499px; margin-right: auto; margin-left: auto; background: #222726 url(assets/img/c_bkg_top.gif) no-repeat left top; padding-top: 5px; margin-top: 7px; } #box_2 { width: 499px; margin-right: auto; margin-left: auto; background: #222726 url(assets/img/c_bkg_top.gif) no-repeat left top; padding-top: 5px; margin-top: 11px; } .box_close { background: #2F3534 url(assets/img/c_bkg_bottom.gif) no-repeat left bottom; height: 15px; margin: 0px; padding: 0px; } #contact { width: 530px; margin-right: auto; margin-left: auto; margin-top: 10px; } #contact h1 { background: transparent url(assets/img/f_contact.gif) no-repeat left top; height: 19px; width: 136px; margin: 0px 0px 10px; padding: 0px; } #contact input { margin-bottom: 6px; } #contact #form { margin: 0px auto; padding: 0px; width: 400px; } #contact #title { background: transparent url(assets/img/form_name.gif) left top; height: 19px; border-width: 0px; width: 309px; color: #3C4442; padding-left: 60px; padding-top: 5px; } #contact #email { background: transparent url(assets/img/form_email.gif) left top; height: 19px; border-width: 0px; width: 309px; color: #3C4442; padding-left: 60px; padding-top: 5px; } #contact #comments { background: transparent url(assets/img/form_comment.gif) no-repeat left top; height: 53px; width: 304px; border-width: 0px; padding-left: 103px; color: #3C4442; padding-top: 5px; } #contact #contactsubmit { background: transparent url(assets/img/submit.gif) no-repeat left top; float: right; height: 39px; width: 89px; text-indent: -9000px; border-width: 0px; margin-right: 30px; margin-top: 3px; } #contact #contactsubmit a:hover { background: transparent url(assets/img/submit.gif) no-repeat left bottom; float: right; height: 39px; width: 89px; text-indent: -9000px; border-width: 0px; margin-right: 30px; margin-top: 3px; } #footer { width: 500px; margin-right: auto; margin-left: auto; color: #464E4E; margin-bottom: 50px; } --> </style> </head> <body> <div id="wrapper"> <div class="ls"> </div> <div id="content"> <div class="content"> <div id="welcome"> <h2> </h2> <img src="assets/img/pictureme.gif" width="132" height="115" alt="" /> <p>Hello my name is Nicholas Rogalski, Im entrener, artist, blogger and webdesigner. After working as a artist, web designer - and freelance - I startup my own wedesign / web developer with my friend in 2006. Our company, level5studio, that im current still working has since grown and I've had the good fortune to work on lots of very exciting and interesting projects.</p> <p>Thanks to the brilliant nature of the web, I'm currently living and working out of Tucson, Arizona. You can find me online on Twitter where I post random thoughts, or you can contact me, If you’re interested with my work and want get job done please email me its is bottom of page <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" />. </p> </div> <div id="twittering"> <h2> </h2> <div id="box_1"> <div id="twitter_div"> <ul id="twitter_update_list"> <li><a href="http://twitter.com/Nick____"></a></li> </ul> </div> <div class="box_close"></div> </div> </div> <div id="portfolio"> <div id="box_2"> <h1> </h1> <table class="boxes"> <tr> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> </tr> <tr> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> </tr> <tr> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> </tr> </table> <h2> </h2> <table class="boxes"> <tr> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> </tr> <tr> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> </tr> <tr> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> <td><img src="assets/img/icons.gif" alt="" /></td> </tr> </table> <div class="box_close"> </div> </div> </div> <div id="contact"> <h1> </h1> <form action="assets/php/process.php" method="post" name="form" id="form" onsubmit="return verify();"> <p> <input id="title" name="email" class="fieldbox" type="text" value="<?php print $_GET['email']?>"/> <input id="email" name="email" class="fieldbox" type="text" value="<?php print $_GET['email']?>"/> <textarea name="comments" cols="35" rows="10" class="comment" id="comments"><?php print $_GET['comments']?></textarea> <input src="" type="submit" name="Submit" value="Submit" id="contactsubmit" class="submit" tabindex="15"/> </p> <p> </p> </form> <div class="clear"></div> </div> <div class="contentEND"></div> </div> </div> <div class="rs"> </div> </div> <div id="footer">Copyright 2007 - 2009 projectconcept.com</div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-4535265-2"); pageTracker._trackPageview(); </script> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Nick____.json?callback=twitterCallback2&count=3"></script> </body> </html>
thank you for reviewing and take ur time 
..
Nick
Thu, 2009-01-08 01:17
#1
75 markup errors.
75 markup errors. Non-semantic use of tables. Stripes don't line up properly. It can't handle text size increases.
Thu, 2009-01-08 01:27
#2
table or css li
I tried do the li style istead of table. it screws up my layout badly and i couldnt figure out.. i dont mind try do li istead of tables but it couldnt work.. ill fix my errors.
Thu, 2009-01-08 01:31
#3
level5 wrote:I tried do the
I tried do the li style istead of table. ...
It doesn't look like a list. Why use list items?
Thu, 2009-01-08 04:27
#4
I was saying i tried out as
I was saying i tried out as ul li style for small pictures. its not easy so gave up and used tables lol
Finished fixed all errors. zero errors now.. so anybody have any comments for my personal webpage?? any sugguestions etc?
Thu, 2009-01-08 06:55
#5
new updated css and html
Hey guys i just rewrite the layout.. both valid by CSS and xhtml both of them passed. but anybody has a comment or suggestions or tips for my personal site?
I sure having issues with contact forms.. trying to get whole image align float right istead of left but it keep messing up.! anybody got any idea? please view and help me out thanks!
Nick
Thu, 2009-01-08 12:54
#6
level5 wrote:I was saying i
I was saying i tried out as ul li style for small pictures. its not easy so gave up and used tables lol
Well, it's not a table or a list so neither should be used.
The layout still has trouble with text size increases.
Thu, 2009-01-08 19:55
#7
UMM
How can i fix that solution? i never heard something fix the font issues before. its all new to me.. so can u explain to me how can i fix the problem? im poundering by wondering about it.
Thu, 2009-01-08 21:10
#8
level5 wrote:How can i fix
How can i fix that solution? i never heard something fix the font issues before. its all new to me.. so can u explain to me how can i fix the problem? im poundering by wondering about it.
What's your native language?
Text size issues usually stem from two things, improper use of absolute positioning and setting a defined height on the text container. Don't do those things.
Fri, 2009-01-09 18:09
#9
My native language is
My native language is american sign language, known as hearing impaired
Sorry if my english isnt clear to you sometimes lol.
Really? mmm interesting im gonna fixing the issues right now. the text width i only used it for twittering.. but ill figure out something..'
Thanks
Fri, 2009-01-09 18:34
#10
level5 wrote:My native
My native language is american sign language, known as hearing impaired
Sorry if my english isnt clear to you sometimes lol.
Actually, it is more clear now that I know that.
Fri, 2009-01-09 18:49
#11
What is going in the little
What is going in the little blocks in the showcase section? Are they thumbnail images? I don't know, maybe it will be a list then. Hmm
I'll leave that one out there for those that like to argue semantics. 
You'll just have to tell me the purpose of the gray blocks or at least what they will eventually contain.
Sat, 2009-01-10 23:37
#12
opps somehow it duplicated
opps somehow it duplicated
Sat, 2009-01-10 23:35
#13
Ha its cool. Ahh the grey
Ha its cool.
Ahh the grey box that i wanted it to be list format istead of tables.. its for portfilio showcases.. the small thumbnails will have mini pictures of my work.. when user hover the image it will have tooltip of bigger picture not big.. mini 2 size preview before it clicks to actually see the site or showcases.. im trying figure out make a ul and li.. i got it figured out but bad luck due firefox.. opera and safari and other broswer display correct like 5px left 5px bottom.. it look clean.. but firefox display bottom looked like 10px.. here preview code...\
and i updated little with my site projectconcept.com you can check out latest changes.. im almost there to finish it before i start posting my showcases thumbnails
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- ul { list-style: none; margin: 0px; padding: 0px; width: 500px; } li { display: inline-block; float: left; padding: 0px; margin: 0px 4px 4px 0px; } --> </style> </head> <body> <ul> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> <li><img src="assets/img/icons.gif" width="40" height="29" /></li> </ul> </body> </html>
Sun, 2009-01-11 11:15
#14
Yeah, I guess an unordered
Yeah, I guess an unordered list can be appropriate in this case.
Following you on twitter.
Sun, 2009-01-11 13:37
#15
Hey
Ah cool!!.. no wonder i was who? anyway so do u have any sugguest to tweak in the unordered list? hope hear from you soon thanks
Sun, 2009-01-11 13:47
#16
level5 wrote:... do u have
... do u have any sugguest to tweak in the unordered list? ...
I might but I don't know what you want to change.
Sun, 2009-01-11 15:56
#17
Im opened minded guy i would
Im opened minded guy i would change to learn anything
I want rid of tables and change to li unordered you see the grey small boxes its under table format like table tr td so wanted change it to ul li li ul.. i mentioned you eariler that ul li acts funny on firefox that where i cant adjust bottom pixel correctly. firefox displays odd way. but safari and other browser did set my list size etc prefectly but not firefox. it seems like i must done something wrong.
do u want chat via instant messager?
Sun, 2009-01-11 22:02
#18
on Firefox - mac.... the
on Firefox - mac....
the twitter excerpts over-run the grey box
otherwise, looks good.
images should defo be a list.
i would be inclined to align the input boxes to the right and the text to the left. separate the text and input fields images to make this easier
Mon, 2009-01-12 00:08
#19
Thanks rejamsuk I has mac
Thanks rejamsuk
I has mac firefox. ur right about those errors that u said, it means i gotta figure out how make twitter box expand theirself cause im trying not to do iframe. doing css way but when i used css scroll. it forces showing bottom scroll. any way to tweak it?..
yeah i agree with list type but i did set up thats way it looks great but on firefox the bottom height pixel "margin or padding" to able lock the size but firefox push it apart badly.. whats your sugguestion?