I have a navigation bar which has 5 links on it (including the title) and I have an image below it. The navigation bar and image below are completely separate and are both centered using flexbox. The issue I am having is that the image appears to be slightly off center (although it could possibly be the navigation bar is slightly off center) and I can;t figure out why?
Here is the Image view html:
<div class="image-container">
<img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize , 'width': selectedImage.widthSize}" [src]="selectedImage.imagePath" alt="Man Praying">
</div>
The image view CSS:
.image-full-view {
padding: 0px;
margin-top: 0px;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
.image-container {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
margin-top: 15px;
}
.image-name-container {
position: relative;
text-align: center;
top: 85px;
}
This is the nav bar html:
<header>
<nav>
<ul class="nav-links">
<li><a routerLink="gallery-list" class="twoSec">Gallery</a></li>
<li><a routerLink="albums" class="oneSec">Albums</a></li>
<li><a routerLink="gallery-list" class="navbar-title">BAILEY PHOTOGRAPHY</a></li>
<li><a routerLink="favourites" class="oneSec">Favourites</a></li>
<li><a routerLink="cart" class="twoSec">Cart</a></li>
</ul>
</nav>
</header>
The nav bar CSS:
* {
margin: 0px;
padding: 0px;
padding-bottom: 30px;
font-size: 22px;
color: black;
font-family: 'Lato', sans-serif;
}
.navbar-title {
font-size: 140%;
text-decoration: none !important;
display: flex;
justify-content: center;
border: black solid 2px;
width: 405px;
margin-top: 25px;
color: black;
font-weight: 500;
transition: transform 0.2s, background-color 0.5s, color 0.5s;
}
.navbar-title:hover {
background-color: black;
color: white;
transform: scale(1.1);
}
.nav-links {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding-bottom: 30px;
}
.nav-links a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
nav {
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
}
Here are the requirements:
Hover effect when any of the ‘Navigation’ sections (Navigation 1,
Navigation 2, Navigation 3) is selected.
Click effect when any of the ‘Navigation’ sections (Navigation 1,
Navigation 2, Navigation 3) is selected. If Navigation 1 is clicked,
it will go to another page, same as Navigation 2 and Navigation 3.
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
.text
{
cursor:pointer;
}
.circle {
position: relative;
border: 0px;
padding: 0;
margin: 1em auto;
width: 430px;
height: 430px;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
li {
overflow: hidden;
position: absolute;
top: -20%;
right: -20%;
width: 70%;
height: 70%;
transform-origin: 0% 100%;
}
.text {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
text-align: center;
transform: skewY(-60deg) rotate(15deg);
padding-top: 20px;
}
li:first-child {
transform: rotate(0deg) skewY(30deg);
border-left: 8px solid #fff;
border-right: 8px solid #fff;
}
li:nth-child(2) {
transform: rotate(120deg) skewY(30deg);
border-right: 8px solid #fff;
border-left: 8px solid #fff;
}
li:nth-child(3) {
transform: rotate(240deg) skewY(30deg);
border-right: 8px solid #fff;
border-left: 8px solid #fff;
}
li:first-child .text {
background: green;
}
li:nth-child(2) .text {
background: tomato;
}
li:nth-child(3) .text {
background: aqua;
}
li:nth-child(3) .text:hover {
background-color: #a5e2f3;
}
li:nth-child(2) .text:hover {
background-color: #86d8ef;
}
li:nth-child(1) .text:hover {
background-color: #66ceeb;
}
.cn-button {
position: absolute;
top: 40%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -2.25em;
padding-top: 0;
width: 4.5em;
height: 4.5em;
border: 1px solid;
border-radius: 50%;
background: none;
background-color: yellow;
color: yellow;
text-align: center;
font-weight: 700;
font-size: 1.5em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
top: 40%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(224deg);
/* style further as needed */
color: #fff;
font-family: Indie Flower;
font-size: 25px;
}
<button class="cn-button" id="cn-button"></button>
<ul class="circle">
<li>
<a class="one" href="circle.html">
<div class="text" ><span class="icon">Navigation 1</span></div>
</a>
</li>
<li>
<a class="two" href="circle2.html">
<div class="text"><span class="icon">Navigation 2</span></div>
</a>
</li>
<li>
<a class="three" href="circle3.html">
<div class="text"><span class="icon">Navigation 3</span></div>
</a>
</li>
</ul>
i want exact like .
How can I create a menu like this where I can dynamically add items?
Im trying to apply background color for whole block c_date.. but its not working.. I tried clear, block everything..
Demo
HTML:
<div class="c_date"> <span class="c_day">30</span>
<span class="c_month">Jun</span>
<span class="c_year">2009</span>
<div style="clear:both;"></div>
</div>
CSS:
.c_date {
position: relative;
width: 40px;
color: #999;
margin: -0px 0 0 0;
background:#999 !important;
display:block;
border:1px solid #ccc;
clear:both;
}
.c_day, .c_month, .c_year {
position: absolute;
}
.c_day {
font-size: 14px;
top: 10px;
}
.c_month {
top: 0;
left: 0;
font-size: 11px;
}
.c_year {
top: 9px;
right: 0;
font-size: 9px;
rotation: -90deg !important;
/* ** Hacks ** */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
This is because your c_date div height is 2px (the reason is position:absolute; in your other containers).
So you can fix it by adding height to c_date style or changing position property of child elements in it.
This can actually be done without the need to position:absolute the day and month spans. This will mean that the height of your c_date element is actually relative to the height of the stacked day and month elements.
I took the liberty of fixing up some of the CSS code that didnt need to be there from your demo too :)
HTML
<div class="c_date">
<span class="c_month">Jun</span><br />
<span class="c_day">30</span>
<span class="c_year">2009</span>
</div>
CSS
.c_date {
position: relative;
width: 40px;
color: #999;
margin: 0 0 0 0;
background:#00F !important;
display:block;
border:1px solid #ccc;
font-size:0; /* set to 0 so that <br/> and spaces between <span> dont effect height/spacing */
}
.c_year {
position: absolute;
}
.c_day {
font-size: 14px;
display: inline-block;
line-height: 11px;
padding-bottom: 2px;
text-align:center;
}
.c_month {
font-size: 11px;
display: inline-block;
line-height: 14px;
text-align:center;
}
.c_year {
top: 9px;
right: 0;
font-size: 9px;
/* ** Hacks ** */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
DEMO
.c_date {
position: relative;
width: 40px;
color: #999;
margin: -0px 0 0 0;
background-color: #999 !important;
display:block;
border:1px solid #ccc;
clear:both;
height: 30px; //change to your needs
}
How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.
EDIT
Icon fonts are a great suggestion. I was looking for something like this.
You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.
DEMO 1
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
DEMO 2 (With circle)
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_circle {
position: absolute;
width: 22px;
height: 22px;
background-color: green;
border-radius: 11px;
left: 0;
top: 0;
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #fff;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #fff;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_circle"></div>
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
Here is another CSS solution. It takes fewer lines of code.
ul li:before {
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li {
list-style-type: none;
font-size: 1em;
}
<ul>
<li>test1</li>
<li>test</li>
</ul>
Do some transforms with the letter L
.checkmark {
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>
only css, quite simple I find it:
.checkmark {
display: inline-block;
transform: rotate(45deg);
height: 25px;
width: 12px;
margin-left: 60%;
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}
<div class="checkmark"></div>
You can now include web fonts and even shrink down the file size with just the glyphs you need.
https://github.com/fontello/fontello
http://fontello.com/
li:before {
content:'[add icon symbol here]';
font-family: [my cool web icon font here];
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
color: #999;
}
An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders
It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform
Example
li {
position: relative; /* necessary for positioning the :after */
}
li.done {
list-style: none; /* remove normal bullet for done items */
}
li.done:after {
content: "";
background-color: transparent;
/* position the checkbox */
position: absolute;
left: -16px;
top: 0px;
/* setting the checkbox */
/* short arm */
width: 5px;
border-bottom: 3px solid #4D7C2A;
/* long arm */
height: 11px;
border-right: 3px solid #4D7C2A;
/* rotate the mirrored L to make it a checkbox */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
To do:
<ul>
<li class="done">Great stuff</li>
<li class="done">Easy stuff</li>
<li>Difficult stuff</li>
</ul>
I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.
Simple, semantic, without any dependencies or additional HTML.
label {
cursor: pointer;
}
input[type="checkbox"] {
position: relative;
top: 2px;
box-sizing: content-box;
width: 14px;
height: 14px;
margin: 0 5px 0 0;
cursor: pointer;
-webkit-appearance: none;
border-radius: 2px;
background-color: #fff;
border: 1px solid #b7b7b7;
}
input[type="checkbox"]:before {
content: '';
display: block;
transition: transform 200ms;
}
input[type="checkbox"]:checked:before {
width: 4px;
height: 9px;
margin: 0px 4px;
border-bottom: 2px solid #115c80;
border-right: 2px solid #115c80;
transform: rotate(45deg);
}
<label>
<input type="checkbox" name="check-1" value="Label">Label
</label>
Try this
// html example
<span>✓</span>
// css example
span {
content: "\2713";
}
i like this way because you don't need to create two components just one.
.checkmark:after {
opacity: 1;
height: 4em;
width: 2em;
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 2px solid #5cb85c;
border-top: 2px solid #5cb85c;
content: '';
left: 2em;
top: 4em;
position: absolute;
}
Animation from Scott Galloway Pen
$('#toggle').click(function() {
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
});
body {
padding: 5em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
.circle-loader {
margin-bottom: 3.5em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 7em;
height: 7em;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out;
}
.checkmark {
display: none;
}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
opacity: 1;
height: 3.5em;
width: 1.75em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: '';
left: 1.75em;
top: 3.5em;
position: absolute;
}
#keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 1.75em;
opacity: 1;
}
40% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
100% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>
li:before {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 9px;
margin-left: -15px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
li:after {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 20px;
margin-left: -11px;
margin-top: -6px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.
.snackbar_circle {
background-color: #f0f0f0;
border-radius: 13px;
padding: 0 5px;
}
.checkmark {
font-family: arial;
font-weight: bold;
-ms-transform: scaleX(-1) rotate(-35deg);
-webkit-transform: scaleX(-1) rotate(-35deg);
transform: scaleX(-1) rotate(-35deg);
color: #63BA3D;
display: inline-block;
}
<span class="snackbar_circle">
<span class="checkmark">L</span>
</span>
I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.
Lists
ul {padding: 0;}
li {list-style: none}
li:before {
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
body {
font-size: 75%;
}
ul {
padding: 0;
}
li {
list-style: none
}
li:before {
display: inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height: 1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
Checkboxes
You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
content:'';
display:inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked + label:before {
content: '✔';
color: green;
}
body {
font-size: 75%;
}
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked+label:before {
content: '';
display: inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height: 1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked+label:before {
content: '✔';
color: green;
}
<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>
You might want to try fontawesome.io
It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.
We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:
<span class="check_text">Some Text</span>
Now, we can add the CSS like this:
span.check_text:before {
position: absolute;
height: 15px;
width: 5px;
border-bottom: 3px solid red;
border-right: 3px solid red;
content: "";
transform: rotate(45deg);
left: -25px;
top: 2px;
}
If you want a tick, you probably also want a cross, with background colours.
.icon {
display: inline-block;
width: 22px; height: 22px;
border-radius: 50%;
transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success { background: green; }
.icon.icon-success:before { width: 3px; height: 9px; top: 6px; left: 11px; }
.icon.icon-success:after { width: 3px; height: 3px; top: 12px; left: 8px; }
.icon.icon-failure { background: lightcoral; }
.icon.icon-failure::before { width: 3px; height: 12px; top: 5px; left: 10px; }
.icon.icon-failure::after { width: 12px; height: 3px; top: 10px; left: 5px; }
<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>
This is my variant for making 'checked' buttons
function clickMe(data) {
data.classList.add("checked");
}
.unchecked::before {
content: "C";
}
.unchecked {
border-radius: 50%;
outline: none;
}
.checked::before {
content: "L";
}
.checked {
background-color: green;
transform: rotate(45deg) scaleX(-1);
}
<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>
Also, using the awesome font, you can use the following tag.
Simple and beautiful
With the possibility of changing the size and color and other features in CSS
See result:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>fa fa-check-circle</h1>
<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
This is simple css for Sign Mark.
ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}
Searched everything but can't find a answer to my question.
I want the price to be on top of the image having the following code.
who can help me with this please?
HTML
<li class="span4">
<div class="thumbnail cart_item" ><span class="item_price price">€ 18.50</span>
<img alt="" src="http://test.jpg">
<div class="caption" >
CSS
.thumbnail>img {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
.price {
color: #fff;
font-size: 1.4em;
background: #96c42e;
padding: 8px 8px 10px 8px;
position: relative;
display: inline-block;
float: right;
margin-top: -8px;
margin-right: -10px;
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-ms-transform: rotate(8deg);
}
Try the adding the following:
.thumbnail{
position:relative;
}
.price {
color: #fff;
font-size: 1.4em;
background: #96c42e;
padding: 8px 8px 10px 8px;
position: absolute;
display: block;
top:0px;
left:auto;
right:0px;
margin-top: -8px;
margin-right: -10px;
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-ms-transform: rotate(8deg);
z-index:100;
}
Give the container position:relative then place the price tag using position:absolute.