I am trying to place the COLLECTION image located on my website to the left to overhang and drop just above the text with CSS, but I am unable to figure out the placement. any suggestions?
.plt_22 {
background: url(http://i1108.photobucket.com/albums/h412/l3th_gunslinger/Collection.png) no-repeat 0 0;
padding: 70px 0 0 0;
}
Related
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/
I've been trying to customize Blogger's Simple template and have hit a wall in getting the background image for footer-outer to match up - I am still learning CSS and am not sure where the padding on left is coming from or how to get it to completely cover up the repeating background of body-fauxcolumn-outer at the very bottom. Or even if this is the best way to be coding it. Please help!
http://fantasyartofetsy.blogspot.com/
Here's my edited code -
.footer-outer {
width: 1000px;
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-bottom.jpg) no-repeat top center;
background-color: #093e60;
}
.body-fauxcolumn-outer {
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-middle.jpg) center;
background-repeat:repeat-y;
}
Seems better with the following modification:
.content-inner {
10px 60px 0 10px;
}
The background image is now displayed horizontally as intended I guess but there's still text displayed half on the image half on the blue background. Where do you want it to be displayed?
EDIT: maybe also modify that:
.footer-inner {
padding: 80px 15px 0 15px;
}
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.
My URL: http://www.dreambelle.com/
The background image (white main, grey side bar) that is behind the text and sidebar below the slider is placed too low. You can see this issue to the right of the slider behind the side bar content...
The problem is that I cant figure out how to move the background image up via css without moving the entire body content up?
The background image is rendered from a small bar (attached)
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar
Ive tested the following this works for me in FF5:
// Remove 10px from the #featured_body height
#featured_body {
background: url("images/bgr_board.png") repeat scroll 0 0 transparent;
float: left;
height: 356px;
margin: 0 12px;
padding: 0;
width: 618px;
}
// Add 10px to the sidebar top margin
#sidebar {
float: left;
height: auto;
margin: -375px 0 20px;
padding: 0;
width: 332px;
}
This is happening because your div#content, which has the background-image is placed below your div#featured_body, which is pushing it down.
You have two choices, as I see it:
make the div#featured_body smaller height-wise, so that the bg image lines up with the twitter div or
place anther wrapper div around all the content under the nav and add the background-image to that. (That is, if you wanted the bg-img to stretch to the top of the page).
I have a background.png that for some reason when I insert in body as background-image shows up about 30px too high, and 20px too far to the right.
I set:
html, body, * {
margin: 0;
padding: 0;
}
and that doesn't seem to affect it.
You can specify the position for your background using CSS:
body {
background: url(background.png) 20px 30px no-repeat;
}
This should re-position your background image to the location you want. The pixel values are the X and Y coordinates respectively.
You can see more on how to work with the background here:
http://www.w3schools.com/css/css_background.asp