• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

Website Question

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.
F

Frodo Baggins

New Member
Joined
Aug 29, 2001
Location
City of Dreaming Spires
Examine the following website:
http://michellesthings.blogspot.com/

I made the banner at the top, and I would like to connect the banner with the header (in dark green), so there is no gap. However, I do not know how. The source is here:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title><$BlogPageTitle$></title>
  
  <$BlogMetaData$>
  <img border="0" src="http://img.photobucket.com/albums/v466/ptrinh/michellebanner.jpg" width="760" height="310">

  <style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: 	  Thisaway (Green)
Designer: Dan Rubin
URL:      www.superfluousbanter.org
Date:     29 Feb 2004
----------------------------------------------- */


/* global
----------------------------------------------- */
body {
margin: 0;
padding: 0;
text-align: center;
min-width: 760px;
background: #9dce43 url('http://www.blogblog.com/thisaway_green/bg_body.gif') repeat-x left top;
font-family: helvetica, arial, verdana, "trebuchet ms", sans-serif;
color: #4b6320
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #e8f4d3;
border-right: 6px solid #e8f4d3;
color: #92ba47;
}

code {
color: #a7ba80;
}

hr {
display: none;
}


/* layout
----------------------------------------------- */
#wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
}

#blog-header {
padding-bottom: 15px;
background: url('http://www.blogblog.com/thisaway_green/bg_header_bottom.gif') no-repeat left bottom;
}

#blog-header div {
background: #4b6320 url('http://www.blogblog.com/thisaway_green/bg_header.gif') repeat-x left bottom;
}

#main-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url('http://www.blogblog.com/thisaway_green/bg_main_wrapper.gif') repeat-y left top;
}

#main-content {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
}

#content-wrapper {
background: url('http://www.blogblog.com/thisaway_green/bg_content.gif') repeat-x left top;; padding-left:0; padding-right:0; padding-top:22px; padding-bottom:0
}

.post {
margin: 0 16px 14px 29px;
padding: 0;
border-bottom: 3px solid #e8f4d3;
}

#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #e4f0ce;
background-color: #eff5e4;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
width: 269px;
color: #55761c;
background: url('http://www.blogblog.com/thisaway_green/bg_sidebar.gif') repeat-x left top;; margin-left:0; margin-right:3px; margin-top:0; margin-bottom:0
}

#sidebar {
background: url('http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif') repeat-y 179px 0;; padding-left:14px; padding-right:11px; padding-top:7px; padding-bottom:0
}

#profile-container {
margin-bottom: 20px;
}

#blog-footer {
padding-top: 15px;
background: url('http://www.blogblog.com/thisaway_green/bg_footer_top.gif') no-repeat left top;
}

#blog-footer div {
background: #374915 url('http://www.blogblog.com/thisaway_green/bg_footer.gif') repeat-x left top;
}


/* headings
----------------------------------------------- */
#blog-header h1 {
margin: 0;
color: #f9feee;
font-size: 30px;
line-height: 25px;
background: url('http://www.blogblog.com/thisaway_green/icon_header.gif') no-repeat 16px 26px;; padding-left:84px; padding-right:0; padding-top:26px; padding-bottom:0
}

h2.date-header {
margin: 0;
font-size: 10px;
text-transform: uppercase;
color: #b5c88f;
background: url('http://www.blogblog.com/thisaway_green/icon_date.gif') no-repeat 13px 0;; padding-left:29px; padding-right:0; padding-top:0; padding-bottom:0
}

.date-header span {
background: url('http://www.blogblog.com/thisaway_green/bg_date.gif') no-repeat 0 0;; margin-left:5px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:25px; padding-right:25px; padding-top:0; padding-bottom:0
}

h2.sidebar-title {
font-size: 14px;
color: #a9bd80;
background: url('http://www.blogblog.com/thisaway_green/icon_sidebar_heading.gif') no-repeat 0 45%;; padding-left:36px; padding-right:0; padding-top:1px; padding-bottom:0
}

#profile-container h2.sidebar-title {
color: #809552;
background: url('http://www.blogblog.com/thisaway_green/icon_sidebar_profileheading.gif') no-repeat 0 45%;
}

.post h3.post-title {
margin: 13px 0 0 0;
padding: 0;
font-size: 18px;
color: #92ba47;
}

