LayOut Trouble

Reply

Join Date: Feb 2007
Posts: 552
Reputation: eXceed69 is an unknown quantity at this point 
Solved Threads: 2
eXceed69's Avatar
eXceed69 eXceed69 is offline Offline
Posting Pro

LayOut Trouble

 
0
  #1
Mar 24th, 2007
I starting to work on my personal page and here it is shown below:

Click image for larger version

Name:	scrV2.JPG
Views:	9
Size:	82.9 KB
ID:	3087

Click image for larger version

Name:	scrV1.JPG
Views:	9
Size:	110.2 KB
ID:	3088

My problem is I don't had a footer below, I can't code it...can some one please tell me how to had a footer.

CSS code
[html]
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-family: Arial, Helvetica, sans-serif;
background: #FFFAFA;
}
a:link {
color: #1C1C1C;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #1C1C1C;
text-decoration: none;
} /* visited link */
a:hover {color: #0099CC} /* mouse over link */
a:active {color: #0099CC} /* selected link */

.seperators {color: white}/* Navigation selector */
#nav {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#nav a:link {
color: #FFFFFF;
text-decoration: none;
} /* unvisited link */
#nav a:visited {
color: #FFFFFF;
text-decoration: none;
} /* visited link */
#nav a:hover {color: #0099CC} /* mouse over link */
#nav a:active {color: #0099CC} /* selected link */

/* menu*/

/* left column */
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#left .searchengine {
width: 180px;
margin: 10px;
background: #DCDCDC;
padding-bottom: 4px;
padding-top: 4px;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left img {width: 180px; margin: 10px;}
#left .leftbox {width: 180px; margin: 10px;}
#left .leftbox .leftheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
/* middle column */
#center {
position: absolute;
top: 155px;
width: 543px;
margin-left: 230px;
margin-right: 230px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #C8C8C8 ;
}
#center .middlenav{
width: 543px;
height: 20px;
background: #A80000;
border-bottom: 1.5pt solid #D2B48C;
}
#center .middlecontent{
width: 543px;
}
#center .middlecontent .title{
position: relative;
font-size: 12px;
font-weight: bold;
text-align: left;
margin: 5px;
background: #D3D3D3;
color: #708090;
border-top: 1.5pt solid #A80000;
border-bottom: 1.5pt solid #A80000;
}
#center .middlecontent .content{
position: relative;
margin: 5px;
font-size: 10px;
text-align: justify;
text-indent: 5px;
}

/* right column */
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#right .rightbox {width: 180px; margin: 10px;}
#right .rightbox .rightheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
[/html]
Last edited by eXceed69; Mar 24th, 2007 at 10:38 am.
I dream to exceed to the highest peak.
http://www.ronaldalversado.com
Reply With Quote Quick reply to this message  
Join Date: Feb 2007
Posts: 552
Reputation: eXceed69 is an unknown quantity at this point 
Solved Threads: 2
eXceed69's Avatar
eXceed69 eXceed69 is offline Offline
Posting Pro

Re: LayOut Trouble

 
0
  #2
Mar 28th, 2007
Here are html code,please help me

[HTML]
<body onLoad = "scrollit(100)">
<script src="scripts/statusbar.js" language="javascript"></script>
<script src="scripts/norightclick.js" language="javascript"></script>
<!--Start of the page -->
<!--Banner and Navigation bar -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#1C1C1C">
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bar.jpeg">
<tr>
<td><img src="images/onalogo.png" alt="I dream to exceed to the highest peak" width="264" height="100" /></td>
<td width="100%">
<div align="center"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/nav_bg.gif">
<tr>
<td width="50%"></td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/nav_left.gif" width="7" height="36" /></td>
<td width="100%" nowrap="nowrap" bgcolor="#708090"><span id="nav">&nbsp;<strong><a href="#">Home</a></strong><span class="seperators"> &nbsp;|&nbsp; </span><strong><strong><a href="#">Articles</a></strong><span class="seperators"> &nbsp;|&nbsp; </span><a href="#">Development</a></strong><span class="seperators"> &nbsp;|&nbsp; </span><strong><a href="#">Contour</a></strong><span class="seperators"> &nbsp;|&nbsp; </span><strong><a href="#">Outre</a></strong><span class="seperators"> &nbsp;|&nbsp; </span><strong><a href="#">Blogs</a></strong><span class="seperators"> &nbsp;|&nbsp; </span><strong><a href="#">Contact</a></strong>&nbsp;</td>
<td><img src="images/nav_right.gif" width="7" height="36" /></td></div>
</tr>
</table>

