CSS Div overlaps text - javascript

I'm releasing a new feature on my website and I want to mark the new a-tag in the navbar with a "NEW" sign top right of the a-tag (little overlapping). But I don't know how to make this overlapping happen and that my span with "NEW" (the text) is shown in full-width. Difficult to describe for me, current status is in the picture. I tried z-index, didn't work.
Here is my code.
navbar html and css:
<li class="nav-item p-1">
<a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span class="new-feature">NEW</span></a>
</li>
.new-feature{
width: 50px;
height: 20px;
background: linear-gradient(135deg, #9932cc, #fa490a);
color: #fff;
font-size: 15px;
border-radius: 15px;
text-align: center;
}
It currently looks like this:

try give relative position to <a> or <li> and absolute position to <span>, than z-index will be working
<li class="nav-item p-1" style="position:relative;">
<a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases
<span class="new-feature" style="position:absolute;top:0;left:0;">NEW</span>
</a>
</li>

Give position:absolute to .new-feature and position:relative to its parent class. You can play with values to fit to your need.
*{
margin:0px;
padding: 0px;
}
.nav-item{
list-style: none;
padding: 10px;
}
.new-feature-wrapper{
position: relative;
}
.new-feature{
position: absolute;
width: 30px;
height: 10px;
background: linear-gradient(135deg, #9932cc, #fa490a);
color: #fff;
font-size: 12px;
border-radius: 15px;
text-align: center;
padding: 5px;
top: 2px;
}
<li class="nav-item p-1 new-feature-wrapper">
<a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span class="new-feature">NEW</span></a>
</li>

Related

one <A> element in footer not responding to hover or clicks

One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.

Collapsable sidebar / navigation menu

I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one. It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
please have a look at the following solution based on your code using CSS3 translate:
HTML:
<div class="sidebar">
<p>
This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
</p>
</div>
<div class="content">
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
<div class="main">
aaaaaaaaaa
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: sans-serif;
overflow: hidden;
}
a {
text-decoration: none;
}
.title {
float: left;
display: block;
padding: 14px 16px;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333;
color: white;
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar{
position:fixed;
top:0px;
left:0px;
width:100%;
color:red;
}
.slide{
-webkit-transform: translate3d(25%,0,0);
}
.content{
width:100%;
height: 30em;
position:absolute;
left:0px;
top:0px;
background: white;
-webkit-transition:all .2s linear;
}
.content .slide{
-webkit-transform: translate3d(25%,0,0);
}
i{
cursor: pointer;
}
JS:
$('i').click(function(){
$('.content').toggleClass('slide');
});
JS Fiddle Demo

Fill remaining horizontal width without a fixed width

I'm trying to float two elements and make the second element fill the remaining width space using only CSS, but the more answers & research I do looks like I might need to use JS.
I'm trying to float text with a variable width next to span which I want to fill the remaining space.
ul#filter-list {
list-style: none;
padding-left: 0px;
}
ul#filter-list span {
font-size: 14px;
float: l margin: 0px 5px;
}
span.filter-pill {
border-radius: 4px;
width: 100%;
margin-left: 12px;
height: 10px;
display: inline-block;
}
<ul id="filter-list">
<li>
<a href="{{ route('question.index') }}">
<span>All</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
<li>
<a href="{{ route('question.index') }}">
<span>a big filter name here</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
</ul>
JSFiddle - https://jsfiddle.net/1466qdab/
Note with the width set to 100% it falls to the line under.
If you're willing to use flexbox, it can be pretty easy:
ul#filter-list a {
display: flex;
}
In addition, use align-items: center; for centering vertically.
ul#filter-list {
list-style: none;
padding-left: 0px;
}
ul#filter-list a {
display: flex; /*added*/
align-items: center; /*added*/
}
ul#filter-list span {
font-size: 14px;
margin: 0px 5px;
}
span.filter-pill {
flex: 1; /*added*/
border-radius: 4px;
margin-left: 12px;
height: 10px;
}
<ul id="filter-list">
<li>
<a href="{{ route('question.index') }}">
<span>All</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
<li>
<a href="{{ route('question.index') }}">
<span>a big filter name here</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
</ul>

How to make html table made by list responsive?

I have made a table with list using ul li. Here is my html code.
<div style="" class="first_calendar clendar-wrapper calendar-1">
<ul class="calendar ">
<li class="calen-title">Sunday <br>Mar 22</li>
<li class="" style="min-height:40px;"><a data-day="7" rel="21" href="#"> 6:00 am</a> </li>
<li class="" style="min-height:40px;"><a data-day="7" rel="22" href="#"> 6:15 am</a> </li>
</ul>
<ul class="calendar ">
<li class="calen-title">Monday <br>Mar 23</li>
<li class="" style="min-height:40px;"><a data-day="1" rel="21" href="#"> 6:00 am</a> </li>
<li class="" style="min-height:40px;"><a data-day="1" rel="22" href="#"> 6:15 am</a> </li>
</ul>
<ul class="calendar ">
<li class="calen-title">Tuesday <br>Mar 24</li>
<li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
<li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
</ul>
</div>
And here is my css code.
.calendar{
margin: 0;
padding: 0;
/*width: 40px;*/
list-style: none;
float:left;
}
.clendar-wrapper{
/*float: left;*/
/*background-image: url("../img/table_bg.png");*/
background-position: 0 -58px;
/*float: left;*/
}
.clendar-wrapper{
display: none;
display: none;
width: 100%;
max-height:350px; overflow-x:hidden ; padding-bottom:10px;
}
.table-responsive {
width: 918px;
/*border:1px solid red;*/
background-color: #FFFFFF;
overflow: visible;
}
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.clendar-wrapper{
width: 100%;
height:auto;
} /* your css rules for ipad portrait */
}
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.clendar-wrapper{
/*width: 100%;*/
height:auto;
} /* your css rules for ipad landscape */
}
.calendar-1{
display: block;
}
.prev-table{
display: none;
}
.login_register a {
color:white;
}
.calen-title {
background-color: #D9E8F4 !important;
}
.calen-title a{
font-size: 16px;
color: #222;
font-weight: bold;
}
.calendar li{
padding: 8px;
border: 1px solid #ddd;
}
.calendar li a {
color: #222;
font-size: 16px;
}
.calendar li:nth-child(2n+2) {
background-color: #f9f9f9;
}
.pagi_list .pre_btn, .pagi_list .nex_btn{
margin: 0px;
}
.last_link, .first_link {
font-size: 35px;
font-weight: bold;
line-height: 0;
position: relative;
top: 5px;
color:#d65c4f;
}
It is coded on bootstrap. When i open it on small resolution device columns drop down. Here i have created a demo link click here to open. Please sugggest me how can i make this calendar responsive.
Thanks in advance.
When using media queries, it isn't usually wise to set the height of the device, just the width. The orientation of the device sets the width, so the media query will still work if you change between portrait and landscape.
You could have the calendar wrapper 100% but a maximum of 700px, which makes each day at 100px fit inside it perfectly, then if the screen is less than 700px you could move them into a vertical arrangement. I have thrown together an example here just using one simple media query > https://jsfiddle.net/pfg1dxfy/ You will see that by grabbing the bar between the javascript window and the results window and resizing it, the tables will change based on the width.
I have also added a simple clear fix, you need this when floating elements. In the CSS it is .clear {clear:both;} and you then include it after all of the floated elements with
.calendar{
margin: 0;
padding: 0;
list-style: none;
float:left;
width: 100px;
}
.clendar-wrapper{
width: 100%;
max-width: 700px;
margin: auto;
}
#media (max-width: 699px) {
.calendar{
width: 100%;
float: none;
margin: 30px 0;
}
}

Ideas for a complicated menu

I have a slightly complicated menu to code from PSD document and integrate into Wordpress.
This is how it looks:
The result of my work is this:
http://slavisaperisic.com/FlexE/meni_setap.html
Now, when I write function wp_list_pages(); I get the default markup:
<ul>
<li class="page_item"></li>
<li class="page_item"></li>
<li class="page_item"></li>
</ul>
But the markup I created (that gives me the appropriately styled dynamic menu) looks like this:
<div id="menu">
<div id="menu-left"></div>
<div id="main-menu">
<ul>
<li class="active first">
<div class="left_li"></div>
Exploring
<div class="right_li"></div>
</li>
<li class="second">
<div class="left_li"></div>
Using
<div class="right_li"></div>
</li>
<li class="third">
<div class="left_li"></div>
Downloading
<div class="right_li"></div>
</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
I styled it so that it follows the length of the word in the menu item. Obviously, I can't use the wp_list_pages() function because the structure it gives me is different than the one I need.
Do you have some ideas? Maybe point me to somewhere where I can learn to code it differently or explain it to me?
Try this on for size. I've tested it in Chrome and Firefox.
Mark-up:
<ul>
<li class="page_item active"><a>Exploring</a></li>
<li class="page_item"><a>Using</a></li>
<li class="page_item"><a>Downloading</a></li>
</ul>
CSS:
ul, li { margin: 0; padding: 0; list-style: none; }
ul {
float: left;
background-color: #EEE;
border: 2px solid #DDD;
height: 46px;
position: relative;
border-radius: 12px 12px 0 0;
}
ul:after {
display: block;
content: "";
position: absolute;
right: -45px;
top: 3px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #DDD transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #DDD rgba(255,255,255,0);
border-width: 0 45px 45px 0;
}
li {
float: left;
height: 26px;
font-size: 1.2em;
padding: 10px 10px 10px 40px;
background-color: #EEE;
border-radius: 10px 10px 0 0;
position: relative;
}
li:after {
display: block;
z-index: 1;
position: absolute;
right: -40px;
top: 4px;
width: 0;
height: 0;
content: "";
border-style: solid;
border-color: transparent transparent #EEE transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #EEE rgba(255,255,255,0);
border-width: 0 42px 42px 0;
}
li a {cursor: pointer;}
li a, li.active a:hover {color: #999;}
li a:hover, li.active a {color: white;}
li.active {background-color: lightblue;}
li.active:after {border-bottom-color: lightblue;}
You can see it in action here:
http://static.robinwinslow.co.uk/menustyling.html
I can't test in IE on this Ubuntu machine, but I think:
IE9 should be fine
IE8 should show triangles but not border radii
IE7 won't show triangles or border radii
Is that a good enough solution?
You can use wp_nav_menu to create custom menus. Details can be http://codex.wordpress.org/Function_Reference/wp_nav_menu
Using this you can create markup similar to:
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">
<a href="http://sewsoon.co.uk/">
<strong>Home</strong>
<span>Start Over</span>
</a>
</li>
However, you may want to look into using pseudo elements before: and after: to keep the markup more semantic. Depending upon if you're including javascript libraries or not you could use http://selectivizr.com/ to patch ie support.

Categories

Resources