Jump to content

Archived

This topic is now archived and is closed to further replies.

photomom86

Text Box Spacing/Margin/Padding ?

Recommended Posts

photomom86

I am using a text box as my header on my site here http://greeneyedcountrygirl.com. 

 

There seems to be some extra spacing above the "subscribe & follow" graphic and below the main site logo. I've attached an image. 

 

I'm wondering if there is something wrong with my code that is making these spaces or if that's just how it's going to be?

 

Any input is appreciated. Thanks!

 

Header-Text-Box-Spacing.jpg

 

Here is the code 

<a href="http://greeneyedcountrygirl.com"><img class="alignright  wp-image-6275" alt="Green Eyed Country Girl {Lifestyle Blog}" src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2014/03/BlogHeader-DMS.png" width="655" height="123" /></a><p><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2014/04/subscribe-or-follow-white.png" alt="Follow or Subscribe!" width="250" height="42"><p><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fgreeneyedcountrygirl.com%2Ffeed_blank"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/feedly.png" alt="&quot;Follow" width="35" height="35" /></a><a href="http://eepurl.com/CWlc5"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/gmail.png" alt="Sign up for Emails!" width="35" height="35" /></a><a href="http://facebook.com/grneydcntrygirl"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/fb.png" alt="Follow Me on Facebook" width="35" height="35" /></a><a href="http://plus.google.com/+AnnaHettick"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/google+.png" alt="Circle Me!" width="35" height="35" /></a><a href="http://instagram.com/grneydcntrygirl"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/instagram.png" alt="Follow Me on Instagram" width="35" height="35" /></a><a href="http://twitter.com/grneydcntrygirl"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/twitter.png" alt="Follow Me on Twitter" width="35" height="35" /></a><a href="http://pinterest.com/grneydcntrygirl"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/pinterest.png" alt="Follow Me on Pinterest" width="35" height="35" /></a><a href="http://linkedin.com/in/grneydcntrygirl"><img src="http://www.greeneyedcountrygirl.com/wp-content/uploads/2013/12/linkedin.png" alt="Connect on Linkedin" width="35" height="35" /></a>

Share this post


Link to post
Share on other sites
Danny

Hi,

 

From what I can see, you have made two errors.

 

1. You have used the TextBox for HTML, the TextBox section should only be used for Text, hence its name. You should use the MediaBox for anything related HTML/Media.

2. Your HTMl code isn't correct.

 

When you want to create a layout via HTML, you should use our grid to create columns in your HTML, by doing so you know that your HTML will look correct on all supported browsers.

Also the gap is coming from the fact that WordPress has wrapped your code in <p> tags, which contain margin top and bottom by default, this is what is causing the gap. As the <p> tag is a full width HTML tag, so the image on the is full width and therefore, the only possible way to push the subscribe image up would be to use negative margins on that element. However, if you need to use negative margins to position an element correctly then there is something wrong with your HTML to begin with.

 

So with that I have refactored your code, using the PageLines grid.

 

https://gist.github.com/Dannyholt/d357ea6e8c1f0a1bdd08

 

Result = https://cloudup.com/cGfwjK_3XOg

 

Also, in regards to your Social links, I highly recommend you read my guide on our docs here to add social links to your website, you should not just use the <a> tag, you should use a list instead.

 

http://docs.pagelines.com/tutorials/creating-a-branding-area

 

In the guide above, see the Social network links instructions and use that as a base for your code to include social links to your site.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

YEA!! Thank you so much! I knew there was a better way to do this, especially because my header doesn't always look the same on all browsers! Thanks much!! :)

Share this post


Link to post
Share on other sites
photomom86

Ok, a couple quick questions. Is there no way for me to use my own social media icons? And also if I include the "subscribe & follow" with the main logo are my social media icons going to line up underneath it?

Share this post


Link to post
Share on other sites
Danny

You can use the PageLines Grid again and underneath the code I gave you above, but this time use the following:

 

<div class="row">

<div class="span12">

<ul class="">

<li>Social Icons code here</li>

<li>Social Icons code here</li>

<li>Social Icons code here</li>

<li>Social Icons code here</li>

</ul>

</div>

</div>

 

Something like that, you should use the code on our docs to display social icons as a base for your own code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

ok cool. what about the placement of the social media icons under the "subscribe & follow" image? If I use the code you gave me is that image going to be above the icons or beside them?

Share this post


Link to post
Share on other sites
Danny

If you add the code I gave you above to underneath the code I gave you for your images, then the icons will appear underneath. If you add the code above the other code, the social icons will appear above.

 

The code above starts a new row, so where you add it above or below, thats where it will be positioned.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Hi again, I wasn't sure if I should reply here or start a new thread, sorry if I got it wrong.

 

I have been trying to work on my header area all week but I am still having some issues with it. I added the 2 column columnizer to the header area and sized it how I want it, then I dropped in the media box component, and used the media box image to put the logo image in, then I used the tutorial that was suggested for my social media buttons, and I also added an email address box & a subscribe button, however there is still a lot of space between the bottom of my logo and the top of my green navigation bar. I've poured over the code and I cannot seem to find what is making this happen.

 

here is the code for the social media icons and the email, subscribe button:

<div class="social-bar pull-right">
    <ul class="zmt zmb">
        <li><a href="http://facebook.com/grneydcntrygirl" target="_blank"><i class="icon icon-facebook"></i></a></li>
        <li><a href="http://plus.google.com/+AnnaHettick" target="_blank"><i class="icon icon-google-plus"></i></a></li>
        <li><a href="http://instagram.com/grneydcntrygirl" target="_blank"><i class="icon icon-instagram"></i></a></li>
        <li><a href="http://pinterest.com/grneydcntrygirl" target="_blank"><i class="icon icon-pinterest"></i></a></li>
        <li><a href="http://twitter.com/grneydcntrygirl" target="_blank"><i class="icon icon-twitter"></i></a></li>
        <li><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fgreeneyedcountrygirl.com%2Ffeed_blank" target="_blank"><i class="icon icon-rss"></i></a></li>
    </ul>
</div>
<div class = "pull right"> <input type="email" name="EMAIL" placeholder="Your email address" required="required"> <input type="submit" value="Subscribe">
</div>

and again the logo has no code that I put in.

 

I did also add the code that was needed to style the social icons in my custom CSS area.

 

Thanks!

Share this post


Link to post
Share on other sites
Danny

This is caused by margin and/or padding, you can try the following code.

 

#mediaboxuj7huz .pl-section-pad, #mediaboxuj7huz .the-media {
margin: 0;
}
 
This should remove all margin and padding. In future you will need to resolve this using Chrome dev tools.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×