#comments h4 {
margin-top: 0;
font-size: 16px;
}


/* text
----------------------------------------------- */
#blog-header p {
margin: 0;
padding: 7px 16px 0 84px;
color: #f9feee;
font-size: 10px;
font-weight: bold;
line-height: 14px;
}

.post-body div {
font-size: 13px;
line-height: 18px;
margin: 10px, 0px;
}

.post-body blockquote {
margin: 10px 0px;
}

p.post-footer {
font-size: 11px;
color: #a9bd80;
text-align: right;
}

p.post-footer em {
display: block;
float: left;
text-align: left;
font-style: normal;
}

p.comment-data {
font-size: 12px;
}

.comment-body p {
font-size: 12px;
line-height: 17px;
}

.deleted-comment {
  font-style:italic;
  color:gray;
  }

#sidebar p {
font-size: 12px;
line-height: 17px;
margin-bottom: 20px;
}

#sidebar p.profile-textblock {
clear: both;
margin-bottom: 10px;
}

.profile-link {
background: url('http://www.blogblog.com/thisaway_green/icon_profile.gif') no-repeat 0 0;; padding-left:17px; padding-right:0; padding-top:0; padding-bottom:0
}

p#powered-by {
margin: 0;
padding: 0;
}

#blog-footer p {
margin: 0;
color: #f9feee;
font-size: 10px;
line-height: 14px;
background: url('http://www.blogblog.com/thisaway_green/icon_footer.gif') no-repeat 16px 0;; padding-left:55px; padding-right:0; padding-top:0; padding-bottom:15px
}


/* lists
----------------------------------------------- */
.profile-data {
font-size: 13px;
line-height: 17px;
}

.post ul {
padding-left: 32px;
list-style-type: none;
font-size: 13px;
line-height: 18px;
}

.post li {
background: url('http://www.blogblog.com/thisaway_green/icon_list_item.gif') no-repeat 0 3px;; padding-left:17px; padding-right:0; padding-top:0; padding-bottom:4px
}

#comments ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#comments li {
background: url('http://www.blogblog.com/thisaway_green/icon_comment.gif') no-repeat 0 3px;; padding-left:17px; padding-right:0; padding-top:0; padding-bottom:1px
}

#sidebar ul {
margin: 0 0 20px 0;
padding: 0;
list-style-type: none;
font-size: 12px;
line-height: 14px;
}

#sidebar li {
background: url('http://www.blogblog.com/thisaway_green/icon_list_item.gif') no-repeat 0 3px;; padding-left:17px; padding-right:0; padding-top:0; padding-bottom:4px
}


/* links
----------------------------------------------- */
a {
color: #6a9718;
font-weight: bold;
}

a:hover {
color: #4d7307;
}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
   so we hide these two declarations from it */
background/* */:/**/url('http://www.blogblog.com/thisaway_green/icon_comment.gif') no-repeat 0 45%;
padding-left: 14px
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
background: url('http://www.blogblog.com/thisaway_green/icon_comment.gif') no-repeat 0 45%;
padding-left: 14px
}

#sidebar ul a {
color: #96c73d;
}

#sidebar ul a:hover {
color: #6f9d1c;
}

#powered-by a img {
border: none;
}

#blog-header h1 a {
color: #f9feee;
text-decoration: none;
}

#blog-header h1 a:hover {
color: #cdd9b4;
}

h3.post-title a {
color: #92ba47;
text-decoration: none;
}

h3.post-title a:hover {
color: #638622;
}


/* miscellaneous
----------------------------------------------- */
.post-photo {
padding: 3px;
border: 1px solid #dbebbd;
}

.profile-img {
display: inline;
}

.profile-img img {
float: left;
margin: 0 10px 5px 0;
padding: 3px;
border: 1px solid #dbebbd;
}

.profile-data strong {
display: block;
}

.clear {
clear: both;
line-height: 0;
height: 0;
} 
  </style>

</head>
<noembed>

<body></noembed>

<!-- #wrapper for centering the layout -->
  </p>
<div id="wrapper">

<!-- Blog Header -->
<div id="blog-header"><div>
  	<h1>
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
	<$BlogTitle$>
	<ItemPage></a></ItemPage>
  </h1>
  	<p><$BlogDescription$></p>
