Question

Going straight to the point, I’m a beginner in CSS. I found twitter bootstrap that seems very promissing and easy to use… well, not so.

Take a look please at this.

I need to:

1) place the logo (with an X) inside the square that it’s now below it

2) add some margin from the top. Right now, there is almost no space between the browser url bar and the logo/fields

3) add some spaces between the input fields when they are horizontal, eg. fields: “Seu Número de Celular:”, “Boleto Bancario” and “Conta de Consumo”. Right now, they are almost glued one to the other.

I would also appreciate any good advices on tutorials on CSS. I’m using django, if this matters.

Thanks for your help

Answer 1

W3C Schools is a good point to start with CSS.

1) Learn about position:relative or use background and place the box as background-url

.your-square-image /*You will need to put class="your-square-image" to the squarebox*/
{
position: relative;
top: -120px;
z-index: -1;
}

2) Simply use margin-top to adjust the margin from top

.logo {
margin-top: 50px;
}

3) Use margin-right for all your inputs (or put it in proper class)

input 
{
margin-right: 15px;
}

All the css above can be placed at the top of your html page or put in separate css file and link it from your page (recommended).