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.
Related
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?
In this mockup I have created, I am trying to create a custom arrow shape below each button whenever the mouse hovers over a button on the main navigation. However, the width will vary for each button and I need it to look the same. How would I accomplish this in CSS?
Click Here to see what I am trying to accomplish under 'I'm New' link.
So far, this is what I have in style.css:
.main_nav_inside {
margin: 0 auto;
margin-top: -130px;
position: relative;
z-index: 1;
}
.main_nav_inside ul {
list-style-type: none;
margin: 0;
float: right;
}
.main_nav_inside ul li {
display: inline-block;
float: left;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
}
.main_nav_inside ul li a {
display: block;
top: 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
height: 130px;
color: #ffffff;
}
.main_nav_inside ul li a:hover {
padding-bottom: 5px;
width: 100%;
background-color: #2F2F2F;
}
.main_nav_inside ul li a:hover:before {
padding-bottom: 20px;
width: calc(2% + 30px);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
left: inherit;
margin-left: -20px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, 15deg);
z-index: -1;
}
.main_nav_inside ul li a:hover:after {
padding-bottom: 20px;
width: calc(10% / 2);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
right: inherit;
margin-left: -35px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -15deg);
z-index: -1;
}
Here is the HTML for this page as well:
<header id="header_inside">
<div class="main_logo_white"><img src="{{ siteUrl }}/images/ssumc_logo_white.png"></div>
{% set parents = craft.entries.section('menu').level(1).limit(5) %}
<nav class="main_nav_inside">
<ul>
{% nav parent in parents %}
<li>
{{ parent.getLink() }}
{% ifchildren %}
<ul class="dropdown">
<li>{% children %}</li>
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
</nav>
</header>
This website is being built using Craft CMS..not that this matters.
I was able to create the shape using border-top, border-left and border-right. But the bottom tip seems to stay flat and doesn't have a point to it. No matter what numbers you adjust in the border width of top, left or right the tip will stay flat.
.main_nav_inside ul li a:hover:after {
top: 100%;
left: 0;
right: 0;
content: " ";
position: absolute;
border-top: 20px solid #000000;
border-left: 50px solid rgba(0, 0, 0, 0);
border-right: 50px solid rgba(0, 0, 0, 0);
}
I want to make background like in photo, but without image. I want with only "background-color" like background in "About us" link
You can achieve that using CSS transform: with value skew();
* {
margin: 0 auto;
padding: 0;
}
ul {
display: block;
width: auto;
margin-top: 60px;
background-color: blue;
height: 45px;
font-family: calibri;
font-weight: bold;
text-align: center;
}
li {
display: inline-block;
line-height: 45px;
padding: 0 25px 0 25px;
background-color: orange;
font-size: 24px;
transform: skew(20deg); /* To Achieve the Slanted border */
margin-right: -3px;
}
li a {
color: white;
display: block;
transform: skew(-20deg); /* To straighten up the text */
}
<ul>
<li><a href"#">About</a></li>
</ul>
Click here for a full tutorial on how you can do that.
It looks like you are looking for a parallellogram or rhombus. To do this you can use transform: skew
#about {
width: 120px;
height: 20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: blue;
color: white;
font-size: 20px;
padding-bottom: 5px;
text-align: center;
margin-left: 20px;
}
<div id="about">About us</div>
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
}
I've made my images purposely overlap each other vertically, but now the images have stacked on top of each other. How do I stop this from happening? Here is my site.
I tried adding a z-index to the images, which worked on a previous layout, but hasn't worked with this -
.home_post_box {
float: left;
width: auto;
height: auto;
margin-right: 356px;
margin-bottom: 30px;
position: relative;
cursor: pointer;
display: inline-block;
}
.home_post_box img {
width: 371px;
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
position:absolute;
left:0px;
top:0px;
z-index:1;
padding-left: 0px;
}
May be this is close to what you try
.home_post_box {
float: left;
width: auto;
height: auto;
position: relative;
cursor: pointer;
display: inline-block;
}
.home_post_box img {
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
left: 0px;
top: 0px;
z-index: 1;
padding-left: 0px;
float: left;
}
From what I could see, you should try encapsulating each row of pictures in its own <div> and put your desktop-clear or tablet-clear elements between those rows.
You might also use this clearfix trick for clearing, its a bit cleaner but I'm not sure what you're trying to do. Perhaps it will be useful.