I'm a newbie who needs help editing my blogger html

Discussion in 'HTML & Website Design' started by snuglawlz, Jul 18, 2011.

0
  1. #1
    I've been trying to tweak my blogger html and I fear I've epically screwed it up. Basically the place for the text was too small in the original template, so I expanded the image, reloaded it, and now i'm just trying to get everything to work.

    All I want is everything shifted over so that it's centered and not all shoved to the right (there's about 100px-200px margin on the left that I want gone).

    Please help me!! I understand html but I've never written code for a blogger template so i'm hopelessly lost. I've tried experimenting for days now and gotten it almost right, except the sidebar always jumps to below the text of my blog post and refused to move up underneath the heading.

    If you could make the appropriate changes and tell me what those are, I'll love you forever!!! (that shouldn't be creepy since I'm not a man) 

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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 adapted by Blog and Web
Original design by Free CSS Template.

Find this and more templates at:
http://blogandweb.com
http://btemplates.com

Remember that this template is free and this
under a Creative Commons Attribution license.
You can use it for personal or commercial
but DO NOT REMOVE CREDITS

A nice way of giving thanks is a link to Blog and Web.
***************************** */


/* Definition of variables
   ====================
   <Variable name="textocolor" description="Text color"
             type="color" default="#999999" value="#999999">
   <Variable name="enlacecolor" description="Link color"
             type="color" default="#333333" value="#333333">
   <Variable name="colortituloblog" description="Blog title color"
             type="color" default="#3399FF" value="#3399FF">
   <Variable name="descripcioncolor" description="Blog description color"
             type="color" default="#3399FF" value="#3399FF">
   <Variable name="colortituloentrada" description="Title entres color"
             type="color" default="#FF8400" value="#FF8400">
   <Variable name="colortituloslateral" description="Sidebar titles color"
             type="color" default="#FFFFFF" value="#FFFFFF">
   <Variable name="colortextolateral" description="Sidebar text color"
             type="color" default="#3399FF" value="#3399FF">
   <Variable name="colorenlaceencima" description="Link color after clicked"
             type="color" default="#000000" value="#000000">
*/

#outer-wrapper {
}

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

/*-- (General) --*/

body {
	margin: 20px 0;
	padding: 0;
	background: #3399FF url(http://i1226.photobucket.com/albums/ee420/snuggleslawlz/img01-1.png) repeat-y right;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: $textocolor;
}

h1, h2, h3 {
	margin: 0;
	font-weight: normal;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.4em;
}

img {
	border: none;
}

a {
	color: $enlacecolor;
}

a:hover {
	text-decoration: none;
	color: $colorenlaceencima;
}

/*-- (Head) --*/

#header-wrapper {
	width: 740px;
	height: 160px;
	margin: 0 auto;
}

#header {
	float: left;
	width: 260px;
	height: 160px;
	background: url(http://bp2.blogger.com/_Zuzii37VUO4/Rk3vrZyaybI/AAAAAAAABUI/G5auRhhyACc/s1600/img02.gif) no-repeat;
}

#header h1 {
	padding: 50px 0 0 20px;
	letter-spacing: -.05em;
	font-size: 4em;
	color: $colortituloblog;
}

#header h2 {
	font-size: 1.8em;
	color: $descripcioncolor;
}

#header a {
	text-decoration: none;
	color: #3399FF;
}


#content-wrapper {
	width: 1100px;
	margin: 0 auto;
}

/*-- (Menu) --*/

#menu {
	float: right;
	width: 360px;
	height: 50px;
	margin: 10px 10px 0 0;
	background: #99CC00 url(http://bp3.blogger.com/_Zuzii37VUO4/Rk3wCpyaygI/AAAAAAAABUw/b4E6ZJydxJw/s1600/img05.gif);
}

#menu ul {
	margin: 0;
	padding: 0 0 0 1em;
	list-style: none;
}

#menu li {
	display: inline;
	margin: 0;
	padding:0;
	float:none;
}

#menu a {
	display: block;
	float: left;
	padding: .5em .7em;
	text-decoration: none;
	letter-spacing: -1px;
	font-size: 1.5em;
	color: #FFFFFF;
}

#menu a:hover {
	background: #FF9900;
}

#menu .active a {
}

/*-- (Main) --*/

#main-wrapper {
	float: right;
	width: 550px;
	padding: 0 30px 0 0;
}

#main-wrapper a {
}

#main-wrapper a:hover {
}

