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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS mobile phone newbie question...

    ok. so I decide to take it upon myself to do the mobile phone templates for the soon to be launched location based service Echoecho.

    hmmm...now I'm stuck on something that seems so simple.

    I tried to do my homework and of course a whole bunch of google and I realise there are umpteen different ways that I can try to position the text but whatever I do I end up with something not working.

    Here's the link to try for whoever feels like helping me...

    I'm trying to make a simple template for our mobile specific pages (I'm not worried about iphone because the webkit is so good it's easy to make workable stuff)...I'm trying to make a generic template for all other mobile phones.

    Mobile phone css documentation is either archaic or non-existent - so we designed a very simple template which just scrolls vertically with content and looks like this

    www.echoecho.me/devsitemobile/320/

    What's annoying me is the gap between the text (contact/blog/api/help) and the second dotted line (which is a 2 pixel gif)

    The css is very easy aswell - it's here

    http://www.echoecho.me/devsitemobile...moblayout1.css

    The bit of the css that controls the size of the gap between the text and the dotted line is this

    #topnav {
    font-family: Lucida Console, Monaco, Verdana, monospace;
    font-size: 12px;
    color: #787878;
    background-color: white;
    margin: 3px 0 -9px 13px;
    }

    but look at that ridiculous negative 9 bottom margin. I had it at zero originally but then there was a massive gap between those two divs.

    I can solve this problem with absolute positioning but that strikes me as unwise...in any case I figured I'd ask the experts...seems like a fairly easy solution...

    I attached a jpeg with what it's supposed to look like (don't worry about fonts etc it's just the positioning of that line that bothers me...

    thanks guys

    Nick
    Attached Thumbnails Attached Thumbnails CSS mobile phone newbie question...-mobile.jpg  

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    ..in any case I figured I'd ask the experts...
    Far from an expert, but here's my stab. Had a bit of a hack about with this one, ended up with this html:

    Code:
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>echoecho</title> 
    <link rel="stylesheet" type="text/css" href="moblayout.css" />    
    </head> 
     
    <body> 
    <div id="container">
    
    <div id="header"><img id="logo" src="http://www.echoecho.me/devsitemobile/320/images/echologo.gif" alt="echoecho logo" width="240" height="50" /></div>
    
    <div id="topnav"><a href="#">Contact</a><a href="#">Blog</a><a href="#">API</a><a href="#">Help</a></div>
    
    <div id="breadcrumbs"><a href="#">Home</a> / <span>Contact</span><p></p></div> 
    
    <p><span>Why you gotta go all gnarly on me?</span>
    Echoecho is an easy way to find your friends anywhere in the world.</p>
    <p>Download the application and start echoing your friends.</p> 
    
    </div>
    </body> 
    </html>
    and this css:

    Code:
    /* CSS Document */
    
    
    body {
    	margin: 0px;
    	padding: 0px 3px;
    	background-color: white;
    	font-family: Lucida Console, Monaco, Verdana, monospace;
    	font-size:10px
    }
    
    #container{width:240px}
    
    #header {
    	height: 50px;
    	margin: 0px;
    }
    
    #topnav {	background-image: url(http://www.echoecho.me/devsitemobile/320/images/line.gif);
    	background-repeat: no-repeat;
    	background-position: left bottom;
    	padding:5px 0px 5px 10px;/* adjust as required*/ 
    	margin-bottom:5px}
    
    #topnav a {
    	color: #787878;
    	text-decoration: none;
    	margin-left:10px;/* adjust to change the spacing*/
    	font-family: Lucida Console, Monaco, Verdana, monospace;
    	font-size: 12px;
    	}
    
    #topnav a:hover {
    	background: #bdfc83;
    }
    
    #breadcrumbs {
    	padding: 0px 0px 0px 16px;
    	width: 210px;
    }
    
    #breadcrumbs span {
    	color: #2cb2ff;
    }
    
    
    #breadcrumbs a:hover {
    	background: #bdfc83;
    }
    
    p{margin-left:16px;color: #787878;line-height:1.3;width:210px}
    p span {color:#ff830d}
    I added the line image as a background image to the topnav div to avoid the vertical spacing issues.

    You'll need to change the image links back to the local directory, obviously.

    Hope this helps....

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sweet man...

    That totally worked - I had to move a few small things here and there (and also introduce spaces between some of the text elements (as in the ascii character space) because on older browsers (That ignore bits of the CSS) the text was running together without gaps.

    you're the man - hey if documentaries are your thing - I directed www.shadowcompany.com - let me know and I'll send you a copy...

    www.echoecho.me/devsitemobile/320
    www.echoecho.me/devsitemobile/480

    this is the final version...

    Nick

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Links are down
    ?

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by David Morgan View Post
    Links are down
    ?
    Probably because the post is over a year old.


  •  

    Tags for this Thread

    Posting Permissions

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