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.
Related
Im have a problem with submenu which has position:absolute; and top:5em;. The submenu is hidden until you hover over parent (li element). Everything is working but when you hover over parent (li element) the submenu (li > ul element) is shown but you cant mouse-over (access) it because it's disappearing when mouse leaves parent (li element) area.
I found out that the top: 5em; is doing a "break" between LI and UL. When i try to reduce the top: 5em; to for instance top: 1em; (size where UL is just on border of parent (li element) or for instance goes a bit into parent (li element), then the menu is working!!
But i need it to have the top of my choice and still working.
How to achieve this with position:absolute and top properties?
Live demo: http://codepen.io/riogrande/pen/bEGzXm
I find it strange you found the exact root cause of the problem, but has yet to figure out the fix.
Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:
&:before{
content: '';
display: none;
width: 100%;
height: 5em;
position: absolute;
left: 0;
top: 0;
}
&:hover:before{
display:block;
}
Demo: http://codepen.io/anon/pen/mVdgdo
Edited: Answer edited to cover issue with insights from the OP himself.
Solution based on Av Avt's answer
Anyway the fix is to add a transparent child to the <li>, so that it fill the gap between the <li> and its <ul> child. In this case I use li:before:
&:before {
content: '';
display: none;
width: 100%;
height: 5em;
position: absolute;
top: 100%;
left:0;
}
And then when you hover over parent <li> display it as block so it fills the gap ONLY when parent <li> is hovered (active)
&:hover {
&:before {
display:block;
}
> ul {
display: block;
}
}
Anyway thanks to #av-avt !! Without you i would not figure it out!
I'm trying to make a box which expands into four boxes (which are also links) when you hover over it. To do this I have 5 boxes. One which acts as the parent box and contains all others, one which expands on hover, and the other three which are in the second one positioned to opposite corners. My problem is that the second box has to be over the others for the hover to work but then the user can't click the buttons below it.
Here's an abbreviated version (CSS then HTML):
#sidebar {
height: 100px;
width: 100px;
position: relative
}
#sidebar #container {
height: 100px;
width: 100px;
transition: all 2s;
}
#sidebar #container:hover {
height: 200px;
width: 200px;
}
#sidebar #container #button1 {
height: 100px;
width: 100px;
position: absolute;
right: 0;
z-index: -1;
}
/* Repeat with two buttons positioned to bottom corners */
<div id="sidebar">
<div id="container">
<div id="button1"></div>
<!-- Repeat buttons again -->
</div>
</div>
I'd rather not use anything but CSS and HTML, but if it's the only way I'll be open to it. Jsfiddle here.
EDIT: I fixed the jsfiddle with idrumgood's solution.
It's your negative z-index that's causing the issue. That places it behind everything else.
You need to add this style to your links:
a{
display:inline-block;
}
And adjust the size of the second link. Try it and tell me! :)
You can add the hover effect to your sidebar instead and changing the visibility of your buttons,as well as removing z-indexes http://jsfiddle.net/4zLjas39/12/
#container a div{visibility:hidden;}
#sidebar:hover #container a div{visibility:visible;}
You can allow clicks to pass through an element by setting it's css pointer-events to none
#the_invisible_object{
pointer-events: none;
}
Please take a look at this fiddle http://jsfiddle.net/EWUTX/
These are the styles used:
.box { position: relative; display:inline-block;}
.box:after {
position: absolute;
width: 100%;
height: 10px;
background: green;
content: '';
bottom:-10px;
left:0;
}
I get a small 5px gap when using the style on an li element, but not on a div tag.
If I specify font-size: 0px, the gap goes away. But then all the text within the li disappears.
As the font size of the li increases, the gap widens.
Is there a style to get rid of this gap, without any hard coding of font sizes?
Fiddle again: http://jsfiddle.net/EWUTX/
Thanks
PS: I'm actually building a CSS framework internally where users can specify a status (using classes) like "started", "not-started", etc.
When used, the element should display a small bar below with different colors. Users can use this class on any element.
That gap is part of the line height reserved characters like 'p' letter.
You will get the same gap if you don't set a height to your div. If you want to remove that from an inline element like an img you can set the vertical-align to the bottom:
.box img {
vertical-align: bottom;
}
See: http://jsfiddle.net/DhTzp/
Its the image that crates the whitespace;
img{ display: block; }
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.
I'm currently really busy working on a simple jQuery slideshow, but I've got the following problem, when I make my slides a fixed width like:
#slider ul {
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
}
#slider ul li {
float:left;
height: 100%;
width:200px;
}
It all works fine; but when I want to make my slider full-screen. So Instead of width 200
width:100%;
All the li's get displayed beneath each other instead of next to each other. I hope I provided enough information.
If the width is 100% the li element occupies the full width of its parent container, meaning there's no room for another li element to occupy the same line; the width explicitly forces the next sibling to the next line.
To work around this, one option, given the following mark-up:
<ul>
<li>
<img src="http://lorempixel.com/500/500/nightlife/Some%20sample%20text" />
</li>
<li>
<img src="http://lorempixel.com/500/500/sports/Some%20sample%20text" />
</li>
</ul>
Is to use:
ul {
white-space: nowrap;
}
li,
img {
width: 100%;
}
li {
display: inline-block;
}
JS Fiddle demo.
Which forces the ul to keep elements in a single 'line', assigns a 100% width to the li and img elements, and displays the li elements as in-line.