Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Website Design Feedback + CSS Trouble

Drakelasterz
in Website Reviews and Feedback

Featured Replies

Please help me remove the blank space that is between the header and the menu on my site www.makemoneykid.com

Here is the css style sheet for your consideration:

 

/* ----------------------------------------------
 Template Name : VectorLover
 Template Code : S-0026
 Version : 1.0  
 Author : Erwin Aligam
 Author URI : http://www.styleshout.com/   
 Last Date Modified : July 31, 2008 
------------------------------------------------ */

/* ----------------------------------------------
  HTML ELEMENTS
------------------------------------------------- */
/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }
body {
 background: #CCC url(bg.gif) repeat-x;
 font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 color: #6B6B6B;
 text-align: center; 
}
/* links */
a, a:visited { 
 color: #79A325;
 text-decoration: none;
}
a:hover {
 color: #73471B;
 text-decoration: underline;
}
/* headers */
h1, h2, h3 {
 font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
 font-weight: Bold;  
 padding: 10px;   
 color: #444; 
}
h1 {
 font-size: 2.9em;   
}
h2 {
 font-size: 2.5em;
 color: #88AC0B;
}
h3 {
 font-size: 1.6em;
 font-weight: normal; 
 padding: 16px 10px 4px 10px; 
}
/* Paragraph */
p { padding: 12px 10px;  }
/* Lists */
ul, ol {
 margin: 10px 20px;
 padding: 0 20px; 
}
ul { list-style: none; }
dl { padding: 10px; margin: 0; }
dt {
 font-weight: bold;
 color: #79A62E;
}
dd {
 padding-left: 25px;
}
/* images */
img {
 background: #FAFAFA;
  border: 1px solid #E4E4E4;
 padding: 5px;
}
img.float-right {
   margin: 5px 0px 10px 10px; 
}
img.float-left {
   margin: 5px 10px 10px 0px;
}
code {
   margin: 5px 0;
   padding: 15px;
   text-align: left;
   display: block;
   overflow: auto; 
   font: 500 1em/1.5em 'Lucida Console', 'Courier New', monospace;
   /* white-space: pre; */
   border: 1px solid #EEE8E1;
 background: #FAF7F5;
}
acronym {
 cursor: help;
 border-bottom: 1px dotted #895F30;
}
blockquote {
 margin: 15px 10px;
  padding: 15px 7px 15px 60px;   
  font-weight: normal;
 font-size: 17px;
 line-height: 1.6em;
 font-style: italic;
 font-family: Georgia, 'Times New Roman', Times, serif;   
 color: #80614D; 
 border: 1px solid #EEE8E1;
 background: #FAF7F5 url(quote.gif) no-repeat 15px 15px;
}
/* start - table */
table {
 border-collapse: collapse;
 margin: 15px 10px;   
}
th {
 height: 38px;
 padding-left: 12px;
 padding-right: 12px;
 color: #fff;
 text-align: left;
 background: #ADD163; 
 border-width: 1px;
   border-style: solid;
   border-color: #C4DE8F #93C138 #93C138 #C4DE8F; 
}
tr {
 height: 34px;
 background: #fff;
}
td {
 padding-left: 11px;
 padding-right: 11px;
 border: 1px solid #E7F0CC; 
} 
/* end - table */
/* form elements */
form {
 margin: 20px 10px;
 padding: 15px 25px 25px 20px;
 border: 1px solid #EEE8E1;
 background: #FAF7F5;
}
form p {
 border-bottom: 1px solid #ECE5DD;
 padding: 12px 0 5px 0;  margin: 0; 
 color: #9D6D37;
}
label {
 font-weight: bold;
 color: #A7743B;
}
input, select, textarea {
 margin: 5px 0;
 padding: 5px;
 color: #6A6969;
 border-width: 1px;
 border-style: solid;
   border-color: #d4d4d4 #ebebeb #ebebeb #d4d4d4;
}
option { padding-right: 0.5em; }
#name, #email, #message, #website{
 width: 455px;
}
input.button {
 font: bold 12px Arial, Sans-serif;
 height: 30px;
 margin: 0;
 padding: 2px 3px;
 color: #fff;
 background: #A6CD56;

 border-width: 1px;
   border-style: solid;
   border-color: #C4DE8F #8DB836 #8DB836 #C4DE8F;
}

