#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    8
    Rep Power
    0

    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.
    I know it's complicated to picture this without an image. Hopefully someone can read this code without an image.
    I'm a new member so I can't post any pictures.

    Original code
    PHP 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"
    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 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>';
    ?>
    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!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    You need to replace your last line from your original code with this:

    PHP Code:

    $menurow 
    "<li id=row_".$page->id." style=\"display:$rstyle\"><a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a>$icon</li>\n"
    And the explanation is that you are moving the $icon variable from the left side of the title, to the right.

    If for some reason that doesn't fix it, then I suspect there is CSS trickling down from somewhere that is not in this part of the code.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    8
    Rep Power
    0
    Originally Posted by slime
    You need to replace your last line from your original code with this:

    PHP Code:

    $menurow 
    "<li id=row_".$page->id." style=\"display:$rstyle\"><a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a>$icon</li>\n"
    And the explanation is that you are moving the $icon variable from the left side of the title, to the right.

    If for some reason that doesn't fix it, then I suspect there is CSS trickling down from somewhere that is not in this part of the code.
    Thanks for your reply! I tried what you mentioned. The icons do get moved to the right of the page titles, but outside of the navigation buttons. So the icons are just floating around separately from the navigation buttons.
    Once again, wish I could include an image but I'm not able to.

    The only code I could think of related to the code above is:
    #icon1 {
    position:relative;
    width:44px;
    height:21px;
    z-index:1;
    left:0px;
    top: 28px;
    }

    However, changing this CSS above does not have an effect on the icons positioning. The only code leading to a different position is the PHP code mentioned above.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    Not a problem...my fault for removing it from the button to begin with, same concept, just gotta make some small adjustments. Use this code though:

    PHP Code:
    $menurow "<li id=row_".$page->id." style=\"display:$rstyle\"><a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title $icon."</a></li>\n"
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    8
    Rep Power
    0
    Originally Posted by slime
    Not a problem...my fault for removing it from the button to begin with, same concept, just gotta make some small adjustments. Use this code though:

    PHP Code:
    $menurow "<li id=row_".$page->id." style=\"display:$rstyle\"><a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title $icon."</a></li>\n"
    Hi Slime, thanks for your reply. The suggested code didn't really work.

    Figured it our by using the following code, including "right:-240px;"
    PHP Code:
    if($page->buttonicon){     $icon "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; right:-240px; top:33px\">";     } 

    else{     
    $icon "<img src=\"images/noicon.png\" style=\"position:relative; right:-240px; 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"
    I see I can post images now, so here's the result:


    BTW: Any idea how I can move the page titles slightly to the left?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    I saw you post the same question on another forum, which is where you derived the solution; however, that is a poor one for a multitude of reasons.

    And my last suggestion would have worked, but unfortunately I left out a period.

    PHP Code:
    $menurow "<li id=row_".$page->id." style=\"display:$rstyle\"><a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title $icon."</a></li>\n"
    If that doesn't work I'll eat my mouse.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    8
    Rep Power
    0
    Originally Posted by slime
    I saw you post the same question on another forum, which is where you derived the solution; however, that is a poor one for a multitude of reasons.

    And my last suggestion would have worked, but unfortunately I left out a period.

    PHP Code:
    $menurow "<li id=row_".$page->id." style=\"display:$rstyle\"><a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title $icon."</a></li>\n"
    If that doesn't work I'll eat my mouse.
    Thanks again for replying!

    I tried it out, unfortunately it's not working.

    Result
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    Damn, now it looks like the CSS needs to be corrected.

    I can't say what without really seeing it. Make sure you remove the inline-styling in the $icon.

IMN logo majestic logo threadwatch logo seochat tools logo