Hi all,
I've been getting stuck into my book for the last week and a half and so far I'm really enjoying it. I read a small bit then play loads so I've not managed to read a lot. I'm finding out that doing and messing around is helping me to learn a lot.
I've coded a website, by hand, no Dreamweaver whatsoever! I did a quick design of it in Fireworks so I could visualise it and then I began work on coding it.
Design:
I know I'm no designer but I do like to try.
Website:
http://www.medenschool.co.uk/web/beatles/index.html
I'm a big Beatles fan, as you can probably tell so I just did something I'm interested in because I feel I need to create something to implement my new skills in.
Now because the navigation and content area overlap the brown horizontal areas I had to use quite a few divs to create the 'illusion' that they have, in fact, overlapped but the truth is they haven't
. Here is the layout I did, minus the text, images etc..
<div id="top">
<div id="top_text"> image here </div>
</div>
<div id="header">
<div id="banner"> image here </div>
</div>
<div id="nav_container">
<div id="nav">
<ul>
<li> links here </li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
image / text here
</div>
</div>
<div id="main_2">
<div id="content_bottom"> </div>
</div>
<div id="footer">
<div id="footer_text">
image here
</div>
</div>
Now doing it that way is perfectly fine but as I'm sure you can appreciate there is rather a lot of divs involved and obviously for each div requires a CSS rule/s.
I was reading my book today and it talked about absolute positioning. This really appealed to be because I instantly thought instead of using all them divs (in a relative sense, even though I've never specified the position, which I've read means the Divs are static) I could get the layout done in 4 or 5 divs instead of 9/10 which means less code and less development time. It all seemed like it would work, in my head, and then I started to experiment.
I thought this would work:
<div id="top"> </div> -
<div id="header"> </div>
<div id="nav"> </div> (Set to absolute and center and position on header, overlap.)
<div id="content"> </div> (Set to absolute and center and position on footer, overlap.)
<div id="footer"> </div>
It appears I can't get my absolute position divs to center align, gutted. I’ve googled it and tried a few hacks but they don't work and I don't like the idea of having to use them.
So my questions are:
- Was they way I originally laid it good enough?
- Is there a way to center align an absolute position div?
- Is there another, more efficient way to achieve the layout I've designed?
I know this is a long post but I thought I'd ask you guys before I start to pull all of my hair out. I'm only a week into this so don't go too hard on me.
RoEy
