Shockingly I just did some cool CSS!

Let’s face it…  I suck at CSS…  You know it.  I know it.  My dog knows it.  However with the magic that is StackOverFlow I just did some useful CSS that I wanted to share.

In an app I wanted to have 3 buttons in a row.  Since this is an iPad app I wanted to make the buttons myself so the tab zone is bigger.  I wanted to put some space in between the buttons so I first had:

margin-right: 15px;

This got annoying because the last button didn’t need to have that margin.  It was causing an issue.

So then I did:

margin:left: 15px;

That got rid of the last wasted space but now I had it on the left of the first button.

So off to StackOverFlow I go and found this post.  The accepted answer uses spans in the html and I didn’t really want that but there was a comment that had this:

span + span {
    margin-left: 10px;

so I used my classes and it worked great.


Declan also mentioned  that something like:

.class ~ .class {
    margin-left: 10px;

Will only apply that to the FIRST element.

anyway here’s a picture..  you might notice the lack of a left margin on the first button.


Below is the code I’m using if interested.
.buttonMedium {

display: inline-block;

background-color: #fff;

border: #AC162C;

width: 75px;

height: 65px;

padding: 6px;

text-align: center;

white-space: nowrap;

cursor: pointer;

background-image: none;

border: 1px solid #AC162C;

border-radius: 4px;

color: #AC162C;



.buttonMedium + .buttonMedium {

margin-left: 15px;


Learning XPages Podcast XPages

Episode – 011 – SpeedGeeking (XPages and UI Layout)

In this show I present my material from Lotusphere’s “SpeedGeeking” session.

The point of the show is at the end where I combine XPages, CSS, Blueprint Framework, Themes, and Custom Controls to create a layout (header, sidebars, etc…) that you can easily include on every XPage.

I hope you like it.

UPDATE: Since BluePrint CSS is a dead project I recommend focusing on Bootstrap instead.

Learning XPages Podcast XPages

Episode – 006 – A Blueprint to XPages

If you’re a Notes Client person getting started in XPages/Web stuff, you’re going to need to learn CSS on top of other things.  Blueprint allows you to place items on your page easily.  I really like it.  

UPDATE 9/21/2006: Note – Blueprint CSS is a dead project. Suggest you focus on Bootstrap these days.