New Topic/Question
Reply
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)
This post has been edited by m_wylie85: 18 November 2012 - 04:09 PM
MultiQuote
| 