Home Forums Weaver Xtreme Theme Blank space under link that needs to go away – CSS question

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17857
    Skippy
    Participant

    Okay, I’m in some new territory for me and I can’t figure out where this is coming from.

    Here is the site.

    http://204eastsouth.com/s2/

    For maybe making things easier, here is the code I’m using.

    <div class=”mycol1″><a href=”http://synapsecounseling.com/eating-disorders/”><img class=”aligncenter” src=”http://204eastsouth.com/s2/images/veggies.jpg&#8221; alt=”Body Image and Eating Concerns” /></a><center>
    <a style=”text-decoration: none !important;” href=”http://synapsecounseling.com/eating-disorders/”><p style=”font-size: 1.5em; color:#000000; background-color: #ffffff; width: 150px; height: 42px; box-sizing: border-box; border: 2px solid #000000; text-align: center; position: relative; top: -60px;”>Enter Here</p></a></center></div>

    Feel free to point out everything I’m doing wrong.

    When you look at the site, scroll down to the 4 images side by side.  You will see two rows of them.  The second row is a copy/paste of the code I was experimenting with trying to find the problem. 

    Under the images and box containing text you will see an empty white space which is a clickable link and needs to go away.  As far as I can tell it’s being caused by this part of my code.

    <center>
    <a style=”text-decoration: none !important;” href=”http://synapsecounseling.com/eating-disorders/”><p style=”font-size: 1.5em; color:#000000; background-color: #ffffff; width: 150px; height: 42px; box-sizing: border-box; border: 2px solid #000000; text-align: center; position: relative; top: -60px;”>Enter Here</p></a></center>

    But I don’t bet my life on that.  Any pointers and teaching will be greatly appreciated. Thank you.

    #22502
    scrambler
    Moderator

    Looking at the code produced I se a couple of things

    First, there is a <br /> after the <center> tag, if you did not insert that, then WordPress is doing it. When you enter your own html in a page content, you need to check the option “allow raw HTML and script” to disable wordpress auto formatting.

    Second, you are using top:-60px to move the text up, and this is what causes the link on the white space. This is because you are moving the content up but not the link.

    you also have the width of the text set as width instead of max-width which could cause responsiveness problem, and you are setting a height which could do the same. If you need to adjust the height, use vertical padding

    Overall, you need / can simplify the code the way it is below

    <div class=”mycol1″><a href=”http://synapsecounseling.com/eating-disorders/”><img class=”aligncenter” src=”http://204eastsouth.com/s2/images/veggies.jpg” alt=”Body Image and Eating Concerns” /></a>
    <a class=”myparagraph” href=”Enter’>http://synapsecounseling.com/eating-disorders/”>Enter Here</a>
    </div>
    <div class=”mycol2″><a href=”http://synapsecounseling.com/adhd-treatment/”><img class=”aligncenter” src=”http://204eastsouth.com/s2/images/woman-thinking.jpg” alt=”Live and Thrive With ADHD” /></a>
    <a class=”myparagraph” href=”Enter’>http://synapsecounseling.com/eating-disorders/”>Enter Here</a>
    </div>
    <div class=”mycol3″><a href=”http://synapsecounseling.com/sport-psychology/”><img class=”aligncenter” src=”http://204eastsouth.com/s2/images/dancer.jpg” alt=”Performing At Your Peak” /></a>
    <a class=”myparagraph” href=”Enter’>http://synapsecounseling.com/eating-disorders/”>Enter Here</a>
    </div>
    <div class=”mycol4″><a href=”http://synapsecounseling.com/counseling-services/”><img class=”aligncenter” src=”http://204eastsouth.com/s2/images/woman-and-heart.jpg” alt=”Additional Counseling Services” /></a>
    <a class=”myparagraph” href=”Enter’>http://synapsecounseling.com/eating-disorders/”>Enter Here</a>
    </div>
    <div class=”clear-cols”></div>

    and simply style the box using the myparagraph class with the rule below in main options > Fonts & Custom > Custom CSS Rule box.

    Finally you need to add a complementary rule for the div mycolx classes, to do the centering of the text, and reclaim the 30px at the bottom due to moving the text up.

    .myparagraph {text-decoration: none !important;font-size: 1.5em; color:#000000; background-color: #ffffff; max-width: 150px;padding:2px 5px;box-sizing: border-box; border: 2px solid #000000; position: relative; bottom: 30px;}

    [class*=mycol] {text-align:center;margin-bottom:-30px;}

    Finally If you have other pages using divs with mycol classes that should not receive the align center and negative margins, you will need to add another class to these divs so you can specialize the rule. for example

    <div class=”mygroup1 mycolx”…

    and change the rule to

    .mygroup1 {text-align:center;margin-bottom:-30px;}

    #22503
    Skippy
    Participant

    You are amazing.  Thank you for all the help with that.

    I didn’t know about the “allow raw HTML and script” thing.  I’ll be sure to use that in the future.  I was not adding the <br /> and WordPress changing my attempts at coding drives me nuts.  Doubly so as I’ve still got much to learn about CSS.

    #22504
    Skippy
    Participant

    I was confused about your comment

    “Second, you are using top:-60px to move the text up, and this is what causes the link on the white space. This is because you are moving the content up but not the link.”

    Now I see what you mean and where my mistake was.  Thanks again for the education.  I’ve learned so much about CSS from your tutorials here.  Thanks for all the work you put into those and your patience explaining things like this.

    #22505
    scrambler
    Moderator

    You are welcome 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.