How to design a web page with multiple color panes without tables

Question

I'd like to redesign my web design as follows:

It is mostly simple and could all be done with CSS and no tables, except for the way the logo "TEST" overlays both the purple border and the white content area. I cannot see how to do this without using a table of three rows and three columns (and background images in the cells) as shown in this "cut" image:

The psuedo-code would be as follows:

<table>

<!-- HEADER ROW -->
<tr>
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD>
<TD> <!-- Background: Purple/white image stretched horizontally --> 
     <!-- HEADER CONTENT (Logo image "TEST", and menu) --> </TD>
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD>
</tr>

<!-- CONTENT ROW -->
<TD> <!-- Background: Grey color --> </TD>
<TD> <!-- Background: white color --> </TD>
     <!-- PAGE CONTENT --> </TD>
<TD> <!-- Background: Grey color --> </TD>

<!-- FOOTER ROW -->
<tr>
<TD> <!-- Background: Purple color --> </TD>
<TD> <!-- Background: Purple color --> 
     <!-- FOOTER CONTENT --> </TD>
<TD> <!-- Background: Purple color--> </TD>
</tr>

</table>

But I would like to do this without tables if possible. Is there a way?

Yes, use `position:absolute` on the logo. the parent must be `relative`. That way you don´t need to cut anything in your structure — Luís P. A., Oct 18 '15 at 09:34

score 2 · Answer 1 · answered Oct 18 '15 at 09:39

2

you could make an CSS style for TEST object with property of

position: absolute; left: %px; bottom: %px;

answered Oct 18 '15 at 09:39

Peri

574
1
3
19

Ichor de Dionysos · Answer 2 · 2015-10-18T09:53:28.910

You can put the different rows in <header>, <main>, and <footer> tag and then define for header and footer tag a padding-left and padding-right with your specified value x and then for the main tag specify for margin-left and margin-right the same value x (x is the distance between the screen edge and the edge of your content, the width of the grey rectangle) and for all your tags specify a width: 100%

To position the footer to the bottom, you should give him position: absolute; and bottom: 0px;

To position the Text "Text", use although the css attribute position: absolute and then top: valY px; left: valX px;

All these things done in CSS

Here are some great interactive courses, you maybe want to assgin: https://www.udacity.com/course/intro-to-html-and-css--ud304 https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

Dhwani sanghvi · Accepted Answer · 2015-10-18T14:26:56.213

I make layout exactly what you want.For title you need position:absolute and give position:relative to its parent div.

DEMO :

http://jsfiddle.net/ue5cu7du/

<div id="header">
    <ul><li>menu-1</li>
    <li>menu-2</li>
    <li>menu-3</li></ul>
</div>
<div class="container">

<div id="nav" class="left">
</div>

<div id="section">
      <div class="logo-name">TEST2</div>
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="nav" class="right">
</div>
    </div>
<div id="footer">
Copyright © tyhy.com
</div>

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    padding:5px;          
}
#section {
    width:350px;
    float:left;
    padding:10px;
    position:relative;
}
#footer {
    position:relative;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}
.right{float:right}
.left{float:left}
.logo-name{
    position: absolute;
     top: -22px;
    color: blue;
    width: 100%;
    font-size: 36px;
    margin: 0 auto;
    font-weight: bold;}
li{display:inline-block;list-style:none;width:80px}
ul{text-align:right}

Why don't you use the new HTML Tags released with HTML5? If you only use div's, your code isn't such clean and with the new tags search engines and browser have a better chance to understand what your website should look like and which are the most relevant informations — Ichor de Dionysos, Oct 18 '15 at 16:38
Yeah that's true. But I am showing demo without table how @Xaz can make layout. — Dhwani sanghvi, Oct 18 '15 at 16:44
Thanks Dhwani91, that's almost exactly what I want. I only need to make the white section a fixed width, and the header menu indented right of the gray area. I will now try modifying your code in jsfiddle to get what I want. I'll let you know if i have any queries. — Zax, Oct 18 '15 at 23:56

How to design a web page with multiple color panes without tables

3 Answers3