I1m currently working on a personal website but I have no experience with web development so I got stuck at a functionality that probably has a very simple solution. I have many of this div on my page and I just wanted the greyed background to:
Expand just a few pixels beyond the content of the div
Have rounded borders
I'm currently using
background-color: #ffffffab;
background-clip: content-box
to get the results shown, but either I paint ALL of the div, which is not what I intend to do or I leave it as it is shown in the picture. When using "border-radius" I have to increase to huge numbers like 80% to get rounded edges, and even so it cuts some part of the text. Is there an easy way to do what I'm trying to do? I'm also including this picture with the margins (orange) and padding (green).
Thanks!
Following #tacoshy suggestion:
I added more margin to the top and bottom of the container and increased the padding on the sides, this way I wouldn't need to use the content-box function: margin: 2em auto 2em; padding: 2em.
That solved it.
Thanks!
Related
I was having problems whit this for a while, and I know that some other people were too
image problem
As you can see in the image, there is an excessive white empty space in the bottom of the page, it's because there was a component just there, but it was moved up with "position: relative;" and of course, the element moved up but it's still taking its original space at the bottom
I was trying to define the height of the body, as well as to center the components and set a margin:auto; but it doesnt work
Any idea?? THANKS!
give your plans a margin at the bottom and you decrease the margin-bottom to reach that space that you want for example:
.image-plans-hosting{
margin-bottom: 200px;
}
You can use the inspector in your browser to find the values you like the most.
I found a new style today while taking a class on Responsive Web Design, and then I looked up w3schools example and I'm slightly confused.
If I create a div of 200px by 200px and apply a 1px border around it, the element in total changes to 202px by 202px in theory.
But if I then apply border-box, it remains at 200 by 200 with the border and the actual content box is now technically 198px by 198px.
Just want to make sure that is what actually happens.
Using the example from w3schools, you can see that .div4's content doesnt seem to align properly however, why is that?
When you apply box-sizing: border-box; and make a specific width, that width is the max width of your div, including border, padding (for padding is that you see in .div4), etc.
That great for responsive design because it help you to calculate width for adapt your design.
I have a big absolute div that holds a smaller relative div. The smaller div wraps an Image (png) and auto sizes with height:auto. All works fine. But on one particular site, I get 5px of extra spacing at the bottom of the smaller div after the resize, like it over calculated the height needed? I assume I'm somehow inheriting something from the site that is impacting my resize and div container.
I reworked everything, clear floats, overflow, alternate positioning, removed auto option, flow, etc, but I can't seem to get rid of that 5px extra at the bottom, and its only on that site?
My question - how do you debug your height or auto height issues, and any idea what could be causing this?
Thanx,
Chris
on the container div:
line-height: 0px; will eliminate any height increase caused by white space.
padding: 0px; will eliminate an padding along the inside of the container div.
on the image
margin: 0px will eliminate any space added around the outside of the image.
Could you point us to the site or a jsfiddle so we can get a better idea of what's going on?
As #RyanMcDonough mentioned, Chrome's Inspector is awesome. In IE, you have the IE developer toolbar. In FF you can use Firebug (which is a classic!).
Try
font-size:0;
line-height:0
for smaller div
Example http://jsfiddle.net/U9z5K/14/
Or use
display:block;
for an image
I'd use something like Chrome's Inspect Element, and have a look at the css rules that are affecting it.
You can then go through all the elements and enable/disable on the fly to see what is affecting it.
https://developers.google.com/chrome-developer-tools/
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
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