.post {
	margin-bottom: 10px;
}
.post-title, .post-title a {
	padding: 0 0 5px 20px;
	color: $colortituloentrada;
}

.post-body {
	padding: 10px 20px;
	line-height: 180%;
}

.date-header {
}

.post-footer {
	margin-left: 10px;
	padding: 10px 20px;
	background: url(http://bp3.blogger.com/_Zuzii37VUO4/Rk3vupyayfI/AAAAAAAABUo/BF2OzDfXTIs/s1600/img06.gif) no-repeat;
	font-size: smaller;
}


/*-- (Sidebar) --*/

#sidebar-wrapper {
	float: right;
	width: 350px;
}

#sidebar-wrapper a {
	text-decoration: none;
	color: $colortextolateral;
}

#sidebar-wrapper a:hover {
	color: #FF9900;
}

#sidebar-wrapper h2 {
	height: 40px;
	padding: 5px 0 0 30px;
	background: url(http://bp2.blogger.com/_Zuzii37VUO4/Rk3vrZyaycI/AAAAAAAABUQ/iootLSSlmUw/s1600/img03.gif) no-repeat;
	font-size: 2em;
	color: $colortituloslateral;
}

.widget-content {
	color: #FFFFFF;
}

.sidebar .widget {
	width: 240px;
	padding: 0 0 3em 0;
	background: #FFCC00 url(http://bp3.blogger.com/_Zuzii37VUO4/Rk3vrpyaydI/AAAAAAAABUY/iUoiBLF9Ips/s1600/img04.gif) no-repeat left bottom;
}

/*-- (Footer) --*/

#footer-wrapper {
	clear: both;
	width: 200px;
	margin: 0 auto;
	padding: 0 520px 0 20px;
}

#footer-wrapper .links {
	color: #FFFFFF;
}

#footer-wrapper a {
	color: #FFFFFF;
}

#main-wrapper {overflow:hidden;} .clear {clear:both;}
#blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center; }

]]></b:skin>
<link href='http://plantillasblogyweb.googlepages.com/estilos-blogger.css' rel='stylesheet' type='text/css'/>
<link href='http://plantillasblogyweb.googlepages.com/blogy-neoneon.css' rel='stylesheet' type='text/css'/>  </head>

  <body>

  <div id='outer-wrapper'><div id='wrap2'>

    <!-- links para navegadores de texto -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>ir a principal </a> |
      <a href='#sidebar'>Ir a lateral</a>
    </span>

<!-- (Header) -->
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Erin (Header)' type='Header'/>
</b:section>


            <!-- Pages-based menu added by BTemplates.com -->
            <div id='menu'><div>
            <!-- Pages -->
            <b:section class='crosscol' id='pages' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
            <!-- /Pages -->
            </div></div>

    </div>

<!-- (Container) -->	
    <div id='content-wrapper'>

<!-- (Main) -->
      <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>

<!-- (Sidebar) -->
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='Feed1' locked='false' title='Feed' type='Feed'/>
</b:section>
      </div>

<!-- Clean Float-->
      <div class='clear'/>

    </div> <!-- to layer  content-wrapper -->

<!-- (Footer) -->
    <div id='footer-wrapper'>
<!-- Remember, this template is free. Please do not remove the credits -->
  <p class='links'> Designed by <a href='http://www.freecsstemplates.org/'>Free CSS Templates</a> 
  | <a href='http://btemplates.com/'>Blogger Layouts</a> by <a href='http://blogandweb.com/'>Blog and Web</a></p>
    </div>

  </div></div> <!-- fin de capa outer-wrapper -->
</body>
</html>
    HTML:
    Thank you!! Also sorry if there is random Spanish, I had to translate everything and may have missed something
     
    snuglawlz, Jul 18, 2011 IP
  2. CrostE

    CrostE Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Try to change the width of the blogpost class or the #content-wrapper.
     
    CrostE, Jul 19, 2011 IP
  3. Secret Shopper

    Secret Shopper Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Need time to read you codes.
     
    Secret Shopper, Jul 19, 2011 IP
  4. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #4
    If you want everything to be centered do this
    
#outer-wrapper {
width:960px;
margin:0 auto;
}
    HTML:
     
    fhk_kz5, Jul 19, 2011 IP
  5. snuglawlz

    snuglawlz Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hey guys thanks for the help but neither of them worked. What I've been trying to do in the past was change the size of the content wrapper (and make it smaller), but when I do that it offsets everything and I never can get the sidebar to be on the side (it always appears at the bottom of my blog post).
     
    snuglawlz, Jul 19, 2011 IP
  6. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #6
    This is the problem
    
