Thu, 2007-03-01 01:26
I have been trying all day to create this layout. The header, footer, right column, and left column need to be fixed. The center column needs to utilize the browser scroller. It also needs to degrade gracefully. I had a pretty good 3 column design with fixed header and footer, but my boss wants the right and left columns fixed.
body
{
background: #333333 url(img/bg1.jpg);
color: #2B2B2B;
margin: 0;
font-family: arial, times, Times, georgia, serif;
text-align: center;
margin-bottom: 15px;
margin-top: 170px;
margin-left: 200px;
margin-right: 200px;
}
#header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 170px;
z-index: 13;
background-color: #333;
}
#head
{
margin: 0;
text-align: left;
color: #ffffff;
letter-spacing: 5px;
word-spacing: 10px;
background: #252525;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
padding-top: 5px;
float: left;
}
#masterNavigation
{
background: #6ABC21;
margin: auto;
padding: 0 10px 0px 10px;
clear: both;
width: 100%;
text-align: center;
}
#left
{
position: absolute;
width: 200px;
color: #fff;
line-height: 20px;
word-spacing: 2px;
margin-top: -1px;
top: 170;
left: 0;
z-index: 11;
min-height: 510px;
background-color: #333;
}
#right
{
position: absolute;
width: 200px;
color: #fff;
line-height: 20px;
word-spacing: 2px;
margin-top: -501px;
top: 170;
right: 0;
z-index: 12;
background-color: #333;
min-height: 510px;
}
#content
{
background-color: #fff;
text-align: center;
padding-top: 3px;
overflow: visible;
margin-top: 5px;
min-width: 600px;
min-height: 500px;
}
#footer
{
background: #6ABC21;
text-align: center;
color: #2D4E0E;
font-size: 0.8em;
padding: 4px;
line-height: 12px;
height: 15px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.clear
{
clear: both;
}
/* Stay where you are! */
html > body #footer
{
position: fixed;
}
html > body #header
{
position: fixed;
}
html > body #left
{
position: fixed;
}
html > body #right
{
position: fixed;
}
<%-- header content --%>
Thu, 2007-03-01 02:03
#1
Can we see the code as it's
Can we see the code as it's actually output to the browser (including the doctype)?
Thu, 2007-03-01 02:23
#2
Its not pretty
Untitled Page
.ctl00_masterNavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_masterNavigationMenu_1 { text-decoration:none; }
.ctl00_masterNavigationMenu_2 { width:910px; }
.ctl00_masterNavigationMenu_3 { border-style:none; }
.ctl00_masterNavigationMenu_4 { }
.ctl00_masterNavigationMenu_5 { border-style:none; }
.ctl00_masterNavigationMenu_6 { }
Televerde
Enroll Client
Manage Clients
Manage Client Images
Manage Client CSS
Test Client 0
Test Grouping 0
Test Campaign G...
Test Campaign G...
Test Grouping 1
Test Campaign G...
Test Campaign G...
Test Client 1
Test Grouping 0
Test Campaign G...
Test Campaign G...
Test Grouping 1
Test Campaign G...
Test Campaign G...
Test Client 2
Test Grouping 0
Test Campaign G...
Test Campaign G...
Test Grouping 1
Test Campaign G...
Test Campaign G...
Test Client 3
Test Grouping 0
Test Campaign G...
Test Campaign G...
Test Grouping 1
Test Campaign G...
Test Campaign G...
Test Client 4
Test Grouping 0
Test Campaign G...
Test Campaign G...
Test Grouping 1
Test Campaign G...
Test Campaign G...
Marklar
Marklar Group
Left Bottom
//
function setCaretToEnd(textbox)
{
var control = document.getElementById(textbox);
if (control.createTextRange)
{
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange)
{
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
}
function CallOnKeyPress(textbox)
{
var t = document.getElementById(textbox);
if (t)
{
t.onchange();
}
}
Campaign Projects
Campaign Name:
Projects
function setCaretToEnd(textbox)
{
var control = document.getElementById(textbox);
if (control.createTextRange)
{
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange)
{
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
}
function CallOnKeyPress(textbox)
{
var t = document.getElementById(textbox);
if (t)
{
t.onchange();
}
}
>>" id="ctl00_ContentPHCenter_projectList_btnRemove" />
0Test
10Test
11Test
12Test
13Test
14Test
15Test
16Test
17Test
18Test
19Test
1Test
20Test
21Test
22Test
23Test
24Test
25Test
26Test
27Test
28Test
29Test
2Test
30Test
31Test
32Test
33Test
34Test
35Test
36Test
37Test
38Test
39Test
3Test
40Test
41Test
42Test
43Test
44Test
45Test
46Test
47Test
48Test
49Test
4Test
50Test
51Test
52Test
53Test
54Test
55Test
56Test
57Test
58Test
59Test
5Test
60Test
61Test
62Test
63Test
64Test
65Test
66Test
67Test
68Test
69Test
6Test
70Test
71Test
72Test
73Test
74Test
75Test
76Test
77Test
78Test
79Test
7Test
80Test
81Test
82Test
83Test
84Test
85Test
86Test
87Test
88Test
89Test
8Test
90Test
91Test
92Test
93Test
94Test
95Test
96Test
97Test
98Test
99Test
9Test
Right Top
Right Bottom
Thu, 2007-03-01 02:26
#3
This may help
If I remove the right column, it works exactly the way I want.
Thu, 2007-03-01 02:39
#4
Fixed
Why didn't I think of this before?
#content: added "padding-right: 200px;"
body: removed "margin-right: 200px;"
Thanx for your time,
ICP-Fan
If I were any smarter, I would hurt myself!
Thu, 2007-03-01 02:54
#5
Summary
This is how to make a three column layout where the header, footer, left, and right are fixed AND the center uses the browser scrollers. It may not be the best way, but it works for me!
Oh, the backgrounds for the fixed div's are used to "hide" the content in the center column as its scrolling.
body
{
background: #333333;
color: #2B2B2B;
margin: 0;
text-align: center;
margin-bottom: 15px;
margin-top: 170px;
margin-left: 200px;
}
#header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 170px;
z-index: 13;
background-color: #333;
}
#head
{
margin: 0;
text-align: left;
color: #ffffff;
background: #252525;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
padding-top: 5px;
float: left;
}
#masterNavigation
{
background: #6ABC21;
margin: auto;
padding: 0 10px 0px 10px;
clear: both;
width: 100%;
text-align: center;
}
#left
{
position: absolute;
width: 200px;
color: #fff;
margin-top: -1px;
top: 170;
left: 0;
z-index: 11;
min-height: 500px;
background-color: #333;
}
#right
{
position: absolute;
width: 200px;
color: #fff;
margin-top: -1px;
top: 170;
right: 0;
z-index: 12;
background-color: #333;
min-height: 500px;
}
#content
{
background-color: #fff;
text-align: center;
padding-top: 3px;
overflow: visible;
margin-top: 5px;
min-width: 500px;
min-height: 500px;
padding-right:200px;
}
#footer
{
background: #6ABC21;
text-align: center;
color: #2D4E0E;
padding: 4px;
height: 15px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.clear
{
clear: both;
}
/* Stay where you are! */
html > body #footer
{
position: fixed;
}
html > body #header
{
position: fixed;
}
html > body #left
{
position: fixed;
}
html > body #right
{
position: fixed;
}
<%-- header content --%>