1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS How do I move the links in my footer of my template to the middle/centre?

Discussion in 'Web Development' started by sjoerdlos, Apr 23, 2011.

  1. sjoerdlos

    sjoerdlos New Member

    Hello people,

    I bought a standard template for my webshop, but now have a little propblem with the footer of my template:

    I would like to move the links in my template to the middle (centre) of the template. As you can see, the links are now placed on the right side of my footer (see attachment). Does anyone know how I can change this?
    I think I need to change the footer.phtml file, but I have no idea what to change here. This is the footer.phtml file:

    <div class="footer-container">
    <div class="footer">
    <?php echo $this->getChildHtml('bottomContainer') ?>
    <div class="f-right">
    <?php echo $this->getChildHtml('store_switcher') ?>
    <?php echo $this->getChildHtml('cms_footer_links') ?>
    <?php echo $this->getChildHtml('footer_links') ?>
    <address><?php echo $this->getCopyright() ?></address>
    </div>
    <div class="f-left">
    <?php echo $this->getChildHtml('newsletter') ?>

    </div>
    </div>
    </div>

    Really hope someone can help me out!

    Thanks a lot anyway.

    Best regards,
    Sjoerd, the Netherlands
     

    Attached Files:

    sjoerdlos, Apr 23, 2011
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Would you please resize your photo to no wider than 700 pixels wide.
    The answer might be in the css file near this <div class="f-right">
    Looks like it is set to display it right and they named it that way.
    What did the people you bought it from say?
     
    ishkey, Apr 23, 2011
    #2
  3. sjoerdlos

    sjoerdlos New Member

    Thanks for your reply ishkey.
    The people I bought the template from told me I need to update the the footer.phtml file, but I have no idea what toupdate/change..

    Someone else told me to align the tag in my css and change it from align right to align middle. I tried but so far it did not work..
     
    sjoerdlos, Apr 23, 2011
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Without seeing the website and code it could be many things.
    That is where I would have looked. Do to the code shown above and tried the same thing. You did save the css file after edit for the change to take? Sometimes Browsers when open run off the cache as opposed to the updated file. Try closing the Browser and opening it again or clear the cache.
    Code:
    <div class="f-right"> 
 <?php echo $this->getChildHtml('store_switcher') ?> 
 <?php echo $this->getChildHtml('cms_footer_links') ?> 
 <?php echo $this->getChildHtml('footer_links') ?> 
 <address><?php echo $this->getCopyright() ?></address> 
 </div>
     
    ishkey, Apr 23, 2011
    #4
  5. sjoerdlos

    sjoerdlos New Member

    I put my website online to inspect the right element with firebug, this might make a bit more easy. The link to my website is www.onlinekabels.nl

    Do I need to change 'f-right' in row 1642 of my styles.css file?

    Thanks for the help again!
     
    sjoerdlos, Apr 24, 2011
    #5
  6. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    From what I can see you are right the problem is in the float: right
    Code:
    	
	.f-right, .right { 
[COLOR="Red"]float: right[/COLOR] !important;
    The float property specifies whether or not a box (an element) should float.

    You could try
    none The element is not floated, and will be displayed just where it occurs in the text. This is default for float.

    or

    inherit Specifies that the value of the float property should be inherited from the parent element.

    or if none of the above works you could leave the original code and add the line
    padding-right: <value in px>
    The padding-right property describes how much space to put between the right border and the content of the selector.
     
    ishkey, Apr 24, 2011
    #6
  7. sjoerdlos

    sjoerdlos New Member

    Many thanks for your help again!

    The problem is solved now. The solution was:

    In the styles.css file, on line 1642, to increase the padding-right to 295px, like your last suggestion.

    Best regards,
    Sjoerd
     
    sjoerdlos, Apr 24, 2011
    #7
  8. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Glad it worked out.
    I like to give multiple suggestions, as that way you can see how things react and increase your understanding.
    Keep us updated on your progress and who knows maybe you will come across a question here on the forum you can help with. Pass it on.
     
    ishkey, Apr 24, 2011
    #8
  9. sjoerdlos

    sjoerdlos New Member

    Yes, I will. This forum is an outcome for me as well.
    When I started I didn't know anything about css or html at all, this makes me learn :) Thx!
     
    sjoerdlos, Apr 24, 2011
    #9