Desktop/Mobile Compatible Design

CTW · 02-14-2011, 09:40 AM

I am trying to learn how to use css on my smart phone but one problem that I keep running into is that what works good on my phone doesn't work on a desktop.

What I'm trying to do is have a two column web page the size of a single background image. The two problems I'm having are getting the containing box to fit the background image size in both browsers and getting the columns positioned correctly, again in both browsers.

At this point I feel like I'm really starting to hack some pretty bad code. Should I be trying a different approach?

The webpage in question is http://crossetimewalker.bravehost.com/goal.html and the code I have so far is shown below.

Code:

body{
text-align:center;
background:snow;
}

.outerdiv{
height:342px;
width:572px;
padding:10px;
text-align:left;
margin: 0 auto;
border-style:solid;
border-color:burlywood;
border-width:8px;
background-image:url('background.png');
}

.topspacer{
color:snow;
}

a:link{
color:yellow;
text-decoration:none;
}

a:visited{
color:white;
text-decoration:none;
}

.italic{
font-style:italic;
}

.content{
width:321px;
color:white;
text-indent:10px;
text-align:left;
position:absolute;
top:306px;
left:129px;
}

.navigation{
height:90px;
width:50px;
color:yellow;
text-align:center;
position:absolute;
top:314px;
left:486px;
}

.bottomspacer{
color:snow;
}

<html>

<head>

<title>Lacrosse Coach</title>

<link rel="stylesheet" type="text/css" href="layout.css">

</head>

<body>

<div class="topspacer">
<p>This is where I will put keywords or other text in the same color as the body's background so that it cannot be read but will provide separation between my website and the bravenet advertisement banner and footer.</p>
</div>

<div class="outerdiv">

<div class="content">
<p>Welcome to <span class="italic">Lacrosse Coach</span> the website where you can learn just what you need to know to get a youth lacrosse team up to speed quickly. Believe it or not by simplifying practice it is possible for players to develop skills faster, get a better workout and have more fun.</p>
<p>The system presented by <span class="italic">Lacrosse Coach</span> is based on fundamental principles in evolutionary psychology and neuroscience as well as years of playing and coaching experience.</p>
</div>

<div class="navigation">
<a href="goal.html">Goal</a><br/>
<a href="sticks.html">Sticks</a><br/>
<a href="drills.html">Drills</a><br/>
<a href="fun.html">Fun</a><br/>
<a href="talk.html">Talk</a><br/>
<a href="theory.html">Theory</a><br/>
<a href="xsos.html">Xs&Os</a>


</div>

</div>

<div class="bottomspacer">
<p>This is where I will put keywords or other text in the same color as the body's background so that it cannot be read but will provide separation between my website and the bravenet advertisement banner and footer.</p>
</div>

</body>

</html>

Kor · 02-14-2011, 11:03 AM

Quote:

Originally Posted by CTW

I am trying to learn how to use css on my smart phone [...] The two problems I'm having are getting the containing box to fit the background image size in both browsers

What smartphone? What browsers? There are tens of smartphones. And tens of browsers working either on smartpnohes/tablets or on desktops.

CTW · 02-14-2011, 11:51 AM

I'm coding the web page directly onto Bravenet using a HTC G2 running Android and Google but I would like the site to look good on any mobile or desktop.

Kor · 02-14-2011, 12:25 PM

For the beginning, you should code according to the standards. Your Doctype should be placed above the HTML tag. In order to be sure for a crossbrowser compatibility, you'd better use at least a HTML strict DTD:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...

And coding according to the strict DTD exigences.

On the other hand, you can not nest a HTML document inside another HTML document like that:

Code:

<html>
<head>
<body>
<html>
<head>
<body>

You can not have more then a single HTML, a single HEAD and a single BODY tag within the same document.