I have a pricing plan page that I am trying to add a toggle switch to. I can't seem to figure out the proper way to vertically align the text of it: here is my fiddle
I've tried to set the margin and the padding but the Monthly and Annual are always at the top.
<div class="background">
<div class="container">
<div class="toggle-btn" style="background-color:transparent;text-align:center;position:relative;z-index:99;vertical-align:top;">
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Monthly</span>
<label class="switch" style="margin-bottom:15px;">
<input type="checkbox" id="checbox" onclick="check()" />
<span class="slider round"></span>
</label>
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Annual </span>
</div>
<div class="panel pricing-table">
<div class="pricing-plan">
<img src="https://s22.postimg.cc/8mv5gn7w1/paper-plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="https://s28.postimg.cc/ju5bnc3x9/plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</div>
</div>
Remove the margin-bottom from that switch element and add display:flex;justify-content:center;align-items:center; to .toggle-btn
Here's the edited fiddle: https://jsfiddle.net/bjd3wps1/
you just had to add position: relative to the spans containing the text and than update the bottom value to bottom: -5px
here's the updated fiddle: https://jsfiddle.net/a2nwet54/
Related
I'm having some issues to solve this problem with css selector. I need to select:
<li>
Asked to you
</li>
using nth-child selectors, but I don't have the ability to add classes. Do you have any idea how I can make this work? After I choose this element with nth-child I need to add:before pseudo selector to it.
I have this code
<div class="userAccountNavigation">
<div class="row">
<div class="large-3 small-3 column userProfileImage">
<img src="#" alt="" class="profile-image">
</div>
<div class="large-9 small-9 column">
<ul class="side-nav">
<li>
Profile
</li>
<li id="editProfile">
Edit Profile
</li>
</ul>
</div>
</div>
<div class="row">
<div class="large-12 small-6 columns">
<ul class="side-nav">
<li>
Activity Feed
</li>
<li>
Asked to you
</li>
<li class="active">
Following
</li>
</ul>
</div>
</div>
<div class="row">
<div class="large-12 small-6 columns">
<ul class="side-nav">
<li class="">
Questions
<span class="total">1</span>
</li>
<li class="">
Answers
<span class="total">0</span>
</li>
</ul>
</div>
</div>
</div>
Here is the solution to my problem. Thanks for checking anyway.
.userAccountNavigation div:nth-of-type(2) ul li:nth-child(2):before {
content: 'x';
}
In your example this should work.
.userAccountNavigation .row:nth-child(2) li:nth-child(2)::before{
content: "->";
}
https://codepen.io/Pamz/pen/wEqLgw
The following is part of my website. What it is supposed to do is create two side-by-side regions when there is sufficient width. Otherwise, the regions should be stacked on top of each other.
<body>
<div id="tab-container" class="tabs is-centered is-small is-fullwidth is-marginless is-paddingless">
<ul>
<li id="1" class="is-active">
<a>1</a>
</li>
<li id="2">
<a>2</a>
</li>
<li id="3">
<a>3</a>
</li>
<li id="4">
<a>4</a>
</li>
<li id="5">
<a>5</a>
</li>
</ul>
</div>
<div class="columns is-paddingless is-marginless" style="background: yellow;">
<div class="column is-paddingless is-half" style="background: indigo">
</div>
<div class="column is-paddingless is-half" style="background: black">
</div>
</div>
</body>
When the width is sufficient, the website looks ok:
However, when I shrink the website - and it transitions to stacked mode - the black and purple regions disappear.
How can I fix this?
I have two <div>s surrounding an image in same row, but when I add the image the right <div> drops below.
I've tried float, display:inline-block and even styling the HTMLtags, but it didn't help.
Please help me out.
Here's my code:
<title>Hair by Michelle</title>
<body>
<div class="all">
<div class="navbar">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="hours">
<h1>Hours</h1>
<p>Tuesday: 12pm-7pm</p>
</br>
<p>Wednesday: 12pm-7pm</p>
</br>
<p>Thursday: 10am-7pm</p>
</br>
<p>Every other Saturday: 10am-7pm</p>
</div>
<div class="services">
<h1>Services</h1>
<h4>Women's Haircut $32</h4>
</br>
<h4>Men's Haircut $22</h4>
</br>
<h4>Full head color $50</h4>
</br>
<h4>Full highlights $70</h4>
</br>
<h4>Color toning $15</h4>
</br>
<h4>Facial waxing $12</h4>
</div>
</div>
Ignore the result area, just paste it in an editor.
if you want elements to line up in the same line should add:
float:left;
position:relative;
for the HTML I would recommend each image in a div:
.imgrow {
width:100px;
height:100px;
position:relative;
float:left;
}
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
I see just one image in your code...
If you need the text to be displayed next to the image, try this-
<div class="navbar">
<div style="float:left;">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
here is the fiddle I am working on Demo
How do I make this column completely responsive so that when the screen size becomes less I want all the elements to stay inline rather than stacking below one another.
How to solve this ?
Here is the sample markup
<div id="apologies-list">
<ul id="apologies-list-content">
<li><a tabindex="-1" href="#">
<div class="user-avatar list-padding span12 clearfix" >
<div class="span1">
<input class="case" name="case" type="checkbox" value="">
</div>
<div class="span2">
<img id="list-avatar" src="http://placehold.it/60x60" alt="" />
</div>
<div class="span6">
<span>Apologies initials</span>
<small>January 31, 2009 9:18 am</small>
</div>
<div class="span3 ">
<span class="badge badge-info custom-badge">2</span>
<i class="icon-trash"></i>
</div>
</div>
</a>
</li>
</ul>
</div>
For CSS please check my fiddle.
use css media queries
#media screen and (max-width:400px)
{
#apologies-list-content li div {display:inline-block}
}
http://jsfiddle.net/ineomod/8NeyY/embedded/result/
HTML:
<section id="diamonds">
<ul>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/geak_zps76747320.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
"Geak" Interactive Magazine
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/pink_zps8d76dfad.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
"Pink" Magazine
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/f3_zps57ac8198.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
F3 "Celebrate In Style" Ad Campaign
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/sgx_zps3a7e98c2.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
SGX Infographic
</span>
</div>
</li>
<li>
<div class="container">
<div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/namecard_zps6a64c3f5.jpg)"></div>
<span class="diamondText">
<div class="zoomIcon"></div>
m:idea Namecards
</span>
</div>
</li>
</ul>
CSS:
In the fiddle
I have this diamond gallery laid out as a list. There's a caption for each item. Hoever, I can't seem to use z-index to ensure that the caption stays above all the other li elements? It seems to be covered only by li elements that come after it.
Try giving
#diamonds li:hover {
position: relative;
z-index: 1;
}
This will bring the only that <li> at top which is :hover
Demo
Demo
It seems that you need to update z-index on every li element from higher to lower as follows
<li style="z-index: 4;">....</li>
<li style="z-index: 3;">....</li>
<li style="z-index: 2;">....</li>
<li style="z-index: 1;">....</li>
<li style="z-index: 0;">....</li>
here style inline tag is used only for demo purpose which is calculated by using jQuery