1LD Tutorials & Blogs

Blog

RapidWeaver Snippets Button

We’ve had several customers request coding to duplicate some of our simple looking dividers on various websites of ours. In response we decided to create a free stack call Simple Divider.

Due to the simplicity of this Stack I imagined that some users might prefer to use a snippet instead, so this post is being created for that purpose.

HTML

1
2
3
<div id="simpleDivider">
     <div class="theDivider"></div>
</div>

CSS (Subtle Emboss)

1
2
3
4
5
6
7
8
9
10
11
#simpleDivider {
     width: 100%;
     clear: both;
     padding-top: 20px;
     padding-bottom: 20px;
}
#simpleDivider .theDivider {
     width: inherit;
     border-top: solid 1px #CCC;
     border-bottom: solid 1px #FFF;
}

CSS (Solid)

1
2
3
4
5
#simpleDivider .theDivider {
     width: inherit;
     height: 4px;
     background-color: #E0E0E0;
}

Why two <div> tags and not just one?

Placing a div tag inside of a div tag protects against spacing issues that occur when floated elements are placed above. Example, if there was simple one div tag and a margin was created for the top the margin would not display if there were certain elements floated above it, despite the clear call. The easiest solution, in my opinion, is to contain the existing tag inside another element and create padding, which will have no visible effect other than achieving the desired spacing.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

New Release: Shifting Panels

The Shifting Panels stack allows you to easily create awesome looking background and image animations with a customizable grid of up to 800 panels. It can function as an animated banner, content container, or image element. The stack can be customized to fit just about any project design and is made to be compatible with most themes and stack frameworks.
Check it out

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software