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/
Related
I wanted to hide the nav-bar on a view within tabs(ion-tab)
Have tried top:0 on .tabs also and hide-nav-bar also
Apparently in ion-view if i use hide-nav-bar it leaves space befor the tabs and making it to top:0px (.tabs { top: 0 !important; }) leaves space between content and tabs
see image below
When using hide-nav-bar on ion-view:
With .tabs { top: 0 !important; }:
However , nav bar hides on tabs bottom and there is no space when it on bottom, is there any solution to hide nav-bar without leaving any space
Solved now, wanted to share this
This was because of the .has-tabs-top class that was being added to the ion-content element.
added this along with hide-nav-bar in view and .tabs { top: 0 !important; }
.has-tabs-top {
top: 49px !important; /* height of the tabs */
}
I have a navigation menu in one div and there's a background image in other div which is set to absolute because it has to be in some a bit different position of the website. Now that image is transparent PNG and it blocks clicking the last link in the navigation because that image is technically on top of that link (visually not).
So I set z-index: 1 to menu and that fixed the problem only on Firefox, the link becomes clickable. It doesn't work on Chrome, Opera and IE though.
What could be the problem?
There's a screenshot, as you can see that girl image is transparent and when selected it shows that it technically is over that Contact us link and it somehow blocks it:
http://i.stack.imgur.com/O4rEV.jpg
The menu and the image are not in the same parent div.
#the-menu {
margin: 17px 0 0 17px;
z-index: 1;
}
#the-img {
background: url("../images/img-girl.png") no-repeat scroll center 0 transparent;
height: 351px;
position: absolute;
right: 50px;
top: -52px;
width: 381px;
z-index: 0;
}
#the-menu should have relative position in order for the z-index to work.
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 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;
}