</td>
<td width="100%">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<!--Start of the Middle page -->
<div id="center">
<div class="middlenav"></div>
<div class="middlecontent">
<div class="title">
Research: What is the effect of Engineering and Public Policy (E.P.P.) to <br>
engineering competitiveness if it adapted in the Philippines?
</div>
<div class="content">
This research is designed fo9r Filipino engineering students and engineers to illustrate the
possible effect of Engineering and Public Policy (E.P.P.) if it is adapted in the Philippines
Now, Filipino engineers and engineering student are making a way to more competitiveness and
gaining more confident in the globe. Engineering and Public Policy is a research-oriented program that focuses in engineering fields and that may benefit the society. United States use this program that leads in the development and implementation of responsible strategies and policies for exploitation of technology for the benefit of the society.
</div>
</div>
<br />
<div class="middlecontent">
<div class="title">
Research: What is the effect of Engineering and Public Policy (E.P.P.) to <br>
engineering competitiveness if it adapted in the Philippines?
</div>
<div class="content">
This research is designed fo9r Filipino engineering students and engineers to illustrate the
possible effect of Engineering and Public Policy (E.P.P.) if it is adapted in the Philippines
Now, Filipino engineers and engineering student are making a way to more competitiveness and
gaining more confident in the globe. Engineering and Public Policy is a research-oriented program that focuses in engineering fields and that may benefit the society. United States use this program that leads in the development and implementation of responsible strategies and policies for exploitation of technology for the benefit of the society.
</div>
</div>
<br />
<div class="middlecontent">
<div class="title">
Research: What is the effect of Engineering and Public Policy (E.P.P.) to <br>
engineering competitiveness if it adapted in the Philippines?
</div>
<div class="content">
This research is designed fo9r Filipino engineering students and engineers to illustrate the
possible effect of Engineering and Public Policy (E.P.P.) if it is adapted in the Philippines
Now, Filipino engineers and engineering student are making a way to more competitiveness and
gaining more confident in the globe. Engineering and Public Policy is a research-oriented program that focuses in engineering fields and that may benefit the society. United States use this program that leads in the development and implementation of responsible strategies and policies for exploitation of technology for the benefit of the society.
</div>
</div>
<br />
<div class="middlecontent">
<div class="title">
Research: What is the effect of Engineering and Public Policy (E.P.P.) to <br>
engineering competitiveness if it adapted in the Philippines?
</div>
<div class="content">
This research is designed fo9r Filipino engineering students and engineers to illustrate the
possible effect of Engineering and Public Policy (E.P.P.) if it is adapted in the Philippines
Now, Filipino engineers and engineering student are making a way to more competitiveness and
gaining more confident in the globe. Engineering and Public Policy is a research-oriented program that focuses in engineering fields and that may benefit the society. United States use this program that leads in the development and implementation of responsible strategies and policies for exploitation of technology for the benefit of the society.
</div>
</div>
<br />
</div>
<!--Start of the Left Side page -->
<div id="left">
<div class="leftbox">
<div class="leftheaderbox">
<span>Tracker</span></div>
<div class ="leftheaderlist">
<span>Right now</span>
</div>
<div class="leftboxlist"><script language="javascript">
YourDate = new Date();
document.write(YourDate.toGMTString());
</script></div>
<div class="leftboxlist">Current Time</div>
<div class="leftboxlist">Guest</div>
<div class="leftboxlist">hits</div>
<div class ="leftheaderlist">
<span>Time spend</span></div>
<div class="leftboxlist">Time</div>
</div>
<img src="images/LpuLogo.jpg" width="180" height="40" alt="Veritas Et Furtitodo" />
<div class="searchengine">
<input type="text" name="searchfor" value="" size="20">
<input type="button" value="Search" onClick="checkDatabase()">
</div>
<div class="leftbox">
<div class="leftheaderbox">
<span>Quaker's Watch</span></div>
<div class="leftboxlist"><a href="http://www.friendster.com/35613828">Shiela Marie Alversado</a></div>
<div class="leftboxlist"><a href="#">Raymond Laniog</a></div>
<div class="leftboxlist"><a href="http://www.friendster.com/4459019">Jayvee Vitugz</a></div>
<div class="leftboxlist"><a href="http://www.friendster.com/6720409">Robin Binarao</a></div>
<div class="leftboxlist"><a href="#">Jerson Raul Cruz</a></div>
<div class="leftboxlist"><a href="#">Ann Kristine Echavez</a></div>
<div class="leftboxlist"><a href="#">Gianne Dazo</a></div>
</div>
</div>
<!--Start of the Right Side page -->
<div id="right">
<div class="rightbox">
<div class ="rightheaderbox">
<span>What's inside</span>
</div>
<div class ="rightheaderlist">
<span>Latest</span>
</div>
<div class="rightboxlist"><a href="#">OnaDOTCom Go live</a></div>
<div class="rightboxlist"><a href="#">Repository of my dreams</a></div>
<div class="rightboxlist"><a href="#">Industries ambients</a></div>
<div class="rightboxlist"><a href="#">Industry a Tougher Saga</a></div>
<div class="rightboxlist"><a href="#">Student life is over!</a></div>
<div class ="rightheaderlist">
<span>Development</span>
</div>
<div class="rightboxlist"><a href="#">2005-2006-0216-PUSH v1.0</a></div>
<div class="rightboxlist"><a href="#">WEB-2007-0113-IE-MPW v2.0</a></div>
<div class="rightboxlist"><a href="#">2005-06BUSReservationSyst v1.0</a></div>
<div class ="rightheaderlist">
<span>Tutorials</span>
</div>
<div class="rightboxlist"><a href="#">CPP connecting to ODBC</a></div>
<div class="rightboxlist"><a href="#">Java connecting to ODBC</a></div>
<div class="rightboxlist"><a href="#">ASP connecting to ODBC</a></div>
<div class="rightboxlist"><a href="#">" Unknown "</a></div>
<div class ="rightheaderlist">
<span>Recreation</span>
</div>
<div class="rightboxlist"><a href="#">Outdoor Games</a></div>
<div class="rightboxlist"><a href="#">Online Games</a></div>
<div class="rightboxlist"><a href="#">Programming & Developing</a></div>
</div>
<br />

