please help, simple HTML problem

luizarios · 12-06-2011, 09:58 AM

Hi, I am coding this page:

http://www.gadgetgeeky.co.uk/alpha/produtos.html

The main page has a header (h3) which I wanted to bring close to the top but for some reason if I change the CSS to H3{margin-top:-20px;} then the whole <div> move (I just want the header to come up), please advise what am I doing wrong?

Thanks

PixelPusher · 12-06-2011, 04:16 PM

It s block level element and when you decrease the top value all other elements below will adjust accordingly. It's called document flow. If you want to keep the div below in the same location try adding a bottom margin. Also the heading element is bold by default so there is no need to declare this in the css rule.

For example:

Code:

div#products {
margin:-20px 5px 30px;
font-size: 24px;
color: red;
}

Alternatively, you could also try using the css properties "height" and "line-height".

12-06-2011, 09:58 AM	#1
luizarios New Member Join Date: Dec 2011 Posts: 1	please help, simple HTML problem Hi, I am coding this page: http://www.gadgetgeeky.co.uk/alpha/produtos.html The main page has a header (h3) which I wanted to bring close to the top but for some reason if I change the CSS to H3{margin-top:-20px;} then the whole <div> move (I just want the header to come up), please advise what am I doing wrong? Thanks

12-06-2011, 04:16 PM	#2
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	It s block level element and when you decrease the top value all other elements below will adjust accordingly. It's called document flow. If you want to keep the div below in the same location try adding a bottom margin. Also the heading element is bold by default so there is no need to declare this in the css rule. For example: Code: div#products { margin:-20px 5px 30px; font-size: 24px; color: red; } Alternatively, you could also try using the css properties "height" and "line-height". __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode