GolfGTIforum.co.uk

General => General discussion => Topic started by: Guy on 02 February 2012, 19:16

Title: one for the coding geeks... *new problem* page 2
Post by: Guy on 02 February 2012, 19:16
relating to this page...

http://tonavaleting.com/ (http://tonavaleting.com/)

I want the phone number and the social icons in the trh box to appear on the same line (or at least see what they look like on the same line)

this is the section of code that relates to it..

Quote
<div id="add-nav-handler"><h4>Telephone: 07966 274165</h4>
            <?php if($this->params->get('twitter') || $this->params->get('linkedin') || $this->params->get('RSS') || $this->params->get('facebook') || $this->params->get('blogger')  || $this->params->get('myspace') ) : ?>
            <div id="social">
               <ul id="social-links">
               <?php if($this->params->get('twitter')) : ?><li><a href="<?php echo $this->params->get('twitter'); ?>" title="Twitter" id="twitter" target="_blank">Follow Us</a></li><?php endif; ?>
               <?php if($this->params->get('blogger')) : ?><li><a href="<?php echo $this->params->get('blogger'); ?>" title="Blogger" id="blogger" target="_blank">Blogger</a></li><?php endif; ?>
               <?php if($this->params->get('facebook')) : ?><li><a href="<?php echo $this->params->get('facebook'); ?>" title="Facebook" id="facebook" target="_blank">Facebook</a></li><?php endif; ?>
               <?php if($this->params->get('RSS')) : ?><li><a href="<?php echo $this->params->get('RSS'); ?>" title="RSS" id="rss" target="_blank">RSS</a></li><?php endif; ?>
               <?php if($this->params->get('linkedin')) : ?><li><a href="<?php echo $this->params->get('linkedin'); ?>" title="Linkedin" id="linkedin" target="_blank">Linkedin</a></li><?php endif; ?>
               <?php if($this->params->get('myspace')) : ?><li><a href="<?php echo $this->params->get('myspace'); ?>" title="myspace" id="myspace" target="_blank">myspace</a></li><?php endif; ?>
               </ul>
            </div>

any clues please?
Title: Re: one for the coding geeks...
Post by: dom on 02 February 2012, 19:27
relating to this page...

http://tonavaleting.com/ (http://tonavaleting.com/)

I want the phone number and the social icons in the trh box to appear on the same line (or at least see what they look like on the same line)

this is the section of code that relates to it..

Quote
<div id="add-nav-handler"><h4>Telephone: 07966 274165</h4>
            <?php if($this->params->get('twitter') || $this->params->get('linkedin') || $this->params->get('RSS') || $this->params->get('facebook') || $this->params->get('blogger')  || $this->params->get('myspace') ) : ?>
            <div id="social">
               <ul id="social-links">
               <?php if($this->params->get('twitter')) : ?><li><a href="<?php echo $this->params->get('twitter'); ?>" title="Twitter" id="twitter" target="_blank">Follow Us</a></li><?php endif; ?>
               <?php if($this->params->get('blogger')) : ?><li><a href="<?php echo $this->params->get('blogger'); ?>" title="Blogger" id="blogger" target="_blank">Blogger</a></li><?php endif; ?>
               <?php if($this->params->get('facebook')) : ?><li><a href="<?php echo $this->params->get('facebook'); ?>" title="Facebook" id="facebook" target="_blank">Facebook</a></li><?php endif; ?>
               <?php if($this->params->get('RSS')) : ?><li><a href="<?php echo $this->params->get('RSS'); ?>" title="RSS" id="rss" target="_blank">RSS</a></li><?php endif; ?>
               <?php if($this->params->get('linkedin')) : ?><li><a href="<?php echo $this->params->get('linkedin'); ?>" title="Linkedin" id="linkedin" target="_blank">Linkedin</a></li><?php endif; ?>
               <?php if($this->params->get('myspace')) : ?><li><a href="<?php echo $this->params->get('myspace'); ?>" title="myspace" id="myspace" target="_blank">myspace</a></li><?php endif; ?>
               </ul>
            </div>

any clues please?

I'd guess it's because they are in separate divs.

If you want them side by side you'll have to float each div and possibly specify the width of each one (as I think the by default a div width is set to 100%

 :wink:
Title: Re: one for the coding geeks...
Post by: Guy on 02 February 2012, 20:18
so it now sits like...

Quote
<div id="add-nav-handler">
            <?php if($this->params->get('twitter') || $this->params->get('linkedin') || $this->params->get('RSS') || $this->params->get('facebook') || $this->params->get('blogger')  || $this->params->get('myspace') ) : ?>
            <div id="social"><h4>Telephone: 07966 274165</h4>
               <ul id="social-links">
               <?php if($this->params->get('twitter')) : ?><li><a href="<?php echo $this->params->get('twitter'); ?>" title="Twitter" id="twitter" target="_blank">Follow Us</a></li><?php endif; ?>
               <?php if($this->params->get('blogger')) : ?><li><a href="<?php echo $this->params->get('blogger'); ?>" title="Blogger" id="blogger" target="_blank">Blogger</a></li><?php endif; ?>
               <?php if($this->params->get('facebook')) : ?><li><a href="<?php echo $this->params->get('facebook'); ?>" title="Facebook" id="facebook" target="_blank">Facebook</a></li><?php endif; ?>
               <?php if($this->params->get('RSS')) : ?><li><a href="<?php echo $this->params->get('RSS'); ?>" title="RSS" id="rss" target="_blank">RSS</a></li><?php endif; ?>
               <?php if($this->params->get('linkedin')) : ?><li><a href="<?php echo $this->params->get('linkedin'); ?>" title="Linkedin" id="linkedin" target="_blank">Linkedin</a></li><?php endif; ?>
               <?php if($this->params->get('myspace')) : ?><li><a href="<?php echo $this->params->get('myspace'); ?>" title="myspace" id="myspace" target="_blank">myspace</a></li><?php endif; ?>
               </ul>
            </div>

what else do i need to do?  :wink:
Title: Re: one for the coding geeks...
Post by: jamie_pyrite on 03 February 2012, 11:08
Looks like you've got it working now? :)
Title: Re: one for the coding geeks...
Post by: Guy on 03 February 2012, 11:12
Fill in the blanks I guess? A target should be your URL I assume.

they're all cool and working just fine... if I need to add any of those I can do...

its just the placement of the phone number and the social icons that I am having a spot of bother with... if you look at the top right hand corner of http://tonavaleting.com/ (http://tonavaleting.com/) I want to see if I can get them to display on one line but I don't know what I need to do to get them to do that..  :undecided:
Title: Re: one for the coding geeks...
Post by: jamie_pyrite on 03 February 2012, 11:28
Fill in the blanks I guess? A target should be your URL I assume.

they're all cool and working just fine... if I need to add any of those I can do...

its just the placement of the phone number and the social icons that I am having a spot of bother with... if you look at the top right hand corner of http://tonavaleting.com/ (http://tonavaleting.com/) I want to see if I can get them to display on one line but I don't know what I need to do to get them to do that..  :undecided:

Oh right, sorry. I've had a look and it just seems like you need to specify the size of the add-nav-handler? If you use the right click>Inspect Element feature in Chrome, does that help you at all? Total guesswork might I add!
Title: Re: one for the coding geeks...
Post by: Guy on 03 February 2012, 11:29
Fill in the blanks I guess? A target should be your URL I assume.

they're all cool and working just fine... if I need to add any of those I can do...

its just the placement of the phone number and the social icons that I am having a spot of bother with... if you look at the top right hand corner of http://tonavaleting.com/ (http://tonavaleting.com/) I want to see if I can get them to display on one line but I don't know what I need to do to get them to do that..  :undecided:

Oh right, sorry. I've had a look and it just seems like you need to specify the size of the add-nav-handler? If you use the right click>Inspect Element feature in Chrome, does that help you at all? Total guesswork might I add!

that would make sense.. how would I do that... in CSS?
Title: Re: one for the coding geeks...
Post by: jamie_pyrite on 03 February 2012, 12:14
A quick google says, stick something like style="width:100px" in the div id section..

So:

