473,320 Members | 1,865 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

CSS design and 100% height

Hi,

I'm quite unused to CSS and I want the following layout to work using CSS and
tables:

Page split into table with two cells of 50% width:

Left cell | Right cell
|
Navbar |
Nested Tables |
| large image, centered horiz. and vert.
|
|
|

It should look something like:
http://www.mezzanin.de/start.shtml
(without the black borders, those are for testing the CSS boxes)

Until now I've used lots of frames to create this layout but it becomes too
unwieldy for a med-large site. A single-page layout is a must now, I think.

Setting BODY and the right cell to 100% height helps to center the image but
creates lots of problems with the tables in the left cell.

Using CSS/DIV tables instead (with relative positioning) works only in Mozilla,
not in IE.

Any ideas or hints or similar designs that actually work?
Jörg
Jul 23 '05 #1
3 2647
Jörg Ellermann <j.*********@tu-bs.de> wrote in
news:ci*************@news.t-online.com:
Hi,

I'm quite unused to CSS and I want the following layout to work using
CSS and tables:

Page split into table with two cells of 50% width:

Left cell | Right cell
|
Navbar |
Nested Tables |
| large image, centered horiz. and vert.
|
|
|


what do you mean by "centered vertically"?
Jul 23 '05 #2
> what do you mean by "centered vertically"?

Centered vertically in the right cell, which itself is 100% high.
Jul 23 '05 #3
Jörg Ellermann <j.*********@tu-bs.de> wrote in message news:<ci*************@news.t-online.com>...
what do you mean by "centered vertically"?


Centered vertically in the right cell, which itself is 100% high.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<style type="text/css">
html, body, #tblmain {width:100%;height:100%;}
#tblmain td {width:50%;border:1px solid black;vertical-align:top;}
#tdright {background:url(http://www.google.com/images/logo.gif)
center center no-repeat #fff;}
#tdleft a {display:block;width:50%;background:#eee;color:blu e;border:1px
solid #ddd;padding:3px;}
</style>
</head>
<body>
<table id="tblmain">
<tr>
<td id="tdleft">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>
</td>
<td id="tdright">right cell</td>
</tr>
</table>
</body>
</html>
Jul 23 '05 #4

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

Similar topics

8
by: oj | last post by:
Please, bare with me. I'm new to CSS and would like to ask for some advice on my current project. I have an existing table based layout that serves as the main template for a .Net application I've...
33
by: Joe | last post by:
I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: - body background: fixed full page image - banner: fixed, 100...
12
by: Raed Sawalha | last post by:
I have the following table which i can not switcha to design view error message said Could not open in Design view. Quote values differently inside a '<% ...."value"... %>' block. and the...
7
by: Shimon Sim | last post by:
I have a custom composite control I have following property
19
by: Chocawok | last post by:
Some of the classes in my app are graphical. To encapsulate the graphical side of things I had created a class called "sprite" which holds a bit map and knows how to draw itself etc. The...
17
by: Mike | last post by:
I'm trying to create a page: Three sections (left, topright and bottomright), each with a heading and scrolling (overflow) content. The size of these sections should be based upon the size of the...
7
by: Niall | last post by:
I have converted a vs 2003 solution to 2005 and when I try to switch to design mode for a user control I get: Cannot switch views: Validation (Internet Explorer 6): Element 'Style' cannot be...
0
by: Markus Olderdissen | last post by:
i want to create my page with 100% height. <table height="100%"works but is not correct by default. i saw various information how to do it with stylesheet. i really have problems to create my page....
1
by: Mike Collins | last post by:
I am trying to create some pages and have them take 100% of the window, but I cannot get 100% to work. If I set the height of my div, the page displays a scroll bar and it looks like I set the...
0
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.