Blog Header Alignment

  • mattimeo615
  • Born
  • Born
  • mattimeo615
  • Posts: 1

Post 3+ Months Ago

Alright, so I'm working on a music/culture/whatever blog, but I am having some trouble with the code. Here's what I have so far:

http://worthlesswit.blogspot.com/

The vision is a little bit of white space above the header, and then for the body part to repeat after that.

Originally, I just tried to offset both the header and the background so that it would start a little ways in. Then I realized that the background repeats above the header as well, so I added white space to the actual header image, but as it stands now, I still need to align the top of the header with the top of the page.

I'm sure it's a simple fix but with practically no CSS skills to my name, I'm not really sure how to go about it.

Here's the code:

Code: [ Select ]
 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
 
/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#940f04">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#ff3333">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#999999">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#940f04">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#003366">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#660000">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#999999">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/
 
/* Use this with templates/template-twocol.html */
 
body {
  background:url(http://i440.photobucket.com/albums/qq12 ... hless2.jpg) repeat-y;
  background-position: 45% 280px;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }
 
/* Header
-----------------------------------------------
 */
 
#header-wrapper {
  width:660px;
  margin:0 auto 0px;
  border:0px solid $bordercolor;
  }
 
#header-inner {
  background-position: left;
  margin-left: -30.25%;
  margin-right: auto;
}
 
#header {
  margin: 5px;
  border: 0px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}
 
 
#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
 
#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }
 
#header a:hover {
  color:$pagetitlecolor;
  }
 
#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:1020px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }
 
#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
 
 
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
 
#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
 
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
 
 
/* Headings
----------------------------------------------- */
 
h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}
 
 
/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }
 
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
 
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
 
.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}
 
.post-body blockquote {
  line-height:1.3em;  
}
 
.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}
 
.comment-link {
  margin-$startSide:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }
 
/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
 
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }
 
#blog-pager-newer-link {
  float: $startSide;
 }
 
#blog-pager-older-link {
  float: $endSide;
 }
 
#blog-pager {
  text-align: center;
 }
 
.feed-links {
  clear: both;
  line-height: 2.5em;
}
 
/* Sidebar Content
----------------------------------------------- */
.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }
 
.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
 
.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }
 
.main .Blog {
  border-bottom-width: 0;
}
 
 
/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}
 
.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}
 
.profile-datablock {
  margin:.5em 0 .5em;
}
 
.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}
 
.profile-link {
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}
 
/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
]]></b:skin>
  </head>
 
  <body>
  <div id='outer-wrapper'><div id='wrap2'>
 
    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
 
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Worthless Wit (Header)' type='Header'/>
</b:section>
    </div>
 
    <div id='content-wrapper'>
 
      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>
 
      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
 
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Blogs Better Than This One:' type='LinkList'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='Listening' type='HTML'/>
</b:section>
      </div>
 
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
 
    </div> <!-- end content-wrapper -->
 
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>
 
  </div></div> <!-- end outer-wrapper -->
