html - mystery left margin in header -
i started google blog using static simple template. i've added few customizations, based on i've read , help wonderful people. i'm happy results, except. added hr element separate navbar/tabs recent post. reason can't yet fathom, left end of hr not flush left side of body of page. if increment width 120% runs off right border of page, not left.
my url is: http://proustscookies.blogspot.com/
code below - hope relevant.
/* variable definitions ==================== <variable name="keycolor" description="main color" type="color" default="#66bbdd" value="#ffffff"/> <group description="page text" selector="body"> <variable name="body.font" description="font" type="font" default="normal normal 12px arial, tahoma, helvetica, freesans, sans-serif" value="normal normal 12px 'trebuchet ms', trebuchet, verdana, sans-serif"/> <variable name="body.text.color" description="text color" type="color" default="#222222" value="#666666"/> </group> <group description="backgrounds" selector=".body-fauxcolumns-outer"> <variable name="body.background.color" description="outer background" type="color" default="#66bbdd" value="#ffffff"/> <variable name="content.background.color" description="main background" type="color" default="#ffffff" value="#ffffff"/> <variable name="header.background.color" description="header background" type="color" default="transparent" value="transparent"/> </group> <group description="links" selector=".main-outer"> <variable name="link.color" description="link color" type="color" default="#2288bb" value="#2288bb"/> <variable name="link.visited.color" description="visited color" type="color" default="#888888" value="#666666"/> <variable name="link.hover.color" description="hover color" type="color" default="#33aaff" value="#2288bb"/> </group> <group description="blog title" selector=".header h1"> <variable name="header.font" description="font" type="font" default="normal normal 60px arial, tahoma, helvetica, freesans, sans-serif" value="normal normal 70px 'times new roman', times, freeserif, serif"/> <variable name="header.text.color" description="title color" type="color" default="#3399bb" value="#000000"/> </group> <group description="blog description" selector=".header .description"> <variable name="description.font" description="font" type="font" default="normal normal 60px arial, tahoma, helvetica, freesans, sans-serif" value="italic normal 50px 'times new roman', times, freeserif, serif"/> <variable name="description.text.color" description="description color" type="color" default="#777777" value="#000000"/> </group> <group description="tabs text" selector=".tabs-inner .widget li a"> <variable name="tabs.font" description="font" type="font" default="normal normal 14px arial, tahoma, helvetica, freesans, sans-serif" value="normal normal 14px 'trebuchet ms', trebuchet, verdana, sans-serif"/> <variable name="tabs.text.color" description="text color" type="color" default="#999999" value="#000000"/> <variable name="tabs.selected.text.color" description="selected color" type="color" default="#000000" value="#000000"/> </group> <group description="tabs background" selector=".tabs-outer .pagelist"> <variable name="tabs.background.color" description="background color" type="color" default="#f5f5f5" value="transparent"/> <variable name="tabs.selected.background.color" description="selected color" type="color" default="#eeeeee" value="transparent"/> </group> <group description="post title" selector="h3.post-title, .comments h4"> <variable name="post.title.font" description="font" type="font" default="normal normal 22px arial, tahoma, helvetica, freesans, sans-serif" value="normal bold 22px 'times new roman', times, freeserif, serif"/> </group> <group description="date header" selector=".date-header"> <variable name="date.header.color" description="text color" type="color" default="$(body.text.color)" value="#ffffff"/> <variable name="date.header.background.color" description="background color" type="color" default="transparent" value="#bbbbbb"/> </group> <group description="post footer" selector=".post-footer"> <variable name="post.footer.text.color" description="text color" type="color" default="#666666" value="#666666"/> <variable name="post.footer.background.color" description="background color" type="color" default="#f9f9f9" value="#eeeeee"/> <variable name="post.footer.border.color" description="shadow color" type="color" default="#eeeeee" value="#eeeeee"/> </group> <group description="gadgets" selector="h2"> <variable name="widget.title.font" description="title font" type="font" default="normal bold 11px arial, tahoma, helvetica, freesans, sans-serif" value="normal bold 11px 'trebuchet ms',trebuchet,verdana,sans-serif"/> <variable name="widget.title.text.color" description="title color" type="color" default="#000000" value="#000000"/> <variable name="widget.alternate.text.color" description="alternate color" type="color" default="#999999" value="#999999"/> </group> <group description="images" selector=".main-inner"> <variable name="image.background.color" description="background color" type="color" default="#ffffff" value="#ffffff"/> <variable name="image.border.color" description="border color" type="color" default="#eeeeee" value="#eeeeee"/> <variable name="image.text.color" description="caption text color" type="color" default="$(body.text.color)" value="$(body.text.color)"/> </group> <group description="accents" selector=".content-inner"> <variable name="body.rule.color" description="separator line color" type="color" default="#eeeeee" value="transparent"/> <variable name="tabs.border.color" description="tabs border color" type="color" default="$(body.rule.color)" value="#ffffff"/> </group> <variable name="body.background" description="body background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/> <variable name="body.background.override" description="body background override" type="string" default="" value=""/> <variable name="body.background.gradient.cap" description="body gradient cap" type="url" default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/> <variable name="body.background.gradient.tile" description="body gradient tile" type="url" default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/> <variable name="content.background.color.selector" description="content background color selector" type="string" default=".content-inner" value=".content-inner"/> <variable name="content.padding" description="content padding" type="length" default="10px" value="10px"/> <variable name="content.padding.horizontal" description="content horizontal padding" type="length" default="$(content.padding)" value="40px"/> <variable name="content.shadow.spread" description="content shadow spread" type="length" default="40px" value="0"/> <variable name="content.shadow.spread.webkit" description="content shadow spread (webkit)" type="length" default="5px" value="0"/> <variable name="content.shadow.spread.ie" description="content shadow spread (ie)" type="length" default="10px" value="0"/> <variable name="main.border.width" description="main border width" type="length" default="0" value="0"/> <variable name="header.background.gradient" description="header gradient" type="url" default="none" value="none"/> <variable name="header.shadow.offset.left" description="header shadow offset left" type="length" default="-1px" value="0"/> <variable name="header.shadow.spread" description="header shadow spread" type="length" default="1px" value="0"/> <variable name="header.padding" description="header padding" type="length" default="0px" value="0"/> <variable name="header.border.size" description="header border size" type="length" default="1px" value="1px"/> <variable name="header.bottom.border.size" description="header bottom border size" type="length" default="$(header.border.size)" value="0"/> <variable name="header.border.horizontalsize" description="header horizontal border size" type="length" default="0" value="1px"/> <variable name="description.text.size" description="description text size" type="string" default="140%" value="18px"/> <variable name="tabs.margin.top" description="tabs margin top" type="length" default="30px" value="200px"/> <variable name="tabs.margin.side" description="tabs side margin" type="length" default="30px" value="30px"/> <variable name="tabs.margin.bottom" description="tabs bottom margin" type="length" default="30px" value="30px"/> <variable name="tabs.background.gradient" description="tabs background gradient" type="url" default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/> <variable name="tabs.border.width" description="tabs border width" type="length" default="1px" value="1px"/> <variable name="tabs.bevel.border.width" description="tabs bevel border width" type="length" default="1px" value="1px"/> <variable name="tabs.padding.top" description="tabs top padding" type="length" default="$(content.padding)" value="40px"/> <variable name="date.header.padding" description="date header padding" type="string" default="inherit" value="0.4em"/> <variable name="date.header.letterspacing" description="date header letter spacing" type="string" default="inherit" value="3px"/> <variable name="date.header.margin" description="date header margin" type="string" default="inherit" value="inherit"/> <variable name="post.margin.bottom" description="post bottom margin" type="length" default="25px" value="45px"/> <variable name="image.border.small.size" description="image border little size" type="length" default="2px" value="2px"/> <variable name="image.border.large.size" description="image border big size" type="length" default="5px" value="5px"/> <variable name="page.width.selector" description="page width selector" type="string" default=".region-inner" value=".region-inner"/> <variable name="page.width" description="page width" type="string" default="auto" value="auto"/> <variable name="main.section.margin" description="main section margin" type="length" default="15px" value="1em"/> <variable name="main.padding" description="main padding" type="length" default="15px" value="0"/> <variable name="main.padding.top" description="main padding top" type="length" default="30px" value="35px"/> <variable name="main.padding.bottom" description="main padding bottom" type="length" default="30px" value="65px"/> <variable name="paging.background" color="$(content.background.color)" description="background of blog paging area" type="background" default="transparent none no-repeat scroll top center" value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/> <variable name="footer.bevel" description="bevel border length of footer" type="length" default="0" value="1px"/> <variable name="mobile.background.overlay" description="mobile background overlay" type="string" default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/> <variable name="mobile.background.size" description="mobile background size" type="string" default="auto" value="auto"/> <variable name="mobile.button.color" description="mobile button color" type="color" default="#ffffff" value="#ffffff"/> <variable name="startside" description="side text starts in blog language" type="automatic" default="left" value="left"/> <variable name="endside" description="side text ends in blog language" type="automatic" default="right" value="right"/> */ /* content ----------------------------------------------- */ body { font: $(body.font); color: $(body.text.color); background: $(body.background); padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); $(body.background.override) } html body $(page.width.selector) { min-width: 0; max-width: 100%; width: $(page.width); } a:link { text-decoration:none; color: $(link.color); } a:visited { text-decoration:none; color: $(link.visited.color); } a:hover { text-decoration:underline; color: $(link.hover.color); } .body-fauxcolumn-outer .fauxcolumn-inner { background: transparent $(body.background.gradient.tile) repeat scroll top left; _background-image: none; } .body-fauxcolumn-outer .cap-top { position: absolute; z-index: 1; height: 400px; width: 100%; background: $(body.background); $(body.background.override) } .body-fauxcolumn-outer .cap-top .cap-left { width: 100%; background: transparent $(body.background.gradient.cap) repeat-x scroll top left; _background-image: none; } .content-outer { -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333; box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); margin-bottom: 1px; } .content-inner { padding: $(content.padding) $(content.padding.horizontal); } $(content.background.color.selector) { background-color: $(content.background.color); } /* header ----------------------------------------------- */ .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; } .header h1 { font: $(header.font); color: $(header.text.color); } .header h1 { color: $(header.text.color); } .header .description { font: $(description.font); font-size: $(description.text.size); color: $(description.text.color); } .header-inner .header .titlewrapper { padding: 0px $(header.padding); } .header-inner .header .descriptionwrapper { padding: 1 $(header.padding); } /* tabs ----------------------------------------------- */ .tabs-inner .section:first-child { border-top: $(header.bottom.border.size) solid $(tabs.border.color); } .tabs-inner .section:first-child ul { margin-top: -$(header.border.size); border-top: $(header.border.size) solid $(tabs.border.color); border-left: $(header.border.horizontalsize) solid $(tabs.border.color); border-right: $(header.border.horizontalsize) solid $(tabs.border.color); padding-top: $(tabs.padding.top); } .tabs-inner .widget ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; border-bottom: $(tabs.border.width) solid $(tabs.border.color); margin-top: $(tabs.margin.top); margin-left: -$(tabs.margin.side); margin-right: -$(tabs.margin.side); margin-bottom -$(tabs.margin.bottom) } .tabs-inner .widget li { display: inline-block; padding: 0em 0em; font: $(tabs.font); color: $(tabs.text.color); border-$startside: $(tabs.border.width) solid $(content.background.color); border-$endside: $(tabs.bevel.border.width) solid $(tabs.border.color); } .tabs-inner .widget li:first-child { border-$startside: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none; } . . . . .header-outer { margin-left:310px; margin-top:20px; } .header-inner { margin-bottom:14px; } .header-inner .header .descriptionwrapper {margin-left: 20px; } /* navigation tabs start */ a.prousttab, a.prousttab:link,a.prousttab:visited { width:75px; height:20px; margin-top:10px; margin-left:10px;text-align:left; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:14px; color:black; line-height:25px; overflow:hidden; float:center;} /* navigation tabs end */ .status-msg-wrap{ display: none; } div.hr { height: 2px; width: 100%; color: #000000; background-color: #000000 }#proustlist {margin:10px 340px; }]]></b:skin> html
No comments:
Post a Comment