Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1431

Mar 24th, 2007

LayOut Trouble

Expand Post »

I starting to work on my personal page and here it is shown below:

Click image for larger version

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

Click image for larger version

Name: scrV1.JPG
Views: 25
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.

Similar Threads

another newbie with alot of redhat and apache server Q'S in Linux Servers and Apache
Layout help and DW in Site Layout and Usability
Find and Replace in Database Design
Connection Problems in Networking

eXceed69

Reputation Points: 28

Solved Threads: 2

Posting Pro

Offline

559 posts
since Feb 2007

Permalink

Mar 28th, 2007

Re: LayOut Trouble

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>


<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"> <strong><a href="#">Home</a></strong><span class="seperators">  |  </span><strong><strong><a href="#">Articles</a></strong><span class="seperators">  |  </span><a href="#">Development</a></strong><span class="seperators">  |  </span><strong><a href="#">Contour</a></strong><span class="seperators">  |  </span><strong><a href="#">Outre</a></strong><span class="seperators">  |  </span><strong><a href="#">Blogs</a></strong><span class="seperators">  |  </span><strong><a href="#">Contact</a></strong> </td>
<td><img src="images/nav_right.gif" width="7" height="36" /></td></div>
</tr>
</table>

</td>
<td width="100%"> </td>
</tr>
</table></td>
</tr>
</table>

<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>

<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>

<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]

eXceed69

Reputation Points: 28

Solved Threads: 2

Posting Pro

Offline

559 posts
since Feb 2007

Permalink

Apr 9th, 2007

Re: LayOut Trouble

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Apr 12th, 2007

Re: LayOut Trouble

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.

eXceed69

Reputation Points: 28

Solved Threads: 2

Posting Pro

Offline

559 posts
since Feb 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: I have a form problem

Next Thread in HTML and CSS Forum Timeline: CSS Nav Bar Help needed.

DaniWeb Message

Cancel Changes

User Name
Password