Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    CTW
    CTW is offline
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Desktop/Mobile Compatible Design

    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>
    Last edited by Kor; 02-14-2011 at 11:57 AM. Reason: wrap the code [code][/code]

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by CTW View Post
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    CTW
    CTW is offline
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •