Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts

    How to move text up in relation to the pictures

    I have this simple website: http://www.belerosemedia.com/contact.php

    I have two separate classes assigned to icons (same class for all icons) and text on the right (same class for four lines of text)

    Code:
    <h1>Contact</h1>
    <img src="img/mail.jpg" class="contact"/><span class="contacttxt">b@.com</span><br />
    <img src="img/icq.jpg" class="contact"/><span class="contacttxt">63</span><br />
    <img src="img/facebook.jpg" class="contact"/><a href="http://" target="_blank"><span class="contacttxt">www.fac</span></a><br />
    <img src="img/twitter.jpg" class="contact"/><a href="http://" target="_blank"><span class="contacttxt">www.</span></a>
    
    .contact {
    	padding: 10px 8px 0px 16px;
    }
    
    .contacttxt {
    	padding-left: 10px; 
    }
    For some reason I am not able to move the text up with something like padding-top -10px; or margin-top -10px; I am not sure if I should go as far as position relative etc.

    Thank you

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    I removed the <br />'s as I was thinking they were taking / blocking some kind of space and just wrapped all four lines in <p></p> tags, but that did not make no difference. padding-bottom, margin-bottom still dont work...

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    This is one of the few occasions where vertical-align:middle will do what you need. Try applying that to .contact, and then adjusting your padding.

  • Users who have thanked SB65 for this post:

    joliett89 (02-11-2012)

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    It looks a little better, but padding-top on .contact (pictures) changes only the distance bettween the icons and it is kind of hard to find the right number of pixels for that. vertical-align fixed it, but I am still trying to lower the text (.contacttxt class, all the same for all 4 lines) down a little bit. padding, marking - positive and negative does not affect that class...

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It won't affect the span element because it's an inline element.

    Try changing the top and bottom padding on .contact.

  • Users who have thanked SB65 for this post:

    joliett89 (02-11-2012)

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts
    It looks good now. Thanks a lot! I would be probably stuck on this one for a while...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •