This is a slightly confusing question to ask, but interesting nonetheless.
Basically, I am working on an animated bouncer on the side of a webpage, sort of like what is found on normal music players. The animation is fine, but I want to float the animated divs to the right without floating. If the divs are floated to the right, they display how I want them. However, when the width becomes small, they append onto the same line and seem to "twitch" and disappear.
So I'm looking for a way to float these guys to the right without causing them to end up on the same line. I haven't yet been able to find anything that doesn't end up with position fixed or absolute (which does not work for the overall layout and causes a bevy of other problems).
The snippet below is with float right to show the "twitching" behavior.
#keyframes lineBounce1 {
to {
width:60%;
}
from {
width:10%;
}
}
#keyframes lineBounce2 {
to {
width:80%;
}
from {
width:30%;
}
}
.playlist{
display:inline-block;
position:absolute;
height:70%;
width:30%;
left:27%;
top:7%;
text-align:center;
min-height:300px;
min-width:400px;
background-color:white;
overflow-y:auto;
overflow-x:hidden;
}
.playhead {
height:20%;
width:100%;
}
.bounce {
height:100%;
width:20%;
float:right;
}
.lineDance1 {
display:block;
float:right;
margin-top:5px;
height:5%;
background-color:rgb(153, 000, 000);
animation-direction:alternate;
animation-duration:500ms;
animation-iteration-count:infinite;
animation-name:lineBounce1;
}
.lineDance2 {
display:block;
float:right;
margin-top:5px;
height:5%;
background-color:rgb(153, 000, 000);
animation-direction:alternate;
animation-duration:750ms;
animation-iteration-count:infinite;
animation-name:lineBounce2;
}
<span class="playlist">
<div class="playhead">
<span>
</span>
<span class="bounce">
<div class="lineDance1"></div>
<div class="lineDance2"></div>
</span>
</div>
<div id="playlist">
</div>
</span>
EDIT: Just clarifying, since I don't think I was totally clear...
I want them to begin on the right side of the playlist and "bounce" (expand) towards the left. Currently they are on the left-hand side of the span and "bounce" (expand) towards the right.
I figured out what I need to do for this!
I ended up displaying the container as a flex and aligning it to the flex end. This will yield you the desired results for anyone else with this issue.
Here is a related article on align properties.
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I want the child divs to be always centered within their container, even on resize, and without changing their size.
Problem Example : http://jsfiddle.net/bQMj7/
HTML
<div id='foo'><div id="container" class='group'>
<div class='childs'>one</div>
<div class='childs'>two</div>
<div class='childs'>three</div>
<div class='childs'>four</div>
<div class='childs'>five</div>
</div>
</div>
CSS
#foo {
text-align:center;
}
#container {
background-color:beige;
display:inline-block;
}
.childs {
width:50px;
height:50px;
background-color:blue;
float:left;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container.
I want the cloud of these collapsing-on-resize divs, to be always centered.
Do you have any idea?
Edit : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:
The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)
I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.
Here's an update with the two issues above : http://jsfiddle.net/bQMj7/6/.
you may use inline-block for all of them and fake a float : center ; wich doesn't exist.
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin:5px;
}
DEMO http://jsfiddle.net/bQMj7/1/
Is this what you are looking for:
http://jsfiddle.net/collabcoders/bQMj7/3/
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
EDIT: If I understand you correctly you want the space gone between blocks but still keep the center. inline-block for some reason put 4px space on the right so simply add margin-right: -4px; to fix:
HERE'S THE NEW FIDDLE: http://jsfiddle.net/collabcoders/bQMj7/10/
and the update to the .child class
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right: -4px;
}
I've got a stylesheet where the intention is to have a fixed navbar which stays at the top of the screen no matter how far you scroll down. For this I've just used position:fixed; - but when I actually scroll down, the #content div overrides it and goes straight over the top (so the navbar stays at the top of the page but is underneath the content div.)
I haven't done any serious CSS coding in years, so I'm a bit rusty - it's probably a very simple solution, so apologies for being so trivial!
style.css
body {
margin:0;
background:#eeeeee;
}
#navbar {
background-color:#990000;
position:fixed;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
#navbar a {
color:#fff;
}
#content {
background:#eeeeee;
margin-top:50px;
width:100%;
}
#feed {
background: #fff;
position:absolute;
left:22%;
width:776px;
}
Pages are structured like this:
<body>
<div id="navbar"><?php include core/navbar.php; ?></div>
<div id="content">
<div id="feed">
CONTENT
</div>
</div>
</body>
In order to fix this you need the property z-indexdefined by W3 that specify the level of the element. Try this:
#navbar {
background-color:#990000;
position:fixed;
z-index:1; /*Add this*/
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
If you're using Bootstrap 4, the .navbar background is clear and can be covered by some elements. Setting the z-index won't work. Use a background color, e.g., .bg-white.
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-white">
To fix the override issue use CSS z-index Property
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) .
#navbar {
background-color:#990000;
position:fixed;
z-index: 1;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
Sometimes if you use z-index -1 in order not to let the element pass over the fixed nav bar this thing solves the problem but at the same time another problem arises, now on the element which we gave z-index:-1, hover will not work.
So to take care of these things we must use index 0 at the element and in the fixed nav bar we need to use z index 1. then all things will be sorted.
I have a div with some text in it and "on hover", I want to display another div with some other text.
The problem is that the text from the first div comes through to the second and everything seems mingled up. I would like the second div to completely cover the first one.
Here is the jsfiddle
HTML
<div class="outer_box">
<div class="inner_box">
Main</div>
<span class="caption">Caption</span>
</div>
CSS
.outer_box {
width:100px;
height:100px;
background-color:orange;
}
.inner_box{
width:100px;
height:100px;
position:absolute;
}
.caption {
width:100px;
height:100px;
background:black;
color:rgba(255,255,255,1);
opacity:0;
}
.outer_box:hover .caption{
opacity:1;
}
Thanks!
.inner_box:hover {
opacity: 0.0;
}
You need to style the text from the first div so that it disappears on hover:
.inner_box:hover .text {
visibility:hidden;
}
Add this to your CSS:
.outer_box:hover, .inner_box:hover {
opacity:0;
}
If you will notice, I made sure to include the .outer_box:hover selector in case your intention ever was to make the outer box significantly larger than the inner box.
More useful information about the behavior of the opacity property can be found here: http://www.w3schools.com/cssref/css3_pr_opacity.asp
I'm trying to make a webpage with the following structure:
1 big div (main), and 3 divs inside it, a left shadow, content, and a right shadow.
these is the css code for them, mleft and mright are the shadows.
body,html{height:100%;}
.main {
width:900px;
height:100%;
}
.mleft, .mright {
width:25px;
height:100%;
float:left;
}
.mleft { background-image: url("shadowleft.jpg"); }
.mright { background-image: url("shadowright.jpg"); }
.content {
width:850px;
float:left;
background-color:red;
}
And the html is like this:
<div class="main">
<div class="mleft"></div>
<div class="mcontent">
(content, some text and images)
</div>
<div class="mright"></div>
</div>
I want this to be viewable in big and small screens, the problem is that when viewing in small screens or making the window small, the main div height goes below the height of content div, so the shadow is too short to cover content div.
I've been playing with min-height, but min-height:auto, doesn't work, and none of the values of "overflow" does what I want.
Any clean way of solving this that works on any browsers?
Should I use javascript?, redo everything another way?
Update:This is an image of how it looks
Update2: The height of main seems to be directly the height of the window (100%) so I main is always the size of the window, which if small it's less than the content inside it, I tried playing with min-height with no success. The expected result is that it resizes until it reaches the size of it's contents, when it should stop.
OK, I've deleted all the old stuff... found a solution using positioning :)
http://jsfiddle.net/Damien_at_SF/AtX4A/
Basically, the shadows sit inside the content div and with absolute positioning are placed at 0,0 left and 0,0 right (or you could move them outside the content using negative positioning)
UPDATE: put the main div back in and applied margin:auto to it's style in order to center the whole lot :)
HTML
<div class="main">
<div class="mcontent">
<div class="mleft"></div>
<div class="mright"></div>
(content, some text and images)>
<div style="clear:both;"></div>
</div>
</div>
CSS
body,html{
height:100%;
margin:0px;
padding:0px;
}
.main {
width:900px;
height:100%;
margin:auto;
}
.mleft, .mright {
width:25px;
height:100%;
}
.mleft {
background:green;
position:absolute;
top:0px;
left:0px;
}
.mright {
background:blue;
position:absolute;
top:0px;
right:0px;
}
.mcontent {
width:850px;
background-color:red;
position:relative;
padding-left:25px;
}
Hope that helps :)