i have a table that have tooltip on mouseover, i would like to show 20px x 20px outside of the parent div
so for example if the cell is on the top left quarter of the table it the top tooltip appear 20 px below the bottom of the cell and 20 px to the right this works awesome, but i can't figure how to make the rest work properly, how can i go above or on the left of a div, ex, how can i make my div at the bottom right not over flow with the outside of the page.
i have tried this:
.HeatMapTooltip.rightHM.topHM{
right:-115px;
margin-bottom:-118px;
}
But with no success
This image is an example of the 4 quarters of my table.
thank you in advance
https://jsfiddle.net/vnLxe23b/2/
You want to make use of margin-left and margin-top rather than right and bottom.
The following should overwrite your existing rules:
.HeatMapTooltip.rightHM.topHM {
margin-left: -154px;
margin-top: 20px;
}
.HeatMapTooltip.leftHM.bottomHM {
margin-left: 20px;
margin-top: -114px;
}
.HeatMapTooltip.rightHM.bottomHM {
margin-left: -154px;
margin-top: -65px;
}
This can be seen working here.
You may need to adjust the values to suit.
Related
I have a p tag inside a div, and I want to move it left 50px. When I try, it adds a horizontal scroll bar to the page?
Here's an example: https://jsfiddle.net/fa9sp8bs/
I do not want to hide the whole scroll bar in css.
Your question is really difficult to understand. I assume you're talking about the first P tag and also, I assume you need it to be aligned center but moved 50px to left. If I'm right, so modify your code as below, otherwise, please explain more.
.title p {
color: #666;
font-size: 50px;
position: relative;
text-align: center;
margin-left: -50px;
}
...
You wrote 500px not 50px, may that be the reason?
So, I have this layout looks like this
As you can see there, the div is floating/aligned to the right side perfectly but on the left side there's a gap between it, how do I clear the gap?
DIV CSS:
.thread-list{
width: 40%;
background-color: #fff;
padding: 10px;
border-style:solid;
border-width:1px;
border-color:#F0F0F0;
margin-bottom: 3px;
margin-right: 10px;
margin-bottom: 10px;
overflow: auto;
float: left;
}
NOTE: The div is showing content dynamically (from database), and I can't make the div in 2 separated columns.
Sorry, if I'm being not clear enough.
DEMO
If you float multiple elements & one of the div has larger height then others, then these types of effect are created (the one you showed in your screenshot).
Solution 1: clear float left from 1st element of each row using :nth-child(2n+1) in your case its ..2n.. cuz you have 2 elements in one row.
Add this css in your style-sheet:
.thread-list:nth-child(2n+1){
clear:left;
}
Solution 2: Solution 1 will align all the div's but there will still be a negative space beneath, if you dont want that then you have to use plugins like Masonry Layout, this effect can not be achieved with pure css.
I have two divs inside a main container. One is floating left (youtube video), and the other one on the right (soundcloud player).
When I zoom in (110%) the div container on the right collapses underneath, onto the next line.
How can I stop this from happening? Am I missing something in the CSS?
.youtube {
float: left;
width: 640px;
height: 360px;
}
.maincontainer {
position:relative;
margin-top: 1%;
margin-right: auto;
margin-left: auto;
max-width: 1900px;
height: 1000px;
padding-right: 10px;
padding-left: 10px;
}
.soundcloud {
float:right;
height:388px;
width:580px;
padding-right:50px;
}
jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/
Thanks!
EDIT: Figured it out. I was using "max-width" in the .maincontainer div. I changed it and used "width" instead and now the soundcloud player doesn't drop down to the next line anymore. So that's solved.
This leads me to another question though: how am I supposed to know whether to use % or px to define the dimensions of a div? People have given me conflicting answers and it just confuses me...
I personally found that using pixels helps the boxes to stay in place and not drift apart when zooming in or zooming out..
Add a CSS Reset, which involves putting:
* {
margin:0;
padding 0;
}
at the top of your CSS file. This resets all margins and padding.
If that doesn't work try making the div that contains the whole middle section of the site (The youtube video and text and the soundcloud box), I think you've called it main container, a little bigger. Add maybe 10-15 pixels to the width. It could be running out of space.
Hope this helps. Next time try posting a little more info and in particular some code :)
I've written a web-app for an in-house resource for my fellow employees, and part of the base template is a simple dialog box - a hidden div, between the body and the header with an absolute position that appears when a button (another div) is clicked, displays content based on the clicked button, and goes away when the X in the corner is clicked. You know the routine.
So I suspect that I should not have to do this, but I find that I have not yet been able to describe the CSS of the dialog box in the base template's CSS such that I can ensure its position on the screen is always more or less the same. It seems instead that, as the dimensions of the content of the dialog box change per page, this requires that I redefine the dialog box's margin-left and margin-right on any given page.
For example, my base css for the dialog box is such, and it is loaded with the base html template every time:
#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000; /*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
}
Note the lack of a margin - I've not found a single margin value that does the job without causing a vicious mismatch of the size of the dialog box to the content within. For example, on a page where the content is expected to be quite large, I've set the margin as such:
#dialogBox {
margin: 5% 10% 0 10%;
}
If the content is expected to be much lighter, however, it seems that the margin needs to be set again on the next page I load, in order to circumnavigate visual shenanigans:
#dialogBox {
margin: 5% 33% 0 33%;
}
This is Not A Big Deal, but it is repetitive. I'm certain there's a better way to do it, such that the div will just naturally expand and maintain equal margin-left and margin-right on any given page its on, while maintaining a 'Goldilocks' size for its content - not too big, not too small, always just right.
I realize that there is existing infrastructure within some of the jQuery libraries for 'nice-looking' dialog boxes - they even drag around the screen and do tricks - but this is just for an in-house, employees-only web-app so I just haven't any interest in that. Also, it's good to know how to build some things yourself, right? I'm a little too new at this to cheat and just steal a bunch of CSS, so I'm trying to come by the knowledge honestly.
If I've left out any code which is germane to the issue, I'm more than happy to edit my post.
EDIT - I have two excellent answers regarding placing the dialogBox in a containing div - and the only reason I haven't flatly accepted them is just because it looks like I may end up needing to redefine aspects of the dimensions on each page in spite of some one-and-done code. Which is probably my fault, because the information on different pages is a little too different, and I would like to avoid forcing my users to scroll the page if necessary. Setting the width of the dialogBox per-page lets me do that; I dunno if leaving it up to CSS will let me do that.
FINAL EDIT - I believe for now that the accepted answer is the best solution for my project.
I'm not sure you can solve this without adding another container. With a wrapper you can make that position: absolute; instead and then center inside it, without the need for negative margins etc.
html
<div class="container">
<div id="dialogBox">content of whatever size here</div>
</div>
css
.container {
height: 0; /* hide/ make unclickable if necessary */
left: 0; right: 0; /* full width */
text-align: center; /* center inline content */
position: absolute;
}
#dialogBox {
/* make div stretch to its content and allow centering */
display: inline-block;
/* reset the inherited text-align */
text-align: left;
}
This way you don't need to care about the width of the dialog box.
Demo at http://jsfiddle.net/9wcFb/
Alternatively, you can also use margin: auto; when the container is the absolutely positioned one. http://jsfiddle.net/9wcFb/1/
Sidenote: as this #dialogBox is likely depending on JavaScript anyway, if you don't like the extra markup it is entirely possible to add it using the script, although I'd argue that would be a case of over-engineering ;)
Is setting a width on the dialog box an option?
If it is, you can set the left property to 50% and the margin-left property to -(width/2)
See here:
http://jsfiddle.net/tY7ef/
#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000;
/*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
left: 50%;
margin-left: -200px;
width: 400px;
}
You can use percentages too:
width: 60%;
margin-left: -30%;
auto margins won't typically work with absolute positioned elements: http://www.sitepoint.com/css-center-position-absolute-div/
You can try using an auto margin, this way the div's should be centerd automaticly
#dialogBox {
margin: 5% auto 0;
}
I can think of two quick methods to do this depending on whether or not you know the width of the element
If you know the width
If you know the width of your div, set the distance from the left side of the screen and subtract half of the width in a margin.
Say your screen is this wide:
/*
Legend:
Edge of screen: |
Center of element: .
Beginning of div: [
End of div: ]
*/
| . |
| .{center} |{size:56 characters}
And you have a div of this width:
[---I am .a div---]{size:16 characters}
In order to center it using this method, we would set the distance from the left side to half of the screen (left: 50%;):
| .[---I am .a div---] |
| . |
And then subtract the extra distance in the margin, 50% of the total size of the div or, in our case 8 characters. (margin-left:-8 characters;):
| [---I am .a div---] |
| . |
We now have a centered div.
This will work with any width-type you use (px, %, em...) as long as you move the div back to the left exactly half of its width.
#dialogBox{
width:70%;
left:50%;
margin-left:-35%; /*half of 70%*/
}
#dialogBox{
width:100px;
left:50%;
margin-left:-50px; /*half of 100px*/
}
#dialogBox{
width:202em;
left:50%;
margin-left:-101em; /*you get the picture*/
}
Fiddle
If you don't know the width.
Make a new div which will act as a container for your dialogue box. Set the left: value of this container div (position:absolute;) to 50% and subtract 50% from the left: value of your dialogue div (now position:relative;).
We have a div within a div:
[[---I am .a div---]]{size:still 16 characters}
/*
It is important to note that the width of the outer div
will always be equal to the width of the inner div
unless defined otherwise.
*/
If we set our container div (C) to be 50% from the left of the screen (left: 50%) then we get:
CD DC
| .[[---I am .a div---]] |
| . |
Now, we set the left of our dialogue box div (D) to -50% (subtracting 50% of the width of the parent element which in this case is exactly 50% of the width of the dialogue box.)) and get:
D C D C
| [---I am .[a div---] ] |
| . |
This effectively centers the dialogue box without knowing its width.
#container{
position: absolute;
left:50%;
}
#dialogBox{
position: relative;
left:-50%;
}
Fiddle
I made the container div red in the example so that you can see how it is working.
Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative