Page layout using DIVs and CSS

  • Thread starter Thread starter Carl Gilbert
  • Start date Start date
C

Carl Gilbert

Hi

I am looking to convert a site from HTML to ASP.NET making use of CSS. I
have tried various combinations but I can not seem to get the correct
combination of div and CSS tag configurations.

I have uploaded a screenshot (http://www.bwbfc.com/math/regions.jpg) of how
the screen will be laid out. Firstly it is all cantered in the window. I
plan to create a master page which would contain the header (in blue), the
footer (in yellow) and the menu (in green). I would then have a content
place holder for the body of the page (in red).

Ideally I would like to get this pixel perfect; I have the dimensions for
everything. The two most important ones are the total size which should
ideally be 830 x 511 px, and the body div which should be 664 x 328 px.
Following on from this, each page would be responsible for rendering divs
(with thick border containing images) within the content place holder.
In the above screenshot, we are rendering 2x4 cells. Other configurations
may be 4x2, 4x1 or 8x1.

I have also uploaded another screenshot
(http://www.bwbfc.com/math/dimensions.jpg) which details the dimensions for
all the divs on the page.

So my question is, what would be the best approach to achieve this layout?
I tried creating a div to contain everything and then having separate div
within this but it all started to get a bit messy. Another aspect I was
struggling with was getting it all to sit centrally on the page.

Anyway, it would be good if someone could shed some light on the best
approach for using divs and css.

Kind regards, Carl Gilbert
 
Carl said:
Hi

I am looking to convert a site from HTML to ASP.NET making use of CSS. I
have tried various combinations but I can not seem to get the correct
combination of div and CSS tag configurations.

I have uploaded a screenshot (http://www.bwbfc.com/math/regions.jpg) of how
the screen will be laid out. Firstly it is all cantered in the window. I
plan to create a master page which would contain the header (in blue), the
footer (in yellow) and the menu (in green). I would then have a content
place holder for the body of the page (in red).

Ideally I would like to get this pixel perfect; I have the dimensions for
everything. The two most important ones are the total size which should
ideally be 830 x 511 px, and the body div which should be 664 x 328 px.
Following on from this, each page would be responsible for rendering divs
(with thick border containing images) within the content place holder.
In the above screenshot, we are rendering 2x4 cells. Other configurations
may be 4x2, 4x1 or 8x1.

I have also uploaded another screenshot
(http://www.bwbfc.com/math/dimensions.jpg) which details the dimensions for
all the divs on the page.

So my question is, what would be the best approach to achieve this layout?
I tried creating a div to contain everything and then having separate div
within this but it all started to get a bit messy. Another aspect I was
struggling with was getting it all to sit centrally on the page.

Anyway, it would be good if someone could shed some light on the best
approach for using divs and css.

Kind regards, Carl Gilbert
Click to expand...

When you write the html code of the page, don't think so much of the
layout. Think more of the information that the page contains. If the
layout is good, it will more or less be divided into the same elements
as the information.

The content of the body tag shouldn't have to be much more complex than
this:

<div class="Page">
<div class="Top">
<div class="Logo"><img ... /></div>
<div class="Slogan">site slogan</div>
</div>
<div class="Menu">
<a href="..." ...>...</a>
<a href="..." ...>...</a>
<a href="..." ...>...</a>
<a href="..." ...>...</a>
</div>
<div class="Main">
<div class="ImageContainer"><img ... /></div>
<div class="ImageContainer"><img ... /></div>
<div class="ImageContainer"><img ... /></div>
</div>
<div class="Footer">
<a href="..." ...>1</a>
<a href="..." ...>2</a>
<a href="..." ...>3</a>
</div>
</div>

Now you can just place the elements using css.
 
Thanks for your help. That seems to be working very well indeed.
I've always been a bit sceptical of CSS as I prefer coding to design but
when I consider how my html looked when I was using tables to perform the
layout CSS wins hands down.

Cheers, Carl
 
Back
Top