I am using this technique for a sticky footer: http://ryanfait.com/sticky-footer/
I wanted to create a border around my entire site that also encapsulates the footer but has passing around the entire page but ended up with this: http://i.imgur.com/jy9vN.jpg
Notice how the white box is not moving down to the footer.
Here is the jsfiddle showing this problem: http://jsfiddle.net/hc3Xu/14/
*I had previously asked a similar question not realizing it was the footer and I got an answer telling me that it is the height: auto !important; in the container class that was the cause of the contentcontainer not stretching to 100%. Removing that however causes a problem with the footer not being set to the bottom of the page. So I can't figure out how to proceed.
Instead of:
.container {min-height:100%; height: auto !important; height:100%;
margin: 0 auto -30px; width:980px;
background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}
try something like:
.container {min-height:100%; height: auto !important;
margin: 0 auto -30px; width:980px;
box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
-webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
-moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}
You'll then also need to tweak the left and top margins of the footer to bring it in line with your contentContainer div.
http://jsfiddle.net/z5geM/
http://jsfiddle.net/hc3Xu/16/
I've changed the elements a bit to have the background image on your html element and the body be the main, centered content area. By giving it a border and changing its box-sizing, it creates that grey border around the outside while still maintaining it's 100% height. Just a slight tweak to the position of the footer moving it down 20 or so pixels makes it line up within the body's grey border area.
Hope this helps, let me know if you need a more thorough explanation of why this works.
Related
In a fundraising page I'm working on at https://cjshayward.com/these-are-a-few-of-my-favorite-things/, in the body of the post there is one portrait without any border, but once you get to the shuffled list of "favorite things," all of the product images have an eight-pixel-wide border that remains present after setting DIV, A, and IMG tags to have inline style of border: 0 !important; margin: 0 !important; padding: 0 !important.
I've also spent some time inspecting the page, and can't find anything that would be assigning borders to the images or immediate containers. (N.B. I think it's more likely a border than a background with padding: some images are partially transparent PNG's, and those let you see the background image through transparent parts of the PNG's.)
The page is part of a Wordpress site under a modification of the twentyseventeen theme.
What am I missing?
It is the box-shadow property
.entry-content a img, .widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
remove this from the css
it was just masquerading as a border :-)
I am trying to create an image, in a circle shape, with a border around it. The problem is that if you look VERY carefully between the image and the border, there seems to be a small space.
Is is possible somehow to make the border attach itself perfectly to the circle shape?
Here is a small codepen:
https://codepen.io/dbugger/pen/NjYMEQ
This is the CSS used:
img {
border-radius: 150px;
box-shadow: 0 0 0 10px black;
}
Just give image the same background-color (whatever that is, I used maroon here) like this:
img {
border-radius: 150px;
box-shadow: 0 0 0 10px black;
background-color: maroon;
}
<img src="https://placehold.it/300/300" alt="" />
I am using Google Geochart to generate a map (works fine) but the client wants the tooltip to stick to the bottom of the wrapping div.
JSFiddle
Hover over the dark grey areas and a tooltip will appear in the bottom left below the map, but if you switch to another country e.g. canada and america, the tooltip will move slightly.
CSS:
.google-visualization-tooltip{
position:fixed !important;
bottom:10000px !important;
left:0 !important;
margin:500px 0 0 0 !important;
}
Is there a way to do what I need?
Change your CSS to fix the position from the top of the page, not the bottom:
.google-visualization-tooltip{
position: fixed !important;
top: 0 !important;
left: 0 !important;
margin: 500px 0 0 0 !important;
}
http://jsfiddle.net/asgallant/95f5A/1/
like this demo:
http://codepen.io/anon/pen/sorAB
How can i remove the white line between the block when they are rotateX.
Maybe it can without the translate/margin/top property.
Bad english. XD
You can add a border around your blocks :
http://codepen.io/anon/pen/vndfc
The problem is that it is difficult to make the div match exactly.
Your layout is exact. However, slight round-outs in dimensions produce that gap between divs.
But, if you increase the sizes, then the corners don't match anymore.
One posible solution is to set a shadow between divs. And make this shadow slightly smaller than the div, so that it won't be visible in the angles:
#girl{
width:300px;height:400px;margin:100px auto 0;
-webkit-perspective:1000;
-webkit-perspective-origin: center center;
}
#girl .item{
height: 100px;width:100%;background-color:#333;
-webkit-transform-origin:top;
-webkit-transform-style:preserve-3d;
box-shadow: 0px 2px 0px -1px #333;
}
#girl .item.i1{-webkit-transform:rotateX(45deg);}
#girl .item.i2{-webkit-transform:translateY(100px) rotateX(-90deg);}
#girl .item.i3{-webkit-transform:translateY(100px) rotateX(90deg);}
#girl .item.i4{-webkit-transform:translateY(100px) rotateX(-90deg);}
codepen
I made a template with 2 columns with CSS like this picture.
The main div is main. It has 2 dives inside itself. DIV sider has a background-image. And I want to show it always. Now, I have 2 problems. First, it does not cover height of screen by default unldess I set a min-height=... for it. Second, if I do it, after scrolling the page, the background images won't repeat to cover whole of screen height.
html {
margin:0 0 0 0;
height: 100%
}
body {
font-family:Arial;
font-size:9pt;
color:#333333;
line-height:200%;
margin:0 0 0 0;
background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
width:100% !important;
height: 100%
}
#main {
width:100%;
min-height: 100%
}
#sidebar {
width:231px !important;
float:left;
background-image:url('../images/sidebar_bg.PNG');
min-height: 100%;
}
#container {
float:left;
padding:25px 25px 25px 25px;
width:70%;
min-height: 100%
}
What's the problem?
Edit: This is my backgroun image
Try this - DEMO 1 : Unwanted white space
The additional space in the bottom is because of your padding:25px; ( Same as padding:25px 25px 25px 25px;).There's an extra top padding + bottom padding which is givin your div additional 50px.
If you do not want that additional space - Try this => DEMO 2 : without the white space
You can replicate the same effects of top and border 25px with this:
padding:0 25px;
margin:25px 0;
To avoid that extra unwanted space.
Edit:
The additional space is caused by the margin:25px 0;, if you remove it - you wont have that extra space.check this
DEMO 3 Removing unwanted space caused by Margin
Edit 2 :
Your problem is a well documented problem - Matching Columns Problem. There are loads of solutions you can try, here are a few :
1) javascript
2) Alter the Image (Hacky)
3) Pure CSS
My fav => Option 2
I havnt personally explored the last one,but try it out.. :)
Hope it helps..