Adding background and border with dropshadow to website
Hi all,
I have been working on my first website ever and I am sure I made several mistakes.
I want to improve the look now and would like to add a gradient background (dark blue to light blue). To set the content apart from this I would like to add a white border around it with a dropshadow. I can see how to add the background, but I cannot figure out the border and dropshadow. Can anyone help? Below is the code.
Thank you so much in advance—I am struggeling....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PetsWest Pet Supplies and Dog Training - Home</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="CSS/PW.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #CCC;
body,td,th {
color: #FFF;
font-size: 14px;
</style>
</head>
<body>
<div id="content"> <img src="images/Indexheader.png" width="860" height="200" alt="Indexheader" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="Index.html" title="Home">Home</a> </li>
<li><a href="UnderConstruction.html" class="MenuBarItemSubmenu">Retail Store</a>
<ul>
<li><a href="UnderConstruction.html">Food</a></li>
<li><a href="UnderConstruction.html">Supplements</a></li>
<li><a href="UnderConstruction.html">Health Care</a></li>
<li><a href="UnderConstruction.html">Toys</a></li>
<li><a href="UnderConstruction.html">Supplies</a></li>
<li><a href="UnderConstruction.html">Accessories</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="UnderConstruction.html">Training</a>
<ul>
<li><a href="UnderConstruction.html">Facility</a> </li>
<li><a href="UnderConstruction.html">Classes</a></li>
<li><a href="UnderConstruction.html">Instructors</a></li>
</ul>
</li>
<li><a href="LJBates.html" class="MenuBarItemSubmenu">Rehab Center</a>
<ul>
<li><a href="UnderConstruction.html">Therapy</a></li>
<li><a href="UnderConstruction.html">Conditioning</a></li>
<li><a href="LJBatson.html">L.J. Batson</a></li>
</ul>
</li>
<li><a href="DogWash.html">Dog Wash</a></li>
<li><a href="http://www.my.calendars.net/petswestcal" target="_blank">Events</a> </li>
<li><a href="ContactUs.html">Contact Us</a></li>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="860" height="398" align="left" id="FlashID" title="Indeximages">
<param name="movie" value="Assets/PWIndeximages.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="Assets/PWIndeximages.swf" type="application/x-shockwave-flash" width="860" height="398" align="left">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</ul>
<ul class="store">STORE HOURS: Monday – Thursday 9:00AM – 9:00PM Friday & Saturday 9:00AM – 7:00PM Sunday - Closed</ul>
<p class="PW.css"><img src="images/announcement215x315px.png" alt="Announcementbox" width="215" height="315" align="left" /></p>
<p class="introcopy"><span class="introheader"><span id="introhead">PetsWest takes a proactive approach</span><br />
</span><span class="introcopy"><span class="introcopy">to canine wellness that provides the <font color="#000"><b>nutritional</b></font>, <font color="#000"><b>exercise</b></font> and <font color="#000"><b><br />
treatments</b></font> that best accommodate each dog’s specific needs.<br />
Whether you have an older dog suffering from<br />
geriatric ailments, an injured dog that needs short or long term<br />
therapeutic treatments, or a <font color="#000"><b>performance dog</b></font> whose success<br />
requires staying fit and trim, the Center offers the right<br />
combination of professional advice, hands-on <br />
therapies and nutritional guidance to help you and <br />
your pet reach your goals.</span></span> </p>
<p class="copyrightcopy">Copyright 2011 PetsWest Pet Supplies and Dog Training :: 102 Bearcat Road Aledo, TX :: Tel. 817 441 6881 <br />
ALL RIGHTS RESERVED. ALL TRADEMARKS ACKNOWLEDGED.</span></span></p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
#1 Remove this embedded CSS code from your HTML document(s). You don't need it.
body {
background-color: #CCC;
body,td,th {
color: #FFF;
font-size: 14px;
#2 Open PW.css file and add this to the top:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CADFEB;
/**or insert a background-image using the CSS editor**/
#3 Remove font-family and font-size from all your other CSS selectors. You don't need to duplicate styles on every element.
#4 Replace this:
#content {
position:absolute;
left:199px;
top:10px;
width:860px;
z-index:1;
right: auto;
background-color: #FFF;
text-align: center;
color: #000;
height: auto;
with this:
#content {
width:860px;
margin: 20px auto;
border: 4px solid silver;
background-color: #FFF;
text-align: center;
color: #000;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
#5 Save your PW.css file and upload to server.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Similar Messages
-
Adding colored background and border to the report
Hello again,
May I know how can I add background colour and border to a particular row or column of the output of a report? Thanks a lot!
Regards,
AnyiAre you saying that this does not work?
report zrich_0001.
format color 1.
write:/ '12345', '12346', '12347', at 132 ' '.
format color off.
In my system, it is a solid background color from posistion 1 to 132. The entire line is blue.
Regards,
Rich Heilman -
Page Background and Border Question
Hi All
I am attempting to build my site using some of the techniques employed in the following site- http://www.rshomes.com/index.php.
One of the features I would like to use is the following:
The top and bottom stone border are pieced together and it looks as though some is part of the background and some is not. They seem to merge pretty well into one another.
I created a textured page background in Photoshop 500px x 500px and inserted it as the page background in Dreamweaver cs3. If I add the top border in this image it displays the top border again half way down the page. Repeat x cuts off the rest of my background.
Can anyone explain the proper way of getting this done?
Thanks!
GcIn IE (and Firefox, and probably every browser) you can right click on the web page and select View Source to see the page code. Once you can see the code, you can identify the files that are involves, and can usually enter those file names in the browser url field using the url to view them. For instance, if the web site has a url of:
http://www.someurl.com
and you see in the source code that the css style file is pulled in using:
<link href="CSS/stylesheet.css" rel="stylesheet" type="text/css">
Then you can normally view/acquire that css file by typing...
http://www.someurl.com/CSS/stylesheet.css
into the browser url field.
This applies for just about any file you find references in html code. -
Adding phones and users with bat and LDAP sync
What are the various ways of importing users with phones when the Communications Manager 9.0 is sync'd with LDAP. Also, what method is the easiest and fastest?
For example, I could do the following steps:
Sync CUCM with LDAP to import new users, add phones using bat files, manually update users to associate devices etc
I believe I should also be able to do the above method and use a bat file to update the users to associate devices etc. This method still involves 2 steps and the creation of 2 seperate bat files.
In CUCM version 9 it is possible to have local and LDAP users, so is it possible to add the phones and users using the phones/users tab of the bat file and have them beocme LDAP users?
Thank you,
Danny#1 Remove this embedded CSS code from your HTML document(s). You don't need it.
body {
background-color: #CCC;
body,td,th {
color: #FFF;
font-size: 14px;
#2 Open PW.css file and add this to the top:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CADFEB;
/**or insert a background-image using the CSS editor**/
#3 Remove font-family and font-size from all your other CSS selectors. You don't need to duplicate styles on every element.
#4 Replace this:
#content {
position:absolute;
left:199px;
top:10px;
width:860px;
z-index:1;
right: auto;
background-color: #FFF;
text-align: center;
color: #000;
height: auto;
with this:
#content {
width:860px;
margin: 20px auto;
border: 4px solid silver;
background-color: #FFF;
text-align: center;
color: #000;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
#5 Save your PW.css file and upload to server.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Remove People from Backgrounds and Replace with Solid Grey Backgrd
I have several photos of people with poor backgrounds that I want to replace with a solid medium grey background.
How do I get or make the background.
I assume I use the Quick Selection tool to select the person but I don't have an image with a solid background.Open you picture file
Use one of the selection tools to select the foreground
Go to Layer>new>layer via copy (CTRL+J)
Place a blank layer between the background layer and the layer created in step #3
Go to Edit>fill layer, and in the drop-down for contents select 50% gray. OK it.
Note: In step #5 you can use any color. Set the foreground color chip to the desired color, and fill the layer with the paintbucket tool -
Hughesnet only allows us to use an allotted amount of download. If I use tabs on Firefox, some pages start their bandwidth eating flash yada yada and waste my allotment. I'd like to have Firefox default to NOT loading flash unless I do something to say OK. Adblock plus helps eliminate flash ads, but not page content that is in flash.
https://addons.mozilla.org/en-US/firefox/addon/flashblock/
-
Space between DIV with image and DIV with image background
I have just about finalized the new design on my website. The only issue I am having now is on the gallery page. There is a thin space between a DIV with an image and DIV with an image background. I am using these DIV's to give the illusion of a blue border. If you look at any of the other main pages on the site the space is not there. Any ideas?
http://liquidfirefishing.com/index.php
http://liquidfirefishing.com/gallery/main.php
Here are a couple of screenshots to show exactly what I mean.Hello,
both my "IE8" and my "FF 7.01" show the blue boundary lines. Here my screenshots, left side IE8, right side FF:
Header 1
Header 2
Hans-Günter -
I'm not sure when it began, but now my Macbook Air only shows a black background and a User Name and Password dialog box when I wake it from sleep. It used to show my desktop background blurred with my user name and icon displayed with only a text field for entering my password. I'm currently using Yosemite (OS X 10.10.1) and all updates have been done. Any help or suggestions would be greatly appreciated as I know this isn't a real problem, just an annoyance since I couldn't find how to change it back in the System Preferences.
I just have to point out that after looking at a related post (https://discussions.apple.com/message/22661092#22661092), it brought to memory that my issue most certainly began happening after I added some DoD certificates to the keychain. This obviously has something to do with it, but it still leaves me wondering what actually causes this to happen. :/
-
Is there a setting to make a PDF print with no background and black text?
I made a nice booklet that has colorful blocks in the background and sometimes white text and sometimes black text. We are not going to print it, it is just going to be a PDF on our website. Can I set it up so that it always prints without the backgrounds and makes all the text black?
I just don't want people to have to print huge fields of colr if they end up printing this out on a little ink jet with expensive and finicky cartridges...
BTThere are is no as such specified setting for customer or reader printer, because it depends on the printer setting of customer. However, you can mentioned that, if any one want to print book as black text, follow this setting http://helpx.adobe.com/acrobat/kb/print-black-white-acrobat-reader.html
-
When I go into bookmarks and click on a site, the screen shows what appears to be a compass with a lock overlay, on a black background. At the bottom the address/url are shown. Theses cannot be opened. Other bookmarks have the black background and compass, but no lock. These can be opened by clicking on the compass. What is wrong?
Thanks to the-edmeister and cor-el, for speed of response. I had not inadvertently moved the Bookmarks-Toolbar : I was confronted with the situation right after Firefox 9 had installed and unfolded in front of me. At first, the toolbar area looked reassuringly familiar, but when I started normal work, I discovered the lack of tabs and the only reference I could see to TABS was a tiny button inviting me to group tabs (which was unhelpful to say the least, filling up the screen with tiny unreadable windows). Sure, there were tabs forming, but they were invisible, unless I used the group button. Eventually, I was brave enough to use "reset toolbars" and the tabs came back in the way I want them, but it was a traumatic 2-3 hours out of my life. I kept on "adding a new toolbar" to see if I could make use of it; I kept giving them names, but it is impossible to see where the new tool bar is! (the toolbars don't have a little bit to grab at one end). In my opinion, Firefox should not have allowed the Tab Bar and the Bookmarks Toolbar to become caught up with each other - they have completely different functions. I don't think I would like to play around with "Make a new profile"! I was so desperate that I have already downloaded version 3.6 again, ready to install, for if I was unable to resolve the version 9 problems above.
-
Adding AdSense and Other Script Based Items to iWeb Websites
For all those who are trying to figure out how to add AdSense and other script based content, here is a tutorial on how to do so. You can see this article with graphics and other niceties on my website:
http://keylime.ca/adsense%20on%20iweb.html
For now, here is the text-only version.
The following is a simple step by step how-to for adding script based items to iWeb based websites easily and quickly.
First things first, you need a tool to use for finding and replacing text in numerous files quickly and easily. This one works great, and is free:
http://lonestar.utsa.edu/llee/applescript/simplefindreplace.html
This tutorial will show you how to add AdSense banners--but you could easily add any sort of script based content with the same instructions.
1. Open your iWeb project.
2. Click on the Inspector. Click on the Page properties icon.
3. In the Header Height field, increase it enough to add your AdSense banner. The banners are of various sizes. You should know this value from when you generated your AdSense code.
4. Add a Text item to your page. Make the text item as large as your banner.
5. Add a unique string to your text item, such as mywebsitenamegoogleads. It is vital that the text string be unique and not be anywhere else in the page. The string must be the same in each text item on each page you will be adding AdSense banners to. You can center the text, but no not vertically center it. Vertically centering the text will turn the text item into a PNG file as opposed to a document division!
6. Cmd-Click the text item and drag it into the header. Cmd-Clicking an item allows you to move it into a footer or header.
7. Repeat steps 1 through 6 for each page you will be adding AdSense banners to. Take note: Once you lay out your page header, you can select all of it, copy, and paste it to each page. iWeb remembers its original position, so you don’t have to move it around!
8. Publish your site to a folder. It is against the terms and conditions of .mac to have ads on your .mac account, so you will have to put your site on a regular server.
9. Open Simple Find and Replace.
10. Drag and drop the folder you published your website to into the target field in Simple Find and Replace.
11. Put your unique string from step 5 into the Find field.
12. Put your AdSense code into the Replace field.
13. Click Start Replacing.
14. Put your website online. That’s it!
I hope Apple decides to integrate a tool to make this easier!
Mac OS X (10.4.5)Should be the same process whether you publish to .Mac or any other host. You're dealing with the same files in either case. Just follow the directions and you'll do just fine! Good luck!
James
==> www.DirtDoog.com <==</a>
Place A Virtual Pin On Putt-Putt's GuestMap! -
PDFs printing with black background and white text.
For some reason some of our PDF's have been printing with black backgrounds and white text, even though they appear to be normal on the screen before they are printed. I haven't been able to confirm 100% yet but it appears to only be happening with pdfs that were created from scanned documents.
Can somebody please offer me some suggestions.Absolutely agree with the original poster. I find white text on black background so very very difficult (I changed from using Tweetbot on iOS to Tweetlogix for this very reason) and it physically hurts my eyes to try to read it. I can just about manage with Spotify using white text on a black background on the large screen of my MacBook Pro - and I do mean "just" - but for the smaller screen of my iPhone 5 it is just impossible. Even with a retina screen such as that on the iPhone 5S there is a strange ghosting effect and it gives me a headache to look at it for too long.
This may be something to do with age! I suspect most app developers are youngsters with almost perfect eyesight, but for those of us whose eyesight is less than perfect, this white text on black background really is so very difficult.
I know there is a workaround in setting the iPhone to invert ALL colours (under Accessibility in Settings) but it's a real pain to have to keep altering this setting every time I want to open or close Spotify, and it doesn't look right anyway. iOS7 is supposed to be a light, bright, easy to read OS - sadly this new Spotify app is the opposite of that.
Please would Spotify consider adding a simple light or dark theme option, so that those of us who want it can have our much easier to read light background back again, with grey or black text? It would be a great help to those of us who have eyesight problems.
If not, I may have to cancel my Spotify Premium account and move to Deezer instead, as I mainly use Spotify when out and about in the car, so am using the iOS app a lot.
Thank you for considering this plea!
-
Issue with Visibility Settings for Backgrounds and Layers
I am using Acrobat Pro XI 11.0.10 (Windows) and having an issue with visibility settings for layers and backgrounds. I am attempting to get backgrounds to appear while viewing in Adobe Reader and Acrobat Pro but not be printed and so far have had no success.
When using a background the Appearance Options dialogue has "Show when printing" unchecked, but "Show when displaying on screen" is checked. This results in the background not showing on the screen, and the background will only appear once the box for "Show when printing" is checked. It looks like the option for printing is dictating whether or not the background is able to appear.
Using layers has not worked either. The background layer is set to "Never Prints", but will still show up when printed.
I was wondering if anyone else has run into this and has a solution, or has any recommendations.
Thanks in advance.Hi setrev2012,
How are you adding the backgroud?
The only way I can think to accomplish this is via a watermark.
The basics...
Open PDF in Acrobat. Choose Pages > Watermark > Add Watermark.
Select a jpg or PDF of your background and adjust scaling options as desired.
Then click the Appearance Options.. and uncheck the Show When Printing option.
In this image the PDF is a blank page with the word "Test" on it. The watermark is the stamp and impression (a stock photo jpg).
If you want a solid color background, just create a flat image of the background color for use as the watermark.
If you have already followed the steps and still facing the issue then please share the file with me at [email protected] so that i can have a look.
Regards,
Rave -
How to add a JPanel with label and border line
hi,
I want a Jpanel with label and border line like this.Inside it i need to have components.Is there a resuable component to bring this directly??
Any solution in this regards.???
Label-----------------------------------------------------------
| |
| |
| |
| |
| |
|________________________________________ |[url http://java.sun.com/docs/books/tutorial/uiswing/misc/border.html]How to Use Borders
-
Today I deleted a gmail account using my computer. I also added a new work gmail address. Now I want to sync my phone and tablet with the new email address. I've looked all over and can't find out how to do it.
PegHi there T&P63385!
Look no further! I have the answer for you! You can add a new email account to your android device by following these steps: http://support.verizonwireless.com/clc/devices/knowledge_base.html?id=31401
Now I do want to let you know that your phone has a "main" gmail account. If this "main" gmail account was the one you deleted it may be best that you reset your phone and activate it to your new gmail address.
The reason I recommend doing this is all of your purchased application information is also tied to your gmail.
Ensure your personal information is backed up (contacts, pictures, etc) and follow these steps to Hard Reset your phone:http://support.verizonwireless.com/clc/devices/knowledge_base.html?id=31308
Let me know if you have any other questions!
Thanks,
MelissaM_VZW
Follow us on Twitter @vzwsupport
Maybe you are looking for
-
Error starting managed server weblogic 10.3.5
hi my jdeveloper is 11.1.2.0 and my weblogic is 10.3.5 am having error when trying to start my managed server the error am geting is or at weblogic.jdbc.common.internal.XAConnectionEnvFactory.makeConnection(X AConnectionEnvFactory.java:494)
-
M575 LaserJet Color MFP eprint PROBELM
Hello Everybody, I have the printer M575 Color MFP LaserJET and I have a problem with enable the ePrint on HP Web Services tab. I click the green Enable button but it show me an error: Unable to connect to the site HPConnected.com. The product is not
-
Pop-Up message with OK button in main page
All, Below is my client's requirement.... when ever user login into Oracle EBS, before going to Home Page a pop-message with OK button should display and user must and should click OK button to proceed further... I am planning to to extend the CO (OA
-
Sat L450D - Speaker can't stop alarm sound after i pull out mic & headphone
Today, I try my headphone in the first time. Any expert here can tell me why my speaker can't stop the alarm (VIVIVIVI sound), after i pull out my mircophone and headphone? The sound will stop by itself when I put my microphone back! How to stop that
-
"Embedded profile mismatch" message
CS5 gives me the "Embedded profile mismatch" message every time I open a new file, despite the fact that both camera and Photoshop are set for sRGB. I know how to uncheck the "Ask before opening" box, but don't want to risk a possible mismatch. What