#footer-wrapper {
    clear: both;
    width: 200px;
    margin: 0 auto;
    padding: 0 520px 0 20px;
}
    HTML:
     
    fhk_kz5, Jul 19, 2011 IP
  7. normanweb

    normanweb Well-Known Member

    Messages:
    126
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    123
    #7
    Check the footer wrapper and that may fix the problem your experiencing with the content being shifted over
     
    normanweb, Jul 19, 2011 IP
  8. snuglawlz

    snuglawlz Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Okay, so how do I fix the footer wrapper? (I really am clueless)
     
    snuglawlz, Jul 19, 2011 IP
  9. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #9
    I showed you the problem but purposely did not tell you the solution so that you would try to find out.Anyways padding to the right is 520px.You need to change this.
     
    fhk_kz5, Jul 20, 2011 IP
  10. snuglawlz

    snuglawlz Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    No I understood what you meant. I changed the padding and it still didn't work.
     
    snuglawlz, Jul 21, 2011 IP
  11. deadlydesigns

    deadlydesigns Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Have no fear! The Day Is SAVED! Because the EXPERT and PRO web designer is here! Others have tried to help you with the problem and have FAILED and I Have come with the solution! *crowd cheers* lol

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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 adapted by Blog and Web
Original design by Free CSS Template.

Find this and more templates at:
http://blogandweb.com
http://btemplates.com

Remember that this template is free and this
under a Creative Commons Attribution license.
You can use it for personal or commercial
but DO NOT REMOVE CREDITS

A nice way of giving thanks is a link to Blog and Web.
***************************** */


/* Definition of variables
  ====================
  <Variable name="textocolor" description="Text color"
            type="color" default="#999999" value="#999999">
  <Variable name="enlacecolor" description="Link color"
            type="color" default="#333333" value="#333333">
  <Variable name="colortituloblog" description="Blog title color"
            type="color" default="#3399FF" value="#3399FF">
  <Variable name="descripcioncolor" description="Blog description color"
            type="color" default="#3399FF" value="#3399FF">
  <Variable name="colortituloentrada" description="Title entres color"
            type="color" default="#FF8400" value="#FF8400">
  <Variable name="colortituloslateral" description="Sidebar titles color"
            type="color" default="#FFFFFF" value="#FFFFFF">
  <Variable name="colortextolateral" description="Sidebar text color"
            type="color" default="#3399FF" value="#3399FF">
  <Variable name="colorenlaceencima" description="Link color after clicked"
            type="color" default="#000000" value="#000000">
*/

#outer-wrapper {
}

#navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none
}

/*-- (General) --*/

body {
    margin: 20px 0;
    padding: 0;
    background: #3399FF url(http://i1226.photobucket.com/albums/ee420/snuggleslawlz/img01-1.png) repeat-y right;
    font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: $textocolor;
}

h1, h2, h3 {
    margin: 0;
    font-weight: normal;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.4em;
}

img {
    border: none;
}

a {
    color: $enlacecolor;
}

a:hover {
    text-decoration: none;
    color: $colorenlaceencima;
}

/*-- (Head) --*/

#header-wrapper {
    width: 740px;
    height: 160px;
    margin: 0 0 0 300px;
    padding: 0;
}

#header {
    float: left;
    width: 260px;
    height: 160px;
    margin: 0 0 0 -40px;
    padding: 0;
    background: url(http://bp2.blogger.com/_Zuzii37VUO4/Rk3vrZyaybI/AAAAAAAABUI/G5auRhhyACc/s1600/img02.gif) no-repeat;
}

#header h1 {
    padding: 50px 0 0 20px;
    letter-spacing: -.05em;
    font-size: 4em;
    color: $colortituloblog;
}

#header h2 {
    font-size: 1.8em;
    color: $descripcioncolor;
}

#header a {
    text-decoration: none;
    color: #3399FF;
}


#content-wrapper {
    width: 1100px;
    margin: 0 0 0 145px;
    padding: 0;

}



/*-- (Menu) --*/

#menu {
    float: right;
    width: 360px;
    height: 50px;
    margin: 10px 10px 0 0;
    background: #99CC00 url(http://bp3.blogger.com/_Zuzii37VUO4/Rk3wCpyaygI/AAAAAAAABUw/b4E6ZJydxJw/s1600/img05.gif);
}

#menu ul {
    margin: 0;
    padding: 0 0 0 1em;
    list-style: none;
}

#menu li {
    display: inline;
    margin: 0;
    padding:0;
    float:none;
}

#menu a {
    display: block;
    float: left;
    padding: .5em .7em;
    text-decoration: none;
    letter-spacing: -1px;
    font-size: 1.5em;
    color: #FFFFFF;
}

#menu a:hover {
    background: #FF9900;
}

#menu .active a {
}

/*-- (Main) --*/

#main-wrapper {
    float: right;
    width: 550px;
    padding: 0 30px 0 0;
}

#main-wrapper a {
}

#main-wrapper a:hover {
}

.post {
    margin-bottom: 10px;
}
.post-title, .post-title a {
    padding: 0 0 5px 20px;
    color: $colortituloentrada;
}

.post-body {
    padding: 10px 20px;
    line-height: 180%;
}

.date-header {
}

.post-footer {
    margin-left: 60px;
    padding: 10px 20px;
    background: url(http://bp3.blogger.com/_Zuzii37VUO4/Rk3vupyayfI/AAAAAAAABUo/BF2OzDfXTIs/s1600/img06.gif) no-repeat;
    font-size: smaller;
}


/*-- (Sidebar) --*/

#sidebar-wrapper {
    float: left;
    width: 350px;
    margin: 0 0 0 115px;
    padding: 0;
}

#sidebar-wrapper a {
    text-decoration: none;
    color: $colortextolateral;
}

#sidebar-wrapper a:hover {
    color: #FF9900;
}

#sidebar-wrapper h2 {
    height: 40px;
    padding: 5px 0 0 30px;
    background: url(http://bp2.blogger.com/_Zuzii37VUO4/Rk3vrZyaycI/AAAAAAAABUQ/iootLSSlmUw/s1600/img03.gif) no-repeat;
    font-size: 2em;
    color: $colortituloslateral;
}

.widget-content {
    color: #FFFFFF;
}

.sidebar .widget {
    width: 240px;
    padding: 0 0 3em 0;
    background: #FFCC00 url(http://bp3.blogger.com/_Zuzii37VUO4/Rk3vrpyaydI/AAAAAAAABUY/iUoiBLF9Ips/s1600/img04.gif) no-repeat left bottom;
}

/*-- (Footer) --*/

#footer-wrapper {
    clear: both;
    width: 200px;
    margin: 0 auto;
    padding: 0 520px 0 20px;
}

#footer-wrapper .links {
    color: #FFFFFF;
}

#footer-wrapper a {
    color: #FFFFFF;
}

#main-wrapper {overflow:hidden;} .clear {clear:both;}
#blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center; }

]]></b:skin>
<link href='http://plantillasblogyweb.googlepages.com/estilos-blogger.css' rel='stylesheet' type='text/css'/>
<link href='http://plantillasblogyweb.googlepages.com/blogy-neoneon.css' rel='stylesheet' type='text/css'/>  </head>

  <body>

  <div id='outer-wrapper'><div id='wrap2'>


    <!-- links para navegadores de texto -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>ir a principal </a> |
      <a href='#sidebar'>Ir a lateral</a>
    </span>

<!-- () -->

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Erin (Header)' type='Header'/>
</b:section>


            <!-- Pages-based menu added by BTemplates.com -->
            <div id='menu'><div>
            <!-- Pages -->
            <b:section class='crosscol' id='pages' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
            <!-- /Pages -->

            </div></div>

    </div>

<!-- (Container) -->   

    <div id='content-wrapper'>

<!-- (Main) -->
      <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>

<!-- (Sidebar) -->
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='Feed1' locked='false' title='Feed' type='Feed'/>
</b:section></div>




</div>



<!-- Clean Float-->
      <div class='clear'/>

<!-- (Footer) -->
    <div id='footer-wrapper'>
<!-- Remember, this template is free. Please do not remove the credits -->
  <p class='links'> Designed by <a href='http://www.freecsstemplates.org/'>Free CSS Templates</a>
  | <a href='http://btemplates.com/'>Blogger Layouts</a> by <a href='http://blogandweb.com/'>Blog and Web</a></p>
    </div>

  </div></div> <!-- fin de capa outer-wrapper -->
</body>
</html>
    Code (markup):
    Just copy and paste the code above and your day is SAVED!
     
    deadlydesigns, Jul 21, 2011 IP