I have text within a paragraph tag that that fits snug on the bottom of a div, which you will see in this picture: http://i44.tinypic.com/e05s0z.png
I could put some padding at the bottom of the div to fix this, but there might be multiple divs, depending on how many items are on that page.
What I need to do, is put some spacing between the end of the very last div (class="article") and the text within the paragraph tag.
Here is the css for the article class
.article {
padding:10px;
overflow:auto;
}
Text w/i the paragraph tag
<p>Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
What should I do?
Give the final paragraph an id - #disclaimer, perhaps - then style that to have padding-top.
<p id="disclaimer">Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
and...
#disclaimer {
padding-top: 10px;
}
[EDIT]
An alternative to this, based on your comments, would be to surround the article(s) in a div, and give that div.class a bottom-margin/padding style.
If you have other paragraphs on your website and do not want to give it an id or class, then you can also use
.article + p {padding-top: 10px;}
Some old browsers will not be able to make out this selector, though
You could wrap your paragraph in a container that has padding at the top, so it doesn't matter what's above it.
For example, wrap it in a div with the following css
div.finaltext {
clear: both;
margin-top: 10px;
}
Here are your options as far as I see it:
Use the :last-child CSS3 pseudo
class to target the last div. This
isn't supported by IE at all, so
depends how important that browser
is to you whether this is an option,
but at least other browsers would
get the desired effect.
.article:last-child { padding-bottom: 20px; }
Add a class to the last div with the same style as above. This isn't ideal and may or may not be possible depending on how the divs are generated.
Add a class to the p tag with a padding-top value.
Use .article + p selector to target a p tag that is a direct sibling of .article. This is supported in IE7 (I think) but not IE6.
I would always give preference to #1 or #4 as it reduces clutter in the HTML, but as I mentioned IE could be a problem depending on your needs.
(thanks to Residuum for #4)
there is also the first-child and last-child css methods
note: check browser compatability for those you wish to support
It's the construction like this?:
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>
You use padding: 10px so the div has 10px inside margin.
If it's a CMS, I'm sure that the text of the paragraph could be wrapped inside another tag (DIV) or maybe a class for the (P). If this isn't the case, may I ask if there's a surrounding wrapper around all of the article divs and the p tag?
If that's the case then you can get to the P tag using CSS, if not, there's no way you achieve this in every browser.
OR... I realized you could do a trick here. but you've got to be sure you have a selectable div on top of the article divs.
It should be something like this:
.article { margin-top: -5px; margin-bottom: 15px; }
so, every div.article will move 5px up, leaving 10px of real margin betwen article divs. but the last one won't have the -5px move up, so you'll end up with 15px bottom margin for the P tag.
You could play with the numbers to make it the most comfortable number. And in case you need more control, then use the padding values you set to 10px in every way and set them accordingly to compensate the margin offset.
Could you simply add a couple of <br/> tags after the last div?
Related
What is the CSS best practice when you want to give space to an element placed just after a first element.
Asume this html
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
Should you use this css
.a-block { margin-bottom: 10px; }
or
.another-block { margin-top: 10px; }
?
i would use :nth-child width margin-top
div:not(:first-child) {
margin-top: 10px
}
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
<div class="another-block-1">ipsum</div>
<div class="another-block-2">ipsum</div>
In my opinion, margin-top in the second block is a better practice.
Indeed, the first div shouldn't take care about others divs since it was the first.
If the second is removed I shouldn't have to remember to remove margin-bottom from the first.
Using margin-top would eliminate the need of using a next sibling selector. It also removes the need of removing the bottom-margin from the last-child to avoid padding discrepancies when using text in panels or boxes.
Since nobody has mentioned it yet, I wanted to add that you could use both at once. This will cause them to meld together through a feature called margin collapsing. In certain situations this could as well be the best practice since you can use it to declare "this element need at least this much space below it". Note that margin collapsing may backfire on you if you accidentally use properties that disable it, such as floats, borders or flexbox.
.a-block {
margin-bottom: 10px;
}
.another-block {
margin-top: 10px;
}
div {
background-color: #e0e0e0;
}
.float {
float: left;
clear: both;
width: 100%;
}
<div class="a-block">Only 10px margin</div>
<div class="another-block">between these elements</div>
<hr />
<div class="a-block float">Double margin because</div>
<div class="another-block float">of the float</div>
It is completely up to the context in which the CSS is needed - is the short answer. It depends whether you need the first element pushed down as well as all the other elements. or you need the first element to be flush with the top of the parent but you need the bottom element to have a margin at the bottom.
The common sense thing to think is that the first element is already there so the second element will surely need to be "pushed" down, so the natural thing to do would be to add margin bottom to the previous element (at least that is the way that my brain works).
Current CSS browser support dictates that this is the preferred method. Due to the fact that, in CSS, there is a "next sibling" selector (~), an "adjacent element" selector (+) , and :first-child is more widely supported than :last-child is (purely because it is more difficult to implement in a browser than :first-child is). Namely this :last-child support issue is IE8 but this still affects us today when developing for certain clients.
There are no previous sibling selectors, so this makes me prefer the method of adding margins and paddings to the bottom of elements and not the top. Purely just to keep everything in my CSS to be using the same principal of "pushing things down from above or selecting the first element"
You should always be consistent on how you apply the styles.
For example, if you have a hero and think about the inside elements. For example, you have a title, optionally a button and optionally text below that. You can end up with having margins or padding that should not be there and were intended to have a button there.
Also, the point about collapsing margins is important when you have a design with different use cases. Padding doesn't collapse but if used improperly, can cause elements not to center 'properly'.
I have two lines that have space between them. Like the one below....
<h2> Something Something <h2>
<h4> Something here too </h4>
I want it to look like this:
<h2> Something Something <h2>
<h4> Something here too </h4>
The space is shown in the browser. I used the tags just to make it clear.
How to reduce the space within the orange rectangle ?
First, ensure that padding and margin on your header elements is 0.
After that, you can adjust their line-height values to get the amount of space you like. Example: http://jsbin.com/afivoq/4/edit
Another option for you! You can apply a negative margin-top on header elements which follow other header elements, like so:
h2 + h4 { margin-top: -20px; }
See the jsbin for updated example.
I'd set all padding and margins to 0.
h4, h2 { padding:0; margin:0; }
This is an oversimplification of your code most likely but it'll get the job done.
Add it in your css:
h2{
margin-bottom: 10px; //something smaller
}
h4 {
margin-top: 10px; //Whatever you like
}
Your second <h2> isn't a close tag </h2> so your adding an extra H2 element. Also take a look at this example with Firebug installed. Firebug has a feature called Layout which will show you where the space is coming from:
Resetting your margin and padding for the header tags like everyone else is saying is a great start. The best advice I can give someone who is learning CSS is to get chrome.
Right-click the element you want to change and hit "Inspect element." On the right hand side, you can alter the CSS on the fly. Then you can copy and paste the results into your application. Chrome also has the ability to save your CSS code.
I'm trying to "stack" some text, but have one small word inserted among the big words, like so:
THIS
IS AN
important
SENTENCE
I have the HTML laid out with the main text in its own class, with the font size at 8em, and a span in the middle for the smaller word. In the CSS, I've set up a class for "important":
.important {
font-size: 0.5em;
line-height: 0.5em;
}
THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>
...and it's there, and looks great, BUT the line-height doesn't seem to take. The word "important" is 0.5em in size, but the line-height is just as tall as the rest of the words, resulting in a giant space after IS AN and before "important".
I've tried with the <br> both inside and outside the span, on both sides of "important", like
THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>
...but I just can't seem to get the line-height to take. What am I doing wrong?
This is a side-effect of the markup used. Replace the line breaks (<br>) with block-level containers to achieve the desired behavior (stack the words on one another), e.g.:
HTML
<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>
You can also lose the line-height declaration, as it no longer serves a purpose:
CSS
body {
font-size: 8em;
}
.important {
font-size: 0.5em;
}
References
A live demo on dabblet
HTML block level elements on Mozilla Developer Network
Note: You may use any block level elements, e.g. div containers or p elements. Paragraphs will be more appropriate semantically, but you should be aware of any default styles applied to them such as thick padding, bottom margins etc..
Line height is a tricky thing to control with precision, because of the vagaries in the way different browsers and OS interpret the how the calculation is made. Adam Twardoch wrote about how line height varies with browsers over at webfonts.info, where there's also a more general piece on working with line-height.
Line-height controls aren't really intended for more 'graphic' layouts, but are a part of the designers toolbox for setting legible paragraphs. As Eliran said, use block elements for what you're trying to do. That way you can control positioning far more accurately.
I don't know if this is the most kosher way to do it, but I've had success giving negative margins to text like that instead of adjusting line height.
I usually prefer <p> for adjusting line height. Try something like this:
CSS:
p.important
{
font-size: 0.5em;
line-height: 0.5em;
}
HTML:
THIS<br>IS AN<br><p class="important">important</p><br>SENTENCE<br>
I have a <div> styled like a box:
.box {
border:2px solid #ccc;
background:#eee;
padding:1em;
margin:1em;
}
In this box, there could be any number of any type of child elements in any order:
<div class="box">
<h3>Howzit goin</h3>
<p>Here comes a list:</p>
<ul>
<li>I don't know what</li>
<li>this box will contain</li>
<li>but it could be anything</li>
</ul>
</div>
Most or all of the child elements inherit bottom margin of various lengths from the base typography stylesheet:
/* Example global typography */
p {margin:0 0 1.5em;}
ul {margin:0 0 2.5em;}
Which produces output like this:
...but we want to normalize the "padding" of the box so that it appears equal on all sides:
.box :last-child would be too easy, this has to work in at least IE8 as well as
modern browsers (but it could be used in conjunction with an IE-only method).
I don't want to use extra markup or javascript.
Is there any other CSS trick I can use to get the output I want?
Fiddle: http://jsfiddle.net/yuXcH/1/
As you can read in this question, even if it's about 2 years old, there's no "easy" way to do this in IE8 (the other thread is just about IE6/7, but things haven't changed - IE8 doesn't support :last-child either).
The best way, in my opinion, is to manually add a class last-child to your last child so you can do:
.box .last-child{ margin-bottom: 0; }
The alternative is using javascript, which is easier if you have a lot of boxes. With jQuery, it would just look like this:
$(function(){
$(".box :last-child").css("margin-bottom","0");
})
The only "pure CSS" solution I can think of is changing all of your padding/margins to always result in a box with same padding on all sides like Lollero suggested, but this will, compared to your previous solution, result in different margins between the elements inside of the box.
I would probably compensate the extra space by having padding or margin in both top and bottom.
http://jsfiddle.net/lollero/yuXcH/2/
Also some padding change in top and/or bottom of the parent element can be used.
http://jsfiddle.net/lollero/yuXcH/3/
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.