I'm having trouble with this piece of code. It keeps showing up as the letter "a" instead of the mobile menu symbol.
.mobile_menu_bar:before {
position: relative;
top: 0;
left: 0;
font-size: 32px;
content: "\61";
cursor: pointer;
}
<div id="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="select_page">Select Page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
</div>
</div>
Am I suppose to define the content: "\61" ?
22 was lost in action. It should be \2261. See the snippet below:
.mobile_menu_bar:before {
position: relative;
top: 0;
left: 0;
font-size: 32px;
content: "\2261";
cursor: pointer;
}
<div id="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="select_page">Select Page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
</div>
</div>
Hello may u forget some code, try like this
.mobile_menu_bar:before{
position: relative;
top: 0;
left: 0;
font-size: 32px;
content: "\2261";
cursor: pointer;
}
Html file:
<div id="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="select_page">Select Page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
</div>
</div>
Related
Havent touched html/css in years so I need some help. I have a nested list, and want to style the outer list (#todo), and just have 'normal' bullets on the inside list (#task). Problem is when I style the outer list it automatically styles the inside list as well. As a rigged fix, i thought of removing the li tags from and just making them <p> and somehow add a bullet to the front of them. How do you add bullets to the front of <p> tag?
#parent .todo ul li:before{
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
#parent .todo ul li:after{
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task{
padding-left: 25px;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
<li>
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<div class="task">
<p>item1</p>
<p>item2</p>
<p>item3</p>
</div>
</div>
</li>
</ul>
</div>
Add a class on the li elements of the outer list and apply the styles you want to apply on the outer list, on this class. This way, inner list's li elements won't be styled.
.outer-li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
.outer-li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
.outer-li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul class="outer">
<li class="outer-li">
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
<li class="outer-li">
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
</ul>
</div>
Alternatively, you could use ::before pseudo selector.
li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task {
padding-left: 25px;
}
.task p {
position: relative;
}
.task p::before {
content: '';
position: absolute;
background: #222;
width: 5px;
height: 5px;
left: -13px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
</ul>
</div>
I'm trying to make a favourite checkbox on the right side of the div, this is the html structure:
.star {
visibility: hidden;
font-size: 30px;
cursor: pointer;
color: orange;
}
.star:before {
content: "\2605";
position: absolute;
visibility: visible;
}
.star:checked:before {
content: "\2606";
position: absolute;
}
.group {
background-color: #20262e;
}
<div class="group text-truncate">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
<input type="checkbox" style="float:right;" class="group-checkbox star">
</div>
if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this?
There are a few things I would change:
use flex instead of float
use a label for your star instead of the input itself
remove the absolute positioning - it's not needed and can just complicate things
don't mix inline styles with css - it's best to use all css (I haven't fixed this though)
/* seperate the checkbox and star styles */
.group-checkbox {
display:none;
}
.group-checkbox:checked + .star:before { /* using the adjacent sibling selector to selec the star after a checked input */
content: "\2606";
}
.star {
font-size: 30px;
cursor: pointer;
color: orange;
}
.star:before {
content: "\2605";
}
.group {
background-color: #20262e;
line-height:30px; /* may want to match the size of the star font */
display:flex; /* make the container flex */
width:100%;
}
.group .font-weight-bold {
flex-grow:1; /* make this label grow to fill the space the star doesn't take */
}
<div class="group text-truncate">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
<input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
<label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>
My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)
.group {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}
.star {
position: relative;
visibility: hidden;
font-size: 20px;
cursor: pointer;
color: orange;
}
.star:before {
content: "\2605";
position: absolute;
top: 50%;
transform: translateY(-50%);
visibility: visible;
}
.star:checked:before {
content: "\2606";
position: absolute;
}
.group{
background-color: #20262e;
}
<div class="group text-truncate">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
<input type="checkbox" style="float:right;" class="group-checkbox star">
</div>
Please add position: relative; to .group and adjust the star position accordingly. check below:
.star {
visibility: hidden;
font-size: 20px;
cursor: pointer;
color: orange;
}
.star:before {
top: -3px;
right: 2px;
content: "\2605";
position: absolute;
visibility: visible;
}
.star:checked:before {
content: "\2606";
position: absolute;
}
.group {
position: relative;
background-color: #20262e;
}
<div class="group text-truncate">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
<input type="checkbox" style="float:right;" class="group-checkbox star">
</div>
in your .star:before and .star:after, you need to set the position to relative
Now it let's them to be in the same position as the input that has star class itself!
Now you can align the input to be in the right place.
In that case, you can add these to your .star styles:
.star {
position: relative;
bottom: 12px;
right: 15px;
}
And it will be what you're looking for
This is the snippet:
.star {
visibility: hidden;
font-size: 30px;
cursor: pointer;
color: orange;
position: relative;
bottom: 12px;
right: 12px;
}
.star:before {
content: "\2605";
position: relative;
visibility: visible;
}
.star:checked:before {
content: "\2606";
position: relative;
}
.group {
background-color: #20262e;
height: 25px;
}
<div class="group text-truncate">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
<input type="checkbox" style="float:right;" class="group-checkbox star">
</div>
I think you can just add a top attribute and clean it up with positioning and padding like below.
.star {
visibility: hidden;
font-size: 30px;
cursor: pointer;
color: orange;
}
.star:before {
content: "\2605";
position: absolute;
visibility: visible;
top: 0;
right: 10px;
}
.star:checked:before {
content: "\2606";
position: absolute;
}
.group{
background-color: #20262e;
padding: 5px;
}
<div class="group text-truncate">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
<input type="checkbox" style="float:right;" class="group-checkbox star">
</div>
Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet
.star {
visibility: hidden;
font-size: 30px;
cursor: pointer;
color: orange;
position: relative;
margin: 0;
padding: 0;
}
.star:before {
content: "\2605";
position: absolute;
visibility: visible;
top: 0;
right: 0;
line-height: 1;
font-size: 20px;
}
.star:checked:before {
content: "\2606";
position: absolute;
}
.group {
background-color: #20262e;
}
<div class="group text-truncate">
<input type="checkbox" style="float:right;" class="group-checkbox star">
<label class="font-weight-bold">
<span class="align-middle text-truncate" style="color:white">This is a long text</span>
<span class="align-middle" style="color: orange;">(3 items)</span>
</label>
</div>
I am generating a coupon type display by html and css without creating and storing the real image on server to save space.
Plan is to display it and get it printed out when user wants to print. I have managed to create the layout by HTML and css and it displays as follows,
But when the Print Now button is clicked there are so much blank space created towards the left side, please see the image below,
I can not figure out what might be the issue here, I am attaching the HTML and CSS below.
HTML
<div class="print-coupon-text">
<div class="pct-heading">
<img src="***image-source***" alt="Created by JAiCOUPONS" />
</div>
<div class="pct-col pct-col-1">
<div class="pct-store-logo">
<img src="***image-source***" alt="Coupon Store" />
</div>
<div class="pct-store-desc">
<span>http://abcdexample.com</span>
<span>#2333, 1st Comfort Road</span>
<span>Redint TF 78999</span>
<span>210 Price Fork Road</span>
<span>Redint TF 78999</span>
<span>(333) 323-4444</span>
</div>
</div>
<div class="pct-col pct-col-2">
<span class="pct-offer-1">$50</span>
<span class="pct-offer-2">Off</span>
<span class="pct-offer-3"> Free Icecream </span>
</div>
<div class="pct-col pct-col-3">
<span class="pct-title">Buy 1 Dinner</span>
<span class="pct-title pct-title-end">And get the 2nd one Free</span>
<span class="pct-desc">Dine In, Carryout Only</span>
<span class="pct-desc">Excludes buffet with this coupon</span>
<span class="pct-desc">Not Valid with other Offers</span>
<span class="pct-desc">Expires : 15th Jan</span>
</div>
<div class="pct-footer">
<span class="pct-footer-1">Contact JAiCOUPONS # (972) 301-7898</span>
<span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
</div>
</div>
CSS
.print-coupon-text {
position: relative;
width: 100%;
float: left;
margin-bottom: 10px;
padding: 10px;
border: 1px dashed #000;
border-radius: 10px;
font-size: 10px;
text-align: left;
}
.pct-col {
width: 30%;
float: left;
margin: 0 8px;
}
.pct-store-desc span, .pct-footer span, .pct-desc {
display: block;
}
.pct-col.pct-col-2 {
padding-left: 5px;
padding-top: 85px;
}
.pct-col.pct-col-3 {
padding-top: 40px;
}
.pct-offer-1 {
font-size: 60px;
font-weight: bold;
}
.pct-offer-2 {
font-weight: bold;
}
.pct-offer-3 {
display: block;
}
.pct-title {
display: block;
font-size: 13px;
}
.pct-title-end {
border-bottom: 1px dotted;
padding-bottom: 5px;
}
.pct-store-logo img {
width: 150px;
height: 85px;
}
.pct-heading {
position: absolute;
top: 0px;
left: 28%;
}
.pct-heading img {
width: 90%;
}
.pct-footer-1 {
position: absolute;
bottom: 16px;
right: 6px;
}
.pct-footer-2 {
position: absolute;
bottom: 0px;
right: 6px;
}
#media print {
body * {
visibility: hidden;
}
.print-coupon-text, .print-coupon-text * {
visibility: visible;
}
.print-coupon-text {
position: absolute;
left: 0;
top: 0;
}
}
Any help is appreciated.
UPDATE
Initial display is coming on the pop up.
I think you should give fixed width to your div.print-coupon-text
.print-coupon-text{
width: 700px; // or greater/less
}
Hi try displaying the coupon in its own page, you won't have this issue in that case. check screenshots below.
BTW, i was not able to replicate your issue, working fine for me with your code.
EDIT :: Tried using Bootstrap Popup as well, working fine.
.print-coupon-text {
position: relative;
width: 100%;
float: left;
margin-bottom: 10px;
padding: 10px;
border: 1px dashed #000;
border-radius: 10px;
font-size: 10px;
text-align: left;
}
.pct-col {
width: 30%;
float: left;
margin: 0 8px;
}
.pct-store-desc span,
.pct-footer span,
.pct-desc {
display: block;
}
.pct-col.pct-col-2 {
padding-left: 5px;
padding-top: 85px;
}
.pct-col.pct-col-3 {
padding-top: 40px;
}
.pct-offer-1 {
font-size: 60px;
font-weight: bold;
}
.pct-offer-2 {
font-weight: bold;
}
.pct-offer-3 {
display: block;
}
.pct-title {
display: block;
font-size: 13px;
}
.pct-title-end {
border-bottom: 1px dotted;
padding-bottom: 5px;
}
.pct-store-logo img {
width: 150px;
height: 85px;
}
.pct-heading {
position: absolute;
top: 0px;
left: 28%;
}
.pct-heading img {
width: 90%;
}
.pct-footer-1 {
position: absolute;
bottom: 16px;
right: 6px;
}
.pct-footer-2 {
position: absolute;
bottom: 0px;
right: 6px;
}
#media print {
body * {
visibility: hidden;
}
.print-coupon-text,
.print-coupon-text * {
visibility: visible;
}
.print-coupon-text {
position: absolute;
left: 0;
top: 0;
}
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Popup</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="print-coupon-text">
<div class="pct-heading">
<img src="***image-source***" alt="Created by JAiCOUPONS" />
</div>
<div class="pct-col pct-col-1">
<div class="pct-store-logo">
<img src="***image-source***" alt="Coupon Store" />
</div>
<div class="pct-store-desc">
<span>http://abcdexample.com</span>
<span>#2333, 1st Comfort Road</span>
<span>Redint TF 78999</span>
<span>210 Price Fork Road</span>
<span>Redint TF 78999</span>
<span>(333) 323-4444</span>
</div>
</div>
<div class="pct-col pct-col-2">
<span class="pct-offer-1">$50</span>
<span class="pct-offer-2">Off</span>
<span class="pct-offer-3"> Free Icecream </span>
</div>
<div class="pct-col pct-col-3">
<span class="pct-title">Buy 1 Dinner</span>
<span class="pct-title pct-title-end">And get the 2nd one Free</span>
<span class="pct-desc">Dine In, Carryout Only</span>
<span class="pct-desc">Excludes buffet with this coupon</span>
<span class="pct-desc">Not Valid with other Offers</span>
<span class="pct-desc">Expires : 15th Jan</span>
</div>
<div class="pct-footer">
<span class="pct-footer-1">Contact JAiCOUPONS # (972) 301-7898</span>
<span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to fixed the "X" button inside the popup and sticky top.
But position:fixed & position:absolute both not working.
It will work fine if I using IOS google chrome and safari.
.popup-inner {
position: absolute;
bottom: 0px;
overflow: auto;
padding-bottom: 30px;
-webkit-text-size-adjust: none;
}
.popup-close {
width: 30px;
height: 30px;
position: fixed;
top: 25px;
right: 20px;
}
<a class="btn" data-popup-open="popup-1" href="#"><i class="fa fa-globe" aria-hidden="true"></i>popup</a>
<div class="popup" data-popup="popup-1">
<div class="popup-overlay"></div>
<div class="popup-inner">
<div class="fixed-content">
<div class="col-main">
<div>123</div>
<div class="content">
<ul>
<li>
<a>
<span>aaaaa</span>
<div class="lan">bbbb</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<a class="popup-close" data-popup-close="popup-1" href="#">
<div class="popup-icon"></div>
</a>
</div>
</div>
JSFiddle Here
Thanks for help.
I would suggest some CSS fixes
CSS
.popup-icon{
height:30px;
width:30px;
position: relative;
}
.popup-icon:before,
.popup-icon:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #aaa;
margin: auto;
}
Link for reference
I have two graphical elements: One Badge for a Region (EUW) and a Sold Out Stamp. I want that the stamp is in front of the region badge. I always thought that this is something where I can use z-index but this just doesn't work for me.
Here is an image of my problem:
My CSS:
.region-badge {
position: absolute;
top: 26px;
right: 26px;
background: url(../images/region_badge.png) no-repeat;
height: 47px;
width: 47px;
display: block;
line-height: 47px;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-weight: bold;
z-index: 1;
}
.sold-out {
position:relative;
}
.sold-out::before{
content: url(../images/sold_out_stamp2.png);
transform: scale(.5);
position:absolute;
z-index: 40;
top:-50px;
left:70px;
}
My HTML:
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee">
<img src="images/packages/background01.jpg" alt=""/></a>
</div>
<div class="region-badge">euw</div>
try this.,
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee">
<img src="images/packages/background01.jpg" alt=""/>
</a>
<div class="region-badge">euw</div>
</div>