2 Replies - 551 Views - Last Post: 19 November 2012 - 04:47 PM

#1 m_wylie85  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 96
  • View blog
  • Posts: 899
  • Joined: 15-October 10

text goes under footer

Posted 18 November 2012 - 04:08 PM

Hey all, I am using Phonegap with HTML5 to write an app to work on an android phone. I have a Header and footer then a table that goes in the middle of the header and footer. The right side of the table's text goes under the footer, i would like if the text in the right side is to big to fit on the mobile screen then i could just scroll down the table, so that the footer stays on the screen and the right side of the table text does not go below the footer

Pic of problem attached

My css and html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Places of Interest</title>
<style type="text/css">
  /*  Main Styles */
body{
    background: #FFFFFF;
}
header{
    position:absolute;
    top:0; left:0;
    height:10%;
    font-size:15px;
    border-bottom:1px solid #eee;
}
.left_table {
position:absolute;
    background-color: white;
    float: left;
    width: 60%;
}
.right_table {
position:absolute;
    background-color: white;
    width:40%;
    margin-left: 60%;
}
footer {
	position:absolute;
    bottom:0; left:0;
    height:auto;
    background-color:#c27b00;
    border-top:1px solid #eee;
    font-size:9px;
}
header, footer{
    background-color:blue;
    padding:0;
    z-index:2;
    width:100%;
    text-align:center;
    color:#f3f3f3;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    line-height:45px;
}

h1{
    margin:0;
    text-transform: uppercase;
}

/*footer styles*/
#tab-bar{
    margin:0;
    padding:0;
}
#tab-bar li {
    display: inline;
    float:left;
    width: 25%;
}
#tab-bar a {
    color: #cdcdcd;
    display: block;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-touch-callout:none;
}

</style>
</head>
<body>
<header>
<h1>Place Of Interest</h1>
</header>
<div class="left_table">
    <p>i</p>
</div>
<div class="right_table">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>
<div>
<footer>
<ul id="tab-bar">
    <li>
        <a href="NewFile.html" style="border-right:1pt solid #eee;">My Location</a>
    </li>
    <li>
        <a href="index.html" style="border-right:1pt solid #eee;">Home</a>
    </li>
    <li>
        <a href="whatAmINear.html" style="border-right:1pt solid #eee;">What Your Near</a>
    </li>
    <li>
    <a href="placesOfInterest.html">Places Of Interest</a>
    </li>
</ul>
</footer>
</div>
</body>
</html>


Ps please try to explain anything you say as i don't write in css or html very much.

Attached image(s)

  • Attached Image

This post has been edited by m_wylie85: 18 November 2012 - 04:09 PM


Is This A Good Question/Topic? 0
  • +

Replies To: text goes under footer

#2 m_wylie85  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 96
  • View blog
  • Posts: 899
  • Joined: 15-October 10

Re: text goes under footer

Posted 18 November 2012 - 05:04 PM

Please forget about the question above
Was This Post Helpful? 0
  • +
  • -

#3 justin_k  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 28-May 12

Re: text goes under footer

Posted 19 November 2012 - 04:47 PM

Just a tip, it helps to comment your closing div marks. Like so
<div id="blah">
Blah Blah Blah
</div><!--end blah-->

Just makes finding div problems easier to find/address
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1