Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Blogspot XML Template Q

    My test site is here:
    http://testlayoutblog1234.blogspot.com.es/

    The images on the first sample post are centered, and are not in line with the writing although both are 600 pixels wide. Part of the image is slightly cut off.

    On the second sample post the picture is the same width but aligned left, and matches perfectly with the 600px wide writing.

    Can someone tell me what to change in my coding so the centered image is in line with the post and title?

    Here's the template code:
    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <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'/>
    
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    
    <title><data:blog.pageTitle/></title>
    The next part is the CSS Styling but before that, lets quickly add a favicon
    <link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    
    <b:skin><![CDATA[body{width:800px;margin:0px auto;padding:0px;background-color:#282828;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;color:#282828}
    #main-wrapper{background: #fff;width:800px;overflow:hidden;text-align:left;}
    #header-wrapper{width:800px;height:90px;overflow:hidden;text-align:center;margin:0px 685px 0px 0px;padding:0px;}
    #content-wrapper{width:600px;overflow:hidden;text-align:justify;margin-left:100px;margin-right:100px;padding: 0px 0px 0px 0px;}
    ]]>
    
    a:link,a:visited{color:#C90A0A;text-decoration: none;outline:none;}
    a:hover{color:#282828;text-decoration:bold;outline:none;}
    a img{border-width:0}
    blockquote{overflow:hidden;padding-left:9px;font-style:italic;color:#353535;border-left:3px solid #C90A0A;}
    #navbar-iframe{display:none;}
    
    /* Header------------------------------------*/
    #header-wrapper{width:800px;height:90px;overflow:hidden;text-align:center;margin:0px 5px 0px 10px;padding:0px;}
    #header-banner {width:800px;height:90px;overflow:hidden;text-align:center;margin:0px 10px 0px 5px;}
    
    /* Menu--------------------------------------*/
    #menubar {background: #25292A;width: 981px;color: #fff;margin: 0px;padding: 0;position: relative;height:30px;border:2px solid #DDDDDD;}
    #menubar ul {float: left;list-style: none;margin: 0;padding: 0;}
    #menubar li {list-style: none;margin: 0;padding: 0;border-right:2px solid #DDDDDD;height:30px;}
    #menubar li a, #mmenu li a:link, #mmenu li a:visited {color: #FFF;display: block;font:bold 12px Helvetica, sans-serif;margin: 0;padding: 7px 12px 8px 12px;text-decoration: none;}
    #menubar li a:hover, #menubar li a:active {background: transparent;color: #FFF;display: block;text-decoration: none;font-weight:bold;margin: -2px 0px -2px 0px;padding: 7px 12px 8px 12px;border-top:2px solid #C90A0A;border-bottom:2px solid #25292A;}
    #menubar li {float: left;padding: 0;} 
    
    /* Posts-------------------------------------*/
    h2.date-header{margin:1.5em 0 .5em}
    .post{border-bottom:1px solid #CACACA;margin-bottom:15px;}
    .post-title{color:#000000;margin:0 0 10px 0;padding:0px 0px 0px 5px;font-family:Oswald,Georgia,Times New Roman Times,Serif;font-size:24px;line-height:24px;font-weight:bold;}
    .post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;color:#282828;}
    .post-title strong,.post-title a:hover{text-decoration:none;color:#C90A0A;}
      .post-body{padding-top:0px;padding-bottom:0px;margin:0px;font-family:Georgia, Times New Roman Times, Serif;font-size:12px;letter-spacing:1px;line-height:20px;}
    .post-footer{margin:2px 0;color:$sidebarcolor;font:$postfooterfont;}
    .comment-link{margin-$startSide:.6em}
    .post-body img{padding:0px 0px 0px 0px;background:#fff;border:0px solid #CCCCCC;margin:0 0px 0px 0;}
    .postmeta-primary{color:#777;font-size:11px;text-transform:uppercase;padding:0 0 0px 0}
    .postmeta-secondary{color:#777;font-size:11px;padding:0 0 0px 0}
    
    .meta_date{background-image:url(http://1.bp.blogspot.com/_4HKUHirY_2U/TR4c-tFyiSI/AAAAAAAAK4U/Jv2nS7P9Wg0/s1600/time.png)}
    .meta_author{background-image:url(http://4.bp.blogspot.com/_4HKUHirY_2U/TR4cOyU0A-I/AAAAAAAAK2k/D2Jk3VfLKJ8/s1600/author.png)}
    .meta_comments{background-image:url(http://3.bp.blogspot.com/_4HKUHirY_2U/TR4cPeudNzI/AAAAAAAAK28/NlICynH6epM/s1600/comments.png)}
    .meta_edit{background-image:url(http://1.bp.blogspot.com/_4HKUHirY_2U/TR4cPS-LAaI/AAAAAAAAK3E/7EUARPnJAQo/s1600/edit.png)}
    .meta_categories{background-image:url(http://4.bp.blogspot.com/_4HKUHirY_2U/TR4cPENbv4I/AAAAAAAAK20/7Uu-n3Um2Z0/s1600/cat.png)}
    .meta_tags{background-image:url(http://4.bp.blogspot.com/_4HKUHirY_2U/TR4c-W-aW6I/AAAAAAAAK4M/Bm--qwJnqNI/s1600/tags.png)}
    .readmore-wrap{margin-bottom:5px;float:right}
    a.readmore{color:#282828;background-color:#ffffff;border:0px solid #C4C4C4;padding:5px 14px;font-size:11px;line-height:11px;display:block;text-decoration:none;text-shadow:0 1px 0 #fff}
    a.readmore:hover{color:#FFFFFF;font-weight:bold;background-color:#C90A0A;border:0px solid #333;text-decoration:none;text-shadow:0 1px 0 #222}
    .jump-link{width:0px;height:0px;display:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
    .post-footer-line{display:none;} 
    
    </b:skin>
    
    </head>
    <body>
    
    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
    </b:section>
    
    <div id='main-wrapper'>
    <div id='header-wrapper'>
     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Simple (Header)' type='Header'>
    </b:widget>
    </b:section>
    </div>
    <div id='content-wrapper'>
     <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
    </b:widget>
    </b:section>
    </div>
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar1' showaddelement='yes'>
    </b:section>
    </div>
    </div>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,722
    Thanks
    25
    Thanked 662 Times in 661 Posts
    You put margin-left:1 em; on the images.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok - how do i do this?? where do i change it?? thanks!

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by stephgeske View Post
    ok - how do i do this?? where do i change it?? thanks
    The three a elements containing your img elements all have margin-left: 1em; specified through a style attribute. That's what's causing your images to be offset to the right. You'll need to figure out where that code is specified and remove it. I don't see those two declarations specified in any of the server-side code you've shown, so there's not much more I can tell you than that.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •