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
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).
Related
Say I have 2 html elements, in different parts of a html form: element "first-element" and element "second-element".
"first-element" is a flex item, which varies in position with page resize (the flex wraps).
When I hover the first element, I would like to make "second-element" visible and position it 20px down from "first-element".
I tried:
#first-element:hover #second-element {
display:block;
position:absolute;
left:#first-element.left;
height:#first-element.top+20px;
}
which, obviously didn't work :)
Can you please tell me if such a thing is possible and what is the correct syntax? Or, maybe suggest another approach? Thanks!
You need jQuery or Javascript to do this. It is not possible with only CSS.
See an example here with jQuery
$(document).ready(function{
$('#first-element').hover(function(){
$('#second-element').toggle(200);
})
})
Style the rest of what you want in your css.
#second-element{
position: absolute;
top: 20px;
}
I'm a Web developer.
I have one question about textarea default margin value.
http://jsfiddle.net/tTnCd/175/
This link is jsfiddler site.
I make CSS by
textarea {
position: absolute;
}
<textarea>tyjyjyj</textarea>
enter image description here
You can see a picture from an upper link.
Red checker is default margin on textarea that I say.
How to remove this white space?
Thanks!
try this
body {
margin: 0;
}
If you inspect it in your browser via developer tools, you'll see that that's actually the default margin for the body. You'll want to remove your CSS and do what #Rajath Kumar PM suggested. :)
this will do it
textarea {
margin: 0;
padding: 0;
}
There is concept of Reset CSS and normalize CSS. Please go through them. Here is the one nice explaination for that.
What is the difference between Normalize.css and Reset CSS?
Point 2 is try to avoid position absolute to make it to corner of the page. Absolute is not intended for that.It alters dimensions of the parent div.So please use absolute and fixed wisely and where it is intended to.
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I am using the Pinterest hover button widget for a client website.
https://developers.pinterest.com/on_hover_pin_it_buttons/
By default it appears at the top left of all images. It doesn't look like their script allows for positioning. Is it possible to override this with CSS?
Thanks
Yes I believe that it is. If you generate the code you will see that the pin it button is created as a span and then positioned with inline styles, I am guessing dynamically with each image.
In the example I looked at it had the class xc_pin, so I will use that for my example but bear in mind that the class you have may be different.
As I mentioned, the span is styled inline, so to overwrite it you will have to use !important, else the styles will be overwritten. Here is how your code could look:
xc_pin {
left: 20px !important;
top: 50px !important;
}
I hope that this helps!
EDIT WITH WORKING JSFIDDLE
After playing around with the css I managed to find a way to target it using the css sibling selector, here is the jsfiddle: https://jsfiddle.net/2xzxgvfw/19/
Hope this solves your issue!
I do not know how you generated the code but I think there should be somewhere a file called: ppibfi_pinterest.css in this file look for the line:
.pibfi_pinterest .xc_pin{}
there you should find something like: top: 5px; margin-left: -1px;
if you adjust this, you should be able to modify the position of the pinterest icon
I have a webpage full of DOM elements, and I want to take all h3s out of that page and display them inline next to each other at the top of the page. The question is - is that even possible?
<h3>I want</h3>
There are tons of other content between them so...
<h3>These headers</h3>
Keep in mind the're separated by many DOM elements...
<h3>To be displayed</h3>
Luckily no other h3s between them...
<h3>Inline next to</h3>
Thank you for trying to help :)
<h3>Each other </h3>
Here's jsfiddle where I tried to use absolute positioning, but I'm pretty sure it's gonna be hard to take this way (margins):
http://jsfiddle.net/zLbuP/
I need the code to be working at least for IE7 and above and I cannot use any JS/jQuery (it will be rather easy to do with jQuery though). Of course I cannot edit the html itself too.
Any ideas, or impossiblu? ;)
This is very simple to do with jQuery/Javascript?
I just messed around a bit and came up with this: http://jsfiddle.net/zLbuP/19/
The code just gets the content from all the H3's, removes them and creates a new, combined H3.
//When then DOM is ready
jQuery(document).ready(function($) {
//Cache the content of the headings to a variable so it may be removed before creating a new H3
//this allows us to select the new H3 without having to use more complex selectors
var h3text = $('#WhatIHaveNow h3').text();
// remove the old H3's now that we have their content
$('#WhatIHaveNow h3').remove();
// create a new, empty H3 at the top of the parent div
$('#WhatIHaveNow').prepend("<h3></h3>");
//insert our cached content
$('#WhatIHaveNow h3').text(h3text);
});
Unfortunately, you can't avoid using JS. You can set all h3 tags to an absolute position and have them all at the top but you need to use JQuery to set their margin. I have made a small script to set the margin dynamically for each h3 tag, based on the width of the previous sibling:
var margin = 0;
$("#TryMe h3").each(function () {
margin += $(this).prev().width();
$(this).css("margin-left", margin + "px")
margin += 20;
});
You can see a live example here: http://jsfiddle.net/VezCA/2/
You might be able to use nth-child; i.e.
h3 { position:absolute; left: 0px; top: 0px; }
h3:nth-child(1) { margin-top: 15px; }
h3:nth-child(2) { margin-top: 30px; }
IE7 doesn't support nth-child, though, and it's pretty hackish even if you could get it to work how you wanted it. As others have said, it's easy to do in jQuery or plain JS.