473,840 Members | 1,631 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Page layout using DIVs and CSS

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
Feb 9 '07 #1
3 1832
I don't see a problem "researchin g" one of the many CSS templates [1]
websites.

--
<%= Clinton Gallagher
NET csgallagher AT metromilwaukee. com
URL http://clintongallagher.metromilwaukee.com/
MAP http://wikimapia.org/#y=43038073&x=-...8&z=17&l=0&m=h

[1] http://intensivstation.ch/templates/
"Carl Gilbert" <mr************ *@hotmail.comwr ote in message
news:ug******** ********@TK2MSF TNGP04.phx.gbl. ..
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

Feb 9 '07 #2
Carl Gilbert wrote:
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

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"><i mg ... /></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="ImageCon tainer"><img ... /></div>
<div class="ImageCon tainer"><img ... /></div>
<div class="ImageCon tainer"><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.

--
Göran Andersson
_____
http://www.guffa.com
Feb 10 '07 #3
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
>
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"><i mg ... /></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="ImageCon tainer"><img ... /></div>
<div class="ImageCon tainer"><img ... /></div>
<div class="ImageCon tainer"><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.

--
Göran Andersson
_____
http://www.guffa.com

Feb 12 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
2550
by: Anders Wegge Jakobsen | last post by:
Hi, I'm playing around with a layout for a weblog. A mockup can be seen at <http://outside.bakkelygaard.dk/~wegge/testblog/index.html>. The page has a fixed width of 800px, so I'm perfectly aware that horizontal scroll will occur wneh the brpwser viewport is narrower than that. That's simply a design tradeoff between having a useable proportion between the -bar on the right and the main content.
30
3159
by: Diane Wilson | last post by:
I'm trying (once again) to figure out how to make a robust CSS layout style that can replace tables. I'd like to be able to do a basic two-column layout, with a one-column header, a two column body, and a two-column footer. The problem, and one that always sends me back to using tables, is that word "robust." Absolute positioning gets squirrelly, because it takes the positioned elements completely out of the float scheme, and stuff...
0
1076
by: Chris Lieb | last post by:
I am working on redesigning my site, but am having trouble getting the basic layout to render the way I envision it. I am trying to get a layout that is shaped like a U turned so the open end is to the right. The top will be a nav bar, the side will have some features, and the bottom will have copyright and etc. I am designing it using six divs: one for the top nav bar, one for the top corner, where the logo will go, one for the side...
14
4868
by: Anoop | last post by:
Hi, I am new to this newsgroup and need help in the following questions. 1. I am workin' on a GUI application. Does C# provides Layout Managers the way Java does to design GUI? I know that it can be done using the designer but I intentionally don't want to use that. The one reason is that you cannot change the code generated by the designer. The other could be that you have more free hand and control to design your GUI. 2....
3
1248
by: Vai2000 | last post by:
Hi All, I am coming from old school web-design so prefer table layout. I see people using div just everywhere...? Why aren't they using tables? which is better? esp. when u have objects custom controls, grid views etc....to drop on pages.. TIA
1
1666
by: adventurer | last post by:
Is it possible to float left a few div elements so they stack left to right, but then have each "column" expand to the SAME length as the longest column? I am trying to make a border around a box that is made of background images, but the middle Section of divs need to expand to the same size as the middle div container since it holds the content of the page. look at it like this Div container div div div (row 1) div1 divX div2 (row 2)...
7
13081
by: cmcdermo | last post by:
Hopefully this is an easy solution. I come from the old school tables layout. I am trying to accomplish a layout using divs that I can easily do in tables but having trouble with using divs. This is what I am trying to do (this is how i'd do it using tables). <table width="750" border="1">
18
2498
by: maya | last post by:
pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF.. in IE it looks fine, but in FF the main div (centered, 800px wide, blue background; in reality the bg will be white..) won't display all the way down... (I tried height:100% for it but it still only went as high as the browser window..) only reason am having this problem is that I want to do a background-image BEHIND the main div.. but it's not...
5
5523
by: Timothy Larson | last post by:
I'm trying to create a 3 row layout in which each row will have two blocks, BUT I want the width of these blocks to be independent of the blocks in the other rows. So AFAICT a regular table layout is completely unsuitable. I've been trying to recreate this idea with CSS for a couple hours now, using positioned divs, but am not even close. (Maybe FF 1.5 is the problem?) Even if I did manage to position the top and bottom rows within the...
0
9702
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10924
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10665
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9444
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7845
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7023
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5686
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5879
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4498
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.