Css tricks in dreamweaver cc

I have a really simple website, that have 4 links on the left sidebar and the 4 images in the content area.
what i want to do is, when i hover over an image the relevant link fades out also when you hover over a link the relevant image fades out.
any help would be gratefully recieved
Tim

Very easy to do with jQuery.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<style>
nav {
float: left;
width: 230px
nav ul li {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
font-size: 18px;
nav li a {
text-decoration: none;
background-color: #054573;
color: #FFF;
padding: 12px;
line-height: 3em;
border: 1px solid #333;
margin: 6px;
aside {
margin-top: 45px;
width: 500px;
float: left
footer {
clear: left;
display: block;
</style>
</head>
<body>
<nav>
<ul>
<li><a class="one" href="page1.html">Link to page 1</a></li>
<li><a class="two" href="page2.html">Link to page 2</a></li>
<li><a class="three" href="page3.html">Link to page 3</a></li>
</ul>
</nav>
<aside>
<a class="one" href="page1.html">INSERT IMAGE 1 HERE</a>
<a class="two" href="page2.html">INSERT IMAGE 2 HERE</a>
<a class="three" href="page3.html">INSERT IMAGE 3 HERE</a>
</aside>
<footer> <small>© 2013 XYZ Company. All rights reserved</small> </footer>

<script>
$(document).ready(function () {
    $('.one').hover(
    function () {
        $('.one').stop().animate({
            "opacity": "0.5"
        }, "slow");
    function () {
        $('.one').stop().animate({
            "opacity": "1.0"
        }, "slow");
    $('.two').hover(
    function () {
        $('.two').stop().animate({
            "opacity": "0.5"
        }, "slow");
    function () {
        $('.two').stop().animate({
            "opacity": "1.0"
        }, "slow");
    $('.three').hover(
    function () {
        $('.three').stop().animate({
            "opacity": "0.5"
        }, "slow");
    function () {
        $('.three').stop().animate({
            "opacity": "1.0"
        }, "slow");
</script>
</body>
</html>
Nancy O.

Similar Messages

CSS Template in Dreamweaver, cannot make flash(swf) show ???

Hi all,
I'm quite new at using dreamweaver, have been using GoLive
some before and I have got a time consuming problem:
To try to get a hang of CSS page designs I've used the Page
Design (CSS) Halo Right nav that comes with DW8.
I've learnt pretty much how it works BUT, I cannot make a
flash file visible when inserted to the page design ????
It does not show if I insert it to an existing div tag or if
I insert it in a new layer. What am I doing wrong ?
(same goes for images)
Need help quickly.
Thanks!

This is one of the several weird problems with the HALO
layout.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Pasay" <[email protected]> wrote in message
news:eve7b0$s6g$[email protected]..
> OK!,
> will look into that, as I said I'm all new to this,
grateful for all tips.
> I've posted a new Topic : CSS Template in Dreamweaver,
Submeny
> dissapears?
> may be related to the javascript error ?
> //Bosse
>

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

Adobe recommends: New CSS features in Dreamweaver CS5

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Continuing our trip along the CSS highway, our next recommendation is a video by Dremeaver superstar Brian Wood:
New CSS features in Dreamweaver CS5
The video demonstrates some of the most exciting new CSS features in Dreamweaver: new CSS layouts, CSS inspect, and CSS enable/disable.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101
CSS page layout basics

Thanks for the answer this is very useful however I still find that Dreamwever defaults back to writing in CSS, I have to go to the manel every time and switch from CSS style to Inline style which is very irritating. Is there any way to disable writing in CSS all together like their used to be in CS3..in the preferences.
Much appreciated

Css Tabs in Dreamweaver CS4 Workspace bug?/annoyance

Css Tabs in Dreamweaver CS4 Workspace. This is probably more
of an
annoyance than a bug.
When working with CSS, I use multiple CSS files and when I
make a change
to one, I hit save (CTRL S)but it doesn't save the CSS file I
was just
working on. In order to make it save that CSS file, I have to
click on
one of the others and then back to the one I was just working
on and
then hit save.
Kind of annoying, right?
I demand this to be fixed! ;)

Art,
I guess you didn't understand what I meant by "focus". Let me
try to
explain in terms of your recipe -- all you need is a slight
change in
workflow:
> 1. Open page with multiple style sheets applied
> 2. Have split screen
> 3. click on one style sheet and edit it anywhere. After
editing, the
> rounded box will be black and have an asterisk applied
At this point, the style sheet has "focus", so click Ctrl+S
now, before
you click back in Design View (which changes the "focus" back
to the
main document).
FYI, if you're clicking in Design View to update the
rendering, you can
hit F5 to update the main document rendering without giving
it "focus".
> 4. Click back to page in design view.
> 5. Click control save. It doesn't save the style sheet
that is
> highlighted and has an asterisk.
> 6. In order to save you must "save all" or click off
and then on
> to the style sheet.
Hope this helps,
Randy
Art wrote:
> Let me restate the problem so it's clear what is
happening.
>
> 1. Open page with multiple style sheets applied
> 2. Have split screen
> 3. click on one style sheet and edit it anywhere. After
editing, the
> rounded box will be black and have an asterisk applied
> 4. Click back to page in design view.
> 5. Click control save. It doesn't save the style sheet
that is
> highlighted and has an asterisk.
> 6. In order to save you must "save all" or click off and
then on to the
> style sheet.
>
> Perhaps this is more an issue of focus rather than a
function of the
> save command.
>
> Since it's not saving, perhaps Dreamweaver shouldn't be
displaying the
> black rounded box as it is no longer selected when you
click back into
> Design view.
>
> Of course there are ways around this; it's just a little
annoying that
> it's displaying "active" yet it's not.

Uploading css template to dreamweaver

I need to upload some css templates to dreamweaver but can't
figure out how to do it yet.

Huh? Upload CSS templates to DW? You mean you need to add a
CSS-based
template page to your DW site? Is it a *.dwt page? If so just
copy it into
the Templates folder at the root level of the site.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ntnsllc" <[email protected]> wrote in
message
news:gj91bs$j0k$[email protected]..
>I need to upload some css templates to dreamweaver but
can't figure out how
>to do it yet.

How Do I Get CSS Styles In Dreamweaver CC?

How Do I Get CSS Styles In Dreamweaver CC?

You should have something like this in your window:
Just Click on the Plus sign ( + ) and you get the three options: create a new file, attach an existing file or create a style on page (define on page)
Apart from this I won't know because I am basing this from my copy of CS6. I don't have CC version.

Creating CSS Transitions in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create CSS transitions in Dreamweaver CS6.
http://adobe.ly/Iq6zSH

I just try one thing, I place a tooltip like here: http://tv.adobe.com/watch/csinsider-design/muse-trigger-target/
It´s just what I wanted.
thanks and regards

When I try to attach my css style sheet Dreamweaver gives me an error saying that my .css file appears to be an .html file and will not attach. How do I fix this so I can attach my style sheet?

I have built a css style sheet in Dreamweaver. When I try to attach it to my html website, it prompts me that my "css file appears to be an .html file and cannot attach". I've tried removing the /* */ as suggested by other forums, but this has not resolved the issue. I was using css style sheets with no problem 2 days ago. Now I get that error message. How do I fix this so I can attach my style sheet?

What does the code of the CSS file look like?
An external CSS file needs to be written in CSS only (no html tags like <html>, <body>, <head>, etc ).
It also must have a .css file extension, if yours has a .html extension it won't work.

Line CSS Code Crashes Dreamweaver CS4

Steps to reproduce bug:
1. Open dreamweaver, and start a new CSS file
2. Write this code, do not copy paste :
@media print{
#tepe, #rightpanel,
3. While writing the code, Dreamweaver crashes. In some cases, even thought i was able to fully write the code, trying to save or closing Dreamweaver also crashed.
3a. Save this code to a file with notepad and open with dreamweaver. Dreamweaver crashes.
Try it yourself...

Strange, mine crashed instantly.
What I did is write the code in texteditor, saved it as test.css and then opened the file in DW CS4.
Bingo.
K.
(I only have Mac to test it with)
MacBookPro & Mac Pro, both with 10.6.4

Can you stop auto CSS creation in Dreamweaver?

I want to create email newsletters and have found CSS is not
read by a number of email sites (hotmail for one) Can the CSS
writing function be turned off so the size/style tags will be
placed in the copy like the old days? I checked the CSS preferences
but no luck. I would like to avoid writing them by hand. Thanks,
Chris

>I want to create email newsletters and have found CSS is
not read by a
>number
> of email sites (hotmail for one)
My CSS email newsletters look fine in Hotmail. The trick is
to either -
1. Use inline CSS, or
2. Use embedded CSS BELOW the <body> tag.
> Can the CSS writing function be turned off so
> the size/style tags will be placed in the copy like the
old days? I
> checked the
> CSS preferences but no luck.
PREFERENCES | General > Use HTML instead of CSS?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Exador" <[email protected]> wrote in
message
news:enghnl$lbq$[email protected]..
>I want to create email newsletters and have found CSS is
not read by a
>number
> of email sites (hotmail for one) Can the CSS writing
function be turned
> off so
> the size/style tags will be placed in the copy like the
old days? I
> checked the
> CSS preferences but no luck. I would like to avoid
writing them by hand.
> Thanks, Chris
>
>

Css file in dreamweaver configuration folder?

while working with a dreamweaver page im getting messages asking me if I want to save a css file located in my dreamweaver configuration folder.
this is somewhat disconcerting as I have never saved anything to that folder.
Is this issue a problem and if so what can I do to resolve it?
Thank you.

I think you can safely ignore this message. I'm not sure why you are getting it, but it refers to a temporary file, perhaps created when you did a browser preview.

CSS Menu Maker Dreamweaver CS5

Hi folks,
Newb to Dreamweaver CS5 & CSS (yay!) I've read the online tutorials and quite frankly, I'm about ready to smash my head against my desk. This is very confusing. I haven't made any progress with my web site....unless staring at a white screen mocking me is progress.
I got some good feedback from a few users in my first post (this is my 2nd post) for which I'm very greatful btw and figured out that frames aren't the way to go. CSS confused the heck out of me, so I did some research and stumbled upon a website : http://www.cssmenumaker.com
I was able to create & download a horizontal CSS menu that looks very appealing. Problem is, I can't seem to get it to work using Dreamweaver CS5. Perhaps somebody can help me. (God how I hope somebody can help me!)
For starters, I've created a "site" in Dreamweaver CS5. The site in Dreamweaver CS5 connects successfully to my hosting server. The directory structure on my hard drive that holds my files is :
C:\HTML
C:\HTML\images (where I keep any images used for my site)
C:\HTML\menu (this was produced by the CSS menumaker website - has a CSS file in it & an "images" subdirectory within)
Below are the instructions that were included when I unzipped the cssmenumaker's zip file :
INSTALLATION INSTRUCTIONS
1) Upload the "Menu" folder to the root directory of your website.
2) Copy and paste the code below to the desired spot in your site.
<head>
     <link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="menu bubplastic horizontal aqua">
     <ul>
         <li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
         <li><span class="menu_r"><a href="products-services" target="_self"><span class="menu_ar">Products/Services</span></a></span></li>
         <li><span class="menu_r"><a href="faq" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
         <li><span class="menu_r"><a href="contactus" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
     </ul>
     <br class="clearit" />
</div>
NOTE:
1) Open the "sample.html" to view a sample of your menu.DO NOT use this code in your site.
2) If you run into a problem getting your menu to work or have suggestions for the site please Contact Us and let us know. We will try to help as much as possible.
Can somebody walk me through this step by step? I thought it was fairly simple but obviously I'm doing something wrong.

John,
As I mentioned in my first post I've been through the tutorials already. I just can't seem to get this to work. Working off what I told you in my first post, assume you're working with a blank index.html and you enter in the CSS Menu Maker's code to the blank html file.
The HTML code should look like this, should it not ? :
<!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>Untitled</title>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="menu bubplastic horizontal aqua">
    <ul>
        <li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
        <li><span class="menu_r"><a href="products-services" target="_self"><span class="menu_ar">Products/Services</span></a></span></li>
        <li><span class="menu_r"><a href="faq" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
        <li><span class="menu_r"><a href="contactus" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
    </ul>
    <br class="clearit" />
</div>
<body>
</body>
</html>

Attaching a external CSS stylesheet crashes Dreamweaver CC

When I either choose Attach CSS Style Sheet from the Menu: Format > CSS Styles > Attach Stlye Sheet or using the + (symbol) on the the CSS Designer panel for Sources, I get no response or dreamweaver crashes completely. Just wonder if anyone else is experiencing this problem or if anyone has suggestions to why this might be happening?

I tried restoring the preferences and it still doesn't work. When I go to select Attach Existing CSS File from the CSS Designer panel it will not let me click on that option the pop up menu just dissappears and nothing happens. If I try selecting the same option from the Format menu it just crashes Dreamweaver.

CSS display in Dreamweaver vs. IE

The following code in Dreamweaver shows "an example of"
vertically, instead of horizontally as it does in IE. It can be
fixed in Dreamweaver by adding "width: 150px;", but I would like to
see if anyone can help me understand why Dreamweaver isn't
displaying this the same as IE. Thanks, Rob
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Positioning</title>
<style type="text/css">
.big {
font-family: Helvetica, Arial, sans-serif;
font-size: large;
font-weight: bold;
</style>
</head>
<body>
<div style="position: absolute; left: 125px; top: 75px;"
class="big">
This is the first line of text being positioned.
<div style="position: absolute; left: 25px; top:
30px;">
This is <span style="position: relative; left: 10px; top:
30px; width: 150px;">an example of</span> a second line.
</div>
</div>
</body>
</html>

It looks exactly the same to me in DW8, IE6, and FF1.5.0.6.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Rob in AZ" <[email protected]> wrote in
message
news:ec86me$i1i$[email protected]..
> The following code in Dreamweaver shows "an example of"
vertically,
> instead of
> horizontally as it does in IE. It can be fixed in
Dreamweaver by adding
> "width: 150px;", but I would like to see if anyone can
help me understand
> why
> Dreamweaver isn't displaying this the same as IE.
Thanks, Rob
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
> <title>Positioning</title>
> <style type="text/css">
> .big {
> font-family: Helvetica, Arial, sans-serif;
> font-size: large;
> font-weight: bold;
> }
> </style>
> </head>
> <body>
> <div style="position: absolute; left: 125px; top:
75px;" class="big">
> This is the first line of text being positioned.
> <div style="position: absolute; left: 25px; top:
30px;">
> This is <span style="position: relative; left: 10px;
top: 30px;
> width:
> 150px;">an example of</span> a second line.
</div>
> </div>
> </body>
> </html>
>
>
>
>

Css tricks in dreamweaver cc

Similar Messages

Maybe you are looking for