I am trying to set shadow effect for a content and i can be able to set it. But i overlays with adjacent element which disturbs the look. Is there any possible way to remove the overlaying effect for specific area(in the red circle in image)? Pleas check the sample image below.
HTML:
<div id="container">
<div id="table1">
<table>
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
<tr><td>CCC</td></tr>
</table>
</div>
<div id="table2" class="Shadow">
<table>
<tr><td>aaa</td><td>eee</td></tr>
<tr><td>bbb</td><td>fff</td></tr>
<tr><td>ccc</td><td>ggg</td></tr>
<tr><td>ddd</td><td>hhh</td></tr>
</table>
</div>
</div>
CSS:
#container {
position: relative;
}
table,td,tr{
border:1px solid black;
}
#table1{
position: absolute;
}
#table2{
position:absolute;
background-color:pink;
margin-left:40px;
}
.Shadow{
-webkit-box-shadow: 0 0 30px 9px #476FCC;
box-shadow: 0 0 30px 9px #476FCC;
}
JS Fiddle link: http://jsfiddle.net/5JYPm/13/
I think the closest you are going to get is stacking the first table over the second, and ensuring you have a background colour on it:
#table1{
position: absolute;
z-index:2;
background-color:#fff;
}
#table2{
position:absolute;
background-color:pink;
margin-left:40px;
z-index:1;
}
http://jsfiddle.net/5JYPm/16/
you need to change the z-indexs of the tables and then add a background-color to table1
Example
Adjust the box-shadow to the right about half the spread?
.Shadow{
box-shadow: 15px 0 30px 0px #476FCC;
}
JSfiddle
<div id="table2" style="z-index:-1;" class="shadow">
Related
The images at the bottom arent't counted in the overflow:hidden attribute in the all class. They overflow and the positioning is very difficult as the border of the all div does not follow the images down.
<div class="all">
<div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div>
<div class="nav">
...
</div>
<h1 class="under"><br/><br/>Image><br/></h1>
<table>
...
</table>
<img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/>
<img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/>
<img id="steam2" src="images/steam.png" alt="Steam"/>
</div>
CSS:
.all{
width:1200px;
margin:auto;
border:5px solid #404040;
overflow:hidden;
}
#reviewI1 {
width:500px;
position:absolute;
top:415px;
left:1010px;
border: 3px solid #fedd58;
}
#reviewI2 {
width:500px;
position:absolute;
top:710px;
left:1010px;
border: 3px solid #fedd58;
}
#steam2 {
width:100px;
left:1210px;
position:absolute;
top:1010px;
}
You need to add a height to the .all class e.g. height: 400px;
Yours images are in absolute position, that mean they are out of the DOM flow.
So the overflow property won't apply in that case. You need to remove absolute position to use it :
#reviewI1 {
width:500px;
top:415px;
border: 3px solid #fedd58;
}
See this fiddle
Remove the "position:absolute" from the images' styling.
Here's my challenge: I have an image of a real property that will be loaded at random in a DIV 200 pixels wide. Accordingly the image will be resized to 200 pixels width and variable height (kept proportional). I have four separate captions that need to go onto the image:
Title
Price
Location
Surface
They need to be positioned respectively on the top center, bottom left, bottom left and bottom right of the picture. So I would have something like:
--------------------------------
| Title |
| |
| |
|Price |
|Location Surface|
--------------------------------
I know that I can overlay text to an image by putting the div in relative position and the text in absolute position, but I only seem to be able to set one position for all text divs below, no matter how many classes I use.
Any advice??
EDIT: Found the solution. For reference, here is the code generated:
<div id="stampRandom">
<img class="stampImg" src="myphoto.jpg">
<div class="title"><span>Title</span></div>
<div class="prix"><span>Location</span><span><br><b>Price</b></span></div>
<div class="surf"><span><b>Surface</span></b></span></div>
</div>
And the CSS:
#stampRandom {
position: relative;
top: 0px;
left: 0px;
width: 200px;
color: #FFF;
font-size: 80%;
}
#stampRandom {
position: relative;
top: 0;
left: 0;
width:200px;
color: #ffffff;
/* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
font-size:80%;
}
#stampRandom img {
top:0px;
left:0px;
width:200px;
}
#stampRandom div {
position: absolute;
width: 200px;
}
#stampRandom div span {
background: rgb(0, 0, 0); /* fallback color */
background: rgba(50, 50, 50, 0.7);
}
.title {
top:2px;
width:100%;
text-align:center;
}
.prix {
bottom:0px;
left:0px;
}
.surf {
bottom:0px;
right:0px;
text-align:right;
}
Thanks to all who helped out! I was blocked big time and my code needed a major redo. Fresh shot in the arm!
http://jsfiddle.net/h51xLdzg/
<style>
.img-cont{position:relative;width:200px;}
.img-cont div{position:absolute; background:red}
.img-title{top:0px;width:100%;text-align:center;}
.img-price{bottom:0px; left:0px;}
.img-surf{bottom:0px; right:0px;text-align:right;}
</style>
<div class="img-cont">
<img src="/MyImage.jpg" width="200"/>
<div class="img-title">
Title
</div>
<div class="img-price">
Price Location
</div>
<div class="img-surf">
Surface
</div>
</div>
Think this will help you
I made a quick example of how you can accomplish this. It's not perfect but it works. If you need some other help or different approach let me know
http://jsfiddle.net/hg9r7/134/
<div class="imageWrapper">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="top">TOP</div>
<div class="bot">BOT</div>
<div class="botleft">BOTLEFT</div>
<div class="botright">BOTRIGHT</div>
</div>
CSS example for bottom and bottom left text:
.bot{
position:absolute;
background:red;
text-align:center;
margin:0 auto;
width:100px;
left:50%;
margin-left:-50px;
bottom:0;
}
.botleft{
position:absolute;
background:red;
text-align:center;
margin:0 auto;
width:100px;
left:0;
bottom:0;
}
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
Here is fiddle example: example
Question1: I have a flowing arrow triangle css:
.wrapper {
background-color: black;
width: 100px;
height: 100px;
}
.downArror {
float: left;
display: inline-block;
border: 15px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
margin: 8px;
}
HTML:
<div class="wrapper"><div class="downArror"></div></div>
Just wondering, is there a way to change the css that make this triangle to a '^' shape?
what I'd like to have is something like this:
Question2:
Is there a way to make a tick like this using code?:
I am currently using √ but, the shape is slightly different
I actually created this effect awhile back for a menu. You can find it here:
http://codepen.io/spikeyty/pen/IFBro
Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!
It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>
I have code as shown in http://jsfiddle.net/Lijo/PJcZQ/. It has tow divs with similar content “GROUP1” and “GROUP2” – only difference being the following
GROUP 1
<div class="secondTextBox">
<select name="ctl00$detailContentPlaceholder$ddlStatus" id="detailContentPlaceholder_ddlStatus" class="dropdownItem" style="width: 120px;">
</select>
</div>
GROUP 2
<div class="secondTextBox">
<input name="ctl00$detailContentPlaceholder$txtVal2" type="text" id="detailContentPlaceholder_txtVal2" style="width: 120px;" />
</div>
CSS
.searchValuesDiv
{
padding: 10px 0 0 20px;
margin:20px 0 20px 0px;
border:1px solid Cyan;
overflow:auto;
}
Group 1 is not behaving as expected – the div containing the button starts from a wrong position.
Note: This issue is not reproducible while seeing from jsFiddle. This can be reproduced when a HTML page is created with that code.
Why is it behaving so? [Can you explain why it was not a problem when I used "Input" element?]
How can we correct it?
You seem to be using floats. If you want the .btnSearchDiv element to start in a “new line”, just add a overflow: hidden; to the .searchLine elements. Without that, those elements are collapsed because they contain floating elements.
There is a missing float in the .searchLine.. I hope it fix your problem
Change the css to this:
.searchLine
{
float:left;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}
or
.searchLine
{
clear:both;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}