I was looking at Android developer's website and I wanted to copy how they designed the article's animation when someone hovered on top of it. As such I tried to make something similar in plain HTML/CSS. However, I am running into an issue.
I used float expecting that the div tags would seperate from one another and apply the appropriate margins. However, It seems that the div tags are stacking on top of each other instead of being spread out.
I wanted them to look like this
but it ended up looking like this
https://codepen.io/alfielytorres/project/full/XYxPVO
I provided my files below.
HTML
<div class="new"><div>
<div class="new"><div>
<div class="new"><div>
CSS
body {
background: white;
font-family:courier;
padding:20px 100px 20px 100px;
}
.new {
width:100px;
height:100px;
background-color:white;
position: relative;
border:2px solid black;
float:left;
padding:15px;
border-radius:5%;
}
.new::before {
content:"";
width:100px;
height:100px;
padding:15px;
background-color:black;
position:absolute;
transform:translate(-6px,-6px);
border-radius:5%;
z-index: -1;
}
.new:hover:before{
animation-name:click;
animation-duration:500ms;
animation-fill-mode:forwards;
}
#keyframes click {
0% {
transform:translate(-6px,-6px);
}
100% {
transform:translate(-10px,-10px);
}
}
Thank you for your help!
You need to close your div tags like so </div>, then you could put these 3 div in a flex container and space them evenly.
hope this helps
Related
I have the following problem and it drives me crazy:
Basicly I have a div-container with an background. This background should change when I hover it (see pichture). It is an png and instead of white it should turn red.
What I have done until now:
First: CSS sprite
Thought it will be the best solution but becuase the div changes it's size (responsive) and the icon does not have a fixed size it was not very clean: I had a small offset on hovering. Not sure why… mybe this can be fixed…
Second: 2 separate images
But this is not an option in this case because I need to work with inline styles. :hover ist not available as inline style.
Thrid: tried mask-box-image
Was a woderful solution… but Firefox does not support it.
Does anyone has another idea how to solve it?
Give This a Try
CSS
.icon-cont{
height:300px;
width:300px;
background-color: #ff0000;
text-align:center;
}
.icon-cont:hover{
background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
border-color:#ff0000;
}
.icon{
height:0px;
border-bottom:2px solid #fff;
width:60%;
line-height:300px;
position: relative;
margin:auto;
top:50%;
}
.icon::before{
content:"";
position: absolute;
top:0;
bottom: 0;
left:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
.icon::after{
content:"";
position: absolute;
top:0;
bottom: 0;
right:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
HTML
<div class="icon-cont">
<div class="icon"></div>
</div>
Link for reference
hope this helps..
May be it will help
I posted an example following
.box {
padding: 20px;
display: inline-block;
background:tomato;
}
.box:hover {
background: transparent;
}
.box:hover span {
color: tomato;
}
.box span {
display: inline-block;
color: #fff;
}
<div class="box">
<span>a</span>
<span>----</span>
<span>b</span>
</div>
You can't change color of .png with css. I think you should make a font out of your icons in order to change their color with css later.
I haven't done that myself, but I know those fonts, like font-awesome can change color. There are some automatic generators in google to make your own font.
Try this.
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
http://jsfiddle.net/6CQUT/
In the example above, logo has a right margin and I can't put menu near it without resizing it(it should be 100x100) or it being pushed under it. Where did the margin came from and how can I get rid of it?
Code as requested.
<body>
<div id="header">
<div id="logo">logo</div>
<div id="menu">menu</div>
</div>
<div id="cont">under</div>
</body>
#header {
width:200px;
height:100px;
outline:solid 1px black;
}
#logo { display:inline-block;
width:100px;
height:100px;
outline:solid 1px black;
}
#menu {
display:inline-block;
width:96px;
height:96px;
outline:solid 1px black;
}
#cont {
outline:solid 1px black;
width:200px;
height:300px;
}
As i mentionned in my comments, you are dealing with white-space coming from your HTML code when set element as inline-boxes.
There s many ways, and one example provided was to remove it from code . logo</div><div id="menu" as shown here : http://jsfiddle.net/6CQUT/2/
But the best, i guess is to link to some tutorials to understand what is going on (links picked up from a search engine :) ):
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://davidwalsh.name/remove-whitespace-inline-block
How to remove the space between inline-block elements?
One option is to keep display: inline-block and add this: http://codepen.io/pageaffairs/pen/fKkbE
#header {
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
display:table;/* Webkit Fix */
}
#header div {
word-spacing:0; /* reset from parent*/
}
I had the same issue. In the css margin: -2px; seemed to solve it for me.
I have a topbar, i.e. something like Facebook or or StackExchange or Twitter's top portion of the screen, and I want it to have a different background than the rest of the page (the stuff below/the main body). How do I accomplish this?
you can use this code :
<div id="topbar">
</div>
and you can use Position:fixed; like twitter's topbar
body{
background: green;
}
#topbar{
width:100%;
background-color:blue;
height:80px;
position:fixed;
}
Try with this
css
body { background:#252525; margin:0;padding:0;}
.headerStrip{ height:40px; width:100%; z-index:1001; background:#F00; position:absolute; position:fixed;}
Html : Put it after body tag
<div class="headerStrip"></div>
You have to place the your header_block outside your wrapper
<div id="header_block">
...... Header_block Contents
</div>
<div id="wrapper">
...... Entire Page
</div>
css
#header_block
{
position:fixed;
width:100%;
float:left;
}
This should do the work
Best way to accomplish this is to use the CSS Background property.
For example stackoverflow is using a div with an id like the following to set the background color for the gray bar up top:
<div id="custom-header"></div>
Then in their css file they are using background-color like this; note the height as well:
#custom-header {
background-color: #EEE; <------------
height: 31px;
margin-bottom: -31px;
}
This gives us the grey bar up top which passes behind the StackExchange logo.
You can see that the body is set to white via CSS and the Background (shorthand) property:
body {
background: white; <-------------
color: black;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 80%;
text-align: center;
}
You can see that the footer div is taking it a step further by using background (shorthand) and border-top for the 7 pixel solid black line:
#footer {
color: #444;
background: #777; <------------
border-top: 7px solid black; <------------
clear: both;
padding: 15px;
margin-top: 30px;
}
This is a few years old now though, you might find value in running through some tutorials like this one from Net Tuts.
Is there any way to set a default width for a group of divs, but then change each width regardless of order in just CSS? Example JSFiddle is at http://jsfiddle.net/RfHSA/.
I'm attempting to have each div set to width:20%, but then upon the mouse hovering one of the inner divs, the specific div hovered over should be set to width:72% and the others set to width:7% (including ones that occur prior to it in the HTML structure). Is this possible with just CSS, or is Javascipt/jQuery required?
Edit: Example of what I'm trying to achieve is here: http://www.kriesi.at/themes/newscast/
I'd like to recommend an easy solution to your need: http://jsfiddle.net/linmic/qcnmu/1/
We simply apply display: table to the "listwrapper" and display: table-cell to the "outerbox", then everything works perfectly.
Cheers
You were 99% there: http://jsfiddle.net/RfHSA/2/
.featuredwrapper {
width:100%;
height:350px;
margin:auto;
background-color:rgba(0,0,0,0.5);
padding-top:12px;
position:relative;
}
.listwrapper {
width:95%;
max-width:1100px;
height:325px;
margin:auto;
position:relative;
}
.listwrapper:hover .outerbox {
width:7%;
}
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
.listwrapper:hover .outerbox:hover {
width:72%;
}
.outerbox:first-child{
margin-left:0px;
}
.hoveractive {
position:absolute;
width:95%;
height:325px;
z-index:1000;
padding-top:12px;
}
I minimally fixed them all errantly closing, I think the remaining problems related to decimal widths associated with % widths...
http://jsfiddle.net/RfHSA/15/
Here's a working version of your script. You definitely need some javascript manipulation here to make it work. I tried to use as little as possible and as you can see from the results, it's a little shaky, but hopefully it gets you on the right track.
EDIT: Oh well, I tried, but the other guy's solution is better =P
Updated to prevent premature collapsing
Tweaking your CSS gave this solution (see fiddle). It requires the padding-top to move from the .listwrapper to the .featuredwrapper to prevent premature collapse from top entry:
Tweaked CSS
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
/*prevents premature collapse on right side entry*/
.outerbox:last-of-type:after {
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: -2px;
}
.listwrapper:hover .outerbox {
width: 7%;
}
.listwrapper .outerbox:hover {
width:72%;
}