Horizontal Line

swood · Jun 24, 2010

Does anyone where i should place the code for horizontal line so the line shows under each post so it spaces the posts out more?
I tried putting

Code:

<hr>

In places but nothing seemed to work
http://makemoneyonline-swood.blogspot.com/

Code:

/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#cccccc">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#333333">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#006699">

<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="#336699" value="#191919">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#e6e6e6">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="#528bc5" value="#4c4c4c">

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#cccccc">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#000000">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#000000">

<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
type="color" default="#ffd595" value="#7f7f7f">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
type="color" default="#333333" value="#000000">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal bold 100% Arial, sans-serif">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, sans-serif">

<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}

.post-footer {
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}

.post-footer .span {
margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
padding: 4px;
border: 1px solid $borderColor;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: $startSide;
}
]]></b:skin>
</head>

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


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Swood's Tips For Making Money Online (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='All Entries' type='BlogArchive'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
</body>
</html>

Thanks

Ashish92 · Jun 24, 2010

<hr /> in my knowledge is the horizontal ruler tag in html.

StripesAndFins · Jun 24, 2010

I think it is <hr></hr> that makes a header appear...

Edit: yes it is 😀

Lee Lawson · Jun 24, 2010

or <hr></hr>. Do you know if it is possible?

swood · Jun 24, 2010

I've tried them but i don't know where to put the code, thats what my problem is. I don't know where to put the line so it will show up under every new blog post

Ashish92 · Jun 24, 2010

thing is that a blog is based on CSS and XHTML i guess so using <hr> tags won't help in my opinion.

Lee Lawson · Jun 24, 2010

You need to edit CSS/xHTML.
<br></br> should work fine for that.

Ashish92 · Jun 24, 2010

ShizaruX said:
You need to edit CSS/xHTML.
<br></br> should work fine for that.

<br></br> or <br /> adds a line break but he is trying to add a horizontal ruler i guess.

Lee Lawson · Jun 24, 2010

No <Br> is line break, which still is horizontal line break.
Or you can still use <hr />

Ashish92 · Jun 24, 2010

yeah he can use both

<hr /> will create a line to be used as a separator while <br /> will create a line gap

Wrighty · Jun 24, 2010

Quickly let me clean something up..
Horizontal Rule & Line Break both need to be in the form:

<xx />

so we have:
<hr />
<br />

The forward slash isn't optional & the space isn't either ... if you want to meet standards that is! 🙂

Ashish92 · Jun 24, 2010

hmm i guess i was right 😛

swood · Jun 24, 2010

I just need to know where to put the code so the line will show

David · Jun 27, 2010

Is there any other coding you can show?

swood · Jun 27, 2010

Thanks David, i forgot about this 😛

I can put in the break in manually after each post but i'd prefer it to show automatically

Here is the full html code for the template:

<?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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: http://www.DarrenDelaye.com
Date: 11 Jul 2006
-----------------------------------------------
*/

/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#cccccc">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#333333">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#006699">

<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="#336699" value="#191919">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#e6e6e6">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="#528bc5" value="#4c4c4c">

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#cccccc">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#000000">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#000000">

<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
type="color" default="#ffd595" value="#7f7f7f">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
type="color" default="#333333" value="#000000">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal bold 100% Arial, sans-serif">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, sans-serif">

<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}

.post-footer {
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}

.post-footer .span {
margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
padding: 4px;
border: 1px solid $borderColor;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: $startSide;
}
]]></b:skin>
</head>

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


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Swood's Tips For Making Money Online (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='All Entries' type='BlogArchive'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
</body>
</html>

DeliQue · Jun 27, 2010

If the site support BBcode then just

David · Jun 28, 2010

swood said:
Thanks David, i forgot about this 😛

I can put in the break in manually after each post but i'd prefer it to show automatically

The code isn't the one I'm looking for, or that it doesn't have the part that would separate the posts (usually some background .php). I think it's best to check out some blogs with the horizontal rule and compare the coding in case I've missed something.

Damien · Jun 28, 2010

Lee Lawson said:
No <Br> is line break, which still is horizontal line break.
Or you can still use <hr />

But <hr></hr>

Creates a line like this....

While <br /> does not, it just brakes the line.

David · Jun 28, 2010

<br> gives you a new line. In HTML, you can't just hit the enter button and get a new line. You have to use <br> or structure it with <p> tags etc. <hr> is the horizontal rule, ie. a line is presented to separate content.

Horizontal Line

Paragon

Paragon

Madly Diligent

Seasoned Veteran

Paragon

Paragon

Seasoned Veteran

Paragon

Seasoned Veteran

Paragon

Reputable

Paragon

Paragon

Madly Diligent

Paragon

New Arrival

Madly Diligent

Seasoned Veteran

Madly Diligent

About Us

Sponsors

Affiliates

Stay Connected

We value your privacy