CODEWITHSUNDEEP
htmlpositionblogger
Jane
Jane

Reputation: 816

Blogger html div positioning

I took an html template from internet and altered it (I have permission to, I will add credits when I finally get this thing to work.) but I want the blogposts to show a bit higher than before. I tried a lot of things already, I thought I was supposed to change the position or margin of either the content wrapper or the main wrapper but none of it worked.

This is the coding

<?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>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Name:    VanillaLooks
Author:   Kelly Vuijst
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
   ====================

   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#EF3665" value="#EF3665">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#eee" value="#eeeeee">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#B81840" value="#B81840">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#EF3665" value="#EF3665">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#666666">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#EF3665" value="#EF3665">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 110% Arial, Serif" value="normal normal 110% Arial, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="bold 140%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif" value="bold 140%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="bold 260% Lobster,Serif" value="bold 260% Lobster,Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="italic 100% 'Georgia',Trebuchet,Arial,Verdana,Sans-serif" value="italic 100% 'Georgia',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="italic 90%/1.4em 'Georgia',Trebuchet,Arial,Verdana,Sans-serif" value="italic 90%/1.4em 'Georgia',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-treecol.html */

body {
background:url("http://i41.tinypic.com/faoahy.png") repeat-x scroll 0 0 #F6E5E0;
color:$textcolor;
font:small Georgia Serif;
margin:0;
text-align:center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:#333333;
text-decoration:underline;
}
a img {
border-width:0;
}
#header-wrapper {
height:200px;
margin:0 auto;
width:976px;
}
#content-wrapper {
position-top:100px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:$pagetitlecolor;
text-align:left;
}
#header h1 {
font: $pagetitlefont;
letter-spacing:1px;
margin:0;
padding:70px 50px 2px;
text-shadow:0 1px 0 #000000;
text-transform:none;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:#F6E5E0;
}
#header .description {
font: $descriptionfont;
color: $descriptioncolor;
letter-spacing:0.2em;
margin:0;
max-width:700px;
padding:0 50px 15px;
text-transform:none;
}
#header img {
margin-left:auto;
margin-right:auto;
}
#outer-wrapper {
font: $bodyfont;
margin:0 auto;
text-align:left;
width:976px;
}
#placeholder {
display:block;
float:right;
height:45px;
margin-right:191px;
margin-top:96px;
width:173px;
}
#main-wrapper {
float:left;
position-top:100px;
margin-bottom:-40px;
margin-left:25px;
margin-top:0px;
overflow:hidden;
width:570px;
word-wrap:break-word;
}
#sidebar-wrapper {
float:right;
margin-right:30px;
margin-top:48px;
overflow:hidden;
width:320px;
word-wrap:break-word;
}
h2 {
font:$headerfont;
color:$sidebarcolor;
letter-spacing:0;
margin:0;
padding-bottom:10px;
padding-left:61px;
padding-top:20px;
text-shadow:0 1px 0 #FFFFFF;
text-transform:none;
}
h2.date-header {
background:none repeat scroll 0 0 transparent;
color:#777777;
font:italic 12px georgia;
height:10px;
letter-spacing:0;
margin:0;
padding:0;
text-align:center;
text-transform:none;
}
.post {
margin:0.5em 0 1.5em;
padding-bottom:1.5em;
}
.post h3 {
background:url("http://2.bp.blogspot.com/_uW7vQWFtStk/TDw71JjPkUI/AAAAAAAAAok/tzJPjG4heWw/s1600/under-title.png") no-repeat scroll center bottom transparent;
color:$titlecolor;
font:italic 170% georgia;
height:55px;
margin:0.25em 0 10px;
padding:0 0 5px;
text-align:center;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color:$titlecolor;
display:block;
font-weight:bold;
text-decoration:none;
}
.post h3 strong, .post h3 a:hover {
color:#333333;
}
body#layout #footer {
display:none;
}
body#layout #crosscol-wrapper {
display:none;
}
body#layout #addthis_toolbox {
display:none;
}
body#layout #searchbox {
display:none;
}
.post-body {
line-height:1.6em;
margin:0 0 0.75em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
border-top:1px dotted #F88C8C;
color:#777777;
font:$postfooterfont;
letter-spacing:0;
margin:0.75em 0;
padding:5px 10px;
text-transform:none;
}
.comment-link {
margin-left:0.6em;
}
.post img, table.tr-caption-container {
border:3px solid #F6E5E0;
padding:1px;
}
.tr-caption-container img {
border:medium none;
padding:0;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:0.75em 0;
}
#comments h4 {
color:#666666;
font-size:14px;
font-weight:bold;
letter-spacing:0;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #F6E5E0;
border:1px solid #F6E5E0;
font-size:15px;
font-weight:normal;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #F6E5E0;
border-color:#F6E5E0;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
border-left:1px solid #F6E5E0;
border-right:1px solid #F6E5E0;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
border-bottom:1px solid #F6E5E0;
border-left:1px solid #F6E5E0;
border-right:1px solid #F6E5E0;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}
#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
}
#blog-pager {
text-align:center;
}
.feed-links {
clear:both;
line-height:2.5em;
}
.sidebar {
color:$sidebartextcolor;
line-height:1.5em;
}
.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
border-bottom:1px dotted #CCCCCC;
line-height:1.5em;
margin:0;
padding:2px;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
}
.main .Blog {
border-bottom-width:0;
}
.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px;
}
.profile-data {
color:#999999;
font:bold 78%/1.6em 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:0.1em;
margin:0;
text-transform:uppercase;
}
.profile-datablock {
margin:0.5em 0;
}
.profile-textblock {
line-height:1.6em;
margin:0.5em 0;
}
.profile-link {
font:78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:0.1em;
text-transform:uppercase;
}
#footer-bg {
background:url("http://i41.tinypic.com/2603ibo.png") repeat-x scroll 0 0 transparent;
height:170px;
}
#footer {
background:url("http://i44.tinypic.com/15x8kr9.png") no-repeat scroll 0 0 transparent;
clear:both;
color:#F6E5E0;
font:11px arial;
height:50px;
letter-spacing:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
padding-top:120px;
text-shadow:0 1px 0 #000000;
text-transform:none;
width:971px;
}
#footer a {
color:#FFFFFF;
}
.fright {
float:right;
margin-top:3px;
text-align:right;
width:44%;
}
.fleft {
float:left;
margin-left:20px;
margin-top:2px;
text-align:left;
width:42%;
}
.feed-links {
display:none;
}
#wrapper {
background:url("http://i43.tinypic.com/ilejnq.png") no-repeat scroll 0 0 transparent;
}
#content-bg {
background:url("http://4.bp.blogspot.com/_uW7vQWFtStk/TDtxozDPxQI/AAAAAAAAAn0/LWJL5xZX7B0/s1600/content-bg.png") repeat-y scroll 0 0 transparent;
margin:0 auto;
width:976px;
}
#PageList1 {
font:italic 110% georgia;
height:50px;
margin-left:50px;
padding-top:18px;
width:700px;
}
#searchbox {
-moz-background-inline-policy:continuous;
background:url("http://1.bp.blogspot.com/_uW7vQWFtStk/TDxCifGlCkI/AAAAAAAAAo0/RyDNKX7ATvM/s1600/search-box.png") no-repeat scroll 0 0 transparent;
border-left:1px solid #EEEEEE;
display:block;
float:right;
height:45px;
margin-right:191px;
margin-top:96px;
width:173px;
}
#searchbox .textfield {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
border:0 none;
float:left;
height:15px;
margin:14px 1px 10px 20px;
width:107px;
}
#searchbox .button {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
border:0 none;
cursor:pointer;
float:left;
height:30px;
margin-left:2px;
margin-top:6px;
width:30px;
}
#sidebar-wrapper .widget-content {
padding:0 25px;
}
.PageList li a {
color:#C1987C;
font-weight:bold;
}
.PageList li a:hover {
color:#EDD3C0;
font-weight:bold;
text-decoration:none;
}
.PageList li.selected a {
color:#EDD3C0;
font-weight:bold;
text-decoration:none;
}

