Is there a way to decrease the space between two H1's i.e.,
Happy Holidays!!!
From Me
Normally I'm assuming there is a default amount of space between 2 h1's.
But is there a way to decrease the space?
Thanks!
If you only want to decrease the space between those particular lines and not affect other headings, you can add an in-line style to the <h1> tags like this:
<h1 style="margin:0;">
If you want a small space, replace the 0 (Example: 5px, 10px).
<h1> tags have default margins.
Write:
h1{margin:0;}
DEMO.
Note that the right solution is not to use two H1's, but rather a line break.
Try viewing this with default styling and you will see:
<H1>Happy Holidays!!<BR>
From Me</H1>
<H1>And All The Best in The New Year</H1>
There are margins around headings for a reason; you usually want to keep them.
In the case of one H1 followed by another, what you can do is make the CSS rule so that it applies just to that case. Use the H1 + H1 selector to just give the second H1 a smaller margin-top.
you need
h1{
margin:0;
line-height:1;
}
proof
ps:just play around with the buttons, and dont let it mix your mind that line-height has a numeric value in its css but px suffix can be used to animate with jQuery
Related
I've read a few articles on vertical rhythm and web typography but there's an aspect that's never really discussed.
I prefer having much space (or no extra margin/padding) between a headline and it's first paragraph as this visually groups the headline with it's content much better.
I've tried removing margin-bottom from headlines but because of margin collapse, the margin-top on paragraphs or ul's gets used - so you end up with the same vertical space between the headline and it's content.
Is there a way to say to the browser that the first paragraph shouldn't have any margin between it and it's headline?
.main p:first-child doesn't work because the browser doesn't look for the first instance of a p (unless it is the very first item which it won't be because there's always a headline before it).
Hope that makes sense - any pointers in the right direction would be much appreciated.
Cheers
Try with this selector then :
.headline + p {
/*Styles to remove*/
margin-top:0;
}
With this you select any p that is right after a headline
You can use the magic of negative margin-bottom on your header.
h1 {
margin-bottom:-20px;
}
This is the code:
#content{width:400px;}
h2{margin:0px;line-height:100px;}
<div id="content">
<h2>Hello world. Hello world. Hello world. Hello world. Hello world.</h2>
<span>goodbyeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</div>
See how the code work here
I need a way to put the "goodbyeeeeee.." string 2px below the h2 headline without ( if possible ) using margin with negative numbers ).
Obviously I need also the space between the 2 lines of the h2 headline.
EDIT: I can also avoid to use line-height but I need the space between the 2 lines of the h2 headline.
I don't think it's possible to change the way line-height behaves. It puts the text of the h2 in the middle of the 100px high line.
So, sorry, but no. Unless you find a way to get rid of the line-height property, you're stuck with using negative margins. Or relative positions.
Edit:
If you do use a negative margin, please put in on the h2 itself, not on any other element that happens to come after it in your current page. The h2 is causing the problem, so that's where you should solve it.
Setting the height could do it, depending on the situation.
h2{margin:0px;line-height:100px;height: 157px;}
If you want the large spacing between the two lines of the h2 but want the span text hugging the bottom of the second line of the h2, you can set the span to display: block to enforce the negative margin:
h2{margin:0px; line-height:100px;}
span{display: block; margin-top:-40px;}
I have declared common css classes for common margin and padding classes in my css so that i can use them without making other css declarations too specific.
For example :
.padTB5{padding:5px 0;}
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;}
.mTop5{margin:5px 0 0;}
Is this method right??
If not then why?
If yes then which is better margin or padding? (I know margin issues with browsers)
Please guide... thanks in advance :)
This is bad practice as classes should be semantic - that is they should describe the type of thing you are styling. For example "blog-header", "primary-this", "secondary-that" etc.
In practice, the downside to using classes as you describe is that if your visual design changes and you need different sized margins or padding, then you will need to change the class names too - which means changes to both the CSS and HTML. Or if you just change the CSS then the class names no longer describe what they're for. This approach is not much better than using inline styles.
Margins and padding are different things and behave in different ways. Margins can collapse in certain circumstances whereas padding doesn't. Padding will include background images or colours whereas margin doesn't. Borders will display between padding and margin.
In my opinion, this is not optimal, unless you do it right.
In your markup, you now have something like this:
<div class="pad10 mTop10">
and you have that all over your site.
What if you want to change your CSS to have a little extra margin/padding?
.pad10 { padding: 12px }
.mTop10 { margin: 12px 0 0 }
Oh. Those class names aren't looking so sensible anymore: you have to either put up with wrongly named selectors, or go Find and Replace in all your files.
What if you decide that some elements with .pad10 need to have red text?
.pad10 { padding: 12px; color: red }
Now the class name makes even less sense.
It might be alright to do this type of thing if you also apply a relevant (semantically sensical) class/id to each element in your HTML:
<div class="contactErrorMessage pad10 mTop10">
because that way, at least you can do:
div.contactErrorMessage { color: red }
You shouldn't do that. Naming classes like left or margintop20 is unadvised. You should use classes like content or sidebarBox, that describe the content.
Let's say you want to change the margin-top from 10px to 1em. Using your method either
mTop10 will have margin-top: 10px;
or you have to change your className to mTop1em
None of this is good.
See w3.org goodclassnames about this.
Also see w3.org about box model for margin, padding.
Margin is different then padding. Margin is the space out side the box, padding is the space inside the box. Both margin and padding are cross browser compatible. Your declarations are correct although it is not a recommended practice to create classes for margins or padding. One good use to this is creating a class for rounded corners or shadows, where you can quickly apply round corners by specifying the round corner class.
Is it good to add line-height in body{line-height:1.5} or it would be better if i add separately for tag by tag like p{ line height:1em} etc.
Edit:
body {line-height:in em} create problem with if we put image with float inside
Edit: 24 April 2010:
If i have to add different line heights to elements
like
p {line-height: 1.4}
h1 {line-height:1.6}
h2 {line-height:1.2}
ul li {line-height:1.1}
then shouldn't i use line height in body {line-height:1.4}
if body {line-height:1.4} and h1 {line-height:1.6} then what would be line height for h1?
It just depends. If you put it in the body then you get to be lazy and not worry about ever doing it again, but your going to lose control because everything on the page will have the line-height set to 1.5. Whereas if you declared it in each tag, you gain lots of control, but will have to do more work.
Personally I would go for the tag-by-tag solution, but I'm a control freak, so...
A word of caution on putting line-height on the body tag:
If you specify a height in percent, you would intuitively expect to enlargen / shrink all line-heights (e.g. 50% shrink to half, 200% duplicate space, 100% nothing happens).
body {
line-height: 120%
}
This is not the case. For paragraphs and normal-sized text it works fine. But for headings it's a disaster, since the same line-height as for normal text gets applied... See what happens here: https://jsfiddle.net/11jgwzzu/ .
It works, if you use for example 1.5 instead of 150%.
With this in mind, I think it's quite okay to use something like this:
body {
line-height: 1.61 // Golden Ratio
}
to make the entire page a bit more spacious. You can still overwrite this behaviour for some specific elements if you want to, but I often find I don't even have to overwrite it since I think line-height: 1.61 looks pretty good everywhere.
The obvious answer is specifying it once in the body is less work (and overhead).
There is a definite CON: if you use a unit (like 'px') in the line-height, and you specify it on the body, it will be used like that throughout the page. This may create crazy results with fe big page titles overlapping eachother or tiny aside text getting ridiculous whitespace between lines. If you dont use a unit, and specify it nowhere else, the vertical rythm of the page becomes messy.
Read this: http://www.alistapart.com/articles/howtosizetextincss/
Specifying a unit (in this case, px) when setting the line-height
enables the value to be inherited throughout the page. If a unitless
line-height had been specified, the multiplier would have been
inherited, resulting in line-heights being rendered proportionally to
the text size, thus breaking the vertical rhythm.
It is common in websites to never use a unit on line-height, which is one of the reasons why the most websites look a bit messy, designwise. Just look at this page, already :-)
I would specify a unitless line-height on the body element, and use a unit-based line-height on a designated 'content' area where you know exactly what sort of content to expect (the 'content body').
*-pike
put it where it's appropriate
if you want line-height: 1.5 on everything within the body, put in on the body
if you only want line-height: 1.5 on everything in the main content area, put it on the div id="MainContent"
etc.
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>