Could someone help me out please?
I'm trying (in a very short period of time!) to knock up a CSS version of a table website. the basic code / look that i need to convert is:
<table>
<tr><td colspan="2">Top banner</td></tr>
<tr><td>Text</td><td rowspan="2">Index</td></tr>
<tr><td>Disclaimer</td></tr>
<tr><td colspan="2">Text text text</td></tr>
</table>
so that it looks a little like this:
-----------------------------------------------
| |
| |
-----------------------------------------------
| | |
| | |
| | |
-------------------------------| |
| | |
| | |
| | |
| | |
-----------------------------------------------
| |
| |
| |
-----------------------------------------------
Can anyone help me out? I'd like it to stretch to the whole window width, and the right hand column bit to be ~15% of the window.
Many thanks in advance!Perhaps something like this (the background colours are just there for you to see the different DIVs)?
CSS:
html, body { margin: 0 }
#container {
background-color: yellow;
}
#top {
background-color: red;
}
#index {
background-color: yellow;
float: right;
width: 15%;
}
#text1 {
background-color: blue;
}
#disclaimer {
background-color: green;
margin-right: 15%;
}
#text2 {
background-color: black;
clear: both;
}
Body of HTML file:
<div id="container">
<div id="top"> </div>
<div id="index"> </div>
<div id="text1"> </div>
<div id="disclaimer"> </div>
<div id="text2"> </div>
</div>
Change "text1" and "text2" to something more meaningful to reflect their contents.that's along the right lines, thanks. Is there any way to make the bottoms of the index and the text1/disclaimer line up?They don't line up? It looked good when I tested the code (Mozilla and IE 6). Could you post a screenshot?no that's okay I see what you did now - you've used the container div to make it look like they line up. I'd just "translated" the code incorrectly. :[
Many thanks - looks grand now.Ah, ok then. Glad I could help!
I'm trying (in a very short period of time!) to knock up a CSS version of a table website. the basic code / look that i need to convert is:
<table>
<tr><td colspan="2">Top banner</td></tr>
<tr><td>Text</td><td rowspan="2">Index</td></tr>
<tr><td>Disclaimer</td></tr>
<tr><td colspan="2">Text text text</td></tr>
</table>
so that it looks a little like this:
-----------------------------------------------
| |
| |
-----------------------------------------------
| | |
| | |
| | |
-------------------------------| |
| | |
| | |
| | |
| | |
-----------------------------------------------
| |
| |
| |
-----------------------------------------------
Can anyone help me out? I'd like it to stretch to the whole window width, and the right hand column bit to be ~15% of the window.
Many thanks in advance!Perhaps something like this (the background colours are just there for you to see the different DIVs)?
CSS:
html, body { margin: 0 }
#container {
background-color: yellow;
}
#top {
background-color: red;
}
#index {
background-color: yellow;
float: right;
width: 15%;
}
#text1 {
background-color: blue;
}
#disclaimer {
background-color: green;
margin-right: 15%;
}
#text2 {
background-color: black;
clear: both;
}
Body of HTML file:
<div id="container">
<div id="top"> </div>
<div id="index"> </div>
<div id="text1"> </div>
<div id="disclaimer"> </div>
<div id="text2"> </div>
</div>
Change "text1" and "text2" to something more meaningful to reflect their contents.that's along the right lines, thanks. Is there any way to make the bottoms of the index and the text1/disclaimer line up?They don't line up? It looked good when I tested the code (Mozilla and IE 6). Could you post a screenshot?no that's okay I see what you did now - you've used the container div to make it look like they line up. I'd just "translated" the code incorrectly. :[
Many thanks - looks grand now.Ah, ok then. Glad I could help!