Lots of questions into one paragraph
!
There are many things which would need fixing in your CSS, and that’s only normal when you jump in for a first design.
For instance having the footer use a clear + absolute positionning is a bit contradictory
Also, it helps a lot indenting your html to have a clear view, especially when you have nested divs it avoids issues like forget closing an element.
I am not sure I understand the whole hidden div thingy at the end :
<div id="lbOverlay" style="visibility: hidden; opacity: 0;"/>
<div id="lbCenter" style="width: 250px; height: 250px; margin-left: -125px; display: none;">
<div id="lbCanvas">
<a id="lbPrevLink" href="#" style="display: none;"/>
<a id="lbNextLink" href="#" style="display: none;"/>
</div>
</div>
<div id="lbBottomContainer" style="display: none;">
<div id="lbBottom">
<a id="lbCloseLink" href="#"/>
<div id="lbCaption"/>
<div id="lbNumber"/>
<div style="clear: both;"/>
</div>
</div>
Honestly, I don’t mean to discourage you but I guess it would be faster and easier to just start again with a blank slate for the site html/css structure. A good start when you begin with CSS is using templates, especially when what you’re trying to do is not a custom design : it’s more than enough to achieve a cool and clean design. Plus, you learn along and refine parts you need changing.
A few references come to mind :
http://www.glish.com/css/
http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Just take the basic structure from there, and fill it in with the existing content (no need to re-do the whole thing
)
