how to make the boxes overlap and offset both top and left 5px one by one only use css
plz check the result what i want first
plz check the upper link
i thought it can be done in just one style define,no need to define each box's location
can u help me adjust it in this code?
HTML
<div class="holder">
<div class="card" ></div>
<div class="card" ></div>
<div class="card" ></div>
<div class="card" ></div>
</div>
CSS
.holder{
position:absolute;
top:100px;
left:100px;
display:block;
font-size: 0;
}
.card{
position:relative;
background:red;
opacity: 0.4;
width:40px;
height:60px;
margin-top:-55px;
margin-left:-35px;
}
thank u vv much
How about minimalising markup and using a box shadow instead?
this allows you to only declare a single card element, and use multiple box shadows:
.holder{
position:absolute;
top:100px;
left:100px;
display:block;
font-size: 0;
}
.card{
position:relative;
background:red;
opacity: 0.4;
width:40px;
height:60px;
margin-top:-55px;
margin-left:-35px;
box-shadow: 5px 5px rgba(255,0,0,0.4),10px 10px rgba(255,0,0,0.4), 15px 15px rgba(255,0,0,0.4), 20px 20px rgba(255,0,0,0.4);
}
<div class="holder">
<div class="card" ></div>
</div>
Related
I need to cut an image in Photoshop and to recompose it. I thought to create a table / div-table where put the pieces of the partitioned image.
I have done this:
<div id="Table">
<div id="row">
<div id="col">
<img src="01.png" alt="">
</div>
<div id="col">
<img src="02.png" alt="">
</div>
<div id="col">
<img src="03.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="04.png" alt="">
</div>
<div id="col">
<img src="05.png" alt="">
</div>
<div id="col">
<img src="06.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="07.png" alt="">
</div>
<div id="col">
<img src="08.png" alt="">
</div>
<div id="col">
<img src="09.png" alt="">
</div>
</div>
</div>
with Css:
<style type="text/css">
<!--
img {
width: 100%;
height: auto;
}
#Table {
display: table;
width: 50%;
}
#row {
display: table-row;
}
#col {
display:table-cell;
}
-->
</style>
UPDATE:
I have to add in the middle (img 5) a table with the items, the quantity and the price. I have updated the fiddle. There are some problems in the fiddle but here there are the link with the screenshot of my page.
https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0
JSFIDDLE:
http://jsfiddle.net/wdb5gq29/43/
I'm working on a similar project (responsive image map), and I found positioned divs placed over a single image to be much more stable.
It has the added advantage of being used as an image map, because you can put content in or add functionality to the 9 divs, use more or less divs, and there are no alignment issues because it uses one image versus multiple sliced images. An awesome example is the responsive image map at CSS Play: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Here is the code for an example similar to yours.
JSFiddle
HTML
<div id="wrapper">
<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>
</div>
(Note: The CSS is written out in long form as an example for easier use. It would be shortened down on a live site by combining the similar styles.)
html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
#wrapper {
height:100%;
width:100%;
}
.image-holder {
width:50%;
position:relative;
}
.image-background {
width:100%;
display:block;
}
.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}
Remember to add !DOCTYPE html, or IE will have issues. Also, the div widths are set at 33% with a border to highlight the structure. On the live version, you'll delete the borders and try setting the horizontal divs to 33.333%, equaling to 100%. Or 33% 34% 33%.
For your original CSS table layout, you can add the following additional CSS to stabilize the table and remove the default bottom gap under the images, and it worked in Firefox and Explorer, but showed the odd gap or alignment issues in other browsers at various screen sizes.
.table {
display:table;
width:50%;
margin:0;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
}
.col {
display:table-cell;
border:none;
}
.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}
Updated Redesign Using a Flexable Image Background
According to your latest Fiddle, it looks like you would like to display a data table, with the printer image as a background. The JSFiddle example below has a flexible container div set at the requested 50%. Within the container is the data table, and an absolutely positioned printer image that scales, and serves as the background.
JSFiddle
.price-container {
position:relative;
padding:0;
display:table;
width:50%;
}
.image-bg {
display:block;
position:absolute;
top:0;
left:0;
min-height:100%;
/* min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
width:100%;
height:auto;
margin:0;
padding:0;
z-index:-1;
}
.table-holder {
z-index:2;
padding:2em;
/* min-width:300px; */
}
.printer-display-table {
width:100%;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
font-family:verdana;
font-size:.6em;
}
.printer-display-table td {
border:solid 1px #000000;
padding:.5em;
}
HTML
<div class="price-container">
<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
<div class="table-holder">
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
</div>
Add display: block and remove width from your img tag to get rid of the cellspacing:
img {
display: block;
height: auto;
}
updated fiddle: http://jsfiddle.net/wdb5gq29/42/
In IE8, I am trying to display 4 child div's side by side withing a parent div. I would like the parent div to overflow and scroll horizontally and for the child div's to be next to each other horizontally as well. Thanks
HTML:
<div id="a">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
and CSS:
#a{
position:relative;
height:130px;
width:800px;
background:purple;
overflow:auto;
}
.b{
position:relative;
display:inline-block;
height:100px;
width:400px;
background:red;
border:1px solid #000000;
float:left;
}
Here are my suggestions:
Use classes for repeated elements. ids are unique, but classes can be used multiple times.
Use inline-block instead of float, not in addition.
Set white-space:nowrap on the container to prevent the children
from wrapping.
<div id="a">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
#a{
height:130px;
width:800px;
background:purple;
overflow:auto;
white-space:nowrap;
}
.b{
height:100px;
width:400px;
background:red;
border:1px solid #000000;
display:inline-block;
}
http://jsfiddle.net/X2Rjn/2/
http://cssdesk.com/exMH4 (for those who cannot see jsfiddle)
Here's a floated variant:
<div class="a">
<div class="wrapper">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
.a{
height: 130px;
width: 800px;
overflow: scroll;
background: purple;
}
.wrapper{
width: 1608px;
}
.b{
height: 100px;
width: 400px;
background: red;
border: 1px solid #000000;
float: left;
}
http://jsfiddle.net/BYLFn/3/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
CSS
.btns{
float:left;
padding: 2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px; // this top margin doesn't work in IE8
height:70px;
border:thin solid red;
}
here is jsFiddle
It's a known bug in IE8. There are several ways to fix it.
You can try to add overflow:auto to the clearing <div>
Check this fiddle
Try to add display:inline-block; and width how much you want hope it will solve your problem.
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<!-- Adding will solve problem -->
<div id="gall"></div>
Works for me.
http://jsfiddle.net/68myJ/13/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
try this:
<div id="wrapper">
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
</div>
<div id="gall"></div>
#wrapper{
overflow:hidden;
}
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
see fiddle: http://jsfiddle.net/68myJ/17/
I have this code:
<div class="thumbnail">
<div class="image_thumbnail">
<div class="category"></div>
<div class="category2"></div>
</div>
<div class="info_thumbnail"></div>
<div class="footer_thumbnail">
<div class="stars_empty"></div>
<img class="views" src="images/views.png">10
</div>
</div>
How do I have to work on css to have an effect like this?
The green div should be the category div
Thanks!
<div id="container">
<div class="box"></div>
<div class="tab"></div>
</div>
#container{
position:relative;
}
.box{
position:relative;
left:10px;
top:10px;
height:150px;
width:100px;
border-radius:8px;
border:2px solid #666;
background-color:#DDD;
z-index:5;
}
.tab {
position:absolute;
left:105px;
top:35px;
width:25px;
height:40px;
background-color:green;
border-radius:5px;
box-shadow: 3px 3px 3px #888;
}
Demo: http://jsfiddle.net/Q7RkR/
What you'd like to do is not much clear.
Anyway, to handle over-positions you should have a main container for each of your thumbnail; set position:relative to the main container, and set position:absolute to each child layer element.
Please refer to this handy diagram I drew:
div1's height is unknown. div3's width is fluid; it should never overlap div2. Both div1 and div2 have the same width and are horizontally centered via margin: auto. How can I position div3 so that it aligns to the right side of body (no matter how wide body is) while sharing vertical position with div2? (Using CSS)
.div1{
margin:0 auto;
width:100px;
height:50px;
border:5px solid #995555;
}
.div2{
width:100px;
margin:0 auto;
border:5px solid #aaaa55;
height:200px;
}
.div3{
float:right;
width:50px;
height:100px;
border:5px solid cyan;
}
<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>
Demo also at http://jsfiddle.net/XjC9z/1/
Like this?
HTML:
<div id='container'>
<div id='first'>1</div>
<div id='second'>2</div>
<div id='third'>3</div>
</div>
CSS:
#container{
width: 100px;
margin:0 auto;
}
#first{
border: 1px solid #ff55ff;
}
#second{
border: 1px solid #55ff77;
}
#third{
border: 1px solid #448855;
}
#first,
#second{
width: 50px;
clear:both;
float:left;
}
#third{
clear:none;
float: left;
}
See this fiddle:
http://jsfiddle.net/zaNvR/1/
A simple div grid would do the trick:
http://jsfiddle.net/NUGPv/
<div class="con">
<div class="lft">div 1</div>
<div class="rgt"></div>
</div>
<div>
<div class="lft">div 2</div>
<div class="rgt">div 3</div>
</div>
.con { overflow:hidden; }
.lft { width:100px; height:100px; float:left; }
.rgt { width:100px; height:100px; float:left; }
Simply leave the the top right cell empty.