I'm wondering if it would be possible to create a CSS style that can enable a small red dot to show up overlaying an image to indicate that it was sold?
Can you overlay a transparent image on another image using CSS?
This code generates a red dot over the container div:
#cont {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#cont:before {
position: absolute;
content: '';
background-color:#FF0000;
border-radius:50%;
opacity:0.5;
width: 200px;
height: 200px;
pointer-events: none;
}
<div id="cont">
<img src="" alt="image here" width="200" height="200">
</div>
Your best bet is to create another element (div) for the status of the item. If the item is sold set a class on the item to sold. Then use border-radius on the status div in CSS to create the red dot.
Example:
.sold .status{
border-radius: 5px;
background: #f00;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
right: 5px;
}
Basically,
HTML
<ul>
<li></li>
</ul>
CSS
ul::marker
{
list-style-type: circle;
position:absolute;
}
li{
color: red;
}
Yes, just put them one after the other and do something like style="margin-top:-100px" on the second one to move it on top of the previous one.
Related
i want to draw something like this in html.is that possible in html that i can label the rectangle ? i think may be by using <hr> ?
at the moment i have just draw a rectangle
here is the code
<div style="width:150px;height:80px;border:1px solid #000;">This is a rectangle!</div>
how can i draw lines around it and then label it
You can construct the lines and labels with pseudo elements and data attributes using just 2 elements
FIDDLE
Markup:
<div data-label1="a" data-label2="b">
<span data-label3="c">XYZ Pty Ltd</span>
</div>
CSS
div
{
width:150px;
height:80px;
border:1px solid #000;
font-size: 25px;
text-align:center;
margin: 100px;
position: relative;
background: #fff;
}
span
{
padding: 10px 20px;
display: inline-block;
}
div:before, div:after
{
content: attr(data-label1);
position:absolute;
left: -50px;
top: 40px;
width: 50px;
height: 1px;
z-index: -1;
background: #000;
text-align:left;
font-size: 18px;
}
div:after
{
content: attr(data-label2);
right:-50px;
left: auto;
text-align: right;
}
span:after
{
content: attr(data-label3);
position:absolute;
left:0;right:0;
margin: auto;
padding-top:100px;
top:20px;
font-size: 18px;
width: 1px;
height: 0;
z-index: -1;
background: #000;
}
This code will give you the output you want but this is a kind of hard coding.
<div style="display:inline-block; position:relative;top:20px;">a</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;"></div>
<div style="width:150px;height:80px;border:1px solid #000;display:inline-block;position:relative;left:-5px;">This is a rectangle!</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;left:-10px;"></div>
<div style="display:inline-block; position:relative;top:20px;">b</div>
<div class="vLine"style="height:40px;width:1px;background:#000;position:relative;left:230px;"></div>
<div style="position:relative;left:230px;">c</div>
For line segments don’t use
<hr>
because its width is dependent on the width of the parent container. So in order to set its width you need to introduce a div to restrict its width. so instead of creating two elements. create the line with just div by keeping its height:0px, and width: desired width. you got your horizontal line segment. If you want a vertical line then keep width zero and height the desired amount.
Hope this helps you out.
You can do using normal HTML and css or using HTML5 Canvas,I am giving you with html and css
http://jsbin.com/IlArOTE/1/edit
I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
I want to set the background image so that it appears in front of foreground image.
I tried the following code but it is not working as I expected:
.background-image
{
border :0px;
background-image: url(/images/icon.png);
z-index:1000;
}
.foreground-image
{
width:200px;
height:113px;
border :0px;
z-index:1;
}
<div>
<a href="#" class="background-image">
<img class="foreground-image" src="./images/pic1.jpg" />
</a>
</div>
I am using CSS2.
Here is one way to do it.
If this is your HTML:
<div>
<a href="#" class="background-image">
<img class="foreground-image" src="http://placekitten.com/200/100"/>
</a>
</div>
apply the following CSS rules:
div {
border: 1px dotted blue;
}
.background-image {
border: 1px dotted red;
background-image: url(http://placekitten.com/200/50);
background-position: center left;
background-repeat: repeat-x;
display: block;
width: 500px;
}
.foreground-image {
vertical-align: top;
width: 200px;
border: 0px;
position: relative;
z-index: -1;
}
Set position: relative on the image and throw the image deeper into the stacking order by using z-index: -1.
See demo at: http://jsfiddle.net/audetwebdesign/HUK28/
by removing the foreground-image.
.background-image {
border :0;
background-image: url(/images/icon.png);
width:200px;
height:113px;
display: block;
}
.foreground-image {/**/}
<div>
</div>
I've used Inkscape to create a very simple icon in a site I'm developing. The icon is absolutely positioned over the border of two side-by-side elements.
In Chrome it looks great:-
But in IE7 not so..:-
Am I doing something wrong? There is no transparency in the coloured part of my image, as far as I can tell.
Here's the code I'm using to display the images:-
<div class="roadmapstep">
<div class="roadmapnumber">1</div>
<h4>Header 1</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
<div class="roadmapstep">
<div class="roadmapnumber">2</div>
<h4>Header 2</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
CSS for the div containing the image is:-
.nextarrow {
position: absolute;
top: 65px;
margin-right: -35px;
right: 0;
width: 65px;
height: 40px;
}
CSS for the divs with the border:
.roadmapstep {
width: 220px;
height: 150px;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
position: relative;
}
Use z-index to position an image above another
Add z-index:1000; to .nextarrow
DEMO
Try giving the different class name to second div and position:absolute. it works!!
DEMO 2
I'm having a problem with making one div overlap the rest of the page.
I just need one image to overlap one section. I have kinda got it to work but once you resize the window or look at it on a different resolution the image doesn't appear where it should.
I'm using an position:absolute; and z-index. It is working to some extent. but it won't stay in that position, for example, if you resize your browser window (it moves from where I'd like it to stay).
Here is this website
I need it to overlap the yellow box like this.
Edit: Just a quick follow up: I think your solution has put me a bit of bother. I am unable to place another div directly under it as can be seen here
Move
<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>
inside
<div id="box"><img src="images/boxheading.png"></div>
just before the image.
Change the CSS to
#medal {
position: relative;
top: -240px;
right: -80px;
z-index: 50;
}
and apply the following to the boxheading.png image
{
position: relative;
top: -280px;
}
EDIT:
From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.
To add another box below the first one, you will need to do the following changes to html:
<div id="box-container">
<div id="box">
<div id="medal">
<img src="images/star2012medal.png" width="220" height="277">
</div>
<img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
</div>
<div id="box2">testing</div>
</div>
then add the following css:
#box-container {
float: right;
}
#box {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
}
#box2 {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline-block;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
margin-top: 10px;
}
tested only in Chrome. Remember to test it in other browsers!