The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Top & Bottom Padding Trouble
7nuns
post Oct 26 2006, 10:01 AM
Post #1





Group: Members
Posts: 1
Joined: 26-October 06
Member No.: 579
I am a complete novice when it comes to html so this is probably a very easy question.

I am trying to alter a blog template to my specs and I can't figure out how to lessen the distance between the 'date header', the 'post title and the 'content'.

Here is the code I've been playing around with:

<html>

<head>
<title><$BlogPageTitle$></title>
<style type="text/css" media="screen">
h1 {font-family:garamond;font-size:20px;border-bottom:dotted 1px #000000;color:#555555;padding-bottom:0px;margin-bottom:0px;}
h2 {font-family:garamond;font-size:14px; }
h2#archives {padding-top:5px;margin-top:5px;border-top:dotted 1px #999999;}
h3 {font-family:garamond;font-size:10 px;padding-top:2px;color:#555555;padding-bottom:0px;margin-bottom:0px;}
body {font-family:arial;font-size:10px;margin:3%;padding:0px;background:#ffffff;color:#000000;}
div.blogPost {padding-left:5%;padding-right:10%;}
div.byline {color:#555555;}
p#bloggerBug {padding-top:5px;}
.blogComments {padding-top:5px;color:#555555;padding-bottom:0px;margin-bottom:0px;font-weight:bold}
.blogComments .byline {font-size:1em;font-weight:normal;color:#555555;margin-right:10px;display:inline}
.blogComment {font-size:1em;margin:3%;color:#000000;font-weight:normal}
.deleted-comment {font-style:italic;color:gray;}
.comment-link {margin-left:.6em;}
</style>
<$BlogMetaData$>
</head>

<body>

<!-- To aid with the Blogger NavBar -->
<div id="wrap4">

<!-- Header -->
<h1><$BlogTitle$></h1>

<$BlogDescription$>


<!-- Blog Posts -->
<Blogger>
<BlogDateHeader>
<h3><$BlogDateHeaderDate$></h3>
</BlogDateHeader>
<a name="<$BlogItemNumber$>">&nbsp;</a>
<BlogItemTitle><h2><BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$><BlogItemURL></a></BlogItemURL></h2></BlogItemTitle>

<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline">posted by <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemAuthorNickname$>&nbsp;&nbsp;# <$BlogItemDateTime$></a><MainOrArchivePage><BlogItemCommentsEnabled>&nbsp;<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$> </div>
</div>
<ItemPage>
<div class="blogComments">

<BlogItemCommentsEnabled><a name="comments"></a>
Comments:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a> <$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>" title="permanent link">#</a> posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$></div>

<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
</BlogItemCommentsEnabled>
<br /> <br />
<BlogItemBacklinksEnabled>
<a name="links"></a>
Links to this post:
<BlogItemBacklinks>
<div class="blogComment">
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a>
<$BlogBacklinkDeleteIcon$>
<br />
<$BlogBacklinkSnippet$><br />
<div class="byline">
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</div>
</div>
</BlogItemBacklinks>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>

<br /> <br />
<a href="<$BlogURL$>">&lt;&lt; Home</a>
</div>

</ItemPage>
</Blogger>


<!-- Archive Links -->
<h2 id="archives">Archives</h2>
<p><BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>&nbsp;&nbsp;
</BloggerArchives>
<script type="text/javascript" language="Javascript">if (location.href.indexOf("archive")!=-1) document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");</script></p>



</div>
</body>
</html>

And here is the page:

http://moniquesevenans.homestead.com/files/m7imitations.html

Any help would be greatly appreciated. I just don't get this stuff. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JamieHarrop
post Oct 26 2006, 10:33 AM
Post #2


Advanced Member
****

Group: WDG Moderators
Posts: 129
Joined: 25-October 06
From: West Yorkshire, UK
Member No.: 570
The reason for the space between the date and the post header is because of the margin and/or padding on the h2 element.

CODE
h2 {font-family:garamond;font-size:14px; }


Change that to:

CODE
h2 {font-family:garamond;font-size:14px;margin:0;padding:0; }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2006, 02:19 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The default styling differers between browsers. You need to control both the bottom margin of the heading and the top margin of the P that follows it. I don't think any browser uses padding on those elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 05:57 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC