CSS mobile phone newbie question...

nickybee123 · 05-12-2009, 07:40 AM

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

SB65 · 05-12-2009, 09:26 PM

Quote:

..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....

nickybee123 · 05-13-2009, 06:09 AM

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

David Morgan · 08-12-2010, 11:15 PM

Links are down
?

SB65 · 08-13-2010, 08:06 AM

Quote:

Originally Posted by David Morgan

Links are down
?

Probably because the post is over a year old.