</body>
</html>
               
 
  1.  
  2. <?xml version="1.0" encoding="UTF-8" ?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  5.   <head>
  6.     <b:include data='blog' name='all-head-content'/>
  7.     <title><data:blog.pageTitle/></title>
  8.     <b:skin><![CDATA[/*
  9. -----------------------------------------------
  10. Blogger Template Style
  11. Name:     Minima
  12. Designer: Douglas Bowman
  13. URL:      www.stopdesign.com
  14. Date:     26 Feb 2004
  15. Updated by: Blogger Team
  16. ----------------------------------------------- */
  17.  
  18. /* Variable definitions
  19.    ====================
  20.    <Variable name="bgcolor" description="Page Background Color"
  21.              type="color" default="#fff" value="#ffffff">
  22.    <Variable name="textcolor" description="Text Color"
  23.              type="color" default="#333" value="#940f04">
  24.    <Variable name="linkcolor" description="Link Color"
  25.              type="color" default="#58a" value="#ff3333">
  26.    <Variable name="pagetitlecolor" description="Blog Title Color"
  27.              type="color" default="#666" value="#666666">
  28.    <Variable name="descriptioncolor" description="Blog Description Color"
  29.              type="color" default="#999" value="#999999">
  30.    <Variable name="titlecolor" description="Post Title Color"
  31.              type="color" default="#c60" value="#940f04">
  32.    <Variable name="bordercolor" description="Border Color"
  33.              type="color" default="#ccc" value="#cccccc">
  34.    <Variable name="sidebarcolor" description="Sidebar Title Color"
  35.              type="color" default="#999" value="#003366">
  36.    <Variable name="sidebartextcolor" description="Sidebar Text Color"
  37.              type="color" default="#666" value="#660000">
  38.    <Variable name="visitedlinkcolor" description="Visited Link Color"
  39.              type="color" default="#999" value="#999999">
  40.    <Variable name="bodyfont" description="Text Font"
  41.              type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
  42.    <Variable name="headerfont" description="Sidebar Title Font"
  43.              type="font"
  44.              default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
  45.    <Variable name="pagetitlefont" description="Blog Title Font"
  46.              type="font"
  47.              default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
  48.    <Variable name="descriptionfont" description="Blog Description Font"
  49.              type="font"
  50.              default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
  51.    <Variable name="postfooterfont" description="Post Footer Font"
  52.              type="font"
  53.              default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
  54.    <Variable name="startSide" description="Side where text starts in blog language"
  55.              type="automatic" default="left" value="left">
  56.    <Variable name="endSide" description="Side where text ends in blog language"
  57.              type="automatic" default="right" value="right">
  58. */
  59.  
  60. /* Use this with templates/template-twocol.html */
  61.  
  62. body {
  63.   background:url(http://i440.photobucket.com/albums/qq12 ... hless2.jpg) repeat-y;
  64.   background-position: 45% 280px;
  65.   margin:0;
  66.   color:$textcolor;
  67.   font:x-small Georgia Serif;
  68.   font-size/* */:/**/small;
  69.   font-size: /**/small;
  70.   text-align: center;
  71.   }
  72. a:link {
  73.   color:$linkcolor;
  74.   text-decoration:none;
  75.   }
  76. a:visited {
  77.   color:$visitedlinkcolor;
  78.   text-decoration:none;
  79.   }
  80. a:hover {
  81.   color:$titlecolor;
  82.   text-decoration:underline;
  83. }
  84. a img {
  85.   border-width:0;
  86.   }
  87.  
  88. /* Header
  89. -----------------------------------------------
  90.  */
  91.  
  92. #header-wrapper {
  93.   width:660px;
  94.   margin:0 auto 0px;
  95.   border:0px solid $bordercolor;
  96.   }
  97.  
  98. #header-inner {
  99.   background-position: left;
  100.   margin-left: -30.25%;
  101.   margin-right: auto;
  102. }
  103.  
  104. #header {
  105.   margin: 5px;
  106.   border: 0px solid $bordercolor;
  107.   text-align: center;
  108.   color:$pagetitlecolor;
  109. }
  110.  
  111.  
  112. #header h1 {
  113.   margin:5px 5px 0;
  114.   padding:15px 20px .25em;
  115.   line-height:1.2em;
  116.   text-transform:uppercase;
  117.   letter-spacing:.2em;
  118.   font: $pagetitlefont;
  119. }
  120.  
  121. #header a {
  122.   color:$pagetitlecolor;
  123.   text-decoration:none;
  124.   }
  125.  
  126. #header a:hover {
  127.   color:$pagetitlecolor;
  128.   }
  129.  
  130. #header .description {
  131.   margin:0 5px 5px;
  132.   padding:0 20px 15px;
  133.   max-width:1020px;
  134.   text-transform:uppercase;
  135.   letter-spacing:.2em;
  136.   line-height: 1.4em;
  137.   font: $descriptionfont;
  138.   color: $descriptioncolor;
  139.  }
  140.  
  141. #header img {
  142.   margin-$startSide: auto;
  143.   margin-$endSide: auto;
  144. }
  145.  
  146.  
  147. /* Outer-Wrapper
  148. ----------------------------------------------- */
  149. #outer-wrapper {
  150.   width: 660px;
  151.   margin:0 auto;
  152.   padding:10px;
  153.   text-align:$startSide;
  154.   font: $bodyfont;
  155.   }
  156.  
  157. #main-wrapper {
  158.   width: 410px;
  159.   float: $startSide;
  160.   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  161.   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  162.   }
  163.  
  164. #sidebar-wrapper {
  165.   width: 220px;
  166.   float: $endSide;
  167.   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  168.   overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  169. }
  170.  
  171.  
  172. /* Headings
  173. ----------------------------------------------- */
  174.  
  175. h2 {
  176.   margin:1.5em 0 .75em;
  177.   font:$headerfont;
  178.   line-height: 1.4em;
  179.   text-transform:uppercase;
  180.   letter-spacing:.2em;
  181.   color:$sidebarcolor;
  182. }
  183.  
  184.  
  185. /* Posts
  186. -----------------------------------------------
  187.  */
  188. h2.date-header {
  189.   margin:1.5em 0 .5em;
  190.   }
  191.  
  192. .post {
  193.   margin:.5em 0 1.5em;
  194.   border-bottom:1px dotted $bordercolor;
  195.   padding-bottom:1.5em;
  196.   }
  197. .post h3 {
  198.   margin:.25em 0 0;
  199.   padding:0 0 4px;
  200.   font-size:140%;
  201.   font-weight:normal;
  202.   line-height:1.4em;
  203.   color:$titlecolor;
  204. }
  205.  
  206. .post h3 a, .post h3 a:visited, .post h3 strong {
  207.   display:block;
  208.   text-decoration:none;
  209.   color:$titlecolor;
  210.   font-weight:normal;
  211. }
  212.  
  213. .post h3 strong, .post h3 a:hover {
  214.   color:$textcolor;
  215. }
  216.  
  217. .post-body {
  218.   margin:0 0 .75em;
  219.   line-height:1.6em;
  220. }
  221.  
  222. .post-body blockquote {
  223.   line-height:1.3em;  
  224. }
  225.  
  226. .post-footer {
  227.   margin: .75em 0;
  228.   color:$sidebarcolor;
  229.   text-transform:uppercase;
  230.   letter-spacing:.1em;
  231.   font: $postfooterfont;
  232.   line-height: 1.4em;
  233. }
  234.  
  235. .comment-link {
  236.   margin-$startSide:.6em;
  237.   }
  238. .post img {
  239.   padding:4px;
  240.   border:1px solid $bordercolor;
  241.   }
  242. .post blockquote {
  243.   margin:1em 20px;
  244.   }
  245. .post blockquote p {
  246.   margin:.75em 0;
  247.   }
  248.  
  249. /* Comments
  250. ----------------------------------------------- */
  251. #comments h4 {
  252.   margin:1em 0;
  253.   font-weight: bold;
  254.   line-height: 1.4em;
  255.   text-transform:uppercase;
  256.   letter-spacing:.2em;
  257.   color: $sidebarcolor;
  258.   }
  259.  
  260. #comments-block {
  261.   margin:1em 0 1.5em;
  262.   line-height:1.6em;
  263.   }
  264. #comments-block .comment-author {
  265.   margin:.5em 0;
  266.   }
  267. #comments-block .comment-body {
  268.   margin:.25em 0 0;
  269.   }
  270. #comments-block .comment-footer {
  271.   margin:-.25em 0 2em;
  272.   line-height: 1.4em;
  273.   text-transform:uppercase;
  274.   letter-spacing:.1em;
  275.   }
  276. #comments-block .comment-body p {
  277.   margin:0 0 .75em;
  278.   }
  279. .deleted-comment {
  280.   font-style:italic;
  281.   color:gray;
  282.   }
  283.  
  284. #blog-pager-newer-link {
  285.   float: $startSide;
  286.  }
  287.  
  288. #blog-pager-older-link {
  289.   float: $endSide;
  290.  }
  291.  
  292. #blog-pager {
  293.   text-align: center;
  294.  }
  295.  
  296. .feed-links {
  297.   clear: both;
  298.   line-height: 2.5em;
  299. }
  300.  
  301. /* Sidebar Content
  302. ----------------------------------------------- */
  303. .sidebar {
  304.   color: $sidebartextcolor;
  305.   line-height: 1.5em;
  306.  }
  307.  
  308. .sidebar ul {
  309.   list-style:none;
  310.   margin:0 0 0;
  311.   padding:0 0 0;
  312. }
  313. .sidebar li {
  314.   margin:0;
  315.   padding-top:0;
  316.   padding-$endSide:0;
  317.   padding-bottom:.25em;
  318.   padding-$startSide:15px;
  319.   text-indent:-15px;
  320.   line-height:1.5em;
  321.   }
  322.  
  323. .sidebar .widget, .main .widget {
  324.   border-bottom:1px dotted $bordercolor;
  325.   margin:0 0 1.5em;
  326.   padding:0 0 1.5em;
  327.  }
  328.  
  329. .main .Blog {
  330.   border-bottom-width: 0;
  331. }
  332.  
  333.  
  334. /* Profile
  335. ----------------------------------------------- */
  336. .profile-img {
  337.   float: $startSide;
  338.   margin-top: 0;
  339.   margin-$endSide: 5px;
  340.   margin-bottom: 5px;
  341.   margin-$startSide: 0;
  342.   padding: 4px;
  343.   border: 1px solid $bordercolor;
  344. }
  345.  
  346. .profile-data {
  347.   margin:0;
  348.   text-transform:uppercase;
  349.   letter-spacing:.1em;
  350.   font: $postfooterfont;
  351.   color: $sidebarcolor;
  352.   font-weight: bold;
  353.   line-height: 1.6em;
  354. }
  355.  
  356. .profile-datablock {
  357.   margin:.5em 0 .5em;
  358. }
  359.  
  360. .profile-textblock {
  361.   margin: 0.5em 0;
  362.   line-height: 1.6em;
  363. }
  364.  
  365. .profile-link {
  366.   font: $postfooterfont;
  367.   text-transform: uppercase;
  368.   letter-spacing: .1em;
  369. }
  370.  
  371. /* Footer
  372. ----------------------------------------------- */
  373. #footer {
  374.   width:660px;
  375.   clear:both;
  376.   margin:0 auto;
  377.   padding-top:15px;
  378.   line-height: 1.6em;
  379.   text-transform:uppercase;
  380.   letter-spacing:.1em;
  381.   text-align: center;
  382. }
  383. ]]></b:skin>
  384.   </head>
  385.  
  386.   <body>
  387.   <div id='outer-wrapper'><div id='wrap2'>
  388.  
  389.     <!-- skip links for text browsers -->
  390.     <span id='skiplinks' style='display:none;'>
  391.       <a href='#main'>skip to main </a> |
  392.       <a href='#sidebar'>skip to sidebar</a>
  393.     </span>
  394.  
  395.     <div id='header-wrapper'>
  396.       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  397. <b:widget id='Header1' locked='true' title='Worthless Wit (Header)' type='Header'/>
  398. </b:section>
  399.     </div>
  400.  
  401.     <div id='content-wrapper'>
  402.  
  403.       <div id='crosscol-wrapper' style='text-align:center'>
  404.         <b:section class='crosscol' id='crosscol' showaddelement='no'/>
  405.       </div>
  406.  
  407.       <div id='main-wrapper'>
  408.         <b:section class='main' id='main' showaddelement='no'>
  409. <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  410. </b:section>
  411.       </div>
  412.  
  413.       <div id='sidebar-wrapper'>
  414.         <b:section class='sidebar' id='sidebar' preferred='yes'>
  415. <b:widget id='LinkList1' locked='false' title='Blogs Better Than This One:' type='LinkList'/>
  416. <b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
  417. <b:widget id='HTML1' locked='false' title='Listening' type='HTML'/>
  418. </b:section>
  419.       </div>
  420.  
  421.       <!-- spacer for skins that want sidebar and main to be the same height-->
  422.       <div class='clear'>&#160;</div>
  423.  
  424.     </div> <!-- end content-wrapper -->
  425.  
  426.     <div id='footer-wrapper'>
  427.       <b:section class='footer' id='footer'/>
  428.     </div>
  429.  
  430.   </div></div> <!-- end outer-wrapper -->
  431. </body>
  432. </html>
  433.                
  434.  


That was huge and I thought that it would use scroll bars in the code box. Apologies for the massive post.

Any help would be greatly appreciated.
  • awatson
  • Novice
  • Novice
  • awatson
  • Posts: 20

Post 3+ Months Ago

I'd say change the top image (that says "Worthless Whit") so that it's a transparent PNG - and remove all of the grid from that top image. This will let the grid from the background below it show through, so you don't have to worry about lining everything up, and can move the title image around more easily. Then on the background, you can set its position via CSS, perhaps something like:

background-position: center top;

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.