<div id="add-nav-handler" style="width:600px;">

Source: http://www.css-resources.com/Change-Div-Size-Color-and-Location-with-the-W3C-DOM.htm
Title: Re: one for the coding geeks...
Post by: Guy on 03 February 2012, 12:22
hmmm.... well it is currently

Quote
<div id="add-nav-handler" style="width:1200px;">
            <?php if($this->params->get('twitter') || $this->params->get('linkedin') || $this->params->get('RSS') || $this->params->get('facebook') || $this->params->get('blogger')  || $this->params->get('myspace') ) : ?>
            <div id="social"><h4>Telephone: 07966 274165</h4>
               <ul id="social-links">
               <?php if($this->params->get('twitter')) : ?><li><a href="<?php echo $this->params->get('twitter'); ?>" title="Twitter" id="twitter" target="_blank">Follow Us</a></li><?php endif; ?>
               <?php if($this->params->get('blogger')) : ?><li><a href="<?php echo $this->params->get('blogger'); ?>" title="Blogger" id="blogger" target="_blank">Blogger</a></li><?php endif; ?>
               <?php if($this->params->get('facebook')) : ?><li><a href="<?php echo $this->params->get('facebook'); ?>" title="Facebook" id="facebook" target="_blank">Facebook</a></li><?php endif; ?>
               <?php if($this->params->get('RSS')) : ?><li><a href="<?php echo $this->params->get('RSS'); ?>" title="RSS" id="rss" target="_blank">RSS</a></li><?php endif; ?>
               <?php if($this->params->get('linkedin')) : ?><li><a href="<?php echo $this->params->get('linkedin'); ?>" title="Linkedin" id="linkedin" target="_blank">Linkedin</a></li><?php endif; ?>
               <?php if($this->params->get('myspace')) : ?><li><a href="<?php echo $this->params->get('myspace'); ?>" title="myspace" id="myspace" target="_blank">myspace</a></li><?php endif; ?>
               </ul>
            </div>

and its making no difference whatsoever in chrome  :undecided:
Title: Re: one for the coding geeks...
Post by: jamie_pyrite on 03 February 2012, 12:58
hmmm.... well it is currently

Quote
<div id="add-nav-handler" style="width:1200px;">
            <?php if($this->params->get('twitter') || $this->params->get('linkedin') || $this->params->get('RSS') || $this->params->get('facebook') || $this->params->get('blogger')  || $this->params->get('myspace') ) : ?>
            <div id="social"><h4>Telephone: 07966 274165</h4>
               <ul id="social-links">
               <?php if($this->params->get('twitter')) : ?><li><a href="<?php echo $this->params->get('twitter'); ?>" title="Twitter" id="twitter" target="_blank">Follow Us</a></li><?php endif; ?>
               <?php if($this->params->get('blogger')) : ?><li><a href="<?php echo $this->params->get('blogger'); ?>" title="Blogger" id="blogger" target="_blank">Blogger</a></li><?php endif; ?>
               <?php if($this->params->get('facebook')) : ?><li><a href="<?php echo $this->params->get('facebook'); ?>" title="Facebook" id="facebook" target="_blank">Facebook</a></li><?php endif; ?>
               <?php if($this->params->get('RSS')) : ?><li><a href="<?php echo $this->params->get('RSS'); ?>" title="RSS" id="rss" target="_blank">RSS</a></li><?php endif; ?>
               <?php if($this->params->get('linkedin')) : ?><li><a href="<?php echo $this->params->get('linkedin'); ?>" title="Linkedin" id="linkedin" target="_blank">Linkedin</a></li><?php endif; ?>
               <?php if($this->params->get('myspace')) : ?><li><a href="<?php echo $this->params->get('myspace'); ?>" title="myspace" id="myspace" target="_blank">myspace</a></li><?php endif; ?>
               </ul>
            </div>

and its making no difference whatsoever in chrome  :undecided:


Hmmm, can you do a bit of trial and error by adding that style line to different div id's to see if it affects any of them? It could be that it's just being applied to the wrong div?
Title: Re: one for the coding geeks...
Post by: Guy on 04 February 2012, 18:23
update...