<div class="rightbox">
<div class ="rightheaderbox">
<span>The Alversado's</span></div>
<div class="rightboxlist"><a href="#">Pedro "Peter" Carlos</a></div>
<div class="rightboxlist"><a href="#">Rebecca "Bing" Nalica</a></div>
<div class="rightboxlist"><a href="#">Shiela Marie "She" Nalica</a></div>
<div class="rightboxlist"><a href="#">Ronald "oNaD" Nalica</a></div>
</div>
<br />
<div class="rightbox">
<div class ="rightheaderbox">
<span>Schedule Activities</span></div>
<div class="rightboxlist"><a href="#">CMMI Training/s ( LVL 5 )</a></div>
<div class="rightboxlist"><a href="#">Continous Improvement</a></div>
<div class="rightboxlist"><a href="#">Upgrades Hardware</a></div>
<div class="rightboxlist"><a href="#">Software Development</a></div>
</div>
<br />
<div class="rightbox">
<div class ="rightheaderbox">
<span>Resources</span></div>
<div class="rightboxlist"><a href="http://www.good-tutorial.com">Good Tutorials</a></div>
<div class="rightboxlist"><a href="http://www.dreamincode.net">Dream in code Forum</a></div>
<div class="rightboxlist"><a href="http://www.dynamic.com/forum">Dynamic Drive Forum</a></div>
<div class="rightboxlist"><a href="http://www.daniweb.com">DaniWeb Forum</a></div>
</div>
</div>
</body>

[/HTML]
I dream to exceed to the highest peak.
http://www.ronaldalversado.com
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: LayOut Trouble

 
0
  #3
Apr 9th, 2007
It can't be done in a way that works with all screen resolutions.

Anything you set up for one screen resolution will get moved when the browser is resized or the screen resolution changes.

There is no way to specify the bottom of the browser window.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Feb 2007
Posts: 552
Reputation: eXceed69 is an unknown quantity at this point 
Solved Threads: 2
eXceed69's Avatar
eXceed69 eXceed69 is offline Offline
Posting Pro

Re: LayOut Trouble

 
0
  #4
Apr 12th, 2007
Thanks anyway I figure it out i change the absolute positioning into a float...yes i want my page to be relay on the user screen resolution.
I dream to exceed to the highest peak.
http://www.ronaldalversado.com
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC