SMF For Free Support Forum
General Stuff => Programming => Topic started by: Corrupted Games on December 22, 2008, 11:56:23 pm
-
I'm currently in the process of changing my family's football related competitions website and was looking to convert from tables to floating divs, but I have one slight problem.
This problem is that when viewing the website with floats you cant change the size of the browser without discombobulating the entire sites layout.
For example if i have the following layout
AA
BC
DD
AA= Header
B=Navigation
C=News/Main Portion
DD=Footer
and you shrink the browser screen the layout cahnges to
AA
B
C
DD
Which I find to be an issue as im sure something smilar would happen if my aunt views it on her cell phone.
I was wondering if there was anyway to fix this problem?
-
It would be nice if you could provide your code.
This (http://nettuts.com/videos/screencasts/everything-you-know-is-wrong/) may help.
-
Which I find to be an issue as im sure something smilar would happen if my aunt views it on her cell phone.
Create an alternative stylesheet for cell phone users. Make the action (via PHP or Perl) ?;wap.
-
heres the code
<html>
<head>
<style type="text/css">
body {
background: #000000;
color: #0000FF; }
.header {
border: 2px solid #0000A3;
width: 100%;
color: #FFFFFF; }
.nav {
border: 2px ridge #0000FF;
width: 24%;
height: 500px;
float: left; }
.main {
border: 2px ridge #0000FF;
width: 75%;
height: 500px;
float: right; }
.footer {
border: 2px solid #0000A3;
width: 100%;
color: #FFFFFF; }
</style>
</head>
<body>
<div class="header"><center><font size="7">HEADER HERE</center></font></div><br>
<div class="nav">
<center>Navigation</center>
<hr color="FFFF00">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="main">
News and stuff here
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="footer">Copyright Info and Stuff</div>
</body>
</html>