[SOLVED] The Gap between the P tag

Madball · #1 Nov 6th, 2007, 10:36

Hi all,

I've been learning CSS for a couple of weeks now and I have been enjoying it. I've come to a problem which I think you maybe able to help me out with. Currenrtly I have a

HTML: Select all

h1

tag that has CSS code assigned to it and a

HTML: Select all

tag that also has CSS code assigned to it, but when I start trying in text the gap between the h1 and p tags is huge and I would like to decrease it. Can this be done in CSS? I've attached the files so you can see what I'm talking about.

Kind Regards

Madball.

delusion · #2 Nov 6th, 2007, 10:41

could you just paste the code please? Easier to read..

Rakuli · #3 Nov 6th, 2007, 10:42

You can adjust the margin on the h1 or the p or both..

For example...

Code: Select all

h1 {
margin: 0.1em;
}
p
{
margin: 3px;
}

or other values to your liking..

Cheers

EDIT : Just looked at your code, you have a 25px top margin on the p tag, and 6 px padding on top and bottom of both h1 and p tags.. this totals 37 px of space between them Look at decreasing this

AdRock · #4 Nov 6th, 2007, 10:48

Quote:

Originally Posted by Rakuli

You can adjust the margin on the h1 or the p or both..

For example...

Code: Select all

h1 {
margin: 0.1em;
}
p
{
margin: 3px;
}

or other values to your liking..

Cheers

EDIT : Just looked at your code, you have a 25px top margin on the p tag, and 6 px padding on top and bottom of both h1 and p tags.. this totals 37 px of space between them Look at decreasing this

Exactly what i was going to suggest or you could just add margin-top and/or margin-bottom

Madball · #5 Nov 6th, 2007, 10:55

OK I think I have it working, just so you can see what I've done here is my code.

HTML

HTML: Select all

<body id="main-content">
<div id="character-dkp"> Name: <a id="????">PHP Link</a> Points: <a id="????">PHP Link</a></div>
<div id="time-date">Time & Date</div>
<br>
<br>
<h1>Hello World</h1>
<p>Hello world</p>
</body>
</html>

CSS

HTML: Select all

/* ---------- Body Configuration ---------- */
#main-content
 {
 margin: 0px;
 background-color:#666666;
 }
/* ---------- Top Bar Confirguration ---------- */
#character-dkp
 {
 position: absolute; left: 0px; top: 0px;
 border-bottom: 1px solid #FFFFFF;
 background-color: #000000;
 width: 50%;
 height: 15px;
 text-align: left;
 padding: 2px;
 font-family: verdana;
 font-size: 9px;
 color: #FFFFFF;
 }
#time-date
 {
 position: absolute; right: 0px; top: 0px;
 border-bottom: 1px solid #FFFFFF;
 background-color: #000000;
 width: 50%;
 height: 15px;
 text-align: right;
 padding: 2px;
 font-family: verdana;
 font-size: 9px;
 color: #FFFFFF;
 }
/* ---------- Font Configuration ---------- */
h1
 {
 line-height: 17px;
 font-family: verdana;
 font-size: 14px;
 font-style: bold;
 color: #FFFFFF;
 padding: 6px 0px;
 margin: 1em;
 border-bottom: solid 1px #b5b1a7;
 }
p
 {
 line-height: 17px;
 font-family: verdana;
 font-size: 11px;
 color: #FFFFFF;
 padding: 6px 0px;
 margin: 3px;
 }

Rakuli · #6 Nov 6th, 2007, 11:00

Yeah, that should reduce it to about 29 px, but if it works for you great!

MikeHopley · #7 Nov 6th, 2007, 11:00

You can also specify a different margin for <p>s that immediately follow an <h1>. For example, suppose you don't want the <h1> bottom margin and <p> top margin to "stack":

Code: Select all

p { margin-top: 1em; }

h1 { margin-bottom: 1em; }

h1+p { margin-top: 0; }

This will remove the top margin on all paragraphs that immediately follow a level one heading, giving you finer typographic control. IE6 ignores this rule.

Lchad · #8 Nov 6th, 2007, 11:03

Hey Madball.. I'm going to butt into this thread...
Since you are just learning, please do NOT use absolute positioning.
Yes absolute positioning is a tool that we have in css but it is not the best tool to use because it is an advanced tool.

To avoid using absolute positioning I normally have one giant wrap div that is centered on the screen. Everything else goes inside.
Header first (for example), Followed by navigation, followed by a left column, then a right column. None of which would need absolute positioning because they are placed in order, and fall inside the wrap.

Absolute positioning can mess up stuff when viewed on a screen resolution other than what you are using.

Madball · #9 Nov 6th, 2007, 11:16

Hi Lchad, Thanks a lot for the information, just want to query you with the absolute positioning stuff. What I want to see on my webpage is a black bar along the top of the screen which displays time & date plus some other information about the person logging in. Then a couple of line breaks down have the head, content and footer. How would I go about using relative positioning in this case? if you don't understand what I mean, I've attached the 2 files I'm working on to my first post. Also I would like to thank the other people for replying to my post about the gap between tags, got that working

Kind Regards

Madball

Lchad · #10 Nov 6th, 2007, 11:30

Well you don't need relative positioning either.

Here is an example for you to play with. Load it into your software and see what I did. This is how you should attempt to style all basic sites in my opinion.

Here is the css:

Code: Select all

#wrap {
    width: 780px;
    margin: 0 auto;
    }
#blackline {
    width: 780px;
    margin: 0 auto;
    padding: 4px 20px 4px 20px;
    margin-bottom: 50px;
    background: #000000;
    font: 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    overflow: hidden;  
    }    
    
.time {
    width: 300px;
    float: left;
    }
.login {
    width: 300px;
    float: right;
    }    
#header {
    width: 780px;
    margin: 0 auto;
    background: #990000;
    }    
#content {
    width: 780px;
    margin: 0 auto;
    background:#FFFFCC;
    }    
#footer {
    width: 780px;
    margin: 0 auto;
    background: #000000;
    }

Here is the html:

Code: Select all

<body>
<div id="wrap">
    <div id="blackline">
      <div class="time">Time and Date</div>
      <div class="login">Login info.</div>
    </div><!--end blackline div -->
    <div id="header">Header 
Image 
Here<br />
 Blah<br />
Blah<br />
Blah
  </div>
  <div id="content">Content of site goes in this div!<br />
    Blah<br />
    Blah<br />
    Blah<br />

</div>
    <div id="footer">Footer here!</div>

</div><!--end wrap div -->
</body>
</html>

If you have any questions, just ask!

MikeHopley · #11 Nov 6th, 2007, 11:36

As Linda said, avoid absolute positioning.

In fact, avoid using the CSS "position" attribute altogether. That means:

No position: absolute
No position: relative
No position: fixed

Learn about floats for layout instead.

Madball · #12 Nov 6th, 2007, 11:52

Thanks a lot all, that has made me learn quite a lot there, I did see someone's website a couple of weeks ago and said I wonder how he did that, now you've explained and it looks/works great.

Lchad · #13 Nov 6th, 2007, 17:17

You're welcome!!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] 1 solved problem causes another	delusion	Web Page Design	9	Dec 21st, 2007 08:12
Adding "Topic Solved" for solved topics	AdRock	Webforumz Suggestions and Feedback	21	Oct 4th, 2007 15:08

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] The Gap between the P tag