SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling links with arrow in circle

    I am attempting to style a submit button and links within text with an arrow in circle .gif to the right of the submit button and two links in the right column on this page:
    http://test.kripalu.org/
    Currently they are not aligned so the arrow points to the middle of the "Submit" button and each of the lines.

    What would be the best approach to getting the .gifs to line up correctly? My mark up for the form is:

    HTML Code:
    <div align="center">
        <form name="form1" method="post" action="/subscribe.php" onsubmit="ValidateDetails();return false">
        <input type="text" name="emailAddress" onfocus="this.value=''" value="enter@here.now" />
        <input type="text" name="emailAddress_verify" onfocus="this.value=''" value="enteragain@here.now" /><br />
        <img src="/images/nav/dot_wi_arrow.gif" alt="go" /> <input type="submit" name="submit" value="Subscribe Me" />
        </form>
    </div>
    My mark up for the two text lines are:
    HTML Code:
    <p style="margin: 0px 0px 5px 0px; padding:0px;"><small><strong>Kripaluís monthly<br />
    e-newsletter</strong><br />
        articles, essays, recipes,<br />
        and much more...<br />
        <img src="/images/nav/dot_wi_arrow.gif" alt="go" /><a href="/KripaluOnline/current.html"><strong>click to read</strong></a><br />
        current issue<br />
        or sign up</small></p>
    and

    HTML Code:
        <p><small>an inspiring collection of online resources on yoga, health, nutrition.<br />
        <img src="/images/nav/dot_wi_arrow.gif" alt="go" /> <a href="/article/288/"><strong>visit</strong></a></small></p>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    img {vertical-align:middle;}
    That should do it. If it messes up any other images on the page you might have to give your circles a class and then target them using that.

    By the way, have you heard that using tables for layout is bad?

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles.
    Re: table based layout.
    Yes, this site was developed a few years ago before CSS layout was the thing. I'm about to change it to CSS with the next upgrade.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


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
  •