SMF For Free Support Forum
Signup For Free Forum
March 12, 2010, 05:27:09 am *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News: Welcome to SMF For Free. The best free SMF Host
 
   Home   Help Search Arcade Gallery Login Register  

Pages: [1]
  Print  
Author Topic: A little css problem  (Read 1230 times)
0 Members and 1 Guest are viewing this topic.
Corrupted Games
SMF For Free Newbie
*
Offline Offline

Posts: 15


View Profile WWW
« 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?
Logged

Celebrus
SMF For Free Hero
*
Offline Offline

Posts: 941


can't think of anything witty to put here


View Profile WWW
« Reply #1 on: December 23, 2008, 02:29:17 am »

It would be nice if you could provide your code.

This may help.
Logged

Colette Brunel
SMF For Free Sr. Member
*
Offline Offline

Posts: 423



View Profile
« Reply #2 on: December 23, 2008, 09:50:46 am »

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.
Logged
Corrupted Games
SMF For Free Newbie
*
Offline Offline

Posts: 15


View Profile WWW
« Reply #3 on: December 23, 2008, 05:19:26 pm »

heres the code
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>
Logged



Pages: [1]
  Print  
 
Jump to:  



Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC
ServerBeach Coupon
Page created in 0.311 seconds with 15 queries. (Pretty URLs adds 0.038s, 2q)