1 reply [Last post]
MadameSparkleicious
MadameSparkleicious's picture
Offline
newbie
Last seen: 10 years 11 weeks ago
Timezone: GMT+2
Joined: 2012-09-15
Posts: 1
Points: 2

Hello,
so I'm having my blog for some months now and I wanted to try a new theme but I'm not a specialist so I can't move the description box from the top to the right. Can you help me, please? Here's my blog:
http://sparkle-ici-ous.tumblr.com
and here's my html-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!--
     Theme: The Minimalist v1.
     Design: The Minimalist (<a href="http://minimalist.co" rel="nofollow">http://minimalist.co</a>)
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
     <title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>	
     <meta name="description" content="{MetaDescription}" />
     <meta name="if:Show description" content="1" />	
     <meta name="if:Show search" content="1" />
     <meta name="text:Twitter name" content="" />
     <meta name="text:Disqus Shortname" content="" />
     <meta name="text:Google Analytics ID" content="" />	
     <link rel="shortcut icon" href="{Favicon}" />
     <link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
 
<!-- Styles -->
 
<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">
 
/*----- GENERAL -----*/
 
     header, footer, section, article, nav, aside {
        display: block;
     }
 
     body {
        background: #ffffff;
        color: #222;
        font: 12px/20px Georgia, "Times New Roman", Times, serif;
        padding-top: 25px;
        text-align: center;
        width:500px;
        margin: 0 auto;
     }
 
     h1, h2, h3, hQ {
        font-family: Cufon;
     }
 
     h1 {
        font-size: 50px;
        line-height: 50px;
     }
 
     h2 {
        font-size: 31px;
        line-height: 37px; 
     }
 
     h3 {
        font-size: 21px;
        line-height: 27px; 
     }
 
     a:link, a:visited {
        color: #222222;
        font-weight: bold;
        text-decoration: none;
     }
 
     a:hover, a:active {
        text-decoration: underline;
     }
 
     hr{
        border:0 #ccc solid;
        border-top-width:1px;
        clear:both;
        height:0;
     }
 
     ol{list-style:decimal}
 
     ul{list-style:disc}
 
     li{margin-left:30px}
 
     p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}
 
     #main {
        padding: 0px;
     }
 
/*----- MASTHEAD -----*/
 
     .noMeta > div {
        padding: 0px;
     }
 
     #masthead {
        margin-bottom: 0px;
     }
 
     #masthead h1 {
        margin-bottom: 0;
     }
 
     #masthead h1 a:link, #masthead h1 a:visited {
        text-transform: Uppercase;
        color: #222;
        text-decoration: none;
     }
 
     #masthead h1 a:active {
        outline: 0;
     }
 
     #masthead p {
        font-family: Georgia, serif;
        font-size: 20px;
        color: #fff;
        margin-bottom: 0;
     }
 
     #masthead a:link, #masthead a:visited {
        color: #fff;
     }
 
     #siteDescription{
        font-size: 13px;
        color: #222;
        text-transform: Uppercase;
        border-top: 1px solid #222;
        margin-top: 20px;
        margin-bottom: -5px;
        padding: 10px 0 0 0;
        font-family: Cufon;
     }
 
/*----- SEARCH FORM -----*/
 
     #frmSearch {
        padding-top: 20px; 
        display: none;
     }
 
     #txtSearch {
        background: url(<a href="http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg" rel="nofollow">http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg</a>) left no-repeat;
        width: 225px;
        padding: 2px 0 0 20px;
        font: 12px/12px Georgia, "Times New Roman", Times, serif;
        color: #222;
        border: 0px;
     }
 
/*----- MAIN HEADER NAV STRIP -----*/
 
     #mainNav {
        border-top: 1px solid #222;
        border-bottom: 2px solid #222;
        margin-top: 20px;
        padding: 13px 0 14px 0;
        font-family: Cufon;
     }
 
     #mainNav ul {
        list-style: none;
        margin: 0;
        padding: 0;
     }
 
     #mainNav li {
        margin: 5px;
        display: inline;
        padding: 0;
     }
 
     #mainNav a:link, #mainNav a:visited {
        padding: 0;
        font-size: 14px;
        line-height: 14px;
        margin: 0 2px;
        text-decoration: none;
        color: #222;
        text-transform: Uppercase;
     }
 
     #mainNav a:hover, #mainNav a:active {
        outline: none;
        text-decoration: none;
        border-bottom: 1px solid #222;
     }
 
     #mainNav a.active {
        text-decoration: none;
        border-bottom: 1px solid #222;
     }
 
