Hello Everyone,
I am creating a new site and would like the following. Please see image for example. I have tried but having difficulties with the upper background and lower background images. The text content part I would like a drop shadow which I can do.
This is what I would like to do.
1. main background colour grey
2. add upper image background on main background,
3. add navigation bar and text content on upper image background with drop shadow on text content part, so the upper image background would be underneath the navigation bar and text content area.
4. add bottom background image on top of text content page.
The problem I am having is to add the navigation and text content on top of the upper image background and to add the bottom image background on top of the navigation and text content area.
I hope i am not confusing anyone but any help would be great.
something similar to this
http://www.adobe.com/products/catalog.html
Notice the page content on top of the background with a drop shadow.
Hello Helen,
there is no choice other than to concern yourself with CSS, sorry. A good start for it is here: http://www.w3schools.com/css/css_intro.asp.
Of course you could have a look first into the source of the quoted page (http://www.adobe.com/products/catalog.html). You will see that the Adobe-folks are working with several css instructions and js scripts. For example:
<link rel="stylesheet" href="http://wwwimages.adobe.com/www.adobe.com/include/style/adobe-light-com pressed.css" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" media="screen,print" href="http://wwwimages.adobe.com/www.adobe.com/include/style/compressed.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.min.css "/>
<script type="text/javascript" src="http://wwwimages.adobe.com/www.adobe.com/include/script/compressed.js" ></script>
<script type="text/javascript" src="http://wwwimages.adobe.com/www.adobe.com/include/script/adobe-store-co mpressed.js"></script>
<script type="text/javascript" src="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.min.js" ></script>
<script type="text/javascript" src="http://wwwimages.adobe.com/www.adobe.com/uber/js/omniture/mbox.js"></s cript>
<script type="text/javascript" src="http://wwwimages.adobe.com/www.adobe.com/include/script/Typekit.js"></ script>
Good luck!
Hans-Günter
You might like to have a look here using FW http://www.webassist.com/free-downloads/tutorials-and-training/css-des igner-for-fireworks/
There is also another tutorial if you use PS http://www.webassist.com/free-downloads/tutorials-and-training/css-des igner-for-photoshop/
In another post you mentioned using FW to create a menu bar. This may also help http://www.webassist.com/free-downloads/tutorials-and-training/css-men us-for-fireworks/
Gramps
No need for images or tables. Simply apply CSS Box-shadow to your CSS division like so.
CSS
#divName {
-webkit-box-shadow: 2px 0px 21px rgba(50, 50, 50, 0.84);
-moz-box-shadow: 2px 0px 21px rgba(50, 50, 50, 0.84);
box-shadow: 2px 0px 21px rgba(50, 50, 50, 0.84);
}
HTML
<div id="divName">
your page content goes here....
</div>
More on CSS Box-Shadows
http://css-tricks.com/snippets/css/css-box-shadow/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
The simplest way is to copy & paste the CSS code I gave you into your external style sheet -- a separate .css file to which all your HTML pages are linked. One style sheet makes it much easier to manage your site.
Linking HTML pages to external CSS file:
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
HTML & CSS tutorials -- http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
North America
Europe, Middle East and Africa
Asia Pacific