#addthis_toolbox {
float:right;
margin-left:179px;
margin-top:66px;
}
.addthis_button_rss {
margin-right:5px;
}
.addthis_button_twitter {
margin-right:5px;
}
.col-left {
float:left;
margin-right:10px;
width:48%;
}
.col-right {
float:right;
width:48%;
}
.post-author {
background:url("http://3.bp.blogspot.com/_8GxSJXcDIwk/TBNBFo0rK-I/AAAAAAAABq8/VO_ATeuF6sM/s1600/aaa.png") no-repeat scroll 0 0 transparent;
padding-left:20px;
}
.post-comment-link a {
background:url("http://2.bp.blogspot.com/_8GxSJXcDIwk/TBM6sX5_MNI/AAAAAAAABp8/2RwKjFNZjcQ/s1600/1276328597_comment.png") no-repeat scroll left center transparent;
padding-left:20px;
}
.post-labels {
background:url("http://4.bp.blogspot.com/_8GxSJXcDIwk/TBNALDZe_0I/AAAAAAAABqk/cS_OBWXZEQs/s1600/1276330011_tags.png") no-repeat scroll left center transparent;
padding-left:20px;
}
]]></b:skin>
  </head>

  <body>
<div id='content-bg'>
<div id='wrapper'>
  <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='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
      </div>
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='VanillaLooks.blogspot.com (Kop)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>
<div id='placeholder'>
</div>
<div id='addthis_toolbox'> 

</div> 
      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blogberichten' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Slideshow1' locked='false' title='Slideshow' type='Slideshow'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
<div id='2columns'>
<div class='col-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archief' type='BlogArchive'/>
</b:section>
</div>
<div class='col-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div></div>
      </div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->


  </div></div> <!-- end outer-wrapper --> </div></div>
<div id='footer-bg'> 
<div id='footer'> 
</div> 
</div> 
</body>
</html>

Upvotes: 0

Views: 1669

Answers (1)

Chad Schultz
Chad Schultz

Reputation: 7860

One problem I see right off is that main-wrapper has a negative bottom margin, which would pull it downwards, not upwards. Can you provide a link to the live page? That would be a lot easier to debug. :) In general, to move something up you could use a smaller or negative margin-top value, but it also depends on what style of positioning you're using (float, static, relative, absolute) and how the elements are interacting with one another.

Upvotes: 1

Related Questions