Help me tweak the CSS of this page:
http://draw3cards.com/questions/1501/buyback-vs-flashback
I tried to understand why the Adsense Ad appears misaligned - I would like it in line with the surrounding box. I looked at it with Firebug but missed any margin or padding in that element.
Can you help?
Looks like it's just the padding set on your .porthole class. You have it set to 0.5ems on all sides and this is pushing the ad outside of the dashed box. Try adding top and bottom padding only and/or margin to the <h3> tag within .porthole to get the spacing you need.
The width of surrounding dotted box is about 727px where as that of ad is almost the same, you need to increase the width of the dotted box and if possible little bit of height too.
Related
I was fiddling around with this example
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_clientleft_clienttop
It looked like the top picture below, having a space between the top border and the text.
I then changed the code to a top border thickness of 0px. Looked like the second picture below.
No space now. Hmm. What was the extra space in the top figure? Margins? I then set padding and margins to 0px as well. No change.
I then set the top border width to 1px. And now the entire space came back. Like on the bottom picture below.
Can anyone explain that?
Thanks
Poul
The p tag automatically creates some space before and after itself. So, for the case of border thickness to 0px
So, we are not able to see the top margin here.
How can I add padding to the top of a single div? Is there a way to do it without modifying the .css file? I am using Bootstrap and there is no space between the carousel and the first div. I tried adding padding to the carousel, but the color of the left and right chevron overlap the padding, and this is not the look I want. I want a true white space between the two.
Try <div style="padding-top: 10px;"> :)
Use firebug on Chrome or Firefox and see which div or element inside the carousel needs the padding you want.
However, the best way would be to use CSS. As you said, you want a padding, and CSS has the padding property. As #Jorgen said, just add a padding top.
Otherwise use <br> instead as #Mr Lister said
How can I move text in HTML 5 like margin but without using margin because
two texts on my page repel each other with margin
You can either add padding, like indubitablee said.
Or you can create another div and wrap it around what you want, then add a margin to that.
try using padding http://www.w3schools.com/css/css_padding.asp
padding is generally creating space within an element whereas margin is creating space outside of an element. hope this helps
I have been trying to solve this for days but can't solve it. (I'm usually quite okay with css). The website is www.auralaid.com.
On the homepage, there is a white spacing which I want removed. The class that is causing this issue is flex-viewport whose height is always slightly more than the "gray fabric image" it contains, leaving a white space at the bottom.
How do I remove the white space?
P.S. I can't set a fixed height otherwise the contained image will be cropped when minimising the browser.
white spacing http://auralaid.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-09-at-9.34.02-pm.png
you should post your code to get the perfect answer but i guess there is a problem of positioning of the div in which these two images are and also set height of image according to the div positioning.
Perhaps you should check your margins? We need the code to answer your question definitively.
For me it seems the h1-tag is responsible as with
.slide-content h1 {
display:none;
}
the white-space will disappear.
No mater how much I play around with padding and margin properties I can't seem to solve an issue I have on larger screens - the bottom of the html has a "cut off" where it appears to have a margin from the bottom of the screen. I do not know which element this is but all the elements have been reset to have 0 padding or margin.
When I add the following css I find that the gap really is at the bottom - there are no elements underneath:
* {outline: solid 1px;}
Here is a url to the site if any kind person would like to take a look: http://preview.tinyurl.com/7ywoqpf
Your div.holder has a min-height of 650 pixels.
When I remove that, the gap vanishes for me.
The best thing to do in these cases is a document inspector like Firebug or Chrome's built in one. They will show you which elements in the DOM take up which space exactly.
Remember that block level elements will fill their container widthways but not in height. So maybe it's the case that divs and containers within your page aren't tall enough to reach the bottom. There's something called a "push divs", "sticky footers" where that div will stay at the bottom. Maybe you'd put your background image within that and it'd stay at the bottom. There are several errors in your css though, and you can't have .5 of a pixel.
I fiddled with firebug and noticed that setting:
html {height: 100%;}
has solved the problem, will update the site later this evening