I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
Related
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I got two divs, and ive given the divs backgrounds.
They have exactly the same attributes/css.. But one div is fully clickable (the entire image inside the div area is clickable), the other one is only clickable here and there.. Any ideas?
http://romeon.net/deffrage
Its the two buttons
"Deffrage" "Josef"
its the deffrage button that is not working..
Your .backlava item is obstructing the link below it. You'll need to adjust the dimensions of this item. You might be able to simply remove the explicitly-declared height from the li. A quick test revealed that this fixed the problem, without affecting the layout (you should test further though if you decide to go that route).
In following code, change height from 53 to 3.
<li class="backLava" style="left: 9px; top: 0px; width: 66px; height: 53px; overflow: hidden;"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>
Both link for me. But one of them has the end tags in the wrong order (</span></div></a> where it should have been </a></span></div>).
And this CSS
.robin {position: relative;float: left;margin-right: 100px;}
applies to only one of them.
(And what's the point of the span without either a class or an id? That's a no-op, I'd say).
There seems to be Javascript setting the height of the backlava class to 53px instead of it's default of 16px. Remove whatever Javascript is doing that and you should be good.
i'll try to make my question really simple 2 you
Basically, i have a DIV, in which i have a picture
What CSS styles should i apply to the picture to position it correctly inside the div
with the condition that everytime i resize the browser window it stays there (inside the div) at the same distance from the borders
Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!
EXAMPLE HERE
code
html
<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>
css
that's the question :)
You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:
#super_div
{
position: relative;
}
Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:
#eyes
{
position: absolute;
top: 20px;
left: 20px;
}
That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics. Hope this helps.
This will get it horizontally centered:
margin:auto;
If you need it vertically centered as well then things get a bit more tricky. You can either resort to tables, use a background image (if this is appropriate to your situation) or fiddle with the css. I used the code on http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ as a basis for solving a similar situation I had a while ago..
The like button works fine, the recommendation works fine, but there's an issue: the like button is positioned on the right side of the page (which is intended), but when the button is clicked, it opens a box that exceeds the boundaries of the browser, to the right.
Example (with me in the Santa's hat as a doubtful bonus):
I've tried controlling the position using css, with no success. How can i proceed?
TL;DR
I need that recommendation box on the left, not on the right as it is now.
Thank you!
Your problem is in the css. Try using firebug to inspect the elements, you can change properties live to see which ones are the ones giving you the headache.
(edited)
The sidebar container is position:absolute, and has right:0. There's your problem.
#sidebarSocialetContainer {
right: 0px;
margin-right: 10px;
width: auto;
margin-top: -39px;
position: absolute;
}
So, if you put left:0 instead of right:0 you'll see the bar in the opposite side.