CSS: Transition timing help, span filling containing element and dynamic(?) width
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li><a href="#">1<span class="tooltiptext">Welcome</span></a></li>
<li><a href="#">2<span class="tooltiptext">Second</span></a></li>
<li><a href="#">3<span class="tooltiptext">Third</span></a></li>
<li><a href="#">4<span class="tooltiptext">Fourth</span></a></li>
<li><a href="#">5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></a></li>
<li><a href="#">6<span class="tooltiptext">Sixth</span></a></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
html css
asked Nov 23 '18 at 14:14
UbiUbi
467
add a comment |
I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li><a href="#">1<span class="tooltiptext">Welcome</span></a></li>
<li><a href="#">2<span class="tooltiptext">Second</span></a></li>
<li><a href="#">3<span class="tooltiptext">Third</span></a></li>
<li><a href="#">4<span class="tooltiptext">Fourth</span></a></li>
<li><a href="#">5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></a></li>
<li><a href="#">6<span class="tooltiptext">Sixth</span></a></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
html css
asked Nov 23 '18 at 14:14
UbiUbi
467
The problem here is that you are trying to transition toautowidth and that's not possible with CSS.
– Paulie_D
Nov 23 '18 at 16:23
@Paulie_D Sorry if "width: auto" was left in there at some point, when you happened to look, that was just me playing around with settings, the current version(s) of it with "width: 150px" are what I'm working with
– Ubi
Nov 27 '18 at 9:14
add a comment |
I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li><a href="#">1<span class="tooltiptext">Welcome</span></a></li>
<li><a href="#">2<span class="tooltiptext">Second</span></a></li>
<li><a href="#">3<span class="tooltiptext">Third</span></a></li>
<li><a href="#">4<span class="tooltiptext">Fourth</span></a></li>
<li><a href="#">5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></a></li>
<li><a href="#">6<span class="tooltiptext">Sixth</span></a></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
html css
asked Nov 23 '18 at 14:14
UbiUbi
467
I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li><a href="#">1<span class="tooltiptext">Welcome</span></a></li>
<li><a href="#">2<span class="tooltiptext">Second</span></a></li>
<li><a href="#">3<span class="tooltiptext">Third</span></a></li>
<li><a href="#">4<span class="tooltiptext">Fourth</span></a></li>
<li><a href="#">5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></a></li>
<li><a href="#">6<span class="tooltiptext">Sixth</span></a></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
html css
html css
asked Nov 23 '18 at 14:14
UbiUbi
467
asked Nov 23 '18 at 14:14
UbiUbi
467
asked Nov 23 '18 at 14:14
UbiUbi
467
asked Nov 23 '18 at 14:14
UbiUbi
467
asked Nov 23 '18 at 14:14
UbiUbi
467
467
The problem here is that you are trying to transition toautowidth and that's not possible with CSS.
– Paulie_D
Nov 23 '18 at 16:23
@Paulie_D Sorry if "width: auto" was left in there at some point, when you happened to look, that was just me playing around with settings, the current version(s) of it with "width: 150px" are what I'm working with
– Ubi
Nov 27 '18 at 9:14
add a comment |
The problem here is that you are trying to transition toautowidth and that's not possible with CSS.
– Paulie_D
Nov 23 '18 at 16:23
@Paulie_D Sorry if "width: auto" was left in there at some point, when you happened to look, that was just me playing around with settings, the current version(s) of it with "width: 150px" are what I'm working with
– Ubi
Nov 27 '18 at 9:14
The problem here is that you are trying to transition to
auto width and that's not possible with CSS.– Paulie_D
Nov 23 '18 at 16:23
The problem here is that you are trying to transition to
auto width and that's not possible with CSS.– Paulie_D
Nov 23 '18 at 16:23
@Paulie_D Sorry if "width: auto" was left in there at some point, when you happened to look, that was just me playing around with settings, the current version(s) of it with "width: 150px" are what I'm working with
– Ubi
Nov 27 '18 at 9:14
@Paulie_D Sorry if "width: auto" was left in there at some point, when you happened to look, that was just me playing around with settings, the current version(s) of it with "width: 150px" are what I'm working with
– Ubi
Nov 27 '18 at 9:14
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448292%2fcss-transition-timing-help-span-filling-containing-element-and-dynamic-widt%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448292%2fcss-transition-timing-help-span-filling-containing-element-and-dynamic-widt%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The problem here is that you are trying to transition to
autowidth and that's not possible with CSS.– Paulie_D
Nov 23 '18 at 16:23
@Paulie_D Sorry if "width: auto" was left in there at some point, when you happened to look, that was just me playing around with settings, the current version(s) of it with "width: 150px" are what I'm working with
– Ubi
Nov 27 '18 at 9:14