[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Need help bringing down one line <p> in the footer

Posted on 2014-12-24
12
Medium Priority
?
93 Views
Last Modified: 2014-12-26
Hi, I'm using VS2012.
I've been trying all morning to vertically align this one line of text, very frustrated.  It's at the top of the first div, which has a color background.  I tried verticalAlign, and margin-top but it won't move at ll.  I'm attaching a screen shot of Firebug and would really appreciate help in fixing this.
footer.png
footer2.png
Site.css
0
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40516968
What's wrong with text-align:center

Post a screenshot of the webpage.
0
 

Author Comment

by:lapucca
ID: 40517138
text-align:center
This centers the text Horizontally.  The problem I have is vertically, this paragraph stock to the top of my footer div/background image
Attached is a screen shot of the footer area.
Thank you
footer3.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 40517236
The screenshot makes no sense
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Accepted Solution

by:
Ammar Gaffar earned 2000 total points
ID: 40517555
Try padding-top.
0
 

Author Comment

by:lapucca
ID: 40517748
The screen shot is the footer area that has a background image, repeat across the entire screen.  

What's the difference with padding-top.  The margin top just grew space upward and went above the div that contains the paragraph.   Thank you Ammar.
0
 
LVL 12

Expert Comment

by:Ammar Gaffar
ID: 40517768
Padding is the space inside the border of your container,  but marigin is the space outside the border of your container
0
 

Author Comment

by:lapucca
ID: 40517893
Ha!  Thanks Ammar!  That is such valuable information to learn.  Now the difference is clear to me.  Thank you.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40517909
Padding is the space inside the border of your container,  but marigin is the space outside the border of your container
Not quite correct, it depends on the box model used, if you use border-box then everything is inside the element. And this is the much preferred method

http://css-tricks.com/box-sizing/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
http://css-tricks.com/international-box-sizing-awareness-day/
0
 

Author Comment

by:lapucca
ID: 40518077
Thanks Gary.  I need to read that a few more times to get it.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40518080
border-box - your element never grows beyond the size you set, if it's 100px wide and you add a 10px padding then you have 80px wide available space to work in, if you add a border then the same applies
But margins are added to the element size

content-box - if the element is set to 100px then no matter the margin, padding or border you always have 100px, but your element will be 100px + margin + padding + borders. So it will be bigger than 100px
When designing websites this becomes a real pain.
0
 

Author Comment

by:lapucca
ID: 40518103
Okay, I got the border-box the way you explain it.  Padding and border cuts down the work space.  The margin is outside of border which is outside of padding.

Content-box seems easier to understand since it's all extra around the element.

Thank you Gary.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40518496
Content-box seems easier to understand since it's all extra around the element
Depends on how you design, if you set an element to 100% width (or use any percentage based layout) and then add padding and margins then it is bigger than 100%, with border-box it's still 100%.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question