decided that I really don't mind the two lines... would love it to be all on one line but beggars can't be choosers

however... have decided that I would like twitter and facebook buttons in there with their relative code snippets as per the facebook and twitter sites...

now.. I'm really really not into scripts... i can't make head nor tail of them but this is the problem

twitter functions and displays like a good little script

facebook functions ok but looks like a fallen woman

if you look at the top right hand of my home page http://tonavaleting.com/ (http://tonavaleting.com/)  you'll see that the facebook icon doesn't align like the twitter icon does

this is the code for the upper right hand section

Quote
   <div id="add-nav-handler">
            <?php if($this->params->get('twitter') || $this->params->get('linkedin') || $this->params->get('RSS') || $this->params->get('facebook') || $this->params->get('blogger')  || $this->params->get('myspace') ) : ?>
            <div id="social">
               <ul id="social-links">
                     <li><h4>Telephone: 07966 274165</h4></li>
               <?php if($this->params->get('twitter')) : ?><li><a href="<?php echo $this->params->get('twitter'); ?>" title="Twitter" id="twitter" target="_blank">Follow Us</a></li><?php endif; ?>
               <?php if($this->params->get('blogger')) : ?><li><a href="<?php echo $this->params->get('blogger'); ?>" title="Blogger" id="blogger" target="_blank">Blogger</a></li><?php endif; ?>
               <?php if($this->params->get('facebook')) : ?><li><a href="<?php echo $this->params->get('facebook'); ?>" title="Facebook" id="facebook" target="_blank">Facebook</a></li><?php endif; ?>
               <?php if($this->params->get('RSS')) : ?><li><a href="<?php echo $this->params->get('RSS'); ?>" title="RSS" id="rss" target="_blank">RSS</a></li><?php endif; ?>
               <?php if($this->params->get('linkedin')) : ?><li><a href="<?php echo $this->params->get('linkedin'); ?>" title="Linkedin" id="linkedin" target="_blank">Linkedin</a></li><?php endif; ?>
               <?php if($this->params->get('myspace')) : ?><li><a href="<?php echo $this->params->get('myspace'); ?>" title="myspace" id="myspace" target="_blank">myspace</a></li><?php endif; ?>
                    <li><a href="https://twitter.com/share" class="twitter-share-button" data-via="Tona_Valeting">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
               </ul>
            </div>

and this is the fb code that the facebook button relates to

Quote
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=107346165967904";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

so... can anyone suggest a way of tidying up pagination of the facebook icon

tia
Title: Re: one for the coding geeks... *new problem* page 2
Post by: jamie_pyrite on 05 February 2012, 02:37
I think just face that we live in an imperfect world and this is one of those many imperfections.


I'll run it by one of my web dev. mates next time I speak to one :)
Title: Re: one for the coding geeks... *new problem* page 2
Post by: dom on 05 February 2012, 09:57
Add some padding to the top of the twitter div to push it further down & in-line with the facebook one?

With regards to getting it all onto one line I'll have a proper look later and post some code for you to try!
Title: Re: one for the coding geeks... *new problem* page 2
Post by: Guy on 05 February 2012, 14:53
Add some padding to the top of the twitter div to push it further down & in-line with the facebook one?

With regards to getting it all onto one line I'll have a proper look later and post some code for you to try!

thank you... look forward to seeing it later :afro:

I think just face that we live in an imperfect world and this is one of those many imperfections.


I'll run it by one of my web dev. mates next time I speak to one :)

TONA does not understand imperfections?  :huh:

My OCD will not allow this imperfection in my website to exist!  :lipsrsealed:



Title: Re: one for the coding geeks... *new problem* page 2
Post by: Ben Lessani on 05 February 2012, 15:49
Guy, PM me a screenshot/mock-up of what you want it to look like, and fire over FTP details and I'll do it for you.
Title: Re: one for the coding geeks... *new problem* page 2
Post by: Guy on 06 February 2012, 09:37
Guy, PM me a screenshot/mock-up of what you want it to look like, and fire over FTP details and I'll do it for you.

thats very very kind of you... I will hopefully get something over to you by lunchtime  :smiley: