|
| I am new to CSS. My task is to add a table and frequently used link on
the right hand side. Here's the html code and css, I really appreciate
if u can copy and paste and take a look. It looks fine if the user
doesn't resize the browser. When the user resize the browser, the
"Frequently Used Link" and "Table 1" and "Table 2" will shift to the
left hand side, but table position is unchanged. I really have no idea
how to fix that. I don't know what's the correct approach, I just try
in different figures manually.
Please advise. Thanks!!
--------------------- test.html ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<LINK href="style.css" type=text/css rel=stylesheet></HEAD>
<BODY>
<TABLE cellPadding=0 width="100%" border=0>
<TBODY>
<TR cellpadding="0">
<TD height=30><FONT face="Verdana, Arial, Helvetica, sans-serif"
color=white size=6><B><I>T</I></B></FONT><FONT
face="Verdana, Arial, Helvetica, sans-serif" color=white
size=5><B>E<I>S</I>T</B></FONT> <FONT color=white
size=5><B>TEST PAGE</B></FONT> <FONT color=red
size=1> <I>{Version 10.0}</I></FONT></TD>
<TD align=right bgColor=white height=20><BR><A
href=""
target=_blank>Check Sessions</A> </TD></TR></TBODY></TABLE>
<DIV id=FUL_DEV>
<H2 class=SECOND>Frequently Used Links</H2>
<P class=links><A
onclick="MM_showHideLayers('COIS','','show', 'COISUT','','hide')"
href="#">Table 1</A> | <A
onclick="MM_showHideLayers('COIS','','hide', 'COISUT','','show')"
href="#">Table 2</A>
</P></DIV>
<DIV id=COIS style="VISIBILITY: visible">
<TABLE class=SECOND border=1>
<TBODY>
<TR>
<TH class=SECOND>Table 1</TH>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 100</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 101</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 102</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 103</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 104</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 105</A> </TD></TR></TBODY></TABLE></DIV>
<DIV id=COISUT style="VISIBILITY: hidden">
<TABLE class=SECOND border=1>
<TBODY>
<TR>
<TH class=SECOND>Table 2</TH>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 101</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 102</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 103</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 104</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 105</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 106</A> </TD></TR></TBODY></TABLE></DIV>
<H2>Link 1</H2>
<TABLE class=THIRD border=0>
<TBODY>
<TR>
<TD><A href=""
target=_blank>BUILD 101</A> </TD>
<TD><A href=""
target=_blank>BUILD 102</A> </TD></TR></TBODY></TABLE>
<H2>Link 2</H2>
<TABLE class=THIRD border=0>
<TBODY>
<TR>
<TD><A href=""
target=_blank>BUILD 103</A> </TD>
<TD><A href=""
target=_blank>BUILD 104</A> </TD></TR></TBODY></TABLE>
<H2>Link 3</H2>
<TABLE class=THIRD border=0>
<TBODY>
<TR>
<TD><A href=""
target=_blank>BUILD 105</A> </TD>
<TD><A href=""
target=_blank>BUILD 106</A> </TD></TR></TBODY></TABLE>
</BODY></HTML>
---------------------------- style.css
--------------------------------
H1 {
FONT: 21px Georgia
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 120%;
PADDING-BOTTOM: 12px; MARGIN: 0px; COLOR: #006; PADDING-TOP: 12px
}
H2.SECOND {
COLOR: red
}
DIV {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN:
0px; WIDTH: auto; PADDING-TOP: 0px
}
#FUL_TEST {
PADDING-RIGHT: 60px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM:
0px; MARGIN: 0px; WIDTH: auto; PADDING-TOP: 0px
}
#FUL_DEV {
PADDING-RIGHT: 110px; PADDING-LEFT: 0px; FLOAT: right;
PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: auto; PADDING-TOP: 0px
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN:
0px; PADDING-TOP: 10px
}
..links {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE:
80%; PADDING-BOTTOM: 6px; MARGIN: 0px; PADDING-TOP: 0px
}
INPUT {
FONT: 9px Arial, Helvetica, sans-serif
}
TABLE {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid;
BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-BOTTOM: #000 1px
solid; BORDER-COLLAPSE: collapse
}
TABLE.SECOND {
RIGHT: 10px; WIDTH: 30%; POSITION: absolute; TOP: 135px
}
TABLE.THIRD {
WIDTH: 65%
}
TABLE.PROD {
RIGHT: 10px; WIDTH: 30%; POSITION: absolute; TOP: 83px
}
TH {
FONT: 9px Arial, Helvetica, sans-serif; COLOR: #fff;
BACKGROUND-COLOR: #006
}
TH.SECOND {
FONT: bold 12px Georgia; BACKGROUND-COLOR: #0000ff
}
TD {
BORDER-RIGHT: #999 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #999
1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 4px; FONT: 11px Verdana,
Geneva, Arial, Helvetica, sans-serif; VERTICAL-ALIGN: top;
BORDER-LEFT: #999 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #999 1px
solid; BACKGROUND-COLOR: #ccc
}
TD.SECOND {
BACKGROUND-COLOR: #ffffcc
}
A:visited {
COLOR: black
}
|
|