</div></div>

<!-- Begin #main-wrapper - surrounds the #main-content and #sidebar divs for positioning -->
<div id="main-wrapper">

<!-- Begin #main - This div contains the main-column blog content -->
<div id="main-content">
<!-- Begin #content-wrapper -->
<div id="content-wrapper">

<Blogger>

    <BlogDateHeader>
  <h2 class="date-header"><$BlogDateHeaderDate$></h2>
  </BlogDateHeader>
  
  
  <!-- Begin .post -->
  <div class="post"><a name="<$BlogItemNumber$>"></a>
  
    <BlogItemTitle>
    <h3 class="post-title">
	 <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
	 <$BlogItemTitle$>
	 <BlogItemUrl></a></BlogItemUrl>
    </h3>
    </BlogItemTitle>
    
    <div class="post-body">
    
      <div>
      <$BlogItemBody$>
      </div>
    
    </div>
    
    <p class="post-footer">
    	<em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>  
    	<MainOrArchivePage><BlogItemCommentsEnabled>
         <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
      </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$>
    </p>
  
  </div>
  <!-- End .post -->
  
  
  <!-- Begin #comments -->
 <ItemPage>

  <div id="comments">

	<BlogItemCommentsEnabled><a name="comments"></a>
    
    <h4><$BlogItemCommentCount$> Comments:</h4>
    
    <ul>
      <BlogItemComments>
      <li id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
      	<p class="comment-data">At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>, <$BlogCommentAuthor$> said…</p>
        <div class="comment-body">
         <p><$BlogCommentBody$></p>
	  <$BlogCommentDeleteIcon$>
        </div>
      </li>
      </BlogItemComments>
    </ul>
	
	<p class="comment-data">
    <$BlogItemCreate$>
    </p>
  
  </BlogItemCommentsEnabled>
	
	<p class="comment-data">
	<a href="<$BlogURL$>"><< Home</a>
    </p>
    </div>

</ItemPage>
  <!-- End #comments -->

</Blogger>

</div>
<!-- End #content-wrapper -->

</div>
<!-- End #main-content -->


<!-- Begin #sidebar-wrapper -->
<div id="sidebar-wrapper">
<!-- Begin #sidebar -->
<div id="sidebar">
 
  <!-- Begin #profile-container -->
   
   <$BlogMemberProfile$>
   
  <!-- End #profile -->
    
        <MainOrArchivePage>
  <h2 class="sidebar-title">Links</h2>
    <ul>
    	<li><a href="http://news.google.com/">Moo</a></li>
   </ul>
  </MainOrArchivePage>
  
  <MainOrArchivePage>
  <h2 class="sidebar-title">Archives</h2>
  
  <ul class="archive-list">
   	  <BloggerArchives>
    	<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
	  </BloggerArchives>
      <ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
  </ul>
  </MainOrArchivePage>
  
  
  <p id="powered-by"><a href="http://www.blogger.com">
  <img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" width="88" height="31" /></a></p>


</div>
<!-- End #sidebar -->
</div>
<!-- End #sidebar-wrapper -->

<div class="clear"> </div>
</div>
<!-- End #main-wrapper -->

<div id="blog-footer"><div>
	<p><!-- If you'd like, you could place footer information here. --> </p>
</div></div>

</div>
<!-- End #wrapper -->

</body>
</html>
 
Line 69 of your page code,
Code: 
68>> #blog-header {
69>> padding-bottom: 15px;
70>> background: url('http://www.blogblog.com/thisaway_green/bg_header_bottom.gif') no-repeat left bottom;
71>> }

try playing with that padding number, the space between the image and the rest of the page looks very close to 15px. try making 5px an see what it does
 
You must log in or register to reply here.

Similar threads

S
Web dev...for IE
Replies
6
Views
1K
MortalSynz
M
ratbuddy
Android, Java, and HTML help needed
Replies
3
Views
863
goose90proof
goose90proof
raident30
mysql database not updating
Replies
8
Views
2K
dropadrop
dropadrop
RedDragonXXX
HTML (Search Box) help
Replies
1
Views
1K
RedDragonXXX
RedDragonXXX
c627627
How I modded my Windows 10 installation - How (not) to install Windows 10
Replies
2
Views
9K
c627627
c627627
Back