Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Blank spaces above and below my title

    I'm quite the noob when it comes to coding, I can typically figure it out if I stare at it long enough - but this issue is hiding from me, I'm afraid.

    There are very large and annoying white blank spaces above and below the title of my website.

    Take a look, and see if you can find it. I'd be very grateful!


    This is the CSS:

    Code:
    /* Body */
    
    body {
    	background: #fff;
    	color: #666666;
    	font: 12px/1.5 Helvetica, Arial, sans-serif;
    	margin: 0px;
    	padding: 50px;
    	width: 760px;
    }
    
    /* Links & Typography */
    
    a {
    	text-decoration: none;
    }
    
    a:link, a:active {
    	color: #5691CD;
    }
    
    a:visited {
    	color: #5691CD;
    }
    
    a:link:hover, a:active:hover, a:visited:hover {
    	text-decoration: underline;
    }
    
    a:link:hover, a:active:hover {
    	color: #5691CD;
    }
    
    a:visited:hover {
    	color: #5691CD;
    }
    
    a > img {
    	margin-bottom: -1px;
    }
    
    a.img {
    	border: none;
    	background: transparent !important;
    }
    
    blockquote {
    	width: 500px;
    	padding-left: 10px;
    	border-left: 3px solid #333;
    }
    
    strong, b {
    	font-family: helvetica, sans-serif;
    	color: #333;
    	-webkit-font-smoothing: antialiased;
    	text-rendering: optimizelegibility;
    }
    
    .post h1 { font-weight: bold; margin: 20px 0 10px; font-size: 22px }
    
    .post h2 { font-weight: bold; margin: 20px 0 10px; font-size: 18px;}
    
    .post h3 { font-weight: bold; margin: 20px 0 10px; font-size: 16px }
    
    .post h4 { font-weight: bold; margin: 20px 0 10px; font-size: 14px }
    
    /* Description */
    
    .blog-description {
    	font: 14px/1.5 Georgia, Helvetica, Arial, sans-serif;
    }
    
    /* Menu */
    
    #menu {
    	margin-top: 3px;
    	height: 50px
    }
    
    #menu a {
    	display: block;
    	float: left;
    	margin-right: 20px;
    	padding-bottom: 25px;
    }
    
    #menu a.active {
    	border-bottom: 1px solid #ccc
    }
    
    
    /* Post & Page */
    
    .post {
    	margin: 0;
    }
    
    .content {
    	clear: both;
    	margin: 50px 0 100px 0;
    	width: 920px;
    }
    
    .archive-content {
    	clear: both;
    	margin: 20px 0 40px;
    	width: 920px;
    }
    
    .archive-title {
      margin: 0;
    }
    
    .archive-title h3 {
      margin: 0;
    }
    
    .archive-divider {
      margin-top: 120px;
    }
    
    .divider_0 {
      margin-top: 50px;
    }
     
    .title {
    	margin-bottom: 15px
    }
    
    .body-post {
    	float: left;
    	margin-left: 20px;
    	font: 14px/1.5 Georgia, Helvetica, Arial, sans-serif;
    }
    
    .body-page {
    	font: 14px/1.5 Georgia, Helvetica, Arial, sans-serif;
    }
    
    .body-post img, .body-page img {
    	max-width: 760px;
    	height: auto;
    	display: inline-block;
    	margin-right: 20px;
    	margin-bottom: 20px
    }
    
    .body-post p, .body-page p {
    	margin-top: 0;
    	width: 500px;
    }
    
    .body-post li, .body-page li {
    	margin-top: 0;
    	width: 500px;
    }
    
    .meta {
    	width: 110px;
    	float: left;
    	margin-top: 2px;
    	padding: 0;
    }
    
    .introduction {
    	border-top: 1px solid #ccc;
    	float: left;
    	margin-top: -0.1em;
    	padding: 1.5em 0 .5em;
    	width: 110px;
    	margin-right: 85px;
    }
    
    
    pre {	
      max-width: 500px;
    }
    
    code {	
      max-width: 500px;
    }
    
    ul.tags {
      width: 460px;
      border-top: 1px solid #ccc; 
      margin: 20px 0;
      padding: 20px 0;
    }
     
      ul.tags li {
        list-style: none;
      }
     
        ul.tags li a {
          margin: 0 15px 0 0; 
          float: left; 
          font-family: Helvetica, Arial, sans-serif;
          font-size: 12px;    
        }
    
    /* Lists */
    
    ul {
    	margin: 0;
    	padding: 0
    }
    
    li {
    	list-style-type: square;
    	color: #333;
    	margin-top: 20px;
    	margin-bottom: 0;
    }
    
    
    /* Share buttons */
    
    .share-buttons {
      border-top: 1px solid #ccc; 
      margin: 20px 0;
      padding: 20px 0;
    }
    
    .share-buttons > .share-facebook, .share-buttons > .share-twitter, .share-buttons > .share-gplus {
      opacity: .5;
    }
    
    
    .share-buttons:hover > .share-facebook, .share-buttons:hover > .share-twitter, .share-buttons:hover > .share-gplus {
      opacity: 1
    }
    
    .share-twitter, .share-gplus {
      float: left;
    }
    .share-facebook {
      margin-right: 25px;
      float: left;
    }
    
    
    /* scriptogr.am link 
    ** 
    ** Please do not remove or hide the footer link.
    ** This link will keep us alive and motivated to continue our service.
    */
    
    .scriptogram-link {
    	position: fixed;
    	right: 50px;
    	bottom: 50px;
    	font-size: 9px;
    }
    
      .scriptogram-link a {
        color: #666666;
      }
      
    
    /* Google Prettify */
    
    .com { color: #93a1a1; }
    .lit { color: #195f91; }
    .pun, .opn, .clo { color: #93a1a1; }
    .fun { color: #dc322f; }
    .str, .atv { color: #268bd2; }
    .kwd, .tag { color: #195f91; }
    .typ, .atn, .dec, .var { color: #CB4B16; }
    .pln { color: #93a1a1; }
    
    /* Specify class=linenums on a pre to get line numbering */
    ol.linenums {
      margin: 0 0 0 40px;
    }
    /* IE indents via margin-left */
    ol.linenums li {
      padding: 0 5px;
      color: rgba(0,0,0,.15);
      line-height: 20px;
      -webkit-border-radius: 2px;
         -moz-border-radius: 2px;
              border-radius: 2px;
    }
    /* Alternate shading for lines */
    li.L1, li.L3, li.L5, li.L7, li.L9 {  }
    
    
    /* DARK THEME */
    /* ---------- */
    
    .prettyprint-dark {
      background-color: #1d1f21;
      border: 0;
      padding: 10px;
    }
    .prettyprint-dark .linenums li {
      color: #444;
    }
    .prettyprint-dark .linenums li:hover {
      background-color: #282a2e;
    }
    /* tags in html */
    .prettyprint-dark .kwd,
    .prettyprint-dark .tag { color: #cc6666; }
    /* html attr */
    .prettyprint-dark .typ,
    .prettyprint-dark .atn,
    .prettyprint-dark .dec,
    .prettyprint-dark .var { color: #de935f; }
    /* html attr values */
    .prettyprint-dark .str,
    .prettyprint-dark .atv { color: #b5bd68; }
    And this is the HTML:

    Code:
    <!DOCTYPE html> 
    <!--
    modified scriptogr.am theme
    -->
    <html lang="en">
    <head>
      <style type="text/css">
    @font-face {
        font-family: "Valencia";
        src: url(http://dl.dropbox.com/u/56581897/ValenciaRegular.otf) format("truetype");
    }
    p.customfont { 
        font-family: "Valencia", Verdana, Tahoma;
          font-size:115px;
    }
       @font-face {
        font-family: "pixelicious";
        src: url(http://dl.dropbox.com/u/56581897/Pixelicious.ttf) format("truetype");
    }
    p.customfont2 { 
          font-family: "pixelicious", Verdana, Tahoma;
          font-size:2px;
          }
    </style>
      <script language="javascript">
    // (c) Premshree Pillai
    // http://www.qiksearch.com
    // premshree@hotmail.com
    // Use freely as long as this message is intact.
    var msg = "mark clark · writer/blogger · ";
    var pos = 0;
    var spacer = "";
    var time_length = 100;
    function ScrollTitle()
    {
     document.title = msg.substring(pos, msg.length) + spacer + msg.substring(0, pos);
     pos++;
     if (pos > msg.length) pos=0;
     window.setTimeout("ScrollTitle()",time_length);
    }
    ScrollTitle();
    </script>
      <title></title>
      <meta name="description" content="{{author}} {{blog_title}}" />
      <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0;">
      <meta name="apple-mobile-web-app-capable" content="yes"/>
      <meta name="ROBOTS" content="INDEX,FOLLOW">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <meta name="description" content="{{author}} |*{{blog_title}}">
      <meta property="og:url" content="{{home_link}}">
      <meta property="og:site_name" content="{{author}} on scriptogr.am">
      <link rel="shortcut icon" href="http://scriptogr.am/lib/img/favicon.ico">
      <link rel="alternate" type="application/rss+xml" title="RSS" href="{{base_url}}/feed" />
      <link href="/themes/reset.css" type="text/css" rel="stylesheet">
      {{css}}
    </head>
    <body>
    <div class="wrapper">
        <div class="blog">
    <p class="customfont">ReadClark.com</p>
          <div id="menu">
            {{#pages}}
            <a href="{{permalink}}">{{title}}</a>
          {{/pages}}
          </div>
     
          <div class="container">
          {{#posts}}
         
           <!-- index -->
           {{#is_index}}
            <div class="post">
              <div class="content">
                <div class="title"><h3><a href="{{permalink}}">{{title}}</a> {{#post_permalink}}<a href="{{post_permalink}}">#</a>{{/post_permalink}}</h3></div>
                {{#date}}
                <div class="meta">
                  <span class="date"><p class="customfont2">{{prettydate}}</p></span>
                </div>
                {{/date}}
                <div class="body-post">
                  <!--if excerpt-->
                  {{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
                  <!--endif-->
                  {{content}}
                  <!-- if tags -->
                  {{#if_tags}}
                  <ul class="tags">
                    {{#tags}}
                      <li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
                    {{/tags}}
                  </ul>  
                  {{/if_tags}}
                  <!-- endif -->
                </div><!--end body-->
              </div><!--end content-->
              <div class="clear"></div>
            </div><!--end post-->
          {{/is_index}}
    
          <!-- post permalink -->
          {{#is_post}}
            <div class="post">
              <div class="content">
                <div class="title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
                {{#date}}
                <div class="meta">
                  <span class="date">{{prettydate}}</span>
                </div>
                {{/date}}
                <div class="body-post">
                  <!--if excerpt-->
                  {{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
                  <!--endif-->
                  {{content}}
                  <!-- if tags -->
                  {{#if_tags}}
                  <ul class="tags">
                    {{#tags}}
                      <li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
                    {{/tags}}
                  </ul>  
                  {{/if_tags}}
                  <!-- endif -->
                  <!-- social buttons -->
                   <div class="share-buttons">
                    <div class="share-twitter">
                      <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{permalink}}" data-via="scriptogram">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>             
                     </div>
                    <div class="share-facebook">
                      <div class="fb-like" data-href="{{permalink}}" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-font="arial"></div>
                    </div>
                    <div class="share-gplus">
                      <g:plusone size="medium" href="{{permalink}}"></g:plusone>
                     </div>
                   </div>
                </div><!--end body-->
              </div><!--end content-->
              <div class="clear"></div>
            </div><!--end post-->
          {{/is_post}}
          <!-- endif -->
    
          <!-- page permalink -->
          {{#is_page}}
            <div class="post">
              <div class="content">
                <div class="title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
                  <div class="body-page">
                  <!--if excerpt-->
                  {{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
                  <!--endif-->
                  {{content}}
                  <!-- if tags -->
                  {{#if_tags}}
                  <ul class="tags">
                    {{#tags}}
                      <li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
                    {{/tags}}
                  </ul>  
                  {{/if_tags}}
                  <!-- endif -->
                </div><!--end body-->
              </div><!--end content-->
              <div class="clear"></div>
            </div><!--end post-->
          {{/is_page}}
          <!-- endif -->
        
          <!-- archive -->
          {{#is_archive}}
            <div class="post">
              {{#archive_divider}}<div class="archive-divider {{archive_divider_index}}"><h2>{{archive_divider}}</h2></div>{{/archive_divider}}
              <div class="archive-content">
                <div class="archive-title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
                <div class="meta"><span class="date">{{prettydate}}</span></div>
              </div><!--end archive-content-->
              <div class="clear"></div>
            </div><!--end achive-->
          {{/is_archive}}
          
        {{/posts}}
        <div class="pagination">{{pagination}}</div>
        </div><!-- end container -->
      </div><!-- end blog -->
    </div><!-- end wrapper --> 
    <div class="scriptogram-link"><a href="http://readclark.com/" Title="Created by Mark Clark">© Mark Clark 2012</a> / <a href="http://scriptogr.am/" title="built with scriptogr.am." >scriptogr.am</a></div>
    <div id="fb-root"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="/themes/{{theme}}/app.js"></script>
    <script type="text/javascript">
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=241164325961701";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
    </body>
    </html>
    This is the website I'm talking about. I've linked you to a "test" page.

    Thanks again!

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by readingclark View Post
    There are very large and annoying white blank spaces above and below the title of my website.
    You didn't provide all of your CSS.

    In http://readclark.com/themes/reset.css, you've specified the following rule:

    Code:
    p, ul, ol, pre, blockquote, hr, object { margin: 1em 0; }
    Note that major browsers, by default, provide for a top and bottom vertical margin of 1 em on p elements, so simply eliminating this rule will not do the trick. You will need to explicitly specify margins on your p element to eliminate the relevant margins:

    Code:
    p.customfont { margin: 0; }
    It's worth noting that the correct elements to specify general headings (including your title) are h1, h2, h3, h4, h5, and h6:

    CSS
    Code:
    h1.customfont { margin: 0; font-size: inherit; }
    HTML
    Code:
    <h1 class="customfont">readclark.com</h1>
    Also, I would note that your title element animation script prevents proper bookmarking of your site and makes the title's existence dependent on scripting. This means that your document will not have a title in, for example, a search engine.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah! Thank you so much! I will be implimenting this tomorrow! I will also get rid of the title animation, haha. I thought it looked fancy XD

    Im not sure what's going on with the header tags...I'm actually just modifying an existing theme from scriptogram (that is where I host my domain.)

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •