So I'm making a website for a school assessment, and I was wondering why my Nav bar links are always slightly below the actual nav bar itself. If anyone could help that'd be great :).
ul {
text-align: center;
padding-left: 1px;
top: -10px;
list-style: none;
}
ul li {
font-family: Arial;
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: 0px;
padding: 10px 89.5px;
background-color: #6C2DC7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #8467D7;
}
a:link {color:#FFFFFF;} /* unvisited link */
a:visited {color:#FFFFFF;} /* visited link */
a:hover {color:#FFFFFF;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
a {
text-decoration: none;
}
This is what it looks like on my website.
If you change this it will work:
line 75 of your style.css
ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
really you should make this just for your nav bar and not for every ul so you could change it to the below: up to you though both ways work :)
#navigation ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
Related
css is not working properly in rails 4.2.5 on implementing home page looks like
the gem file are
gem 'rails', '4.2.5.1'
gem 'pg'
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'devise'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '3.2.0.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '1.8.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
my routes are
Rails.application.routes.draw do
get 'pages/about'
get 'pages/contact'
get 'pages/resources'
devise_for :admin_users, ActiveAdmin::Devise.config
ActiveAdmin.routes(self)
resources :categories
get 'categories/index'
get 'categories/edit'
get 'categories/new'
get 'categories/show'
get 'home/index'
resources :posts
root 'home#index'
end
my css files are:
#import "bootstrap-sprockets";
#import "bootstrap";
body {
margin: 0;
padding: 0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6F6F6F;
}
strong {
color: #3F3F3F;
}
h1,h2,h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-weight: normal;
color: #2B2522;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p,ul,ol {
margin-top: 0;
line-height: 180%;
}
ul,ol {
}
a {
text-decoration: underline;
color: #D93544;
}
a:hover{
text-decoration: none;
}
#wrapper{
width: 1000px;
margin: 0 auto;
padding: 0;
background: #000000;
}
/* Header */
#header-wrapper {
height: 120px;
}
#header {
width: 1000px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 350px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
margin-left: 30px;
padding: 20px 0px 0px 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 3.8em;
font-weight: bold;
color: #D43442;
}
#logo h1 a {
color: #D43442;
}
#logo h1 span {
}
#logo p {
margin: 0;
padding: 0px 0 0 32px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #BEBEBE;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #707070
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
height: 19px;
padding: 4px 5px 1px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 26px;
background: #D93544;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
height: 125px;
margin: 0 auto;
padding: 0;
background: #D43442;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
border-left: 1px solid #000000;
}
#menu a {
display: block;
height: 80px;
padding: 45px 25px 0px 25px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 26px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a{
background: #A32833;
text-decoration: none;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 980px;
margin: 0 auto;
padding: 0px 0px 0px 20px;
}
#page-bgtop {
padding: 20px 0px;
}
/* Content */
#content {
float: right;
width: 600px;
padding: 40px 0px 0px 0px;
}
.post, .post_full, .page {
margin-bottom: 30px;
padding: 30px 20px 20px 20px;
background: #FFFFFF url (images/page-gradient-bg.png) repeat-x left bottom;
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,1);
outline: 1px dashed #D4D4D4;
outline-offset: -5px;
}
.post .title, .page .title {
height: 41px;
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-family: 'Abel', sans-serif;
}
.post .title a, .page .title a {
text-decoration: none;
color: #202020;
border: none;
}
.post .entry {
padding: 20px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.post .byline {
clear: both;
overflow: hidden;
padding-bottom: 20px;
}
.post .meta {
float: left;
}
.post .links {
float: right;
}
/* Full Post */
.post_full .byline p {
padding: 0;
margin: 0;
}
.post_full .byline {
clear: both;
overflow: hidden;
margin-bottom: 15px;
padding: 5px;
background: black:;
color: #fff;
border-left: 5px #D93544 solid;
}
.links a {
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
margin: 0px;
padding: 20px 20px 0px 0px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #191919;
background: url (images/img01.jpg) no-repeat left 15px;
margin: 0px 20px 0px 20px;
border-left: none;
text-align: left;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 0px;
}
#sidebar h2 {
height: 31px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 20px;
background: url(images/img03.jpg) no-repeat left top;
text-shadow: #203060 -1px 1px 2px;
text-align: left;
text-transform: uppercase;
letter-spacing: -0.5em;
font-size: 2em;
color: #FFFFFF;
}
#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
color: #847F7E;
}
#sidebar a {
border: none;
color: #847F7E;
}
#sidebar a:hover {
text-decoration: underline;
color: #847F7E;
}
/* Calendar */
#calender {
}
#calender_wrap{
padding:20px;
}
#calender table {
width: 100%;
}
#calendar body td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/footer/
#footer{
width: 980px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #847F7E;
}
#footer a {
color: 847F7E;
}
form label{width: 110px; display: inline-block;}
looks like thisenter image description here
want home about contact to be in column form
and want to remove the header background
How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle
Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>
yes, it should do it but you need an inital li:after before your li:hover:after
I am currently running Joomla with a custom template which I designed. Most everything is working beautifully, but I am having a major problem with the footer: it appears in the middle of the page if the content is longer than a certain height. I have the footer set to absolute with a bottom value of 0, so I cannot figure out why it would show up like this on some pages. Below is the contents of my template's custom.css and index.php for reference. Please also see the screenshots below. The first shows a page with the footer correctly positioned, while the other two highlight the footer problem. Thanks in advance for any assistance!
custom.css
#charset "utf-8";
/* Wowcrofty's Picture Perfect Custom Layout */
/* CSS Descriptor properties order:
1. Positioning properties
2. Width and height properties
3. Margin and padding properties
4. Border and box properties
5. Background properties
6. Text properties */
/* HTML tag styling */
body {
width: 100%;
height: 100%;
background-color: #FF8000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
a {color: #000;}
a:visited {color: #FF8000;}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
header {
width: 99%;
height: 310px;
padding-top: 20px;
background-color: #000;
text-align: center;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #000;
line-height: 2;
color: #fff;
font-style: italic;
text-align: center;
}
/* Navigation Styling */
nav {
text-transform: uppercase;
}
.navbar-inner {
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#000));
background-image: -webkit-linear-gradient(top, #000, #000);
background-image: -o-linear-gradient(top, #000, #000);
background-image: linear-gradient(to bottom, #000, #000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.navbar .nav > li > a {
float: none;
padding: 10px 15px 10px;
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
text-decoration: none;
font-size: 18px;
text-shadow: 0 -1px 0 #000;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #FF8000;
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #000;
text-decoration: none;
background-color: #FF8000;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
nav .nav-child {
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #FE642E;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 3px 20px;
clear: both;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #fff;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #FE642E;
border-left: 7px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
content: '';
}
nav .nav-child:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #FE642E;
border-left: 6px solid transparent;
content: '';
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #000;
background-color: transparent;
}
/* User Bar Styling */
#userheader {
width: 100%;
min-height: 25px;
max-height: 45px;
padding: 3px 8px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #BDBDBD;
}
.userdata .control-group{
position: relative;
top: -12px;
left: 0;
float:left;
}
#form-login-remember {
position: absolute;
top: 14px;
left: 340px;
}
form ul.unstyled {
position: absolute;
top: 55px;
left: 10px;
display: none;
list-style: none;
}
.logout {
position: relative;
top: -10px;
left: 55px;
float: left;
}
.search {
position: relative;
top: 6px;
}
/* Component Styling */
.breadcrumb {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #BDBDBD;
color: #000;
}
#componentcontainer {
width: 99%;
height: auto;
margin: 0 auto;
padding: 15px;
border: 2px #000 solid;
background-color: #fff;
}
/* Button Styling */
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #6E6E6E);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#6E6E6E));
background-image: -webkit-linear-gradient(top, #000, #6E6E6E);
background-image: -o-linear-gradient(top, #000, #6E6E6E);
background-image: linear-gradient(to bottom, #000, #6E6E6E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#6E6E6E', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #000;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #000;
*background-color: #000;
}
#contentheader {
position: relative;
top: 20px;
width: 55%;
height: 55px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
box-shadow: -1px -3px 2px #CDC7C7;
background-color: #000;
font-size: 36px;
color: #fff;
font-weight: bold;
text-align: center;
}
#content {
position:relative;
top: 35px;
background-color: transparent;
font-size: 36px;
text-align: center;
}
.bodycontent {
position: relative;
top: 175px;
width: 97%;
margin: 0 auto;
padding: 10px 0 20px 0;
border-radius: 10px;
box-shadow: -2px -2px 1px #ADA0A0;
background-color: #FD1115;
font-size: 26px;
line-height: 2;
color: #fff;
text-align: center;
}
/*News Ticker Styles*/
#news {
width: 95%;
margin: 0 auto;
box-shadow: -1px -1px 1px #fff;
background-color: #fff;
color: #000;
}
.date {
margin-top: 10px;
padding-top: 6px;
font-size: 18px;
font-weight: bold;
color: #000;
text-align: center;
}
.headline {
font-size: 24px;
font-weight: bold;
background-color: transparent;
color #000;
text-align: center;
}
.headlinebody {
margin-top: 10px;
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
index.php
<?php
// Wowcrofty's Picture Perfect Photo Custom Joomla Template for v3.3
// Check that the template is being installed in Joomla.
defined('_JEXEC') or die;
// Add Joomla JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap stylesheets
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/wowcroftypictureperfect/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="userheader" class="row-fluid">
<div class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="userinfo" style="html5" /></div>
<div class="span3"><jdoc:include type="modules" name="search" style="html5" /></div>
</div>
</div>
<header class="row-fluid">
<div class="span12">
<img src="templates/wowcroftypictureperfect/images/headerbanner.png" alt="Wowcrofty's Picture Perfect Photo, click to go home." />
</div>
</header>
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</div>
</div>
</nav>
</div>
<div id="componentcontainer" class="row-fluid">
<?php if ($this->countModules('breadcrumbs')) : ?>
<div class="row-fluid">
<div class="span12"><jdoc:include type="modules" name="breadcrumbs" style="html5" /></div>
</div>
<?php endif; ?>
<?php if ($this->countModules('componentheadermodule')) : ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="componentheadermodule" style="html5" /></div>
<?php endif; ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
</div>
<footer id="footer" class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="bottomnav" style="html5" /></div>
<div class="span3">Copyright © <?php echo date("Y") ?> Matthew Croft. All rights reserved.</div>
</footer>
</body>
</html>
You might try setting the footer div to relative and #footer.span3 to absolute. I'd might try using float somehow too. I usually debug this type of stuff using the Chrome Inspector.
I have created a bell notification icon clicking on which a modal window opens. I want to fade the modal window in and out through CSS. I've done that coding but the modal window is not fading in but its fading out properly.
Here is my code..
function showModal()
{
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}
#bellNotification
{
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover
{
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip
{
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
font-family: 'Palanquin';
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp
{
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay
{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
width: 50%;
min-height: 200px;
background-color: white;
font-family: 'Titillium';
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input
{
color: #4d4d4d;
font-family: 'Palanquin';
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
</div>
</div>
Where is the problem? I can't find.
Also you'll see the modal window is not functioning properly. Clicking anywhere is disappearing the modal window. But that I'll make later. First I want to know why its not fading in??
Try to use CSS animations instead of property transitions. See this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
I've found a solution of this without changing any css..
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
I don't know why this one worked and not the earlier one. But probably I think the browser takes some time (in ms) to render the content when display: block is set. And before complete rendering of content, the fadeIn animation is already started. This might have interfered with the animation and disabling it.
I don't know I'm right or wrong?
Delaying the line which sets the opacity to '1' by a few ms is now working.
Now Run the updated code below and see it works -
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
function hideModal() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.display = "none"
}, 300);
}
#bellNotification {
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover {
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip {
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip {
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover {
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp {
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window {
width: 50%;
min-height: 200px;
background-color: white;
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input {
color: #4d4d4d;
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip">
<div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.
<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" />
<input type="button" value="Proceed" />
</div>
</div>
I'm trying to use the CSS3 pseudo :after on li elements. The issue is that the content of :after is immediately following the li content - as if :after uses text-align:left; But since my li elements use display:block; shouldn't using text-align:right; on :after move the :after content all the way to the right? It doesn't anyway.
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
}
.container ul li:after {
content: ">";
text-align: right;
}
This is a screen shot of the issue:
I want the > to be all the way at the right, and since the content of the li changes, I can't set a width on the :after content.
How would I get the :after content to align to the right, if not with text-align?
Try float :
.container ul li:after {
content: ">";
text-align: right;
float:right;
}
Demo http://jsfiddle.net/surN2/
Hey now you can used position properties as like this:
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
position:relative;
}
.container ul li:after {
content: ">";
position:absolute;
left:20px;
top:5px;
}
and change to css properties according your design.
Live demo: http://tinkerbin.com/yXzOyDNg
If you want to right align than change left into right
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
}
.container ul li:after {
content: ">";
position:absolute;
right:20px;
top:5px;
}
Live demo: http://tinkerbin.com/rSWKxLwX
Use float:right and special line-height for vertical alignment.
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
width: 100%;
}
.container ul li:after {
content: ">";
float: right;
line-height: 12px;
}
Use display:flex and justify-content:space-between with align-items:center;
.container ul li {
display:flex;
justify-content:space-between;
align-items:center;
}
.container ul li:after {
content: ">";
}