Hi all,
I started reading sitepoints how to learn html and css the right way about 4 or so months ago, i must say, it inspired me, although its not been finished. I got half way through the book and started working on a site of my own.
I’ve been playing around with it in my spare time and have just registered a new domain. Now i think im getting along okay… i have a good few pages of content together, and i have some solid basics tied up. I need some advice though on my layout. I basically have a header div at the top of the page, then a nav panel on the lefthand side, some ads and i dont know what else, on the left. the content is centered inbetween those two divs. Then i have a footer than sits at the bottom of the center div.
This looks great, in firefox, in ie… well thats all i’ve tried so far really. But this is where my problem lies, for some reason, on my blackberry browser, the right hand div, sits over the left hand one, and my header only goes halfway across the screen.
I do not want to make a mobile site at this stage, just a website that can be viewed on my blackberry. Now heres where i seem to think my problem lies somewhere in my layout, as i have seen this same layout appear perfectly on other sites on my blackberry. I thought of setting a width for the page, that way each div would have a set width, and together they would make up 100% of the page. But im not quite sure where to start, what to work with, percentages, em’s, absolute positioning, floating… gosh im confused.
I have set up a testing page on my website, but from what i’ve read about the forum rules, im not quite sure whether i can post the link.
Here is my testing index page and css file, links removed.
<head> <!-- HEAD START -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="bbfreaks - free game software and theme downloads for blackberry 8900 phones" />
<meta name="keywords" content="free blackberry 8900 download, free blackberry 8900 games, free blackberry 8900 apps, free blackberry 8900 software, free blackberry 8900 themes, free blackberry 8900 mobile download" />
<meta name="viewport" content="width=320, height=240, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" media="all" href="LINK">
<link rel="shortcut icon" href="LINK">
<title>free4blackberry - Free Blackberry 8900 OS Leaks, Games, Software & Themes</title>
<script type="text/javascript"> <!-- Start Script for Google Analytics -->
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '********']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + 'LINK';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> <!-- End Script for Google Analytics -->
</head> <!-- HEAD END -->
<body> <!-- BODY START -->
<div id="header">
<div id="sitebranding" >
<h1>LINK</h1>
<div><img id="banner-background" src="/sitefiles/backgrounds/bb-banner-under.gif" height="100%" width="100%" alt=""></div>
<div><img id="banner-blackberry" src="/sitefiles/backgrounds/bb-banner.gif" height="83px" width="83px" alt=""></div>
</div>
<div id="tagline">
<p>THIS SITE IS UNDER CONSTRUCTION</p>
</div>
</div> <!-- end of header -->
<div id="content">
<div id="left-body">
<div id="navigation">
<div class="sitenav-linkstyles">
<ul>
<li><a href="/" >Home</a></li>
<li><a href="/phones/" >Phones</a></li>
<li><a href="/phones/8900/" >OS</a></li>
<li><a href="/phones/8900/games/" >Games</a></li>
<li><a href="/phones/8900/software/" >Software</a></li>
<li><a href="/phones/8900/themes/" >Themes</a></li>
</ul>
</div> <!-- end of sitenav-linkstyles -->
</div> <!-- end of navigation div -->
</div> <!-- end of left-body -->
<div id="right-body">
<div id="ads-right-inshi">
<a href="LINK" target="_tab" onmouseover="LINK';return true;" onmouseout="window.status=' ';return true;">
<img src="LINK" alt="InvisibleShield - Ultimate Screen Protection!" border="0" /></a>
</div> <!-- end of ads-right-inshi -->
<div id="ads-right-bplay">
<a href="LINK" target="_blank" onmouseover="window.status='http://www.bplay.com';return true;" onmouseout="window.status=' ';return true;">
<img src="LINK" alt="Bplay: BlackBerry Games and Themes" border="0"/></a>
</div> <!-- end of ads-right-bplay -->
</div> <!-- end of right-body -->
<div id="bodycontent">
<h2>Free Blackberry 8900 OS Leaks, Games, Software & Themes</h2>
<div id=ad-bc-bplay>
<p><a href="LINK" target="_tab" onmouseover="window.status='LINK';return true;" onmouseout="window.status=' ';return true;">
<img src="LINK" alt="BlackBerry Games & Themes from Bplay" border="0"/></a></p>
</div> <!-- end of ad-bc-bplay -->
<br>
<div class="sitenav-linkstyles">
<p class="phones-linkheadings"> 8900 OS LEAKS <a href="/phones/8900/games/">-></a></p>
</div> <!-- end of sitenav-linkstyles -->
<div class="bc-linkstyles">
<p>lots of links</p>
<br>
</div> <!-- end of bc-linkstyles -->
<div class="sitenav-linkstyles">
<p class="phones-linkheadings"> <a href="/phones/8900/" >8900 OS</a> </p>
<p class="phones-linkheadings"> <a href="/phones/8900/games/" >8900 Games</a> </p>
<p class="phones-linkheadings"> <a href="/phones/8900/software/" >8900 Software</a> </p>
<p class="phones-linkheadings"> <a href="/phones/8900/themes/" >8900 Themes</a> </p>
</div> <!-- end of sitenav-linkstyles -->
<div id="footer-inshi">
<p><a href="LINK" target="_blank" onmouseover="window.status='LINK';return true;" onmouseout="window.status=' ';return true;">
<img src="LINK" alt="InvisibleShield - Ultimate Screen Protection!" border="0"/></a></p>
</div> <!-- end of footer-inshi end -->
<div id="footer">
<div class="sitenav-linkstyles">
<p class="footer-menu">| RES | <a href="mailto:LINK">Contact us</a> | RES |</p>
</div> <!-- end of sitenav-linkstyles -->
<div class="bc-linkstyles">
<p class="footer-bolt">This website is best viewed on your blackberry using BOLT Browser, <a href="LINK" target="_tab">get it here...</a></p>
</div>
</div> <!-- end of footer -->
</div> <!-- end of bodycontent -->
</div> <!-- end of content -->
</body> <!-- BODY END -->
</html>
/* START OF BODY STYLES */
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
background-color: #F4F4F4;
line-height: 125%;
padding: 0;
margin: 0;
}
h1 {
font-family: Calibri, "Arial Black", Gadget, sans-serif;
color: black;
font-weight: bold;
font-size: 1.5em;
padding-top: 1.75em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
line-height: 150%;
}
h2 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 1.5em;
line-height: 150%;
font-weight: bold;
padding-top: 0.625em;
border-bottom: black ridge 2px;
}
/* END OF BODY STYLES */
/* START OF LINK STYLES */
a {
font-weight: bold;
text-decoration: underline;
}
a:link {
color: blue;
}
a:visited {
color: blue;
}
a:hover {
color: blue;
}
a:active {
color: blue;
}
.sitenav-linkstyles a {
font-weight: bold;
text-decoration: none;
}
.sitenav-linkstyles a:link {
color: #6699cc;
}
.sitenav-linkstyles a:visited {
color: #9966cc;
}
.sitenav-linkstyles a:hover {
color: #66cc66;
}
.sitenav-linkstyles a:active {
color: #cc6666;
}
.bc-linkstyles a {
text-decoration: none;
background: none;
}
.bc-linkstyles a:link {
color: #0066cc;
}
.bc-linkstyles a:visited {
color: #6600cc;
}
.bc-linkstyles a:hover {
color: #00cc00;
}
.bc-linkstyles a:active {
color: #cc0000;
}
a {
outline: 0;
}
.sitenav-linkstyles li {
font-size: x-large;
list-style-type: none;
}
#ads-right-inshi a {
font-size: small;
text-decoration: none;
font:"Lucida Console", Monaco, monospace;
color: #F00;
}
#ad-bc-bplay a {
font-size: small;
text-decoration: none;
font:"Lucida Console", Monaco, monospace;
color: #F00;
}
#footer-inshi a {
font-size: small;
text-decoration: none;
font:"Lucida Console", Monaco, monospace;
color: #F00;
}
/* END OF LINK STYLES */
/* START OF ID STYLES */
#tagline p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
color: red;
background: #F4F4F4 url(/sitefiles/backgrounds/tag-bg-uc.gif) repeat-x;
padding-top: .2em;
padding-bottom: .15em;
padding-left: .8em;
margin: 0;
text-align: center;
text-decoration: blink;
border-bottom: black solid 3px;
border-top: black solid 3px;
}
#navigation {
font-family: Calibri;
padding-top: 5.3em;
width: 11.25em;
height: 30.25em;
background: #F4F4F4 url(/sitefiles/backgrounds/nav-bg.gif) no-repeat;
}
#soon-to-come {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
line-height: normal;
list-style-type: circle;
}
#ads-right-inshi img {
margin: 0;
padding: 0;
}
#ad-bc-bplay img {
margin: 0;
padding: 0;
float: left;
}
#bodycontent {
width: 20em;
text-align: center;
margin-left: 0.625em;
margin-right: 0.625em;
padding-left: 0.625em;
padding-right: 0.625em;
}
/* END OF ID STYLES */
/* CLASS STYLES START */
.review-home {
border-top: black solid 1px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
padding-bottom: 10px;
}
.phones-linkheadings {
color: #000;
font-weight: normal;
font-size: larger;
}
.footer-menu {
text-align: center;
}
.footer-left {
font-size: 0.875em;
text-align: left;
}
/* END OF CLASS STYLES */
/* START OF ELEMENT POSITIONING */
#navigation, #bodycontent, #left-body, #right-body, #header, #banner-background, #banner-blackberry, #header1 {
position: absolute;
}
#bodycontent, #left-body, #right-body {
top: 7.125em;
}
#left-body {
left: 0;
width: 11.25em;
}
#right-body {
right: 0;
width: 18.75em;
}
#bodycontent {
width: auto;
left: 12.5em;
right: 20em;
}
#header {
width: 100%;
}
#banner-background {
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: -2;
}
#banner-blackberry {
margin: 0;
padding: 0;
top: 0;
right: 0;
z-index: -1;
}
#header1 {
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: -1;
}
#footer {
position: relative;
bottom: 0;
clear: both;
}
/* END OF ELEMENT POSITIONING */
If anyone could give my some advice on how i would go about making it so that my divs hold a set definate spot on the webpage, it would be of so much help!!
Thanks in advance if anyone can, help that is.