Forum Moderators: not2easy
With that in mind, you need to adjust the margins and padding with CSS. Here's how you do it:
With just an h1
h1 {
margin-bottom: 0;
padding-bottom: 0;
}
You can play with all kinds of variations of cours.
Now if you want to do it for h1's and h2's
h1, h2 {
margin-bottom: 0;
padding-bottom: 0;
}
And if you just want to select certain hx's to do this with:
<h1 class="nomargin">blah blah</h1>
.nomargin {
margin-bottom: 0;
padding-bottom: 0;
}
You can alter the complet appearance of an h1 also, try this:
h1 {
font: bold 1.5em arial, verdana, sans-serif;
padding: .4em;
border: 2px solid #000000;
color: #CC0000;
background-color: #F5F5F5;
margin: 0 0 20px 0; /* top right bottom left */
}
Fun isnt' it?
Nick
When trying to find out which elements generate what spaces, I put in a brigthly coloured border, like
H1 { border: 1px solid red; }
When I have found the offending element, I then adjust the margin and padding of it.
I obviously remove the border afterwards :-)
René.
Good news is, this kind of simple stuff is very reliable across most browsers...
Nick
René.
THE @import HACK
<link rel="stylesheet" href="netscape-styles.css" type="text/css"> <!-- stylesheet for netscape only -->
<style type="text/css">
@import url(proper-styles.css); <!-- stylesheet for css enabled browsers -->
</style>
For the differences between margin and padding see the CSS2 box-model specifications:
[w3.org...]
I'm using DW to make my site - if I use "browser-sniffing" or the "@import hack", isn't that going to make my nifty WYSISWG designing mode all ugly?
...not when you preview it in the relevant browser. It does mean you won't be able to edit the CSS for 4+ browsers from the original document but all you have to do is just open up the CSS document as well and change it about in code view...
If you have two elements, one above the other, the distance between their borders will be the maximum of the margin-bottom of the upper element and the margin-top of the lower element. They do not add up. Rather vertical margin gives a minimum required margin.
So if you have
H1 { margin-bottom: 3ex; }
H2 { margin-bottom: .5ex; }
P { margin-top: 1ex; }
You will have 3ex of vertical space between a H1 and a P, while you will have 1ex vertical space between a H2 and a P.
Padding, on the other hand, is inside the elements, and is added before the relative positions of the elements are decided. So if H1 had padding-bottom of 1ex and P had padding-top of 2ex, then there will be 3ex of vertical space between them, in addition to the margins as described above.
Padding and margin is not interchangeable vertically, not even if there is no border.
René.
if I understand right, if I don't use a border, there's no concrete difference between margin and padding!
Wrong. Check the link longhairedgenius gave earliet. The border just helps you see the difference.
Nick
Yes, of course I read through that before posting. But it wasn't nearly as clear as seindal's explanation. Many thanks!
(I know that they sniff out NN and serve up a much simpler css - I checked!)
in your css:
td a {
width: 100%;
display: block;
}
or a class for those links of course. There's a better way with divs though. Table layouts are graceless...
Nick
I'm using DW to make my site - if I use the "@import hack", isn't that going to make my nifty WYSISWG designing mode all ugly?
copied straight from a macromedia.com page :
To accomplish this, you first attach the style sheet for the older browsers using the link method. Then, select import to attach the style sheet for newer browsers. The resulting code will look similar to this:
<link href="oldbrowsers.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("newbrowsers.css");
-->
</style>
So, when I want the same effect NN4, I apply a NEGATIVE margin-top to the following <p> tag in the NN4 stylesheet. I can bring in the NN4 specialties with a javascript sniff for document.layers and I get the same effect on the old-timer browser.
