|
CSS - Shadow
Thanks for taking the time to read my question.
I have a box in which I have text. I would like to make that box look like it has a shadow to the bottom right. I can't seem to figure out how to do that with my CSS. here is the <div> and my CSS Code: <body> <div id="MainContainer"> <div id="Title">Landmark Feeds - Links to Standard Operating Procedures</div> <hr /> <div class="dtree"> <p id="TreeLinks"><span><a class="QuickLink" href="javascript:%20d.openAll();">Open All Folders</a> <a class="QuickLink" href="javascript:%20d.closeAll();">Close All Folders</a></span></p> <p id="TreeLinks"><span><a class="QuickLink" href="javascript: d.openTo(1, true);">Open Terms</a> <a class="QuickLink" href="javascript: d.openTo(2, true);">Open Payment Schedules</a> <a class="QuickLink" href="javascript: d.openTo(3, true);">Open SOP's</a></span></p> <p><script type="text/javascript" src="JavaScript/dtreeDocWrite.js"></script></p> </div> <hr /> </div> <div id="CR">Last Updated: February 28, 2006</div> </body> Code: #Title {
font-size: 26px;
color: black;
border-width: 3px;
border-color: #d81f03;
border-style: solid;
margin-top: -55px;
margin-left: 0px;
float: left;
background-color: #F5F5F5;
padding: 5px;
}
Thanks, Brad Similar TutorialsHey everyone. First of all, I apologise for imposing on you another question about drop shadows in CSS. I have tried my hardest with what I've been trying to achieve here (including using the resources that gave me the info to use this technique in the first place) but I've hit a brick wall. Allow me to demonstrate: http://www.hrfc.org.uk/test2/index.htm At the top right of the content, there is a box I've created, within which the ultimate user of this site will be able to put screen shots, and then type their captions below. Ideally, I want to be able to have this box (.grabcontainer in the CSS) have a drop shadow. I was able to achieve a drop shadow for the <img> on its own (as can be seen by scrolling further down the page to the image at the bottom)... but I can't think of a way of extending this technique so that it works for my .grabcontainer class. If anyone has any suggestions I'd really appreciate it. I've played with this all day but every attempt normally ruins the careful arrangement of the divs. Thanks for reading Eldoc I've got a div tag that I show and hide on an accessKey press. It is used for special navagation in the site. The div tag has a background color defined in the CSS. The background color only shows up in FF. I know I'm using tables when I don't need to, and this is pretty sloppy right now.. but I'm going to clean it up a bit... I just finished writing a function to keep the div tags above select elements in IE and haven't had a chance to do the cleaning up yet. But I think my problem is probably very simple and is something stupid in my style sheet or some behavior of IE I don't know about or have forgotten about. Code:
<div id="gotoSmall"><input type="image" id="hiddenGoTo" src="<c:out value='${pageContext.request.contextPath}'/>/images/XXXXyyyy/empty.gif" name="hiddenGoTo" accessKey="g" onfocus="showHideGoto('show');"/></div>
<div id="gotoDiv">
<form name="GoToScreen" class="form" onsubmit="javascript:return goToNextScreen(this,'<c:out value='${pageContext.request.contextPath}'/>')" method="post">
<table class="goToTable" id="gotoTable">
<tr>
<td align="right" nowrap="nowrap">
<label class="XXXXGoToLabel" id="goTo">go to</Label>
</td><td>
<input name="screenName" autocomplete="off" class="XXXXGoToInput" id="XXXXGoToInput" type="text" onblur="return toUpper(this);" size="12" height="20px" value="" maxlength="12" tabindex="-1"/>
</td>
<td>
<input type="hidden" name="XXXXActionOrTab" value="Refresh"/>
<input type="hidden" name="useSessionKeys" value="true"/>
<input type="hidden" name="backButtonCheck" value="pageLoad"/>
</td>
</tr><tr>
<td align="center" colspan="3">
<table>
<tr>
<td align="right">
<input type="submit" name="GoTo" value="Goto" onclick="buttonClick(this);"/>
</td><td align="left">
<input type="button" name="cancel" value="Cancel" onclick="showHideGoto('hide')"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
Code:
#gotoDiv{
display: block;
left:450;
top:200;
z-index:10000;
width:204px;
height:54px;
visibility:hidden;
position: absolute;
background-color: grey;
}#gotoSmall{
display: block;
z-index:10000;
width:0px;
height:0px;
position: absolute;
}
.goToTable{
width:200px;
height:50px;
background-color: #e0dfe3;
border: 1px solid black;
border-style: groove;
border-spacing: 0px;
border-collapse: collapse;
}
Not working in mozilla This does not render well in Mozilla Firefox, but is okay in IE. Please Help Us........ Hey guys I'm new here, so I apologise if I do something wrong or write something! Anyway, I have a small query regarding CSS on my website. It is valid CSS before you ask and th eproblem is - I have a shadow which is meant to appear on my website and in IE6 it does not. It is an image that is a height of 2 and then i want it to be height 100% so it fill sup the container it is in. So, border-left and border-right are in the container 'page' and do not show up (but they do in opera, firefox, safari, ie7 and netscape) Another problem in IE6, is the 100% width issue, anyone know how to fix this too? (all the widths that are 100% on the page, i tried to fix it in the IE6 fixes but it didnt work) Any ideas? The code is below Code: #header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-image: url(images/headerbg.gif);
background-repeat:repeat-x;
height: 128px;
z-index: 1;
}
#logo {
position:relative;
width:231px;
height:94px;
margin-left: auto;
margin-right: auto;
background-image: url(images/logo.jpg);
}
#menuspacer {
position: absolute;
top:110px;
left: 0px;
height: 41px;
width: 100%;
z-index: 2;
border-bottom: 1px solid #FF8000;
}
#menubg {
position:relative;
top:116px;
height: 25px;
width: 500px;
margin-right: auto;
margin-left: auto;
z-index: 3;
border-left: 1px solid #FF8000;
border-right: 1px solid #FF8000;
border-bottom: 1px solid #FF8000;
background-color:#FFFFFF;
}
#menufakeborder {
position:relative;
top:89px;
height: 20px;
width: 500px;
margin-right: auto;
margin-left: auto;
z-index: 4;
border-left: 1px solid #ffcb9d;
border-right: 1px solid #ffcb9d;
}
#menucontainer {
position:relative;
top:0px;
height: 23px;
width: 500px;
margin-right: 0px;
margin-left: 0;
z-index: 5;
}
#menu li
{
display: inline;
list-style-type: none;
padding-right: 9px;
margin-left: auto;
margin-right: auto;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color: #550000;
text-decoration: none;
text-align:center;
z-index:6;
background-color:#FFFFFF;
}
#photobg {
position:absolute;
top: 152px;
left: 0px;
width:100%;
height: 161px;
background-image:url(images/horsebg.gif);
background-repeat:repeat-x;
z-index:2;
}
#horse {
position: relative;
top: 91px;
margin-left: auto;
margin-right: auto;
background-image:url(images/horse2.jpg);
width:1035px;
height: 161px;
z-index:2;
}
#border-right {
position:absolute;
top: 0px;
right: 137px;
width:22px;
height:97%;
background-image:url(images/border-right.gif);
background-repeat:repeat-y;
z-index:2324235;
background-color:#003366;
}
#border-left {
position:absolute;
top: 0px;
left: 137px;
width:20px;
height:97%;
background-image:url(images/border-left.gif);
background-repeat:repeat-y;
z-index:512;
}
#border-left-end {
position:absolute;
bottom: -18px;
left: 139px;
width:18px;
height:58px;
background-image:url(images/border-left-end.gif);
z-index:1;
}
#border-right-end {
position:absolute;
bottom: -18px;
right: 141px;
width:18px;
height:58px;
background-image:url(images/border-right-end.gif);
z-index:1;
}
#horse-tail {
position:absolute;
top: 161px;
left: 63px;
width:94px;
height:61px;
background-image:url(images/horsetail.gif);
z-index:1;
}
#footer {
position:absolute;
bottom: -175px;
width:100%;
height:22px;
background-image:url(images/footerbg.gif);
background-repeat:repeat-x;
left: 0px;
border-top: 1px solid #FF8000;
z-index:0;
}
#footer-text {
position:relative;
bottom: 3px;
width:420px;
height:22px;
margin:0 auto;
z-index:2;
border-right: 1px solid #FF8000;
border-bottom: 1px solid #FF8000;
border-left: 1px solid #FF8000;
background-color:#FFFFFF;
}
#page {
position: relative;
top: 0px;
left:0px;
margin-left: auto;
margin-right: auto;
height: auto;
width: 1035px;
z-index: 0;
}
and the fixes for IE at present: Code: #header {
width: 101.5%;
left:0px;
}
#photobg {
width: 101.5%;
left:0px;
}
#menuspacer {
width: 101.5%;
left:0px;
}
#menu
{
list-style-type: none;
margin-right: auto;
width: 498px;
margin:auto auto;
padding:0px 0;
}
#menu li {
display: inline;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
#footer {
width: 101.5%;
left:0px;
}
#border-right {
right: 136px;
}
and the HTML; Code: <div id="header"> <div id="logo"></div> </div> <div id="menuspacer"></div> <div id="menubg"> <!--[if ! IE 6]><div id="menucontainer"><![endif]--> <!--[if IE 6]><div id="menucontainer" align="center"><![endif]--> <ul id="menu" align="center"> menu items </ul> </div> </div> <div id="menufakeborder"></div> <div id="photobg"></div> <div id="horse"> <div id="horse-tail"></div> </div> <div id="page"> <div id="border-right"></div> <div id="border-right-end"></div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> content <p> </p> </div> <p> </p> <p> </p> <div id="border-left"></div> <div id="border-left-end"></div> </div> <div id="footer"> <div id="footer-text" align="center"><img src="images/footer.jpg" /></div> </div> Thanks so much and looking forward to a reply soon!! Hello, I am wanting to add a shadow to both sides of the container box i have for my css site layout. Is this possible. I was using border-left and border right applying the border settings but i would like to have a more of a shadow result. Can anyone help me with this please? Many thanks in advance. Hi: I'm trying to create text with a drop-shadow without having to resort to an image. I have found the "shadow" command for CSS and have used it as such: Code: p.title_drop_shadow_yellow {
margin:0px auto;
font-family: Biondi, Serif;
text-transform: capitalize;
font-variant: small-caps;
width:650px;
filter:shadow;
color:#FBDE80;
font-size:250%;
}
This gives the desired effect in MS Internet Explorer (granted the color choice needs some work) but it gives no effect at all in firefox. Does anyone know how to make this work on other browsers? Is there another way to get a drop-shadow? Thanks. Hi guys I've seen a few websites that use a fixed width column in the middle of the screen that appear to cast a shadow over the background. I want to achieve that but I can't figure out how. The central div is 800px wide so I tried creating a very wide but short background image with this image on but I can't position it bang in the middle where I need it (the image is 2400x8px and 1.46KB) Can anyone help? Either with the positioning of this image or with a better solution? Cheers guys Im creating a training log for use by myself and to teach me ruby on rails but Im running into trouble coding the css for the interface. My content box has a significant shadow with rounded corners and Im not sure what the best practice would be to code this. Im running into trouble because when I put the top background piece in it pushes the content down to far while making the transition of the drop shadow from the rounded corner to the edge. I want the content to be 10 px from the edge of the rounded box but in order to get the shading and corners right I need to have a large slice of the top and bottom of the background pushing the content more than 10 px down. Ive tried negative margins but that just brings my repeater background higher up covering the corners. Please let me know if there is a better way in which I can have my content in the right place. thanks in advance! G I guess I cant post a link to a screenshot so I hope I described it well enough... I suspect that the solution to this problem really involves a more thorough analysis of my code than is fair to inflict upon this audience, but just in case there's something obvious I've overlooked... I've incorporated a lightbox into a site I'm building at www.charlescarey.co.uk/works.php When clicking on thumbnails to activate the lightbox, a 'shadow overlay' is supposed to 'grey out' the rest of the page, but it doesn't work; it only greys out a small area to the left. What am I doing wrong? Any help appreciated. Hi, I am new to css codes , so please help me with my problems if u can. I want to add a shadow to my border from all sides to my image . Hi all, I have searched all over and can't seem to find an answer. I am looking for a template or tutorial on how to build a center content area with a drop shadow on top of a gradient background. An exact example would be: www.fatwallet.com points2shop.com Thanks for any guidance! So, I'm trying to find out if there's an easy way to create a shadow around a border. Essentially, I've got a white background div, with an inner div that takes up part of the white. The inner div has a gray background, and I want to somehow give it the impression of being raised from the white. I couldn't find too much searching through google.. then again, not sure what exactly I need to search for in google. Any help would be greatly appreciated. Thanks Hello am trying to add a black drop shadow to a text whose color is red, how can i proceed with this in css? The text in question is in fact between <h1> tags where the color has been modified to red, but now i want to add a drop shadow in that text using css Hi there I am busy making a drop shadow for a div on my site. Works great in everything except IE (well there's a surprise). What I would like to have is a shadow that emanates from a light source directly above the element (figuratively speaking). The shadow will in other words extend in all directions (or ideally to the left, right and bottom, but not the top) from underneath the div. I can't seem to get the spread right in IE. It seems that in IE I can only have the shadow extend in one direction. Here is what it looks like in Chrome, Firefox and Safari (what I want it to loo like) And this is what I have managed to do for IE 7 & 8 And here is the code: Code: #myDiv{-moz-box-shadow: 0px 10px 33px #000; -webkit-box-shadow: 0px 10px 33px #000; box-shadow: 0px 10px 33px #000; /* For IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#000000');}
I have been considering using three different elements each with it's own shadow going in different directions. This means a lot of tweaking to only display these elements in IE, and just seems messy in general. Does anyone have any ideas on how I can solve this in a simpler way? Any advice would be much appreciated Just one of those educational "How Do They Do that?" Questions... Here is my site...(NOT a real business...just a project) My Projekt I was wondering how those drop shadows around the body "frame" are created like the following site: This Site I've looked under different threads, viewed hundreds of lines of page source code and search engine results to no avail. I did find ONE article stating there is a conflict in FF/Netscape using CSS to render these drop shadows correctly. Is there a cross-platform (browser) friendly way to create these drop shadows utilizing my friend, CSS; without having to use 200 1 x 1 px images? Thanks for helping me learn (in advance)...(bows gracefully) PWD I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!) I want to recreate the shadow on the sides of the main container of this blog the url is blocked just google robin cornett and then find the style sheets How do I do that? The blog has two style sheets My style sheet is at annieagarwal.com/blog/wp-content/themes/tofurious/style.css I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow. Hi, What would be the best way to create a hover effect as seen on the "Get Started" button he http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056 Thanks! I want to have a shadow around the content of my website, but the problem is that the header has a semi-transparent image and so the shadow continues until the top of the page while I want it to stop at the blue header. How can I accomplish this? Screenshot: http://www.yannickv.be/screenshot_massageforum.png My HTML: Code: <div id="wrapper"> <div id="shadow"> <div id="splash" class="container"> <img src="header.png" width="1000" alt="header" /> </div> <div id="menu_up" class="container"> <div id="menu_up_content"> Here comes the horizontal menu... </div> </div> <div id="page2" class="container"> <div id="panel_left"> <div id="fotodiv"> <img src="massagefoto.jpg" width="160px"> </div> </div> <!-- end #panel_left --> <div id="panel_right"> <div id="page" class="container"> <div id="content"> <div class="post"> Here comes the actual content... </div> <div style="clear: both;"> </div> </div> <!-- end #content --> <div id="sidebar"> <ul> <li> <div style="clear: both;"> </div> </li> <li> <ul> Here comes the navigation menu... </ul> </li> </ul> </div> <div id="cleardiv" style="clear: both;"> </div> </div> <!-- end #page --> <div id="footer"> Here comes the footer... </div> </div> <!-- end #panel_right --> <div id="cleardiv" style="clear: both;"> </div> </div> <!-- end #page2 --> </div> <!-- end #shadow --> </div> <!-- end #wrapper --> <div id="footer"> </div> My CSS (stripped down to the essentials): Code: #wrapper {
margin: 0 0 auto auto;
padding: 0;
}
#shadow {
width: 1000px;
margin: 0 auto;
-moz-box-shadow: 3px 3px 30px #000;
-webkit-box-shadow: 3px 3px 30px #000;
box-shadow: 3px 3px 30px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Hello, Quick Q: How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples): http://urlgreyhot.com/personal/ http://www.fiftyfoureleven.com/sandbox/weblog/ I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect. Can someone point me to a nice tutorial? I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code. Anyone feel like sharing techniques? Thanks in advance! Cheers M |
|||||||