http://0xdeadbeef.i8.com/Untitled-1.html

Thats my temp. site just to host my files. I've asked some friends to view the site with the same browser that i view it in and they showed pictures of my current projects box just thrown into the news section. I don't know how to fix or address this issue because i can't produce it. I also feel as if there is some CSS that is not needed here also and the content doesnt look centered at all. Can someone look over my source and give some help/fixes and etc. ?


Thanks, rab

i don't know that much about css, but i'm getting better.

I find your code very confusing and hard to follow.

One of the best things I ever did was download the web developer pluging for Firefox. It gives you a real time CSS editor that allows you to make changes to the css and see what it does live. Of course this does not over-write your site, you can just copy and paste the code into your program.

I would suggest cleaning up the css, putting each item together instead of spread out so much.


again, please keep in mind that I myself am new at this!

good luck!

they showed pictures of my current projects box just thrown into the news section.

Yep, that's what I see in Firefox.

You've got a serious case of div-itis there. Using divs where you should be using actual headings (h1-h6) is not a good idea. Search engines LIKE Headings.

In looking at your layout, You have basically 1 column, #content, and you're floating elements around inside it. You might want to consider making it a true 2-column layout and wrapping your projects info inside that 2nd column.

What you need to do is move this whole section:

<div id="current-projects">
<span class="title-top">
current
</span><br>
<span class="title-bottom">
projects...
</span>
<ul id="projects">
<li><a href="javascript:insertStats(23, 'xyz1')" id="xyz1">Recode Portfilio</a></li>
<li><a href="javascript:insertStats(24, 'xyz2')" id="xyz2">Fix xyz.com bug</a></li>
<li><a href="javascript:insertStats(25, 'xyz3')" id="xyz3">Create xyz script</a></li>
<li><a href="javascript:insertStats(26, 'xyz4')" id="xyz4">Do xyz to zyx</a></li>
</ul>
</div>

to sit INSIDE the #latest-proejct div.. then you can remove all the extra float:right declarations.

<div id="latest-project">
<div id="project-title">
<span class="title-top">
latest
</span><br>
<span class="title-bottom">
project...
</span>
</div><!-- close project-title -->
<div id="project-content">
<img src="Untitled-1_files/latest.png" alt="Latest Project" id="project">
</div><!-- close project-content -->
<div id="current-projects">
<span class="title-top">
current
</span><br>
<span class="title-bottom">
projects...
</span>
<ul id="projects">
<li><a href="javascript:insertStats(23, 'xyz1')" id="xyz1">Recode Portfilio</a></li>
<li><a href="javascript:insertStats(24, 'xyz2')" id="xyz2">Fix xyz.com bug</a></li>
<li><a href="javascript:insertStats(25, 'xyz3')" id="xyz3">Create xyz script</a></li>
<li><a href="javascript:insertStats(26, 'xyz4')" id="xyz4">Do xyz to zyx</a></li>
</ul>
</div>
</div><!-- close latest project -->

You also need to understand that floats ARE removed from the document flow, that's how they work AND that the order that you put your floated elements into your HTML DOES matter.

You also have to make sure you CLEAR your floats or you will have more unwanted results.