I have a very fundamental question to choose padding size for vertical rhythm.
Let's say that:
.body{
font-size: 14px;
line-height: 18px;
}
And we have a div with content (div has a border):
<div class="content">
... a very large text content here ...
</div>
Which one of the following would be the right chose for vertical align, this one:
.content{ padding: 18px; .... }
or should I consider the difference (18-14)/2 = 2px, So:
.content{ padding: 16px 18px 16px 18px; .... }
or if both answers are wrong, would you please explain how to approach this issue.
You should set the same padding on top and the bottom of the container. example:
.content {
padding: 10px 0;
line-height: 14px;
}
<div class="content">
...some text here...
</div>
Also you can set the height of the div and then set the same line-height
Related
I have an issue with overlapping DIVS. Tried a few things but none have provided the desired outcome. I suspect this is quite easy but i'm missing the key element.
Currently the bingo div overlaps the numbers div. On many screens the numbers div is not even visible as the bingo div takes up the entire screen
HTML:
<body>
<div class="numbers" style="height:100%">
<h2>
What sort of number do you want?
</h2>
Evens
Odds
Primes
</div>
<div class="bingo">
</div>
</body>
CSS:
html{
font-size: 100%;
font-family: sans-serif;
}
h2{
margin:2rem;
}
h1{
margin:-2rem 0 2rem 2rem;
font-size: 4rem;
}
a{
margin: 0 0 0 2rem;
border:solid black 1px;
padding: 0.618rem 1rem;
text-decoration: none;
color:black;
}
a:hover{
color: white;
background-color: black;
}
img{
position: absolute;
bottom:0;
}
.bingo{
bottom:0;
margin: 4rem 0 0 0;
width: 100%;
height: auto;
overflow: hidden;
}
Thanks!
The "number" <div> takes the height from the contained elements, texts and <a>; the point is that the <a> elements are inline whose CSS height is just the height of the text lines. If they appear to be rectangular on the screen it's just cause you set a padding (that's not added to the parent <div> height).
That's causing the overlapping of the rectangles on the "bingo ", but for CSS height there is no overlapping.
The solution is that the "number" <div> takes the whole height of the elemets inside it in order to "push down" the "bingo" <div> using:
a {
...
display: inline-block;
margin-bottom: 2rem;
}
I added a bottom margin just to prevent they touch eachother when in a single column at the resize of the screen.
https://jsfiddle.net/hoq97sj5/1/
I have a footer that has three rows. Row one is two divs floated left. Row two is a 'divider' line that is 100 width of the footer. Row three will be 3 more divs floated left.
The problem is on the first row. I have a margin-top:40px; for the middle line. The first floated element sits on top as it should but the second floated element ( which is going to be a text box and has padding inside ) sits on top fine WITHOUT padding, but when I put the 10px padding in, it sits 40px above as it should, but adds extra margin to the elements around it.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
**** PLEASE NOTE ***** The code snippet is not an accurate representation as css reset and clearfix is missing so not correct. Someone else edited this and put it there....
Unless you tell it to, the browser will make the element the width you specify, and then add on the padding etc
If you set the border-sizing property this will prevent it from happening;
box-sizing: border-box;
Try adding that to your CSS declaration
You can compensate for the shifting by of the padding by adding either margin-top:-10px; or position: relative; top: -10px; to .newsletter.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
margin-top: -10px; /* negative or padding value - readjusts position back up */
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
After reviewing what you said about my old, now competently irrelevant answer, i think i found what your issue is.
padding:10px;
adds padding to ALL 4 sides. it is functionally equivalent to
padding: 10px 10px 10px 10px;
the newsletter div is now significantly Taller than the other stuff in the same div, and the browser is forced to compensate by making the container div bigger. the container div gains 20 pixels in height when you do this, which would appear to add additional margin to the other elements.
to remove this, you would instead want to use either of these
padding: 0 10px;
padding: 0 10px 0 10px;
as per http://www.w3schools.com/cssref/pr_padding.asp
either will add padding to the LEFT and RIGHT sides equal to 10px, but the top and bottom will remain 0. the newsletter div will no longer be over-sized, making the container div bigger, which will make it appear there is margin for the others.
Edit (additional options):
however, if you want to keep the top and bottom padding, your have 3 main options.
1) add the padding to the other div inside the parent as well as newsletter. they will line up with newsletter, and have the extra space above and below. you would likely want to shrink the middle div's height to compensate for the increase.
2) to completely remove the newsletter from its parent div. set the width of newsletter and its parent div so that they add up to 100% including padding and borders, or use box-sizing:border box, and float both left so that they line up horizontally. now you can make newsletter as big as you want, and it will not affect the others.
3) you fix the height of the parent div,so that newsletter can be bigger than its parent div, however this tends to cause problems with layouts if your not careful, as it may overlap.
Is it possible to stack in-line-block elements?
I have a DIV which I want the elements inside it (h1 and P) to be centred. So I set the DIV to text-align centre and initally set the H1 and P tag to inline-blocks.respectively.
The idea was to display the two elements (H1 and P) as in-line-block elements so content is centred and a transparent png shows in the background for the length of the text.
But the problem I have is that having elements as inline-blocks means they will appears next to each other (I don't want this to happen), so I set the P tag as block element but it's resulting in the transparent png being as wide.
HTML:
<div id="hero">
<div class="container">
<div class="row">
<div class="span12" id="hero-text">
<h2>Heading line</h2>
<p>Paragraph line goes here</p>
</div>
</div>
</div>
</div>
CSS
#hero {
height: 435px;
width: 100%;
background: url(../img/hero-image.png) 0 0 no-repeat;
background-color: #999;
position: relative;
color: #FFF;
border-bottom: 3px solid #E6E6E6;
}
#hero-text {
position: absolute;
top: 33%;
text-align: center;
}
#hero h2 {
font-size: 4em;
font-style: normal;
line-height: 50px;
padding-top: 10px;
background: url(../img/bg-heading.png) repeat;
display: inline-block;
padding: 10px 20px;
}
#hero p {
font-size: 2em;
line-height: 30px;
display: block;
background: url(../img/bg-heading.png) repeat;
padding: 10px 20px;
}
Any help is appreciated.
This was actually tougher to solve than I originally thought. I could find two options for you. If you don't want to change your markup:
Give both #hero h2 and #hero p display:inline-block, and give them widths so that their combined width is greater than 100%. They both can be width:51%, or one can be wider than the other, just as long as their total is more than the width of the parent. This will cause the p to break to a new line. See http://codepen.io/anon/pen/cjDiH OR
2.If you want their widths to be fluid, I'd add an element in between the h2 and p that is display:block. I added hr, then took away its margin, padding and border to make it not visible other than to cause the line break. See http://codepen.io/anon/pen/AGDti
I see you figured out out to get them to stack like in your screenshot.
Now,
try adding width: auto; to #hero p in your css.
I am having a little trouble aligning two elements inside a div (the quote and the arnold pic).
Here is what it looks like:
<div class="container">
<div id="quote">
<p id="tagline-quote">"As a personal fitness trainer, I'm asked on a weekly basis where the best place to buy supplements is, and my answer is always bodybuilding.com"</p>
<img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg"></img>
</div> <!-- end #quote -->
Here is the css:
.container {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
}
#quote {
padding: 60px 400px 20px 13px;
text-align: center;
}
p#tagline-quote {
color: #777676;
font-family: Georgia,serif;
font-size: 20px;
font-style: italic;
line-height: 30px;
text-shadow: 1px 1px 0 #FFFFFF;
}
#q-image{
}
This is a textbook "css floats 101" question. Oh, wait, I thought that was original but that's exactly what the article on alistapart is called. You can position the image inside the quote/paragraph and float it right - that's pretty much what the floats were made for before semantic layouts took over :)
<div class="container">
<div id="quote" class="clearfix">
<img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg" />
<p id="tagline-quote">“As a personal fitness trainer, I'm
asked on a weekly basis where the best place to buy supplements is,
and my answer is always bodybuilding.com”</p>
</div>
</div>
For CSS, I've thrown out some of the original padding :
#q-image{
float:right;
/*add some margin so that there is space between text and photo*/
margin-left:10px;
}
Now the issue that you were having with KodeKreachor's code was seemingly incorrectly "garbling" the divs below and you probably saw the quote container looking shorter than it should be. The workaround is using a "clearfix" that expands the parent container so that the floated element can fit inside. Remove it from the code and see how the (temporarily) highlighted container acts.
On a side note... try adding more paragraphs and move the image into one of them. Now that "odd" behaviour makes perfect sense - paragraphs start flowing nicely around that floated image without massive gaps.
Fiddle: http://jsfiddle.net/EvdV8/ Also: proper quotes. Also: img is a self-closing element so original markup was not valid.
If you're talking about side-by-side, you use a combination of "float: left;" and "display: inline-block" to force them next to each other.
.container {
margin: 0 auto;
text-align: left;
width: 960px;
}
#quote {
padding: 60px 400px 20px 13px;
text-align: center;
display: inline;
}
p#tagline-quote {
color: #777676;
font-family: Georgia,serif;
font-size: 20px;
font-style: italic;
line-height: 30px;
text-shadow: 1px 1px 0 #FFFFFF;
position:relative;
width:400px;
display: inline-block;
}
#q-image{
position:relative;
float: left;
}
Hey guys I am having trouble with keeping things aligned on my website. Here is an example of what the website should look like:
Now, here is where it makes unaligned.. When I resize the window to be smaller, the Text shifts over like so:
Currently these are the css attributes applied to my tag which is on the text.
#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}
#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}
What would the proper way to approach always having "Title" aligned with the corner of the darkest gray box?
Thanks.
Because your title container has padding inside it, the text "Title" is kept at least 85px from the screen edge. Because it's left-aligned, that means its left-hand edge is always at 85px.
So, when your sidebar gets smaller than 85px, the text cannot align with it.
You could fix this by fixing the size of the sidebar, by eliminating the padding-left directive and replacing it with an element sized as the sidebar is (or replacing it with the same amount as your sidebar width!), or by setting min-width on the sidebar.
Is this the kind of result you are after?
http://jsfiddle.net/2ScZZ/5/
html
<div id="container">
<div id="header_title_container">
<div id="sub_header_title_container">
<div id="header_title">
Title
</div>
</div>
</div>
<div id="middlebit">
</div>
</div>
css
#container {
background-color: lightgray;
}
#header_title_container {
width: 100%;
background-color: black;
}
#sub_header_title_container {
width: 900px;
margin: auto;
padding-right: 20px;
}
#header_title {
font: 33px verdana;
color: white;
padding: 50px 0 10px 0;
}
#middlebit {
margin: 0px auto;
width: 900px;
height: 100px;
background-color: gray;
}