I have created an unordered list and styled it accordingly using CSS in order to achieve the following Customer Testimonial Selectors:
Everything seems to be fine except one thing - when I view my webpage on mobile phone these selectors are very hard to click on (you have to click them very very precisely in order to select the second testimonial).
I've tried increasing padding on the element, however it would not work for me because increasing the padding automatically increases the size of the actual selector element... Here is my html & css:
HTML
<div class="col-xs-8 col-xs-offset-2 text-center indent-bottom">
<ul>
<li id="client-1-selector" class="client-selector active-client"></li>
<li id="client-2-selector" class="client-selector"></li>
<li id="client-3-selector" class="client-selector"></li>
<li id="client-3-selector" class="client-selector"></li>
</ul>
</div>
CSS
.client-selector {
cursor: pointer;
list-style: none;
display: inline-block;
height: 15px;
width: 15px;
background-color: #D9D9D9;
border-radius: 50%;
}
.client-selector:not(:last-child) {
margin-right: 14px;
}
.active-client {
background-color: #E48210;
}
Any suggestions? Thanks.
Try something like this:
.client-selector { position: relative; }
.client-selector::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
This will put an ::after pseudo-element around your .client-selector elements that is twice the width and height.
Using pseudo elements you can do it:
Here is an article explaining about the details.
As an advice:
This technique works IE8+
Related
I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
The menu of options taht should appear after you click on the hamburger menu is
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
but I'm unclear how to set up the style of the hamburger menu so taht it appears directly under the hamburger menu when you click on it. Right now, its appearing centered at the top of the screen -- https://jsfiddle.net/wtp1k57b/1/ . How do I set up such a style?
PS - I'm looking for a solution that doesn't rely on hard-coding numeric (e.g. top: 27px) pixel values. Certainly its good to get things to work in my little Fiddle, but in my broader application I can't guarantee how big or small that hamburger menu will be.
I would like to show a completely different approach without using display: flex.
HTML
Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.
Hence, as #scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.
CSS
First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.
Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).
As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.
As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.
Final Solution
This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
header {
width: 100%;
background-color: orange;
text-align: center;
padding: 1rem;
position: relative;
}
nav {
display: none;
width: 30rem;
padding: 5rem;
background-color: #ededed;
position: absolute;
right: 5%;
top: 100%;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: center;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 2.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
.menu-btn {
position: absolute;
right: 5%;
top: 50%;
margin-top: -1.1rem;
display: inline-block;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
}
#media only screen and (min-width: 500px) {
.menu-btn, nav {
display: none !important;
}
}
.menu-btn span {
display: block;
width: 2rem;
height: 0.2rem;
margin: 0.4rem 0;
background: #989da1;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Page Title</h2>
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<nav>
Vote
Search
About
Log In
</nav>
</header>
Or see this fiddle.
Use the css properties: top and right to set the position of the element under your icon.
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
Use this CSS for your menu - no margin, and the position defined by the top and right settings:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 50px;
right: 0;
}
https://jsfiddle.net/meuexde6/
I left out the transition for the testing, but you should basically animate the right parameter from -100px to 0 to achieve what you seemed to have in mind.
ADDITION AFTER COMMENT:
To define the position of the menu in relation to the button, you have to apply position: relative to their common parent element, .mobile-nav. The position values of an element with position: absolute always relate to the first ancestor which has position: relative.
I changed the values in my updated fiddle accordingly to these:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 40px;
right: -32px;
}
Updated fiddle: https://jsfiddle.net/meuexde6/1/
If you really want the menu to stick directly to the button (hard to say - it has no borders), just adjust the top and right values as needed.
HTML5 Semantic Elements.
details > summary {
padding: 2px 6px;
width:12px;
border: none;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
<summary>☰</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
So, here goes. I know you are asking for a solution to a specific problem, I solved it alright, but I couldn't help noticing that you are struggling with your code. You must simplify the way you think and your code will become leaner. The purpose of this forum is to help others become better, right? :)
HTML
It is good practice to keep the menu toggle button OUTSIDE of the menu - will solve a lot of issues - check below.
It is not semantically right to use anything else rather than a button for the toggle function, so, why not use a button here? I also removed unnecessary clutter from your code, like some divs and the id - the id could be traded with the class, your call. I also removed .mobile-nav because it is not needed at all.
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
I absolutely positioned the menu-btn on the top right corner, and gave it a width equal to the #pageTitle height (which I set at 50px - a gold standard) to keep it rectangular; it should be a rule of thumb that the toggle buttons are rectangular and always the same height as the top navigation bar - in this case the before-mentioned id. The same I did for the .responsive-menu. I absolutely positioned it as shown below. The changes allowed me to remove a lot of css styling - now obsolete - like for example the absolute positioning of the ul menu inside the .responsive-menu.
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
By years of practice I realized that the most efficient way to toggle a menu instead of adding and removing classes is to add a class on the body tag; this can help heaps if you want to restyle anything else on the page depending on wether your menu is opened or not.
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/
I could have done a lot of other things in order to simplify the code even further - remove unnecessary ids and classes since most elements are considered unique and could be targeted using descendant classes, eg .responsive-menu ul, etc. After a lot of practice, you'll manage to think simpler and produce code with a smaller footprint.
Edit: Concerning the fact that you don't like the absolute pixels for alignment here is a trick.
Giving a fixed height to the parent container, equal to the toggle button's -in this case '#pageTitle' and setting its position to relative allows you to use top:100% to properly place the responsive menu exactly below the button (which is essentially the same height):
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
Here is an updated fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
Edit: Natalia, I gave it some thought and here is what I came up with. I created an absolutely positioned .menu-wrapper, inside of which I placed the button and the responsive menu with float:right and no positioning - aka they are positioned statically. No more pixel values! YAY!
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
Here is a working fiddle: https://jsfiddle.net/scooterlord/4atafhge/2/
I am working on this page: link to page.
Inside h2 I have before and after elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:
Normal (from FF and Chrome)
A little strange (from Edge)
So crazy (from IE)
CSS code:
h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
#supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}
Try making the positon of before and after leftmost and rightmost.
If it doesnt work,try making pixels to %.
As #ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.
Another approach (assuming you have control of the HTML): add an empty right after the input, and target that in CSS using input+ span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to form elements, and to the form, but not to the .
I can't seem to figure how to accomplish the following.
I have this shape:
This is the desired outcome:
However, when I apply the overflow to the child div this happens:
Or this when the overflow is in the parent div
I have tried splitting the CSS into more divs and then trying to overlap them and all these attempts have been failures.
The HTML and CSS are the following
CSS:
#tvshape {
position: relative;
width: 200px;
height: 150px;
margin: 20px 10px;
background: #0809fe;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tvshape:before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
#tvshape img {
height:100%;
width:100%;
}
HTML (Nothing special):
<div id="tvshape">
<img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg">
</div>
And Here is the JSFiddle and the CSS and HTML.
How could I accomplish so ?
Guidance will be highly appreciated.
EDIT: I required the image to be an element of it's own, background:url() it's not what I'm looking for.
EDIT #2: This was one of the solutions given, the figures are not the same ones, the rounded left and right sides dissapear.
Thank you.
I could come up with two options, though one involves leaving out the image-element, and the second uses jQuery... (I honestly don't think it's possible to do with the image-element...sorry.)
Option 1)
Since the image URL has to be in the HTML code, adjust the code like this:
<div id="tvshape" style="background-image: url(http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg);"></div>
Then add the following CSS:
#tvshape {
background-position: center center;
}
Here's a fiddle: http://jsfiddle.net/Niffler/cqPR8/
Option 2)
Basically the same as Option 1, except I "cheated" by leaving the HTML code as it was, i.e.
<div id="tvshape">
<img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg" alt="" />
</div>
Add some jQuery so that the HTML ends up looking like Option 1:
var tvbackground = $('#tvshape img').attr('src');
$('#tvshape').css('background-image', 'url(' + tvbackground + ')');
Then finally hide the image-tag with CSS:
#tvshape img {
display: none;
}
Here's another fiddle: http://jsfiddle.net/Niffler/4WFL5/
I just included this code in your css
#tvshape{ background:url('http://1.bp.blogspot.com/_Y1fFfKjiX2g/S_gMwLeGtjI/AAAAAAAALlE/vdX0ttHeEjg/s1600/CLOUDS2.jpg')center no-repeat; }
The image used is taken randomly just for example purposes. Is this desired version you want?
JSFiddle : Link
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT
I have an unordered list of items, I want to display each item as a box with two lines of text inside, each line with different properties (font, size, text-align...). The markup I am using for each item looks like this:
<li id="1">
<p class="first"><!-- First line of text --></p>
<p class="last"><!-- Second line of text --></p>
</li>
Using CSS I want it to display sort of like this:
My questions are:
I know this can be achieved in various ways with CSS, but what is the right way or best practice to do it for best cross-browser support? can you point me to a CSS example for something similar? the first text label should be 2 px from the top border and the second one 2 px from the bottom.
Is this the right markup for the text labels? or should I be using other tags instead of <p>? maybe <div>?
I am using display: block for the <li> tags, with fixed width and height.
Thanks in advance.
If I understand correctly, this should be good:
Live Demo
Tested in IE7/IE8 and recent versions of: Firefox, Chrome, Safari, Opera.
I also tested in IE6, works there to.
I'm only doing all this testing because you specifically asked for the "best cross-browser support" :)
I might be tempted to change the <p> tags for <span> tags, because these don't really seem to be paragraphs of text.
CSS:
ul {
list-style: none;
font-size: 200%;
line-height: 0.8
}
li {
display: block;
width: 140px;
height: 100px;
background: #ccc;
padding: 2px;
border: 1px solid #000;
position: relative;
margin: 8px 0
}
li .last {
position: absolute;
bottom: 2px;
right: 2px
}
HTML:
<ul>
<li id="l1">
<p class="first">Text 1</p>
<p class="last">Text 2</p>
</li>
<li id="l2">
<p class="first">Text 1</p>
<p class="last">Text 2</p>
</li>
</ul>
You might be able to use a selector like this:
#1 p + p { padding-right: ..px }
Which if I know anything at all about CSS should get the adjacent sibling of the p element in #1
Here is how I would do it:
li
{
display: block;
padding: 2px;
height: xxpx; /* The height that you gave the li */
width: xxpx; /* The width that you gave the li */
}
li p
{
height: xxpx;
}
li p.first
{
float: left;
}
li p.second
{
float: right;
/*
To place the 2nd text at the bottom right corner you need to give it a
margin top
The value of this margin should be the total height of the li tag minus the
height of text (p tag) and minus the total vertical padding that is 4px.
*/
margin-top: xxpx;
}
I guess that will do it. Hope it helps.