I am trying (without success) to set the absolute position of a little close image inside a div. The image should appear at the left side of the div whatever the content of the div. The content is a text label with a max length = 8 characters
Problem : the position of the image depends of the length of the text, and it should not be the case ! demo jsfiddle
I would like the position of the image is still the same if the text is "Er" and if the text is "erica"
div.TAG {
border-radius: 3px;
border: 1px solid #FF00FF;
background: #FF99FF;
color: #FF00FF;
width: 60px;
height: 17px;
float:left;
padding: 1px;
box-shadow: 3px 3px 5px #555;
z-index: 1;
margin: 3px;
}
.icon_suppr {
display: inline-block;
height: 12px;
width: 12px;
position:relative; top:0px; left:35px;
}
<div class="TAG">
ERIC
<img src="close-icon.png" class="icon_suppr"/>
</div>
Any idea ??
Just set the child to position: absolute and the parent to position: relative.
Example
In the example above I made the div a bit larger for demonstration only. It will always be top:0 and left: 35px of the parent div.
div.TAG {
position: relative; /* <---- added */
border-radius: 3px;
border: 1px solid #FF00FF;
background: #FF99FF;
color: #FF00FF;
width: 60px;
/* Evite que texte dépasse de la div */
height: 17px;
float: left;
padding: 1px;
box-shadow: 3px 3px 5px #555;
z-index: 1;
margin: 3px;
}
.icon_suppr {
display: inline-block;
height: 12px;
width: 12px;
position: absolute; /* <---- added */
top: 0px;
left: 35px;
}
<div class="TAG">
ERIC
<img src="close-icon.png" class="icon_suppr" />
</div>
Your <img> is relatively positioned which means it will take it's position based on what the elements before it are doing. To absolutely position the image you need to add position: absolute to your icon_suppr class
.icon_suppr {
display: inline-block;
height: 12px;
width: 12px;
position:absolute; top:0px; left:35px;
}
If you want to set image inside another div absolutely, you should add relative/absolute/fixed position to it's parent
div.TAG {
border-radius: 3px;
border: 1px solid #FF00FF;
background: #FF99FF;
color: #FF00FF;
width: 60px; /* Evite que texte dépasse de la div */
height: 17px;
float:left;
padding: 1px;
box-shadow: 3px 3px 5px #555;
z-index: 1;
margin: 3px;
position:relative;
}
.icon_suppr {
display: inline-block;
height: 12px;
width: 12px;
position:absolute; top:0px; left:35px;
}
Add position: relative to .TAG, but position: absolute to .icon_suppr
Result
Related
I tried to insert into my site a border-radius. It should look like:
I use Font Awesome and Bootstrap (in Fiddle I can’t insert it). This is how I tried to do that: http://jsfiddle.net/24oehpeh/
This is the code:
.ikonka:hover{
border: 2px solid;
border-radius:100%;
}
<div class="ikonka">f</div>
What did I do wrong?
You need to set a width on your element. As it stands, the content f is wrapped in a div, which is a block level element. This will occupy maximum horizontal space available.
.ikonka {
border: #fff 2px solid;
border-radius: 50%;
height: 20px;
text-align: center;
width: 20px;
}
.ikonka:hover {
border-color: #000;
}
<div class="ikonka">f</div>
I choosed to use the pseudo element "before" for this solution.
It gives you the benefit like "a second element", where you can more freely style it without making to many tricks with the main element.
Updated, has a perfectly round circle now.. :)
.ikonka {
position: relative;
border: 2px solid transparent;
display: inline-block;
/*padding: 4px 10px; removed */
background-color: black;
color: white;
width: 24px; /* added */
height: 24px; /* added */
line-height: 24px; /* added */
text-align: center; /* added */
}
.ikonka:hover:before {
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
<div class="ikonka">f</div>
The div must not be set to auto-width (which would be 100%).
The border should be transparent, so there are two pixels of invisible border.
A border radius of 50% suffices since it bends half of each side.
To make it look like your example, some font styling is necessary.
Result:
body{ background-color:#2C2F34; }
.ikonka{
width:32px;
height:32px;
border: 2px solid transparent;
border-radius:50%;
color:white;
cursor:default;
text-align:center;
font-weight:bold;
font-size:26px;
font-family:sans-serif;
}
.ikonka:hover{ border-color:white; }
<div class="ikonka">f</div>
Try this.
.ikonka:hover{
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.ikonka {
width: 100px;
height: 72px;
text-align: center;
background-color: black;
font-size: 51px;
color: white;
vertical-align: middle;
position: relative;
display: inline-block;
padding: 16px 8px;
}
<div class="ikonka">f</div>
Is there any way to create the border on the left with css ?
Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:
.espanolIcon
{
width: 300px;
height: 100px;
padding-left: 30px;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 200px;
height: 100px;
background-color: green;
border-radius: 0px 0px 30px 40px;
}
.arrow-left {
position: absolute;
top: 0px;
width: 300px;
height: 100px;
background-color: green;
-webkit-transform: skew(22deg);
transform: skew(22deg);
border-radius: 0px 0px 30px 40px;
}
h1 {
color: white;
}
<div class="espanolIcon">
<div class="rectangle"><h1>Espanol</h1></div>
<div class="arrow-left"></div>
</div>
Use a zero-dimension :before with thick, partial borders
By adjusting the top/bottom and left/right values of border-width on the :before pseudo-element, you can effectively change the skew of the triangle. The left position can then be changed to properly align the pseudo-element.
a {
display: inline-block;
position: relative;
margin-left: 14px; /* Should counter `left` value of `a:before` */
padding: .5em 1em;
color: #fff;
font: bold 1em/1 sans-serif;
text-decoration: none;
text-transform: uppercase;
border-radius: 0 0 10px 10px;
background: #75bf41;
}
a:before {
content: '\200B'; /* zero-width non-breaking space */
display: block;
position: absolute;
top: 0;
left: -14px; /* Adjust to align */
width: 0;
height: 0;
border-width: 14px 8px; /* Adjust top/bottom and left/right to skew */
border-style: solid;
border-color: #75bf41 #75bf41 transparent transparent; /* Triangle orientation. */
}
Español
Full css could work, but you should use .png as background-image or perhaps you could use .svg as you can animate and/or change every point or pixel. You might be able to use just CSSbut it would take a lot of leveling and positioning and alot of layers of absolute and relative positioning. As Css would only change the full width of the element, and it can only be used to change the width of elements. What you can do is use .svg, you could map every pixel which could be animated.
I accomplished it using borders and pseudo elements.
<ul>
<li class="lang-item lang-item-6 lang-item-es">
::before
<a>Español</a>
</li>
</ul>
ul {
position:relative;
}
.lang-item {
text-align: right;
position: relative;
}
.lang-item a {
background: #76c53f;
padding: 15px;
color: #fff;
text-transform: uppercase;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 14px;
}
.lang-item::before {
position: absolute;
right: 101px;
top: -15px;
content: "";
display: inline-block;
border-top: 40px solid #76C541;
border-left: 40px solid transparent;
}
jsfiddle
I want to make a button with a picture that will be shown inside and outside the button like this:
I don't want to use image for the button, because i will have to make at least 5 images.
Is there any way to do this with css?
I am using ASP.NET & C#
Thank you
UPDATED: You can use a pseudo element on the button tag. Make the button css position: relative then you could absolutely position pseudo element inside so that it pops out the top.
Then add left padding to the button so the text doesn't sit underneath the image.
http://jsfiddle.net/j1zLb8n9/1/
button {
position: relative;
padding: 1em 1em 1em 70px;
border: 1px solid #333;
background: #ccc;
}
button:before {
content: '';
position: absolute;
display: block;
background: url(http://placehold.it/60x90/3b3b3d) no-repeat;
bottom: 0;
left: 0;
height: 90px;
width: 60px;
}
I followed the advice of marmite and solved the problem. ASP's button probably does not like the :before so i included it in a div with css class bon and styled it properly to have the outcome that i wanted.
page.aspx
<div class="bon">
<asp:Button ID="AddToCartBTN" runat="server" CssClass="bot" Text="CART" OnClick="clik"/>
</div>
style.css
.bon {
position: relative;
padding: 6px 1em 1em 70px;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
display:block;
background-color: #91bd09;
height:30px;
z-index:100;
}
.bon:before {
content: '';
position: absolute;
display: block;
background: url(path_to_image) no-repeat;
bottom: 0;
left: 0;
height: 100px;
width: 100px;
z-index:999;
}
.bon:hover
{
background-color: #749a02;
}
.bot {
width:100%;
border:none;
background-color:transparent;
padding:5px 10px;
color: #fff;
font-size: 24px; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
}
Doing so, i can use the asp's function without having to change the way it works.
So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.
This is what I'm trying to achieve:
And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?
Want one that you can put over any background color?
jsBin demo
Only this HTML:
<span class="pricetag"></span>
And this CSS:
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 0 solid #C7D2D4;
border-top-width:1px;
border-bottom-width:1px;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #333;
font-size:11px;
line-height:0px;
text-indent:12px;
left:-15px;
width: 1px;
height:0px;
border-right:14px solid #E8EDF0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
which basically follows this principles: How to create a ribbon shape in CSS
If you want to add borders all around:
jsBin demo with transform: rotate(45deg) applied to the :before pseudo
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 1px solid #C7D2D4;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
background:#E8EDF0;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #aaa;
font-size:12px;
line-height:13px;
text-indent:6px;
top:3px;
left:-10px;
width: 18px;
height: 18px;
transform: rotate(45deg);
border-left:1px solid #C7D2D4;
border-bottom:1px solid #C7D2D4;
}
Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.
The approach is pretty simple and as follows:
The parent div container houses the text that should be present within the price-tag shape.
The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
The :before pseudo-element forms the circle present on the left side (using border-radius).
The X mark at the end is added using a span tag and the × entity.
The parent div container's width is set to auto so that it can expand based on the length of the text.
Note: This sample uses transforms, so will require polyfills in lower versions of IE.
div {
position: relative;
display: inline-block;
width: auto;
height: 20px;
margin: 20px;
padding-left: 15px;
background: #E8EDF2;
color: #888DA3;
line-height: 20px;
border-radius: 4px;
border: 1px solid #C7D2DB;
}
div:after,
div:before {
position: absolute;
content: '';
border: 1px solid #C7D2DB;
}
div:after { /* the arrow on left side positioned using left property */
height: 14px;
width: 14px;
transform: rotate(45deg);
background: #E8EDF2;
border-color: transparent transparent #C7D2DB #C7D2DB;
left: -6px;
top: 2px;
}
div:before { /* the circle on the left */
height: 4px;
width: 4px;
border-radius: 50%;
background-color: white;
left: 0px;
top: 7px;
z-index: 2;
}
.right { /* the x mark at the right */
text-align: right;
margin: 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>×</span>
</div>
<div>Home Sweet Home<span class='right'>×</span>
</div>
<div>Hi<span class='right'>×</span>
</div>
Fiddle Demo
I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution. Visually this is what you get:
The HTML for it:
<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>
And the CSS for it:
.price-tag {
background: #058;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
height: 30px;
line-height: 30px;
margin-right: 1rem;
padding: 0 0.666rem;
position: relative;
text-align: center;
}
.price-tag:after {
background: inherit;
border-radius: 4px;
display: block;
content: "";
height: 22px;
position: absolute;
right: -8px;
top: 4px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width: 22px;
z-index: -1;
}
.price-tag:hover {
background: #07b;
}
original example
Modified: http://jsbin.com/ruxusobe/1/
Basically, it needs to float left, use border-right (instead of left) and modify the padding.
CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 5px 5px 0px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: left;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-right: 11px solid transparent;
border-bottom: 11px solid white;
}
HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active"><span class="activePointer"></span>Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is a simple example...
Orignal Version
Edited Version
CSS:
div {
margin-left: 15px;
background: #76a7dc;
border: 1px solid #CAD5E0;
padding: 4px;
width:50px;
position: relative;
}
div:after {
content:'';
display: block;
position: absolute;
top: 2px;
left: -1.3em;
width: 0;
height: 0;
border-color: transparent #76a7dc transparent transparent;
border-style: solid;
border-width: 10px;
}
Notice on border-color, only right is set with a color and everything else is set to transparent.
using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO.
HTML code is :
<a class="arrow" href="#">Continue Reading</a>
CSS Code is:
body{padding:15px;}
.arrow {
background: #8ec63f;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
position: relative;
border-radius: 4px;
border: 1px solid #8ec63f;
}
.arrow:before {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid transparent;
border-right: 15px solid #8ec63f;
border-top: 15px solid transparent;
left: -15px;
}
.arrow:hover {
background: #f7941d;
color: #fff;
border-radius: 4px;
border: 1px solid #f7941d;
}
.arrow:hover:before {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;;
border-right: 15px solid #f7941d;
}
I am trying to achieve this effect where a photo gets a repeating pattern overlayed over the entire photo when the user place his mouse over the photo.
Problem: I do not seem to be able to make the overlay div overlay the photo completely. How should this be done?
JSfiddle: http://jsfiddle.net/KDyKH/2/
Edit: Updated the fiddle
CSS
#container {
position: relative;
padding: 10px;
width: 1000px;
height: 500px;
background: blue;
}
.photo_box {
padding: 8px 10px 11px 10px;
background: #fff;
-webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
position: relative;
}
.photo {
position: absolute;
z-index: 0;
margin-bottom: 13px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.photo_tint {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background: red;
-moz-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}
HTML
<div id="container">
<div class="photo_box">
<img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
<div class="photo_tint"></div>
</img>
</div>
</div>
In addition to adding left and top properties to .photo_tint, you also need to make .photo_box relatively positioned (it wasn't before you edited your question).
.photo_box {
position: relative;
}
.photo_tint {
left:0;
right:0;
}
http://jsfiddle.net/KDyKH/5/
The absolute position's left/top/right/bottom attributes work off the last element higher in the hierarchy with position set to relative or absolute. If no parent elements have position set to relative/absolute, the body is used. In your case, the closest relatively positioned element was #container, so when left and top were set on .photo_tint it used #container's origin and not .photo_box's origin as needed to achieve the desired effect.
Additionally, if an element is set to position:absolute, and no left/top/right/right properties are set, the element will not behave as absolute (see this question).
.photo_tint {
position: absolute;
z-index: 100;
background: red;
top:0; left:0;
width:100%; height:100%;
}
???
http://jsfiddle.net/tFbbM/1/
Just position the photo_tint div using top and left. http://jsfiddle.net/OhMrBigshot/gEdJu/
z-index:-1 on the image or z-index:2 on the div
#container {
position: relative;
width: 500px;
height: 500px;
background: blue;
}
.photo {
position: relative;
width: 300px;
height: 100px;
background: green;
}
.photo_tint {
position: absolute;
z-index: 1;
background: red;
width: 300px;
height: 100px;
top:0px;
}