How to fix this with CSS? ( Spacing )

Arkidas · #1 10-08-2008, 08:35 AM

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 )

briansol · #2 10-08-2008, 01:56 PM

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>

Arkidas · #3 10-08-2008, 04:29 PM

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>

woostar · #4 10-08-2008, 04:43 PM

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;" />

briansol · #5 10-08-2008, 05:12 PM

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

Arkidas · #6 10-08-2008, 06:14 PM

More padding seems to make the image eat the text even more. I checked for case sensitive.

Arkidas · #7 10-13-2008, 08:57 PM

Any more ideas?

SEO

How to fix this with CSS? ( Spacing )

How to fix this with CSS? ( Spacing )