EDIT: Thanks for all the help! Finished table is here: http://jsfiddle.net/MnLkD/
I am trying to get a shadow to appear inbetween the borders on this table:
http://jsfiddle.net/g2fy4/
I'm guessing it might not be possible but thought I'd ask the experts anyway :-P . I have tried setting a border-spacing of 2px, no border, and assigning the drop shadow to the th and td tags but it didn't work.
If anyone has any ideas I would be grateful for the input :-)
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:0;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
What, you mean like this? (scratches head)
http://jsfiddle.net/g2fy4/2/
All I did was change the items that got shadow from table to td and made sure there was border spacing.
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:3px;
}
#content.postagepage td {
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
If you want shadows on the td elements, put it on the td elements!
It sounds like you want to do this?
http://jsfiddle.net/b9chris/sXQvp/
CSS:
div {
width: 100%; height: 100%;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
HTML:
<table>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
</table>
Basically the answer is, you can't make this happen with TD tags alone, but you can wrap the cell contents in a tag like divs and style those instead.
Do you want to achieve something like this:
http://img856.imageshack.us/img856/8865/tableim.jpg
?
My only idea currently is to set few absolute positioned divs in table (but then table cells width and heights should be set), and to add box-shadow to these divs...
Related
everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:
I am trying to remove the sharp edge and make it a square.
I have tried using pseudo-elemnts to achieve this but I have had no luck:
Currently, I am using:
a{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-left-width: 0;
border-radius: 0px;
position: relative;
}
a::before{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-radius: 0px;
position:absolute;
content:'';
}
But this is still giving me the results below. How can I do this successfully?
See if this works for you:
box-shadow: -10px 0 0 0 black;
Just that, no borders.
My text shadow is in the state of Override throughout my HTML / CSS3 Document.
Here are the tags:
html *,
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px (0, 0, 0, 0.3) !important;
}
How to I ensure the Text-Shadow can display properly without being overrided. I cannot locate the override, since the source of override is not documented with Google Chrome Inspection Tool Update Beta CSS/XGS.
Remove html * from your css code it is only reason for override
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px (0, 0, 0,0.3) !important}
Here you are using universal selector(*)...
html *....means target all the elements inside the <html> tag...
...so html * is targeting all the elements, thats why all the elements getting the text-shadow. So better to remove it...
And also your text-shadow value is not valid...you need to use rgba in the second text-shadow and I dont think there is any need of !important rule...Try to avoid it...
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.3);
}
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.3) !important;
}
Replace your code with this Remove html *
I have a div with 0.5 transparency. This acts as a darkening rectangle over a bigger background slider image (an outer div) to make the text more readable over the slider background picture.
<div class="darken-rectangle">
<!-- inner text container divs go here -->
</div>
CSS:
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
}
This works great, however I would like to a few pixel (3px-6px) gradient border for the rectangle which drives the alpha from the outer light to the inner darken.
Unfortunately I can not find how to do this, even does not know is it possible with pure CSS, or do I have to create 4 png images for the 4 "border and arrange the layout?
I think what you want is box-shadow, see jsFiddle
HTML
<div class="darken-rectangle">
Test Text
</div>
CSS
.darken-rectangle {
/* ... */
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
border-radius: 3px;
}
I am creating a full width website. The website appears full width on my computer but when I check it on other computers, the website appears to have free space on both left and right.
How can I make this website full width?
.wrapper_boxed {
width: 1000px;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
One solution that I have read is I redevelop using percentage width.
Just change your main container :-
.wrapper_boxed {
width: 100%;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
You will probably need to go through the elements within wrapper boxed to change any width pixel values to percentages.
Percentage is definitely the easiest way, if you post some code we can look at uaing what you have and extending divs to keep the design and essentially stretch the sides. However anyone would just use:
width: 100%;
so this is driving me crazy. I have two divs, floated left, the bottom one has a drop shadow box shadow, in this JS fiddle http://jsfiddle.net/q79Lg/ the shadow renders correctly, it covers the content, but when I copy literally the exact same thing to a page http://www.klossal.com/portfolio/index_backup2.html the shadow doesn't cover the content in the div above. Why is this happening??
Ultimately I'd like to use it here http://www.klossal.com/portfolio/index_backup5.html but it's just the same issue as listed in the first two sources, but I've taken all the other garbage out.
Thanks so much for helping me.
Try
<div align="center" style="background: #ffffff; position: absolute; bottom: 0px; left: 0px; z-index: 5; border:1px solid red; -webkit-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); -moz-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); width:100%;height:200px;">
for the botttom div, see if that works :)