/*----- ARTICLE META INFO -----*/
 
     #designline {
        margin-top: 50px;
     }
 
     h5{
        position: relative;
        top: -35px;
        margin-bottom: 0px;
        font-family: Georgia, serif;
        font-size: 10px;
        color: #bca474;
        text-decoration: none;
        text-transform: Uppercase;
        font-weight: bold;
        border-bottom: 1px solid #bca474;
        background: #fff;
     }
 
     h5 a:link, .line a:visited{
        font-family: Georgia, serif;
        font-size: 10px;
        color: #bca474;
        text-decoration: none;
        text-transform: Uppercase;
        font-weight: bold;
     }
 
     h5 a:hover{
        text-decoration: underline;
     }
 
     h5 abbr{
        display: inline-block;
        position: relative;
        margin: 0 auto;
        padding: 0 8px;
        background: #fff;
        top: 10px;
     }
 
     h5.postDate a{
        color: #bca474;
     }
 
/*----- ARTICLE -----*/
 
     article {
        background: #fff;
        margin-bottom: 20px;
        text-align: left;
       position: relative;
      }
 
     article img {
        border: none;
        margin-bottom: 15px;
        max-width: 500px;
     }
 
     article p img {
        margin: 0;
     }
     article > div {
        padding: 0px;
        overflow: hidden;
     }
     article .searchPage {
        margin: 35px 0 0 0;
     }
 
     .searchPageText {
        margin: 0 0 30px 0;
     }
 
     article .meta a:link, article .meta a:visited {
        text-decoration: none;
     }
 
     article .meta a:hover, article .meta a:active {
        text-decoration: underline;
     }
 
     article h2 {
        text-align: center;
        color: #222222;
     }
 
     article h2 a:link, article h2 a:visited {
        text-transform: Uppercase;
        color: #222;
        text-decoration: none;
     }
 
     article h2 a:hover, article h2 a:active {
        text-decoration: none;
        border-bottom: 1px solid #222;
     }
 
     blockquote {
        border-left: 2px solid #bca474;
        margin-left: 0;
        padding-left: 1em;
     }
 
     #quoteSource{
        margin: 0 auto;
        text-align: left;
     }
 
     #quoteText h2 {
        text-align: left;
        color: #222222;
     }
 
     article .chat {
        list-style: none;
        padding: 0;
        margin: 0;
     }
 
     article .chat li {
        margin: 0 0 2px;
        padding: 2px 0 2px 0;
     }
 
     .photoCaption {
        text-align: center;
     }
 
/*----- AUDIO PLAYER -----*/
 
     .audio {
        height: 28px;
        width: 26px;
        overflow: hidden;
        margin: auto;
        padding-top: 7px;
     }
 
     .audioc {
        background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
        background-repeat: no-repeat; 
        height: 41px;
        width: 41px;
     }
 
     .audioCaption {
        margin-top: 1px;
     }
 
     .audioleft {
        width: 41px;
        float: left;
      }
 
     .audioright {
        width: 444px;
        float: right;
      }
 
     .audioContainer {
        margin-top: 5px;
     }
 
     .audioClear {
        clear:both;
     }
 
/*----- ARTICLE NOTES -----*/
 
     .notes {
        border-top: 1px solid #bca474;
        list-style: none;
        padding: 20px 0 5px 0;
        margin: 30px 0 0 0;
     }
     .notes li {
        margin: 0;
     }
 
     .notes .avatar {
        margin: 0 5px 0 0;
        position: relative;
        top: 5px;
     }
 
     .notes blockquote {
        margin: 10px 0 0 35px;
        padding-left: 10px;
        border-left: 2px solid #222222;
     }
 
     .media {
        width: 500px;
        margin-bottom: 20px;
     }
 
