SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: img & Text

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    img & Text

    i'm learning to code and I'm trying out a facebook page. I want some text and an arrow next to the text ( and possition the arrow ) but noting is working right as the arrow is not moving up enough. I'm trying the following codes:

    Code HTML:
    <div id="pages">
    <div id="pages-inside">
    <p><img src="http://organicwebdesigns.co/facebook/images/logo_s1.png" alt="logo" class="logo" /></p>
    <ul>
    <li>LIKE US TO WIN</li>
    <li><img src="http://organicwebdesigns.co/facebook/images/arrow_s1.png" class="arrow" /></li>
    </ul>

    css:

    Code CSS:
    #pages {
    width: 100%;
    float: right;
    margin-bottom: 15px;
    }
     
    #pages-inside {
    width: 500px;
    height: 72px;
    margin: auto;
    position: relative;
    border: none;
    }
     
    .logo {
    margin-top: 12px;
    float: left;
    border: none;
    width: 160px;
    }
     
    #pages-inside ul {
    list-style-type: none;
    list-style-image: none;
    padding: 10px 0px 0px 0px;
    margin: 15px 0px 0px 15px;
    float: right;
    }
     
    .arrow {
    height: 67px;
    width: 81;
    margin-bottom: 10px;
    }
    Last edited by Black Max; Jul 28, 2011 at 22:49. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Do you have a link to this? It's pretty hard to visualize what's happening here, and the code seems somewhat incomplete.

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    hantaah, I love your avatar! Any significance?

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi there. It's on my facebook fan page, http://www.facebook.com/pages/​Organ...71​57883 however I want to place an arrow on the end pointing to the like button on the top but I'm getting the arrow below the words, stuck to the top banner and it won't go up. Is there anyway to send attachments on here?

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Off Topic:

    hantaah, I love your avatar! Any significance?
    Thank you - it ties in with the organic web designs theme of my website

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    hi there. It's on my facebook fan page, http://www.facebook.com/pages/​Organ...71​57883
    Hmm. This what I get:

    The page you requested was not found.

    You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.
    You can upload a zipped file if you want.

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    mm try this or type in search organic web designs look for my logo

    Organic Web Designs - HTML iFrame | Facebook

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, it's showing now.

    Quote Originally Posted by hantaah View Post
    I want to place an arrow on the end pointing to the like button on the top
    On the end of what? I don't see an arrow anywhere at the moment. Is it meant to be there?

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    right at the top it says like us to win fb design and I want to place an arrow at the end, pointing up towards the like button but the arrow isn't there yet as it is positioning underneath the txt and sticking to the top banner when I do it

    here is the arrow

    http://organicwebdesigns.co/facebook...s/arrow_s1.png

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There's no real point in using a UL there for ne item (better use a <p>) but anyhow, you could give the LI some right padding and place the arrow as a background image on the LI, with position: 100% 50%.

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    when it comes to coding from scratch, It's very new to me, so i'm just trying all this out.

    so take out the ul and put it in p. I think I tried it before, I'll have another play around

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, turn it into

    <p class="arrow">Like Us To Win Free FB Design</p>

    and than try this:

    Code:
    .arrow {
    float: right;
    padding-right: 85px; 
    line-height: 67px; 
    background: url(http://organicwebdesigns.co/facebook/images/arrow_s1.png) no-repeat 100% 50%;
    }
    Or you could do this in the HTML:

    Code:
    <p class="arrow">Like Us To Win Free FB Design <img src="http://organicwebdesigns.co/facebook/images/arrow_s1.png" alt=""></p>
    and then this in the CSS:

    Code:
    .arrow {
    float: right;
    line-height: 67px; 
    }
    
    .arrow img {vertical-align: middle; padding-left: 10px;}

  13. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok, 2nd onw worked, kinda, just needs to be adjested a little. it's all a little confusing to me at the moment. I'm wondering if I'll ever get the hang of it. Any tips on how to master it?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You didn't add in any of those styles I suggested:

    Code:
    .arrow {
    float: right;
    line-height: 67px; 
    }
    
    .arrow img {vertical-align: middle; padding-left: 10px;}
    At least add this to your style sheet:

    Code:
    .arrow {float: right;}
    You may not like the other styles.

    Any tips on how to master it?
    A lot of people seem to stumble around over this stuff rather than attack the subject systematically. When I decided to learn this stuff, I found a good book, sat down, and studied it meticulously for a few weeks. Then I had a comprehensive, solid foundation for learning more—a lot of that learning having taken place around here.

  15. #15
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I did or maybe I didn't save it, let me check

  16. #16
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi just checked and it'd there in the style sheet

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Looks like it's behaving now.

  18. #18
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    it sure is!!! I've bought a few months of coding training so hoping to get a little practice from that.

    Thanks again

    Only thing now is the like button doesn't seem to be working - what happens when you click it?

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,169
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    Only thing now is the like button doesn't seem to be working - what happens when you click it?
    Works fine for me.


Bookmarks

Posting Permissions

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