Category: XPages

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;

}