/*----- PAGE NAVIGATION -----*/
 
     #pageNav {
        margin-top: 20px;
        border-top: 1px solid #222;
     }
 
     #pageNav ul {
        list-style: none;
        padding: 10px 15px;
        margin: 10px 0;
     }
 
     #pageNav li {
        margin: 0;
        display: inline;
     }
 
     #pageNav a:link, #pageNav a:visited {
        font: 11px Georgia, "Times New Roman", Times, serif;
        padding: 0;
        margin: 0 2px;
        background: #34hdf5;
        color: #222;
        text-decoration: none;
     }
 
     #pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
        text-decoration: underline;
     }
 
     #pageNavOlder:after {
        content: " »";
        font-size: 10px;
     }
 
     #pageNavNewer:before {
        content: "« ";
     }
 
/*----- FOOTER META -----*/
 
     #sitemeta {
        border-top: 2px solid #222;
        color: #222;
        padding: 20px 0 32px 0;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 11px;
     }
 
     #sitemeta p {
        margin: 0;
     }
 
     #sitemeta a:link, #sitemeta a:visited {
        color: #222;
        font-weight: bold;
     }
 
{CustomCSS}
</style>
 
<!-- Scripts -->
 
<!--[if IE]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="http://static.tumblr.com/oawavkn/JPAlyq9zp/cufon-yui.js" type="text/javascript"></script>
     <script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>
 
     <script type="text/javascript">
        Cufon.replace('h1',{ fontFamily: "Cufon" });
        Cufon.replace('h2',{ fontFamily: "Cufon" });
        Cufon.replace('h3',{ fontFamily: "Cufon" });
        Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
        Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
     </script>
 
<script>
     $(function() {
        var search = $("#txtSearch").val();
        var placeholder = "Search...";
        var fadeToOpacity = 0.4;
        $("#txtSearch").fadeTo("normal", fadeToOpacity);
        if (search == "") {
     $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").blur(function() {
        search = $("#txtSearch").val();
        if (!(search != "" && search != placeholder)) {
        $("#txtSearch").val(placeholder);
     }
     $("#txtSearch").fadeTo("normal", fadeToOpacity);
     });
     $("#txtSearch").focus(function() {
        search = $("#txtSearch").val();
        if (search == placeholder) {
        $("#txtSearch").val("");
     }
     $("#txtSearch").fadeTo("normal", 1);
     });
     $("#btnSearch").click(function() {
     $("#frmSearch").slideToggle("normal");
     $(this).toggleClass("active");
 //  $("#txtSearch").focus();
     });
     });
</script>
 
</head>
<body>
 
     <header id="masthead" class="clearfix">
        <div id="thehead">          
              <h1 class="cufon"><a href="/">{Title}</a></h1>
              <form action="/search" method="get" id="frmSearch">
              <input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
              </form>    
 
     {block:Description}
        <div id="siteDescription">{Description}</div>
     {block:Description}
 
           <nav id="mainNav">        
              {block:HasPages}
              {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
              {/block:HasPages}
              {block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
              {block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}                 
              <li><a href="/archive">Archive</a></li>
              <li><a href="/random">Random</a></li>
              <li><a href="{RSS}">RSS</a></li>
              <li><a href="javascript:;" id="btnSearch">Search</a></li>
              {block:IfTwitterName}
              <li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
              {/block:IfTwitterName}
           </nav>         
        </div>
     </header>
 
     <section id="main" class="clearfix">
     <div class="layout">           
     {block:SearchPage}
        <article>
           <div>
              <div class="searchPage">
                 <h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
              </div>
                    {block:NoSearchResults}
                    <div class="searchPageText">
                       <p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
                       <ul>
                          <li>Make sure all words are spelled correctly.</li>
                          <li>Try different keywords.</li>
                          <li>Try more general keywords.</li>
                       </ul>
                    </div>
                    {/block:NoSearchResults}
           </div>
        </article>
     {/block:SearchPage}
 
     {block:TagPage}
     <article>
        <div>
           <div class="searchPage">
           <h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
           </div>
        </div>
     </article>
     {/block:TagPage}      
 
{block:Posts}
     <div id="designline">
        <h5 class="postDate">
           <abbr>{block:Date}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
           </abbr>
        </h5>
     </div>
 
     <article>
        <div>
           {block:Text}
              {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
              {Body}
           {/block:Text}
 
           {block:Photo}
              {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
              {block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
           {/block:Photo}
 
           {block:Photoset}
              <div class="media">{Photoset-500}</div>
              {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
           {/block:Photoset}
 
           {block:Quote}
              <div id="quoteText"><h2>{Quote}</h2></div>
              {block:Source}<div id="quoteSource"><p>&mdash;{Source}</p></div>{/block:Source}
           {/block:Quote}
 
           {block:Link}
              <h2><a href="{URL}" {Target}>{Name}</a></h2>
              {block:Description}
              <div>{Description}</div>
              {/block:Description}
           {/block:Link}       
 
          {block:Chat}
             {block:Title}<h2>{Title}</h2>{/block:Title}
             <ul class="chat">
                {block:Lines}
                <li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
                {/block:Lines}
             </ul>
          {/block:Chat}
 
          {block:Audio}
             <div class="audioleft">
                <div class="audioc">
                <div class="audio">{AudioPlayerBlack}</div>
                </div>
             </div>
             <div class="audioright"> 
                <div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>&mdash;{block:TrackName}{TrackName}{/block:TrackName}</p>
                </div>
             </div>
             <div class="audioClear"></div>
             <div class="audioContainer">
                {block:Caption}{Caption}{/block:Caption}
             </div>
          {/block:Audio}
 
          {block:Video}
             <div class="media">{Video-500}</div>
             {block:Caption}<div>{Caption}</div>{/block:Caption} 
          {/block:Video}
 
          {block:Answer}
             <h3>{Asker} asked: {Question}</h3>
             {Answer}
          {/block:Answer}
 
          {block:Date}
 
                    {block:IfDisqusShortname}
  <script type="text/javascript">
  //<![CDATA[
  (function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
      if(links[i].href.indexOf('#disqus_thread') >= <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
      }
    }
    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
  {/block:IfDisqusShortname}
 
          {block:PostNotes}
             {PostNotes}
          {/block:PostNotes}
 
          {block:Date}
 
        </div>
     </article>
{/block:Posts}
 
     {block:PermalinkPagination}
        <nav id="pageNav">
           <ul class="clearfix">
              {block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
              {block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}  
           </ul>
        </nav>
     {/block:PermalinkPagination}
 
     {block:Pagination}
        <nav id="pageNav">
           <ul class="clearfix">
             {block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage} 
             {block:JumpPagination length="5"}
             {block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
             {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
             {/block:JumpPagination}
             {block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage} 
           </ul>
        </nav>
     {/block:Pagination} 
 
     {block:DayPagination}
        <nav id="pageNav">
           <ul class="clearfix">
              {block:PreviousDayPage}<li><a href="{PreviousDayPage}">&laquo; {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} &raquo;</a></li>{block:NextDayPage}
           </ul>
        </nav>
     {/block:DayPagination}
 
     </div><!-- END layout -->
     </section>
 
     <footer id="sitemeta">
        <div class="clearfix">
           <div class="thefooter">
              <p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
           </div>
        </div>
     </footer>
 
     {block:IfGoogleAnalyticsID}
        <script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
     {block:IfGoogleAnalyticsID}
 
</body>
</html>

I searched on Google for some hours now and I can't find any helpfull advice.
Thanks for reading,
Lena

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A rough guess at intentions

Here is one solution. Whether it does what you want is another issue. Wink

We are limited by the structure of the page, and your stated lack of knowledge. Make these changes, and, who knows, they may do as you want.

#siteDescription {
    border: solid #222222;
    border-width: 1px 0;
    color: #222222;
    font-family: Cufon;
    font-size: 13px;
    left: 110%;
    margin-bottom: -5px;
    margin-top: 20px;
    padding: 10px 0;
    position: absolute;
    text-transform: uppercase;
    }
 
#masthead {
    margin-bottom: 0;
    position: relative;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.