Results 1 to 7 of 7

How to fix this with CSS? ( Spacing )

This is a discussion on How to fix this with CSS? ( Spacing ) within the Off-Topic & Chit Chat forums, part of the Focus on Members category; Male Sopranos & Altos As you can see the 'Register Now' button flows over a tiny bit of the text ...

  1. #1
    Senior Member
    Real Name
    Arkidas
    Join Date
    Feb 2008
    Posts
    254
    Liked
    1 times

    How to fix this with CSS? ( Spacing )

    Male Sopranos & Altos

    As you can see the 'Register Now' button flows over a tiny bit of the text above. How could I fix this with CSS? ( Push the text a few pixels up )

  2. #2
    Senior Member briansol's Avatar
    Real Name
    Brian
    Join Date
    Apr 2006
    Location
    Central CT, USA
    Posts
    6,981
    Liked
    8 times
    try changing this:

    Code:
    <p>
    You may find articles, interviews and criticisms inside the article section. Among them you can find criticisms of male soprano Randall Wong's baroque as well as modern performances, interviews with male soprano,Michael Maniaci and countertenor Philippe Jaroussky, articles about castrati and much more.
    </p> <div class="registerNow"> <a href="register.php"><img src="/images/styles/sopranos/style/registerNow.gif" alt="Register Now" /></a> </div>
    to
    Code:
    <p>
    You may find articles, interviews and criticisms inside the article section. Among them you can find criticisms of male soprano Randall Wong's baroque as well as modern performances, interviews with male soprano,Michael Maniaci and countertenor Philippe Jaroussky, articles about castrati and much more.
    <a class="registernow" style="display: block;" href="register.php"><img src="/images/styles/sopranos/style/registerNow.gif" alt="Register Now" /></a></p>

  3. #3
    Senior Member
    Real Name
    Arkidas
    Join Date
    Feb 2008
    Posts
    254
    Liked
    1 times
    Didn't work, the image is still chewing on text.

    HTML Code:
    <div class="welcome">
    <p>Male Sopranos  &amp; Altos is a social networking site that focuses on the high male voice. Now that musicians and the public have been gaining interest in Baroque vocal works, more recordings are available and more opinions are expressed. If you are new to this topic, feel free to ask questions in our forums to receive replies from deeply informed enthusiasts.</p>
    
    <img style="float:left;margin-right:0.9em" src="/images/styles/sopranos/style/videos.png" alt="Videos" /><p>The video section contains videos of many talented performers which include countertenors Philippe Jaroussky and Andreas Scholl, male sopranos Radu Marian and Randall Wong, along with female sopranos Gundula Janowitz and Marķa Cristina Kiehr who have pure voices and have had training in the Baroque style. Furthermore, you may also find recordings of exceptional boy sopranos Steven Moeckel, Clint van der Linde plus others. </p>
    <img style="float:right" src="/images/styles/sopranos/style/pictures.png" alt="Pictures" /><p style="clear: left;">In pictures you can find portraits of famous castrati and composers from the baroque and classical era as well as photographs of modern male sopranos and altos accompanied with an informative and short description of the subject.
    </p>
    <img style="float:left;margin-right:0.9em" src="/images/styles/sopranos/style/CD.png" alt="CDs" />
    <p>
    In the CDs section, you may find the discography of all known male sopranos and altos with detailed information about each CD and information on where to acquire them.
    </p>
    
    <img style="float:right" src="/images/styles/sopranos/style/articles.png" alt="Articles" /><p>
    You may find articles, interviews and criticisms inside the article section. Among them you can find criticisms of male soprano Randall Wong's baroque as well as modern performances, interviews with male soprano,Michael Maniaci and countertenor Philippe Jaroussky, articles about castrati and much more.
    <a class="registerNow" style="display: block;" href="register.php"><img src="/images/styles/sopranos/style/registerNow.gif" alt="Register Now" /></a></p>
    
                            </div>

  4. #4
    Senior Member woostar's Avatar
    Real Name
    woostar
    Join Date
    Apr 2007
    Posts
    788
    Liked
    5 times
    can't you just put a margin on the image?

    HTML Code:
    <img src="/images/styles/sopranos/style/registerNow.gif" alt="Register Now" style="margin:5px;" />
    2011 Average: 1 post every 5 seconds... 24/7

  5. #5
    Senior Member briansol's Avatar
    Real Name
    Brian
    Join Date
    Apr 2006
    Location
    Central CT, USA
    Posts
    6,981
    Liked
    8 times
    only if it's block.

    margins don't really exist on inline elements


    with the code i supplied above, try adding more padding to the registerNow class.

    and, note, css is case-sensitive. make sure your class matches the camelCase

  6. #6
    Senior Member
    Real Name
    Arkidas
    Join Date
    Feb 2008
    Posts
    254
    Liked
    1 times
    More padding seems to make the image eat the text even more. I checked for case sensitive.

  7. #7
    Senior Member
    Real Name
    Arkidas
    Join Date
    Feb 2008
    Posts
    254
    Liked
    1 times
    Any more ideas?

Posting Permissions

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