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

    Join Date
    Jul 2007
    Posts
    14
    Rep Power
    0

    How to align image & text...


    How to align image and text
    I have a script that toggles opened & closed states of text paragraphs.
    At the left of closed paragraph there is an image that is switched as the link is clicked and collapses the paragraph text.
    I have had difficulties with aligning image and text, so I am asking you a suggestion how to do this.
    Below I posted the most relevant parts of code.
    ~~~~~~~~~~~~~~~~~~
    js
    <!--
    function toggleMe(a){
    var e=document.getElementById(a);
    var i = document.getElementById(a + '_image');
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block"
    i.src = 'images/showhidetext_opened.png';
    } else {
    e.style.display="none"
    i.src = 'images/showhidetext_closed.png';
    }
    return false;
    }
    // -->
    ~~~~~~~~~~~~~~~~~~~~~~~~
    HTML
    <script src="js/show_hide_text.js" type="text/javascript"></script>
    ......
    <p>
    <a style="cursorointer;" onClick="return toggleMe('para1')" class="expandtext">
    <img id="para1_image" src="images/showhidetext_closed.png" style="border:0;margin-right:5px;vertical-align:middle;" />
    Paragraph 1
    </a>
    </p>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    css
    .expandtext {
    /* font-family: C H I V O */
    font-family:"chivoregular";
    font-size:28px;
    line-height:1.0em;
    font-weight:300;
    color:#151515;
    text-align:left;
    letter-spacing:-1px;
    margin-top:-20px;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    using [b]display:none;[b] will actually remove an element from the page layout, which is probably what is causing your issue of how to position the image next to the paragraph.

    in your javascript function, try changing
    Code:
    if(e.style.display=="none"){
    e.style.display="block"
    i.src = 'images/showhidetext_opened.png';
    } else {
    e.style.display="none"
    i.src = 'images/showhidetext_closed.png';
    }
    to
    Code:
    if(e.style.visibility=="hide"){
    e.style.visibility=="show"
    i.src = 'images/showhidetext_opened.png';
    } else {
    e.style.visibility=="hide"
    i.src = 'images/showhidetext_closed.png';
    }
    that way the hidden element still "takes up space" in the document, so, the image on its left will still be positioned next to it.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    14
    Rep Power
    0
    <!--
    function toggleMe(a){
    var e=document.getElementById(a);
    var i = document.getElementById(a + '_image');
    if(!e)return true;
    if(e.style.visibility=="hide"){
    e.style.visibility=="show"
    i.src = 'images/showhidetext_opened.png';
    } else {
    e.style.visibility=="hide"
    i.src = 'images/showhidetext_closed.png';
    }
    return false;
    }
    // -->
    Just to be sure Ive done the right thing.
    It has not worked.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    I may not be understanding what you are after....can you post a link to the page in question?...and possibly try to explain what it is exactly you want to do and with what image?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    14
    Rep Power
    0
    Originally Posted by DonR
    I may not be understanding what you are after....can you post a link to the page in question?...and possibly try to explain what it is exactly you want to do and with what image?
    The link is : http://gruberadv.com.br/atuacao.php

    The images are the bullets at the left of every link that open or close the paragraph.
    The images and text are not perfectly aligned.
    Thank you very much for your support.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    ok, so, how do you want things to be aligned? vertically, horizontally? and aligned to what?

    if you want the innerparagraph text to be aligned with the "show/hide" paragragh, then, add margin-left:1em to your .showhideparagraph CSS

    also, I would change the line-height from 2em to 1.2em for that class.

    I also noticed that you have an extra space before Empresario in your 2nd outer paragraph , that is throwing it off from the other outer paragragh text.

IMN logo majestic logo threadwatch logo seochat tools logo