19 replies [Last post]
level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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">&nbsp;</div>
  <div id="content">
    <div class="content">
      <div id="welcome">
        <h2>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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">&nbsp;</div>
        </div>
      </div>
      <div id="contact">
        <h1>&nbsp;</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>&nbsp;</p>
        </form>
        <div class="clear"></div>
      </div>
      <div class="contentEND"></div>
    </div>
  </div>
  <div class="rs">&nbsp;</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&amp;count=3"></script>
</body>
</html>

thank you for reviewing and take ur time Smile ..

Nick

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

75 markup errors.

75 markup errors. Non-semantic use of tables. Stripes don't line up properly. It can't handle text size increases.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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.

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

level5 wrote:I tried do the

level5 wrote:

I tried do the li style istead of table. ...

It doesn't look like a list. Why use list items?

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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?

----------------------------------------
Regards,
Nick

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

level5 wrote:I was saying i

level5 wrote:

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.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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.

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

level5 wrote:How can i fix

level5 wrote:

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.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

level5 wrote:My native

level5 wrote:

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. Smile

Triumph (not verified)
Anonymous's picture
Guru

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. Wink You'll just have to tell me the purpose of the gray blocks or at least what they will eventually contain.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

opps somehow it duplicated

opps somehow it duplicated

----------------------------------------
Regards,
Nick

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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>

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

Yeah, I guess an unordered

Yeah, I guess an unordered list can be appropriate in this case.

Following you on twitter. Wink

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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 Smile

----------------------------------------
Regards,
Nick

Triumph (not verified)
Anonymous's picture
Guru

level5 wrote:... do u have

level5 wrote:

... do u have any sugguest to tweak in the unordered list? ...

I might but I don't know what you want to change.

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

Im opened minded guy i would

Im opened minded guy i would change to learn anything Smile

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?

----------------------------------------
Regards,
Nick

rejamesuk
Offline
Regular
uk
Last seen: 10 years 31 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

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

level5
Offline
Enthusiast
Tucson, AZ
Last seen: 10 years 32 weeks ago
Tucson, AZ
Timezone: GMT-7
Joined: 2007-04-17
Posts: 102
Points: 0

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?

----------------------------------------
Regards,
Nick