...

View Full Version : Blank spaces above and below my title



readingclark
02-10-2012, 07:58 AM
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:


/* 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:


<!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 (http://readclark.com/test) is the website I'm talking about. I've linked you to a "test" page.

Thanks again! :thumbsup:

Arbitrator
02-10-2012, 08:45 AM
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:


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:


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

h1.customfont { margin: 0; font-size: inherit; }

HTML

<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.

readingclark
02-10-2012, 08:54 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum