I just started learning HTML/CSS. I found position is hard to me to understand. So I changed the position to relative in .button span, .button .icon selector the the arrow will disappeared, but If I delete the Download download it would be back again. Could anyone tell me why this happened? Also isn't block element(div) and inline element(span) are not supposed in one line so I was wondering in which part of css force them to be one line? Thank you.
/* Main Styles */
body {
min-width: 300px;
background-color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.button {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
overflow: hidden;
margin: auto;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
width: 300px;
height: 100px;
line-height: 100px;
background-color: #34B3A0;
color: #fff;
}
.button span,
.button .icon {
position: absolute;
display: block;
height: 100%;
text-align: center;
}
.button span {
width: 72%;
left: 0px;
line-height: inherit;
font-size: 22px;
}
.button .icon {
right: 0;
width: 28%;
}
.button .icon .fa {
font-size: 30px;
vertical-align: middle;
}
.button span,
.button div,
.button i {
transition: width 750ms ease-in 200ms, left 500ms ease-out 450ms, font-size 950ms linear;
}
.icon {
width: 200px;
background-color: #1A7B72;
}
.button:hover span {
left: -72%;
}
.button:hover .icon {
width: 100%;
}
.button:hover .icon .fa {
font-size: 45px;
}
<a class="fancy button" style="color: white;" href="#" role="button">
<span>DOWNLOAD</span>
<div class="icon">
<i class="fa fa-arrow-down"></i>
</div>
</a>
<link rel="stylesteet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
because absolute positioned elements are removed from the normal flow and can overlap elements. and if you want to use position absolute, then you must position the element in its parent where you want it to be. and parent position will be relative.
please read and watch to learn and practice about position properties and how to use them.
you can start here
there are many youtube channels that will explain all of that to you in less than 10 minutes. one of my favorites is this channel. check it out.
Related
Is there a way to position an img separately from the source (text) in an anchor element? For instance, in the picture, I want the word "dot" to be aligned further right than the arrow but stay on top of the arrow.
current
what I want
I know I could make them as separated anchors but I want the color of the word to change when you hover on the arrow as well and if they are separate, the a:hover doesn't work together.
I tried changing the position under .left img to be different but it moves the img and the source.
HTML code:
<span class="leftarrow">
dot<img src="images/leftarrow.png">
</span>
CSS code:
.leftarrow {
position: absolute;
left: 0;
top:0;
}
.leftarrow a{
position: absolute;
left: 0;
font-size: 1.5em;
color:gray;
text-decoration: none;
}
.leftarrow a:hover{
color: black;
}
.leftarrow img{
position: absolute;
left: 0;
top: 15px;
width: 50px;
}
Try this, using Pseudo-Elements. It could definitely be more optimized than this though.
a {
margin-left: 100px;
}
span:after {
content: "";
background-image:url('https://www.flaticon.com/svg/static/icons/svg/271/271218.svg');
display: inline-block;
background-size: 30px 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 1;
left:90px;
top: 15px;
}
a:hover {
color: red;
}
<a href="#">
<span>dot</span>
</a>
First: wrap the dot into a <span> or <div> for better control,
Second: use a more powerfull display mode (e.g: flex or grid)
here is a sample:
a {
vertical-align: middle;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-end;
color: black;
width: fit-content;
margin: 0 auto;
}
a:hover {
color: red;
}
div {
font-size: 32px;
}
img {
width: 100px;
}
<a href="#">
<div>dot</div>
<img src="https://www.flaticon.com/svg/static/icons/svg/271/271218.svg" />
</a>
I'm working on a sidebar menu and want it to be partially collapsing, which means I have to show text on hover and hide the text when not hovering. I know another question has been asked about changing another element's property on hover, but I'm having trouble changing itself and another property.
General HTML layout:
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #1d326b;
height: 100%;
width: 60px;
transition: 0.3s;
border-radius: 0 5px 5px 0;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.sidebar:hover > .text {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
<div class="sidebar">
<!--more containers...-->
<!--text below is deeply nested-->
<p class="text">Displayed Text</p>
</div>
Is there a pure css solution to this problem? Any help would be appreciated!
I think what you are trying to achieve is the animation for the width, if that's what you want just remove > .text from the hover selector:
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #1d326b;
height: 100%;
width: 60px;
transition: 0.3s;
border-radius: 0 5px 5px 0;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
color: #FFF;
}
.sidebar:hover {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
.text {
width: 150px;
display: none;
}
.sidebar:hover .text {
display: block;
}
<div class="sidebar">
<!--more containers...-->
<!--text below is deeply nested-->
<p class="text">Displayed Text</p>
</div>
Would doing something like this be what you're looking for?
.text{
display: none;
}
.sidebar:hover > .text {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
.sidebar .text {
visibility: hidden;
}
.text:hover {
display: block;
width: 150px;
}
#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
How do you animate the text position smoothly. On hover, I want to re-position the text from text-align: center to text-align: left.
From this state:
To this state:
When I change the text-align on a :hover selector, the transition isn't smooth. It just jumps to the left alignment.
div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}
div.subject:hover > div.subjectHeader {
height: 30px !important;
line-height: 30px !important;
font-size: 1.5em !important;
text-align: left !important;
padding-left: 10px !important;
}
Here is the jsfiddle: Link to jsfiddle
The text-align property is not animatable, so CSS transitions will not be applied to it.
One possible workaround involves positioning your text inside a div absolutely and animating the left property instead. For example, modify your header HTML like this:
<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>
Then animate the CSS of .subjectHeaderInner using the left and margin properties. Don't change text-align as there's no way to animate that property. For example:
div.subject .subjectHeaderInner {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
-moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
left: 0;
margin-left: 0;
}
I updated your fiddle with this code: http://jsfiddle.net/kAPtL/5/
Other workarounds are possible depending on what kind of effect you want. There are some examples at Is it possible to transition text-alignment using CSS3 only?
Edit: Slightly better, since the closing animation can't be done with precision (without knowing the text length), I made it simpler but at least it doesn't look that bad.
This is an alternative that works pretty well, almost perfect I would say. The most notable trick is using white-space: nowrap to play with the box dimensions effectively.
HTML layout:
<div>
<h1>
<span>Some Title</span>
</h1>
<p>some cool explanation</p>
<p>more explanation</p>
</div>
CSS that delivers the magic:
div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }
JSFiddle example
I have a button link which I want to align center, horizontally. Here is the code of button-
HTML:
<button class="downloadButton">Download</button>
Now, I want to align this in center, please suggest a possible CSS for the same, you can find this fiddle at JS Fiddle
P.S. :- I don't want to use <center> tag
Working FIDDLE Demo
Why use button inside an a. You can use just a. And make text-align of parent to center.
<div class="center">
Download
</div>
And the CSS of parent:
.center { text-align: center; }
And set a padding for the link:
.downloadButton { padding: 7px 20px 8px 20px; }
Try this:
body{ /* or parent element */
text-align: center;
}
a{
/* wraps this element according to width of the child element.(here) */
display: inline-block;
}
Working Fiddle
Here you are:
http://jsfiddle.net/594DY/1/
a {
display: block;
margin: 0 auto;
width: 150px;
}
Use this if you want to align center the whole button along with a tag
a {
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
Or use this if you want align button center inside a tag
a {
width: 100%;
display: block;
text-align: center;
}
Simple way to make a button center:
HTML TAG:
<button class="button" style="vertical-align:middle"><span>Login</span></button>
And use this CSS, adding some optional style:
.button {
display: inline-block;
border-radius: 4px;
background-color: #E80C11;
border: 5px;
border-radius: 15px;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}