Blogger HTML позиционирование div - PullRequest
Новая
       10

Blogger HTML позиционирование div

0 голосов
/ 21 января 2012

Я взял html-шаблон из интернета и изменил его (у меня есть разрешение, я добавлю кредиты, когда наконец получу эту вещь.), Но я хочу, чтобы посты блога показывали немного выше, чем раньше.Я уже много чего перепробовал, думал, что должен был изменить положение или поле либо обертки контента, либо основной обертки, но ничего из этого не сработало.

Это кодировка 

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

1 Ответ

1 голос
/ 21 января 2012

Одна проблема, которую я вижу сразу, состоит в том, что у главной обертки есть отрицательное нижнее поле, которое потянет его вниз, а не вверх.Можете ли вы предоставить ссылку на страницу в реальном времени?Это было бы намного легче отладить.:) В общем, для перемещения чего-либо вверх вы можете использовать меньшее или отрицательное значение margin-top, но это также зависит от того, какой стиль позиционирования вы используете (float, static, относительный, absolute) и как элементы взаимодействуют сдруг друга.

...