Positioning icons

For my mobile website I would like to change the positioning of my icons.
Basically meaning that every navigation button comes with a page title and an icon I can select.
Currently the icons are displayed on the left side of the page titles, while I would like them positioned on the right side.

Original code

if($page->buttonicon){
    $icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative;    top:33px\">";
}
else{
    $icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}

$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";

PHP:

Outcome and desired outcome

I've played around with it a bit leading to some change, but although I'm getting there - I'm missing something I can't get solved.

Edited code

<?php
if($page->buttonicon){
    $icon = '<img src="icons/'.$page->buttonicon.'" style="float:right;margin-top:33px">';
}
else{
    $icon = '<img src="images/noicon.png" style="float:right;margin-top:33px">';
}

$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" style="float:left;" '.$target.'>'.$page->title.'</a></li>';
?>

PHP:

Updated outcome with a slight change


I'm getting there. Can someone help me out code? I'm just a beginner so any help is more than welcome! Many thanks in advance!

 

As far as I can see from the first bit of code you posted, adding a right: 20px; should do more or less what you want - so that the first line becomes something like:

$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; right:20px; top:33px\">";

PHP:

It's also a lot easier, methinks, to avoid using " as enclosures - do this, and it'll look cleaner:

$icon = '<img src="icons/'.$page->buttonicon.'" style="position:relative; right:20px;top:33px">';

PHP:

 

Many

Many thanks for your reply. I just used your suggested code, not quite the desired outcome though.
As you can see the icons moved to the left.

 

That's... interesting - that means the code you're trying to modify is quirky, at best. But you can just play around with the value - right: also takes negative values, so try right: -300px or something.

 

Fantastic, many thanks! "right: -240px;" did the trick!

Result

BTW: any thoughts how I can move the page titles slightly to the left?

 

1) Stop using double quotes if you're not using them for what they're for (inline parsing)... they're slower than singles.

2) Stop making variables you aren't using.

3) Stop making classes you don't need.

4) Those images seem to be presentation, so why are they in IMG tags?

5) Can I assume $target is a target attribute? If so that has no business in any HTML written after 1997. Don't be shoving new windows down users throats!

6) Most of what you're doing really has no business in the markup.

7) it looks like you're not adding menurows together, so why aren't you just echoing it out right then and there?!?

Basically, you've got some really ugly bandwidth wasting markup and ugly PHP to go with it.

If I was writing the same thing it would probably look something like this:

echo '
	<li id="row_', $page->id, '"><a href="', trim($page->url), '\">',(
		$page->buttonicon ? '<span></span>' : ''
	), $page->title, '</a></li>';

Code (markup):

The empty span is in there as a image sandbag since we can't trust generated content (if you still care about IE7 / winXP users). It's also easier to deal with than including classes everywhere.

Then for CSS, let's assume this is in a UL with the ID #mainMenu

#mainMenu {
	list-style:none;
}

#mainMenu li {
	display:inline; /* just strip styling, preventing IE oddities */
}

#mainMenu a {
	display:block;
	position:relative;
	zoom:1; /* trip haslayout, fix positioning bugs IE */
	padding:0.25em 2em 0.25em 0.5em;
	background:#48C;
	border:1px solid #000;
	-webkit-border-radius:0.25em;
	-moz-border-radius:0.25em;
	border-radius:0.25em;
}

#mainMenu a span {
	position:absolute;
	right:0.5em;
	top:0;
	width:24px;
	height:100%;
	margin-top:-12px; /* half the image height */
	background:url(images/arrow.png) center left no-repeat;
}

Code (markup):

I tossed together a working demo here:
http://www.cutcodedown.com/for_others/James_DG/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/James_DG/

Is wide open for access to the to the gooey bits and pieces.

Hope this helps.

 

I just tossed together a quick demo to show the "future" of doing this.

http://www.cutcodedown.com/for_others/James_DG/template.noImages.html

If you don't care about IE8/earlier having the icons it's a good solution -- uses generated content to make the button using a greater-than sign and border-radius.

#mainMenu a:after {
	content:">";
	position:absolute;
	right:0.5em;
	top:50%;
	width:1.5em;
	height:1.5em;
	margin-top:-0.75em;
	text-align:center;
	text-indent:0.1em;
	font:bold 100%/130% consolas, courier, monospace;
	color:#FFF;
	background:#333;
	-webkit-border-radius:0.75em;
	-moz-border-radius:0.75em;
	border-radius:0.75em;
}

Code (markup):

The shorter line-height is to compensate for fonts not being center top to bottom, this varies by available/used font, so it's not exactly bulletproof -- but it shows that someday we'll be able to do all this stuff without even resorting to some goofy paint program.