I'm coding this site http://www.allrecht.nl/new , and running into the following issue: on the right side of the entire site is a space of about 40px - i cant figure out where its coming from .. can anyone help me with this?
It happended after i changed the width and margin of the #pricing and #container (so the table would be centered in the middle of the DIV). I've tried to adjust the body padding/margin but that doesnt do the trick. I didnt try to reverse the margin/width i adjusted on both DIV's bc i need them to be centered - so if you guys have a solution so the pricing table is still centered and also there is no spacing on the right side of the website, i'd love to hear it :D
Add box-sizing: border-box; to your #footer in css. You should use that as a global rule, so the blocks are not affected by padding. Use this link for explanation and examples! http://www.w3schools.com/css/css3_box-sizing.asp
thank you Dinca!! I also added a ';' after the padding in the #footer - together it works now :) Thanks a lot!
Related
can you please help us solve this code about the problem? how do you make this close between something like this? unwanted space
you can use margin to adjust the space between two container.
here I used margin-top: -5px to close the gap between two img
check this example:
https://jsfiddle.net/dalinhuang/uxyLh8yp/
if you can post your html/css code it will be better.
I have an issue with the border-radius of div container2 for the links list with the resolutions at the top of the page like 240x320 etc. Its going around everything instead of just left-column2 and right-column2. Container2 is used a second time in the code without issue so i don't understand it.
At first i thought it was a problem with a closing tag but checked the code and everything is fine.
Heres my fiddle. Hopefully someone knows whats going on with it.
Maybe it has to do with the box-model . width + padding.
To include padding into width and use width:100% on child , you can switch the box model with box-sizing: DEMO
.container1,
.container2 {
box-sizing:border-box;/* add prefixed rules if needed */
}
SEE: W3C
It was pointed out that i had mistaken an open div for a closed div. Thats why i was having issues with the border.
My problem is hard to explain (especially when knowledge of English is at the primary level)
My test site: ----
On page is over than html code, you can see scroll to right. (On small resolution)
Picture of this: http://i.imgur.com/arCoPt7.png
How to fix that problem ?
If, something is not clear, and somebody don't understand my problem please ask.
(I am not giving CSS becouse is too much of code, so everything is in source code of website)
Sorry for my bad English...
your problem is the class statystyki inside the class menu.
in your p element you have width:100% and float left and the other elements right.
So you exceed the total width of 100%.
Try to make a width that dont exceed the 100% and also is best if you clear the floats.
Remove the extra margins and check all the divs width.
or simply add
this style to your body.
body {
width: 100%;
overflow: hidden;
}
http://haleem.itspiders.net/
How can I get border-right on my first .section div to be the same height as the other section divs, so that when a user inputs more content, they both stay the same height.
To help illustrate this, I've created a picture and Jsfiddle to help you understand what I mean.
I've tried messing around with static heights, and min-height with no success as to what I want to accomplish.
Is there any better way of doing this besides the way I am currently doing it within jsfiddle? Any help is greatly appreciated.
For the sections.. rather than display: inline-block; use display: table-cell;
Updated fiddle
May not function properly with older version of Internet Explorer.
Hopefully this should be short and sweet, I am making a website and i want two 40x40 images placed next to each other, the problem is that their seems to be a rogue margin or padding that is being applied to it. I have tried to remove it but with no luck.
Image:http://i.minus.com/jblfTtkLGRaE74.png
As you can see i have firebug open and it shows that there is no styles being applied to the images to cause the blank space inbetween the images to happen. Also the images are not childs of a div. and i have used a CSS Reset.
If you need anymore information please ask.
Thank you.
It's because images are inline elements. Options to remove the gap include adding float: left to your images or removing all whitespace between your images in the HTML.
If you're using firefox and you're certain that all the space taking values have been zeroed then it's probably the font size of of the white space, remove any whitespace or spaces between the 2 images, you can also try setting the font-size of the parent element to 0.
Interesting, without looking at any of the code / the reset that you claim to be using. Here is how I would quickly put two images right next to each other using CSS.
img {
float: left;
margin: 0;
padding: 0;
border: 0;
}
Sometimes you have go back and dig through your code a little bit and do a little rewriting. Best of luck!
You can use the CSS
word-spacing:-1em;
on the parent container to remove these spaces between images.
Have you tried using a table and placing each image within?
The main borders on the page tend to be wierd but I've realised the table method tends to allow for more refinement. Best part is it wont show up on the page.