/*-------------------------------------------
  LAYOUT
--------------------------------------------*/
.component { margin-bottom: 15px; }
#wrap {
 position: relative;
 width: 952px;
 background: #FFF url(wrap.gif) repeat-y center top;
 margin: 40px auto 30px auto;
 text-align: left; 
}
#content {
 clear: both; 
 float: left; 
 width: 952px;		   
 padding: 25px 0 60px 0;  
}
#header {
 position: relative;
 width: 952px;
 height: 245px;
 background:url(http://makemoneykid.com/files/images/Header-MakeMoneyKid.png) no-repeat; 
 color: #fff; 
 padding: 0; 
 margin: 0; 
}
#header h1#site_heading {
 position: absolute;
 margin: 0; padding: 0;
 font: bold 66px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
 letter-spacing: -5px;
 color: #332616;

 /* change the values of top and left to adjust the position of the logo*/
 top: 75px; left: 55px; 
}
#header h1#site_heading a { color: #332616; text-decoration: none; }
#header p#site_subheading {
 position: absolute;
 margin: 0; padding: 0;
 font: bold 15px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
 color: #322815;
 letter-spacing: -0.5px;

 /* change the values of top and left to adjust the position of the slogan*/
 top: 148px; left: 150px;   
}
/* top-menu */
#top-menu {
  position: absolute;
 margin: 0;
 padding: 30px 15px 8px 15px;
 font-family: 'Trebuchet MS', Arial, Sans-serif;
 color: #FFF;

 top: 0;  right: 70px
}
#top-menu p {  
 margin: 0; padding: 0; 
}
#top-menu a {
  font-weight: bold;
 color: #fff;
}
/* Navigation */
#primary_navigation {
 clear: both; 
 padding: 0;  margin: 0;
 width: 952px;
 height: 50px;
 background: #988060 url(nav.gif) no-repeat;   
}
#primary_navigation ul {
 float: left; 
 list-style: none; 
 margin: 5px 0 0 0;
 height: 45px;
 padding: 0 0 0 40px;		 
}
#primary_navigation ul li {
 float: left;
 margin: 0; padding: 0 0 0 10px;   
}
#primary_navigation ul li a {
 float: left;
 margin: 0;
 padding: 0 15px 0 5px;
 color: #FFF;
 font: bold 15px/45px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
 text-decoration: none;   
}
#primary_navigation ul li a:hover,
#primary_navigation ul li a:active {
 color: #E7FAA9; 
}
#primary_navigation ul li.active {
 background: transparent url(left-tab.gif) no-repeat; 
}
#primary_navigation ul li.active a { 
 color: #4B3D2C;
 background: transparent url(right-tab.gif) no-repeat right top; 
}
/* Main Column */
#location_0 {
 float: left;
 width: 535px;
 padding: 0; margin: 0 0 0 40px;
 display: inline; 
}
h3, h2 { margin: 0px; padding: 0px; }

#location_0 h2, #location_0 .blog_post h3 { font: bold 2.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif; }
#location_0 h2 span, #location_0 .blog_post h3 {
 color: #51432F;
 display: block;
 padding: 10px 0 5px 5px;  
 margin-left: 5px;   
 letter-spacing: -2px;
 border-bottom: 1px solid #E4F2C8;  
}
#location_0 .blog_post h3 a {
 color: #51432f;
 text-decoration: none;   
}
#location_0 ul li {
 list-style-image: url(bullet.gif);
}
#location_1 {
 float: right;
 width: 285px;
 padding: 0;
 margin: 0 45px 0 0;
 display: inline; 
}
#location_1 h2 {   font: bold 1.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif; }
#location_1 h2 span {
 display: block;
 color: #51432F;
 text-transform: none;
 letter-spacing: -0.5px;
 padding: 5px 0 5px 5px;
 margin: 10px 0 5px 10px;  
 border-bottom: 1px solid #E4F2C8; 
}
#location_1 .lastfm_entry { padding: 5px; }

