I have a form and I want to display help text. The text might be a bit longer at times. I want to set a fixed width to the div containing the help text and make it grow by height. Then, to align the middle of the help text to the relative input. I'm flexible with the structure of the HTML.
This is a fiddle with the form and the help text.
CSS
.form-parameter {
display : block;
}
.form-parameter label , .form-parameter input {
width : 150px;
display : inline-block;
}
.form-parameter-helptext {
width : 150px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.1s linear;
}
.form-parameter:hover .form-parameter-helptext {
visibility : visible;
opacity: 1;
}
All I found so far is how to align a div relative to a parent but not a sibling.
I set the width of form-parametr to 530px and add position:relative to it,and for your help div I add position:abolute;right:0;top:0;width:200px
as far as I know you cannot align the middle of the help text to the relative input with only html and css but I think this is what you want beside the aligning help text : DEMO
and for the record you need to set display:block to this div when you want your width to work,and you want help to be invisible,you've used visibility : hidden this way you just hidden that div but as you can see there is a white space that hold place for your help text,if you want to remove that white space ,you should usedisplay:none instead
Try this:
.form-parameter-helptext {
visibility: hidden;
color: #333;
background-color: #EEE;
border: 2px solid lightblue;
font-size: 13px;
padding: 5px;
margin-right: 10px;
opacity: 0;
-webkit-transition: opacity 0.1s linear;
/* This is what I added */
width:100px; // add the width
position:absolute; // set the position to absolute
}
I didn't test it on any browser or webpage but the fiddle works fine.
Related
This is my first question here on Stackoverflow so be kind :3 i'm having a problem with a website in which i cannot manage to make a div get the outer li height. I cannot link directly the website because u would need a private VPN access but i will try to give more information possible. This is the code i'm dealing with:
#boxdocenti ul.elencodocenti li div {
margin: 15px auto;
border-radius: 50%;;
max-width:90%;
height: auto;
/*background-color: #ff6319;*/
transition: all 0.5s ease 0s;
}
#boxdocenti ul.elencodocenti li div img {
max-width: 85%;
}
#boxdocenti ul.elencodocenti li div:hover {
background-color: #ff6319;
}
The circle div has an img inside it and i don't know why but the circle div becomes an OVAL! when i go in hover it gives to the image a strange oval border instead of a perfect circle. any suggestions? sorry for the lack of links but it's in a VPN network.
I can't see more relevant CSS and HTML so there are some options.
Option 1. Show <li> as a block element, expand <div> height and add more border-radius. Try adding this properties:
#boxdocenti ul.elencodocenti li {
display: block;
}
#boxdocenti ul.elencodocenti li div {
height: 100%;
border-radius: 100%;
}
Option 2. Absolute positioning. This will stretch the <div> to the <li> border.
#boxdocenti ul.elencodocenti li {
display: block;
position: relative;
height: 200px; //fixed height
}
#boxdocenti ul.elencodocenti li div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
With your css, what will determine whether #boxdocenti ul.elencodocenti li div is a circle or an oval is the height of your image. If your image is a square, it will produce a circle. If your image is a rectangle, it will produce an oval. Your containing div will take on the height of your image.
This is the closest that I could come to the behavior your talking about:
Link to demo
Your code is somewhat lacking since its only the CSS.
Yet what you describe seems like an display: issue.
What I think is happening: your element is by default an inline or inline-block element but when you hover the display property changes.
So I think adding (or removing) the display property should help.
Summary
Add a display:inline-block; on the hover so that it keeps its size and not extends to the full length possible of its parent.
I am building a website and ran into another problem with my code.
I have tooltips for a huge number of images so that when you hover over them you see information in the tooltip ( which is also an image)
My Problem is that when I hover the first few images they display the tooltip different then the rest of them.
My code looks like this:
.playertooltipimg{
width: 400px;
height: auto;
}
.playertooltipimg {
z-index: 100000;
}
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
left:-80.15em;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
left:-51.15em;
top: -0.2em;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
I think it's hard to understand what I mean which is why i created this jfiddle:
BUT you have to adjust the size of the window so that the 2 white boxes can be next to each other (in a row)
http://jsfiddle.net/ZkQLV/
I know it's a lot of code, I can't figure out why it is doing this, since every other images except the first few display the tooltip correctly
Your problem is caused by the use of inline and relative styles for the a (which is the container of the preview item). inline style makes the absolute positioning of the inner span a little strange, you can see that all the items on the second row seem to work OK, it happens only to the items on the first row (except the last item). However if you set display:inline-block for the a elements, you'll see that hovering on all the items won't work now, the popped-up tooltip has always the same offset (on the left side) from the a element (which you hover on). That's because you set position:relative for the a elements. So all the offsets (left and top) of the spans (which you set to some fixed values relative to font-size with em unit) will be compared against the hovered a element's position. To fix this issue, you have to choose the same element for all the items against which the offsets are set. The most suitable item is exactly the div #playersbig which contains all the items. To choose that div as the containing block of the inner span elements (in each item), you have to set its position to relative (which you've already done) but you have to remove the position:relative applied on the a elements.
Another note is that you should use right property to position your tooltip (span element), in the hidden state the right is about 200% (because your 2 divs #championsbig and #playersbig have the same width) while in the shown state, the right should be about 100%. The exact values of right depend on the padding/space width between your 2 divs #championsbig and #playersbig, looks like it's about 4px in your case). You can also use calc function to set the exact value but it's not supported by some old versions of browsers (especially the so-called IE), so I just use 201% and 101% respectively in the demo (because the width is 400px). If the width is fixed at 400px, you can also calculate the exact values for right yourself such as 804px and 404px instead of 201% and 101%.
CSS:
a.tooltips {
/* use this to have the expected absolute positioning
instead of the unexpected behavior when using inline style */
display: inline-block;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
top:0;
/* use right instead of left, this will hide the tooltip initially */
right:201%;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
/* this will show the tooltip on hovering */
right:101%;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
Demo.
I have a series of images I want to distribute evenly across a div. I've seen many questions similar to this with very good answers, but many use padding/margins to achieve this, which leaves empty gaps on the left and right edges of the containing div.
Right now I'm applying a margin-right to each image, which works except for the very last image, which has an ugly empty gap on its right side. I could just apply a different class to the last image with no margin, but I'm hoping for a cleaner solution. What other options do I have?
#photo_bar {
margin-bottom:15px;
width:785px;
}
#photo_bar a {
margin-right:7px;
}
.photo_bar_image {
border-radius:9px;
background-size: 125px;
display: inline-block;
width: 125px;
height: 125px;
text-decoration: none;
transition: background-size 0.2s, background-position 0.2s;
}
.photo_bar_image:hover {
background-size:140px;
background-position: -5px -5px;
}
<section id='photo_bar'>
<a class='photo_bar_image'></a>
<a class='photo_bar_image'></a>
<a class='photo_bar_image'></a>
</section>
What about this one?
img:last-child {
// change the margin here!
}
This will be applied to the last image element in the container!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
Using bootstrap and trying to do a little simple css animation on hover, expanding the element to highlight it.
.text-block {
background-color: white;
min-height: 400px;
text-align: center;
transition: .1s;
margin: 1em;
}
.text-block:hover {
margin: 0em;
transition: .1s;
z-index: 99;
}
This almost looks right, as the element appears to be expanded since the margin is animated away, but it moves up the page so it appears only 3 sides of the element grow.
Is it possible to set the height on hover to the non-hover height+2em to make it appear to grow 1em in all directions within CSS?
Change margin to padding. Margin adds blank space outside of your element. Padding should give you the effect you want :D
When the image grows in hover to 350px it pushes everything around.
This code is working except that when I hover and the picture grows it pushes the menu or what ever is around downwards.
How can I stop this?
#displaycar img
{
height: 200px;
}
#displaycar img:hover
{
height: 350px;
}
BTW I'm using twitter bootstrap and I have tried position: absolute;.
Is there any way to still increase size when hover but don't push nothing don't move nothing.
Set the height of #displaycar (the presumed parent div) to 200px and add overflow: visible;
#displaycar {
height: 200px;
overflow: visible;
}
I would use z-index on the elements. keep the values equal on the initial layout, but make it a stronger (bring to front) value when hovering
#displaycar img:hover
{
z-index:[stronger value];
height: 350px;
position :[relative, absolute, fixed];
}
note: to use z-index, you have to use one of the position values
Z-index gives priority to overlapping elements (bring to front / bring to back)
here is a bit more info on the subject
It's possible, but to avoid affecting surrounding content the element itself has to be removed from the flow of the document; this is easiest to achieve using position: absolute, though unfortunately this requires using a wrapping element, with position: relative (or any other non-static position value). The wrapping element has to have a width and height defined, which could be done automatically (with JavaScript, or PHP (amongst many other options)).
For example, the HTML:
<span>
<img src="http://placekitten.com/400/400/" />
</span>
<p><!-- generic dummy content, excised for brevity --></p>
And the CSS:
span {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
}
span img {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
/* Vendor-prefixes removed, for brevity */
transition: all 1s linear;
}
span:hover img {
width: 400px;
height: 400px;
/* Vendor-prefixes removed, for brevity */
transition: all 1s linear;
}
JS Fiddle demo.