I've seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be 'unhelpful' in the future even though google whips up a nice result summing some 55,000+ relevant results.
So, why won't padding-right work with a parent, and text-align right child?
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
}
The HTML
<div id="rightc">
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
</div>
Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code.
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
background-position: center right;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
cursor: pointer;
}
Live example
I think I understand your confusion.
What (I think) you're asking is why when you add padding to the left, it moves the content, but not when you add it to the right.
The answer is that padding makes the width of the div grow. So when everything is to the left (padding and text-align), the div gets wider and and the content is moved.
But when everything is to the right (padding and text-align) nothing moves...right? Wrong.
The div grows to the right the correct number of pixels adding the padding. And the content stays where it is because the offset is happening AFTER the content, not before like when you left align. It's easy to visualize with a border added.
Here is the code with no padding
http://jsfiddle.net/z5PJx/1/
You can see that the text is right up on the edge.
Here is the same code with padding-right: 50px;
http://jsfiddle.net/z5PJx/2/
Two things happened.
The div grew by 50px;
The content was moved left by 50px;
Those changes offset, and the content doesn't move.
In both situation the div's width grows to the right. But the direction of the padding changes.
Try this, on the container holding your text
.rightctext{ box-sizing: border-box; padding-right:10px;}
The box-sizing property will force the container object to take the padding on the right into account.
Hopefully that's what you're looking to achieve. *Note, adjust the px accordingly.
Related
I'm struggling to horizontally center three <h2> elements
#container {
margin: 0 auto;
width: 100%;
height: 3em;
}
h2 {
display: inline-block;
text-align: center;
width: 33%;
margin-left: auto;
margin-right:auto;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
I tried removing the white space by reformatting the HTML. I also tried using this site. I can't get the third element to sit inside the container.
Update: I followed jcuenod's advice. This seems to have solved the block level question of horizontal centering, but looking at the styling, I am now wondering why the headers are matching with their results. Here is what they look like now.
Shouldn't the h2's occupy the entirety of the container, given that they are centered across a container with 100% width?
The Problem
The problem is that you have widths that fill the horizontal space (mostly; 33%). But then your <h2> elements take up extra horizontal space because you add padding and border.
The Solution
Use box-sizing as follows:
box-sizing: border-box;
Explanation
MDN explains the border-box setting for box-sizing:
The width and height properties include the content, the padding and border, but not the margin.
MDN lists it as experimental but it has very good browser support.
#container {
width: 100%;
height: 3em;
}
h2 {
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 33%;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
just use display: block for <h2>
Add text-align:center; to the #container element.
Because your h2 elements are set to inline-block they don't occupy the full width of their container. That's why the centering is not working.
I have a footer and I set all margin and padding to be zero at the start. When I want to set my footer to text-align: center , nothing changed formy .footer p.
However the padding is still 0 horizontally, not 9px vertically.
.footer{
background-image: url("../img/naviga.png");
width: 1000px;
height: 30px;
/* my div settings */
background-repeat: repeat-y;
font-weight: bold;
text-align: center;
/* my div settings */
font-family: verdana, arial, sans-serif;
font-size: 10px;
}
/* p tag is my footer text */
.footer p{
padding: 9px auto 9px auto;
}
[have a look plz][1]
[1]: http://i.stack.imgur.com/D77IT.png */
Why this override is not working? I also tried with !important.
You can`t use auto at padding.
Try it for css :
.footer p {
padding: 9px 0px;
}
and don't miss your footer height is set to 30 px. You could resize it or p will get out .footer
Check link : https://jsfiddle.net/L5p38nc3/1/
You cannot do padding: 9px auto because auto is an invalid property for padding. That's why property is lined-through in the picture you provided.
Check the MDN docs for padding, here.
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Here's one of a few ways to vertically and horizontally align your text in the middle. Check this fiddle or the snippet below.
.footer {
display: table;
background: red;
width: 1000px;
height: 30px;
background-repeat: repeat-y;
font-weight: bold;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 10px;
}
.footer p {
display: table-cell;
vertical-align: middle;
}
<div class="footer">
<p>
text
</p>
</div>
I have a problem that I just can't wrap my head around, it might be because that I'm tired. I'm using Ryan's Fait sticky footer which I'm sure the most of you are familiar with. I use it regularly and never had any problems with it until now. The design that I'm working has a footer with several inner child elements.
One of the elements .newsletter is using padding or margins to make a wide gap so that a background image can be placed on the body. This is causing a overflow even when entering the correct height. Deleting the padding corrects the problem. I know that using overflow: hidden is an option but I'd rather find out the cause.
Screenshot with margins or padding set within the news letter element:
Screen without margins or padding set in the news letters:
Not working CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
Working CSS:
Simply changing the following values from those mentioned above to the following resolves the issue but I want the padding, or margin gap between the newsletter.
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
What if you put background-color : black to your .mainfooter instead of putting the background-color to the different element inside your footer?
It would seem that I'm extremely tried and stupid! I thank everyone for taking the time to take a look but it seems its as simple as a user error.
The problem was because I was counting from the very first bit of colour, in this case background: #000 on the .newsletterfix and not taking into consideration of the invisible padding above it. Stupid, me.
Example:
I am having no luck trying to align some text.
I tested with the Overflow Hidden value removed but still couldn't get it looking how I would like.
Here is a codepen page example:
http://codepen.io/anon/pen/oXrPGJ
HTML
<div>
<article>
<section>
<h2 class="colourtitle">
<img class="sideimage" src="http://placehold.it/256x256">
I'm glad I wrap, wish I was vert mid
</h2>
</section>
<article>
</div>
And the CSS
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
h2 {
padding-top: 1.5em !important;
overflow: hidden !important;
}
.colourtitle {
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 10px;
padding: 5px 0 0 0;
}
.sideimage {
display: inline-block;
margin-right: 0.5em;
max-width: 70px;
padding-top: 10px;
border-right-style: solid;
border-right-color: red;
border-right-width: 10px;
float: left;
}
I have Top Padding on my header tag, because on my actual page there will be many of these stacked, so just creates a nice white space.
I have set the Overflow Hidden, so that when viewed on a mobile screen the text wraps as I wish, and does not sit beneath the image.
h2 {
padding-top: 1.5em !important;
overflow: hidden !important;
}
You can see I'm using a thumb image, which has a right side border to it.
Along with an H2 tag, and that's all using a bottom side border.
But, I would like the text to be a little bit lower, so that it positions in the middle vertically, but still does the wrapping when needed on small screens.
I hope that is clear, and that someone can help me out with a snipped of code required. Thanks
Depending on your browser support requirements, you could look into flexbox.
Looking at the provided link and code, you could get the text to position in the middle vertically by using display: flex and align-items: center.
.colourtitle {
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 10px;
padding: 5px 0 0 0;
display: flex;
align-items:center;
}
I have my width for the status bar set to 100% in CSS, but yet it is still a little bit more. The rest of my page all cuts off at the right spot but you can scroll right and see my status bar sticking off. Please help! All help is appreciated!
Link to my site
CSS Code:
body{
margin: 0px;
background-color: lightgrey;
}
div.navigation{
width: 99%;
padding: 10px;
height: 25px;
background-color: black;
}
a.navigation{
color: #f5f5f5;
text-decoration: none;
font-size: 20px;
font-family: Century Gothic, sans-serif;
display: inline-block;
vertical-align: middle;
}
a.navigation:hover{
color: grey;
}
a.navigation:active{
color: darkred;
}
a.navigation:visited{
color: #f5f5f5;
}
In your CSS, you have some styles set on the navigation which are adding padding. Change the code starting at line 37 to:
div.navigation {
width:100%;
padding: 10px 0; /* Keeps the padding to the top and bottom only */
height:25px;
background-color: black;
}
Your padding is causing the browser to interpret the width of the bar as 100% of it's container width plus 20px of padding (10px left and 10px right).
You can use the CSS box-sizing: border-box; property to force the browser to render the box with the specified width and height, and place the border and padding inside the box.
div.navigation{
width: 100%;
padding: 10px;
height: 45px;
background-color: black;
box-sizing: border-box;
}
Note you will need to increase the height to 45px because the browser will not extend the height of the box for the top and bottom padding.
JS Fiddle fullscreen; code.