#location_1 li {
 list-style: none;
 margin: 0;
 padding: 8px 10px;	
 border-bottom: 1px solid #E8E8E8; 
}
* html body #location_1 .sidemenu li {
 height: 1%;
}
#location_1  li a {
 text-decoration: none; 
 color: #739A23;
 background: none;
 font-weight: normal;
}
#location_1  li a:hover { 
 color: #000; 
 background: none; 
}
#location_1  ul { margin: 0 0 0 5px; padding: 0; }

/* footer */
#footer {
 clear: both;
 width: 952px;
 margin: 0;
 padding: 30px 0 25px 0;
 background: #CCC url(footer-bottom.gif) no-repeat left top;	 
 font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
 font-size: 0.95em;
 color: #777; 
 text-align: center; 
 letter-spacing: .2px;
}
#footer a:hover {
 color: #555;
 border-bottom: 1px dotted #555;
 text-decoration: none;
}
/* postmeta */
.blog_post .metadata {
 padding: 8px 10px;
 margin: 15px 10px 10px 10px; 
 color: #977C57;
 border: 1px solid #EEE8E1;
 background: #FAF7F5;
 overflow: hidden;
}
.blog_post .metadata .comments, .blog_post .metadata .category {
 margin: 0 10px 0 5px;
 padding: 7px 5px 7px 25px;
 display: inline;
 color: #977C57;
}
.blog_post .metadata .comments {
 background: #FAF7F5 url(comments.gif) no-repeat 0 2px;
}
.blog_post .metadata .category {
 background: #FAF7F5 url(doc.gif) no-repeat 0 2px;
}
.blog_post .metadata .tags { display: block; padding: 5px 5px 0px 5px; }
.blog_post .date { font-size: .95em; padding: 0 10px; margin-left: 2px; color: #A98D76; }
.blog_post .date a, .blog_post .date a:visited { color: #333; }

/* comments list */
ol.commentlist {
 margin: 12px 10px;
 padding: 0;
 border-style: solid; 
 border-color: #EEE8E1; 
 border-width: 1px 1px 0 1px;
}
.commentlist li {
 margin: 0;
 padding: 10px;
 list-style: none;
 border-bottom: 1px solid #EEE8E1;
}
.commentlist li cite {
 display: block;
 font-style: normal;
 font-weight: bold;
 padding: 7px; 
}
.commentlist li cite img {
 float: left;
 margin-right: 10px; 
}
.commentlist li cite .comment-data {
 font-size: .8em;
 font-weight: normal;
}
.commentlist li .comment-text {
 clear: both;
 margin: 0; padding: 0;
}
.commentlist li.alt {
 background: #FAF7F5;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
/* header quick search */
#location_1 .search_wrapper form {
 padding: 0px; margin: 20px 0 30px 10px;
 border: none;
 width: 270px; height: 33px;
 background: #F2F0F0 url(qsearch.gif) no-repeat;   
}
#location_1 .search_wrapper { padding: 0px;}
#location_1 .search_wrapper form p {
 margin: 0; padding: 0;   
}
#location_1 .search_wrapper .input_wrapper input {
 float: left;
 border: none;
 background: transparent;
 color: #B8B8B8; 
 margin: 0;
 margin: 5px 0 0 5px;
 width: 165px; 
 display: inline; 
 font: 1em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
}
#location_1 .search_wrapper .submit_wrapper input {
 border-width: 0px;
 text-align: left;
 width: 70px; height: 24px;
 margin-top: 5px;
 float: left;
 display: block;   
 background: transparent url(search.gif) no-repeat top right;
}
#location_0 .images .image { margin: 6px; }

Find this part of your css...

 

#header {
 position: relative;
 width: 952px;
 height: 245px;
 background:url(http://makemoneykid.com/files/images/Header-MakeMoneyKid.png) no-repeat;
 color: #fff;
 padding: 0;
 margin: 0;
}

 

and change the height to suit (currently at 245px - try 180px).

 

Hope this helps.

    •
    • Author

    Find this part of your css...

    and change the height to suit (currently at 245px - try 180px).

     

    Hope this helps.

     

    Thanks man. It WORKED!!! I love you pal! Very very Thank You :D

    Create an account or sign in to comment
    Go to topic listing

    Account

    Navigation

    Search

    Search

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.