Drawing AP Divs..In Dreamweaver CS3..

Hi,
Dreamweaver CS3 Question
Ive been trying to draw ap divs on my website and i've been having trouble.
My main issue is when i draw the ap div it disappears after i take my finger off the mouse.
there is no box nor selection handle left in my window.
I've tried going through the preferences and viewing options, but nothing works.
Is there a way to set my preferences back to default?
any suggestions would be greatly appreciated

on a blank page in layout mode,
Thank you. You cannot draw a/p divs in Layout mode. You shouldn't even be in Layout mode anyhow.
In my opinion, there are three serious problems with Layout Mode -
1. Perhaps most importantly, it sits between you and *real* HTML tables,
and fools you into believing that concepts like "layout cell" and
"autostretch" really mean something. They do not. As long as you use
Layout Mode, you'll never learn one of the most important things for new web
developers - how to build solid and reliable tables.
2. Actually, #1 wouldn't be *so* bad, except that the code that is written
by Layout Mode is really poor code. For example, a layout table contains
MANY empty rows of cells. This can contribute to a table's instability.
In addition, if your initial positioning of the table's cells is a bit complex,
Layout Mode will throw in col- and rowspans aplenty as it merges and splits
cells willy-nillly to achieve the pixel-perfect layout you have specified. Again,
this is an extremely poor method for building stable tables, because it allows
changes in one tiny cell's shape (i.e, dimensions) to ripple through the rest
of the table, usually with unexpected and sometimes disastrous consequences.
This is one of the primary reasons for the final result's fragility - read this -
http://apptools.com/rants/spans.php
3. The UI for Layout Mode is beyond confusing - many options that you might
want to use are inaccessible, e.g., inserting another table, or layer onto the page.
I can understand the new user's desire to use this tool to make their life easier,
but the cost is just too heavy in my opinion. Adobe agrees. Layout mode is gone forever beginning with CS4.
To make good tables, keep it simple. Put a table on the page, and begin to
load your content. If you would want a different table layout, instead of
merging or splitting cells, consider stacking tables or nesting simple
tables instead, respectively.
And above all, do not try to build the whole page with a single table!

Similar Messages

In Dreamweaver CC why can i not get any workspace options? Where do I find 'Draw AP div'?

In Dreamweaver CC why can i not get any workspace options? Where do I find 'Draw AP div' or any of my 'designer' tools?

Insertion of APDivs/Layers are deprecated in CC. Historically, APDivs caused many, many problems for people who didn't understand they were not intended to be used as a primary layout tool. Look at FluidGrid Layouts.
http://blogs.adobe.com/dreamweaver/
Nancy O.

Unable to draw AP Div from Insert Panel as described in Tutorial "Classroom: Basic Site Layout and Navigation in Dreamweaver"

I tried to perform the draw AP Div from the Insert Panel as described within the Tutorial "Classroom: Basic Site Layout and Navigation in Dreamweaver" but that option isn't available/visible from my most recent update t Dreamweaver CC. The only thing noticeable is that the instructor is using a Mac version of the software. Help!

CS4 is 6+ years old. A lot has changed in web standards and Dreamweaver since then.
APDivs were never a good or sensible way to make primary layouts. Today, they are downright impossible in Responsive web designs because content in APDivs is removed from the normal document flow. See links below for further details on why APDivs should be avoided.
http://www.apptools.com/examples/pagelayout101.php
http://css-tricks.com/css-beginner-mistakes-1/
If you're going to work with DW CC, you need to find tutorials to match your product version. CS6 is wildly different from CC and CC 2014.
Creating your first web site in DW CC-
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
Nancy O.

Lines around type and other type/text problems in Dreamweaver CS3

Dear Dreamweaver forum:
Good news/bad news,
First the good news…
My thanks to a forum member by the name of Mylenium. With Mylenium's advice I have improved my halo problem by including a black background when I save type in Illustrator CS3 as part of importing it into Dreamweaver CS3.
However, the bad news, is that I’m still having type and text problems.
Problem area 1
Now, in Dreamweaver, I’m getting lines appearing around the type.
I am dragging and dropping the .gif type file into a Dreamweaver Div Tag.
How do I get rid of the lines around the type so that they do not show up in the Safari browser?
(Please see below)
Problem area 2
I cannot drag and drop text from a Word .doc file into a Dreamweaver div tag.
I also cannot copy and paste Word .doc text into a div tag.
How do I include text on my webpage without having to manually type it in?
(Please see below)
Any help would be appreciated. Thanks!
From within Dreamweaver CS3, how do I place text? Dragging and droppign the file does not work.
This is screenshot of what I see so far when I use Safari to test what I have made so far in Dreamweaver CS3.
I get lines around type.........not usually a good thing.........How do I fix it?
The way I created the portfolio type in IllustratorCS3 using the File > Save for Web and Devices. I then imported the resulting .gif file so that it was within my root folder within the Files panel within Dreamweaver CS3.
Am I doing this right?

Hi
The problems you are experiencing with the image text, (why are you using image text, these days?) is probably cause by the image having a border when created in illustrator, or the image size being set incorrectly.
As for the word text if you are using windows, see http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda91 10b1f693f21-7ce6.html.
On the mac it is a little more complex, save your word doc as html, then apply the 'clean up word html files', (see - http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda91 10b1f693f21-7ef5.html) copy the relevant text and mark-up from the word html file, and paste into your html document in the required position.
PZ
www.pziecina.com

Floated element breaks Design view in Dreamweaver CS3

I've tried searching for this issue but haven't found a fix yet and could use some help.
I am redesigning a site and am adding a fluid box to the page. This floated element breaks Design View in Dreamweaver CS3 but appears correctly in the Firefox, Chrome, and IE. I can get the element to appear correctly in Design View after I make minor changes to the page's HTML or CSS, however it always breaks when I save the file.
I've tried many work-arounds including adding an absoutely defined container div, altering the various div sizes, adding <div class="clear"> before and after the element, to no avail.
Ideally, I would like to have page appear correctly in Design View so that others in my lab can easily update the page (and not come to me with repeated questions!).
I've included screen prints of how it looks in Design View and how it look in Chrome.
THANKS! J
Design Time error:
Web Browser - correct view:

I'll try CS4; however my main reason for finding a fix is so that others updating the page (w/ CS3) will be able to do so w/ the WYSIWYG editor that we purchased. We will not be upgrading to CS4 anytime soon either.
Thanks

CMD+ shortcuts not working in Dreamweaver CS3

I'm have a very strange issue with CMD+ keyboard shortcuts
not working in Dreamweaver CS3 on OSX 10.5. These actions are
working from the menus (i.e., copy, cut, paste, etc.). CMD+
shortcuts work in other CS3 apps. I've searched this forum and
googled up and down and found some references to issues like this
with Dreamweaver 8, but nothing for CS3.
Has anyone experienced this problem? I'm completely stumped.
Lawrence

My concern wasn't with the navbar, but thanks for the headsup.
The problem is that the link in the upper left hand corner, Suzie's Story, is a rollover image but it does not reveal the other image when the cursor goes over it.
                        <div id="topTabs1">
   <div align="center"><a href="http://www.google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('suzie','','Images/Suzie's Story Tab_light.jpg',1)"><img src="Images/Suzie's Story Tab_black.jpg" alt="suzie" name="suzie" width="75" height="45" border="0" id="suzie" /></a></div>
         </div>
#topTabs1 {
width: 75px;
height: 45px;
float: left;
background-color: #ffffff;
padding-left: 0px;
padding-right: 0px

Resizing FLV files in Dreamweaver CS3

Hello,
I am adding videos to my websites' "videos main page", and these extra videos are going to be added to the videos currently in the flash player. I have already copied the jpg preview picture files and the flv video files into my website directory. To contain the extra data, I have already added the appropriate number of <li>'s to the index.html file of the videos folder. For each new video I have also added an <img src="...."> line to the images.xml file. The images.xml file has information regarding the id, location etc..of every video in general. It is shown below.
images.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<gallery>
     <album id="videos" title="CBET Videos" description="CBET Video Gallery"
     lgPath="video_gallery/album1/videos/">
          <img src="2g_robotics.flv" id="2g_robotics" vidpreview="video_gallery/album1/videos/2g_robotics_preview.jpg" caption="2G Robotics"/>
          <img src="clearpath.flv" id="clearpath" vidpreview="video_gallery/album1/videos/clearpath_preview.jpg" caption="Clearpath"/>
          <img src="medshare.flv" id="medshare" vidpreview="video_gallery/album1/videos/medshare_preview.jpg" caption="Medshare"/>
          <img src="nalion.flv" id="nalion" vidpreview="video_gallery/album1/videos/nalion_preview.jpg" caption="Nalion"/>
          <img src="mbetcommercial.flv" id="mbetcommercial" vidpreview="video_gallery/album1/videos/mbet_commercial.jpg" caption="MBET Commercial"/>
          <img src="ocecbetcommercial.flv" id="ocecbetcommercial" vidpreview="video_gallery/album1/videos/oce_cbet_commercial.jpg" caption="OCE CBET Commercial"/>
          <img src="bostontrip08.flv" id="bostontrip08" vidpreview="video_gallery/album1/videos/boston_trip_08.jpg" caption="Boston Trip 2008"/>
     </album>
</gallery>
The only issue that I have, is that the videos themselves display in the player at a much smaller size, than the container size. I bet you could fit a three by three array of videos in my flash player. The first four img src lines are the videos that play at the correct size, and fill the flash player container, whereas the last three img src lines (the ones I added) are the videos that do not display at a correct size.
Is there any way that I can resize the flv files so that they fill the container within the flash player in Dreamweaver CS3? I primarily assumed that one can simply change the pixel dimensions (width and height) properties of the flv file itself, but apparently this is an issue regarding formatting in Dreamweaver. Online I found that one can specify pixel dimensions in the images.xml file. Does anybody have any ideas? Its probably an easy thing.
Thanks to everyone for coping with these details, and any help would be appreciated greatly.
kind regards,
Mr.V

Hi
There are a number of ways you may do this, the first would be to use the scale parameter for the flash player content, but the problem you will find is maintaining the aspect ratio and if your flv's are smaller the degradation in the quality when 'enlarging', see - http://kb2.adobe.com/cps/141/tn_14149.html.
The second way would be to use a combination of actionscript and javascript to proportionally 'enlarge' the flv, again the above problems apply.
Finally you could change the size of the flash player to fit your 'new' flv using javascript, but this method would in all probability present layout problems for your user, a small change would be o/k, but the size of change you are talking about would not. The design would have to incorporate a fixed size div for the flash player, and resizing the player would leave a large amount of white space.
It is possible to do this using a liquid layout, but again this would cause problems with page rendering.
PZ

Dreamweaver CS3 to CS4

Can someone tell me how to keep all of my spry settings that
I have created in my web sites using Dreamweaver CS3 and now that I
am upgrading to CS4?
I don't want to have to go into my sites and have to make all
of those corrections since there are a lot of sites that I would
have to make changes too.
Thanks.

> All I want is an easy way to add align="center" to
> the H1 tag only.
Change it in the code.
> How do I
> change it back to how it did it in CS3?
Try selecting the text and using Ctrl-B.
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
==================
"Sawtooth500" <[email protected]> wrote in
message
news:giu8kk$5qt$[email protected]..
> So I'm talking about the properties window, the one
you'd get on the
> bottom of
> your screen abutting to the left edge of your screen. In
CS3 the HTML and
> CSS
> properties could all be viewed at the same time. Now, in
CS4, I have to
> choose
> between the HTML or CSS properties. What drives me even
more nuts, is for
> example say I click on some text in the design view, and
the text is
> formatted
> with H1 tags. In CS3 I could click the center button and
it would
> automatically
> add align="center" to the H1 tag. Now, it seems like it
wants to modify a
> css
> property of the parent div of the given element, in this
case it would be
> an H1
> tag. And in my case, the parent element is in a locked
part of a template,
> and
> I don't want to modify that. All I want is an easy way
to add
> align="center" to
> the H1 tag only. This goes the same, say for something
that I want bolded.
> In
> CS3, I just highlight my text in design view, high the B
bold button, and
> it
> adds
tags around the text. Now, it wants to modify a CSS element. How
> do I
> change it back to how it did it in CS3?
>

Golive 6.0 to Dreamweaver CS3 or CS4

About a year ago I called customer service and asked if I upgraded Golive 6.0 to CS3 the migration kit would work, I actually still have the chat record with customer service where I specifically asked them if I could migrate. I was told yes so my company purchased Dreamweaver CS3. Of course when I tried the gl2dw migration, it didn't work and I opened a support ticket and went back and forth with support for weeks trying resolve the issue. I asked for a trial of golive 9 or cs2 so I could upgrade and they sent me invalid links. Finally after a few weeks I was just basically told too bad we can't help you, offered me a refund if I hadn't installed the software which of course I had. So I have had cs3 for over a year and haven't ever used it. Now I see CS4 is out and it says that you can migrate from golive 6.0. Is that really true? Have they ever fixed it so you can upgrade 6.0 to CS3? I can't even get the upgrade version for CS4 because I used my upgrade on CS3. I have a company website with over 500 web pages I need to convert. I really need to upgrade to DW and soon. My company buys thousands of dollars of software and licenses from adobe every year, we are a non profit agency and I can't keep spending money on things that don't work! This is extremely frustrating. HELP!

Making changes site wide can be accomplished 2 ways but in reality unless you are using a dynamic site that draws its page designs from a central template page.
In retrospect you may want to consider creating a Library item first for anything you may want to change site wide (The first way). Being that you are not there yet you will probably want to use the Edit > Find and Replace from the menu bar (The second way).
Simply open up the file you have changed and another you have not. Next (assuming the option is not right in front of you) on the menu bar: View > Code and Design, making sure you can see both code and Design in both files. Then from the menu bar: Edit > Find and Replace. Copy the code regarding the object that you want to change making sure that you copy any opening and closing tags if appropriate from the unchanged file then paste in into the FIND box. Do the same with the file that you have changed except you will paste that into the REPLACE box also making sure that you have copied the same area.
Make sure Find and Replace Settings are:
Find in: Entire current local site
Search: Source code
Then press the Replace All button.

Centering a flash movie within Dreamweaver cs3 on Y axis

I have published a movie in Flash cs3 which has generated an html document however the Flash movie is not automatically centered I have attempted to centrally align the movie within Dreamweaver cs3 by adding:
<center> after the opening body tag and </center> befor the closing body tag
This method has centered on the X axis but not the Y axis
I would have put in a table or a div tag, but when I open the html doc in Dreamweaver I have no visible repressentation of the Flash movie in the design view as I would have if I had created an html document from scratch and draged the movie onto the page, all I can see is the "get flash" hypertext and some other text. I did actually experiment by creating a div tag and dragged my movie into it but ended up with two movies one sitting on top of the other when I ran it in a browser lol. I'm quite intimdated by code and much prefer to work in the design view (wysiwyg and all that) which is quite restricting.
Any advice for centering on the Y axis would be much apreciated, Thanks in advance, Dave

I don't believe there is code to prevent this from happening
on a client computer. The default is enabled my Microsoft, what
should happen is a yellow bar should appear at the top of the
browser which will allow you view the content.
What might work is to use a program called Zinc by a company
call Multidmedia Limited www.multidmedia.com. Search the site for
samples, one of the samples is a Flash Browser this will run Flash
a browser that you can use. You will need to change the URL a bit
in the Flash code but it's very clear on how to do this.
What this will do is run your web site in a Flash browser I
did a quick test and I did not get any errors. The program will
create an EXE file. I also believe they have a MAC version if you
need one. With a simple "Autorun" call on the CD-ROM you could have
this up and running in not time.
Just be careful of how you call the pages. Since the web site
is not running from a Web server you need to make sure that your
links are local and not Site Root. The best way to test is to
disconnect your computer from your internet and see how it runs.
You want the CD to be self-contained and not have to get content
from the web (your end user may be on a laptop and not connected).
Good Luck

PLEASE HELP - Problem with 2 column fixed template in Dreamweaver CS3

I am trying to create a website using the 2 column fixed, right sidebar, header and footer html template in Dreamweaver CS3. I tried putting a picture in the right side bar as well as with in the main content or left portion of the page, and neither picture is showing up when I view it in any of the browsers I'm using.
I've made some minor changes in colors and sizing, but other than that no other changes. The pic I put in for the header is showing up just fine though.
Any help or advice to solve this issue would be greatly appreciated.
Thanks!!

Here is the base Dreamweaver code including the pic references that I'm trying to show on either side - when the browser opens, it only shows a blank space where the pics should be... let me know what you think. Thanks!!
<!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>Temp Home</title>



<style type="text/css">

</style></head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar1">
    <h3>Sidebar1 Content</h3>
    
    <p>Right Side Bar Content - - -    </p>
    <p>Inserted pic below here</p>
    <p><img src="/images/Syntergy5.jpg" width="123" height="105" /></p>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>

    <p> </p>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    
    <p>Main Content - - </p>
    <p>inserted pic below here:</p>
    <p><img src="/images/Kelly1.jpg" width="285" height="236" /></p>
    <p> </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. </p>
    
    <p>
      
    </p>
</div>
<br class="clearfloat" />
<div id="footer">
    <p>Footer</p>
</div>
</div>
</body>
</html>

Layout and ap div in Dreamweaver CC

where is the layout panel and where is the draw ap div button in Dreamweaver cc?
i hope it's hidden but not been taken away
help please

Gosh, does this take me back in time when I used to have the same reaction to the Validator. I also aired my frustrations in this forum especially when these idiots at the W3 consortium decided that using proprietary properties in an XHTML (Extensible -HTML) document was illegal. Nothing Extensible about that.
And why should I care about the ALT setting? Why should I care if blind people using screen readers cannot follow my document? Why should I care if Google doesn't include the gist of my site?
Now, many moons later and having had decent tutors - like the ones found here (even the bullish ones, Al) - to help me, I am now glad to have put that period behind me. I am a still-learning-webdeveloper and as such I can unequivocally tell you that placing markup before the BODY-tag is one of the worst mistakes one can make, more so when one notices that the said markup has not been closed properly.
Perhaps one does not realise that the BODY element is a wrapper and that the style rules that have been applied to the introduced wrapper can actually be applied to the BODY element. This will do away with the notion of I had to put the centering wrapper div tag called <div id="mainArea"> before the <body> tag.
It is great to read your statement " I'm not a web developer", this shows that you are willing to learn and believe it or not, we are altruistic enough to help you.
To start with, when styling a normal layout, there is no need to use position. The default value for position, static, allow elements to render in order, as they appear in the document flow.
I must admit that I have never come across a document that has had so many AP's and still function to some extent. This case negates the notion that one should not use AP's. But boy, have you made it hard on yourself, just have a look at the styles section. You have had to create a separate element for nearly every section of your document, a mind boggling exercise. Why go to this extent when it is so easy to create the same document with fewer style rules? Why not use classes instead of limiting ID's?
I could go on like this forever, suffice to say, welcome to the fold.

Active X fix in Dreamweaver CS3 is breaking...

Hello All-
I have searched until I am blue in the face and most of the
issues around the Dreamweaver fix for "click to activate" issues in
IE revolve around the end user in this case ME not uploading the
scripts to the site...well I am lucky enough to understand that key
step and have left it as Dreamweaver wants to do it, by installing
in the root of the site in the Scripts folder, I have also moved it
to the same level as the index.html and everywhere in between with
no Avail... In IE after adding the automated scripts Dreamweaver
includes I get a big fat Red X...Anyone else having this issue? I
have updated Dreamweaver CS3 and it on the latest and greatest, all
i want to do is embed the youtube video on a page. Any Ideas?
To get to this I did the following: New html file, grab embed
code from any youttube video, paste, save, close, open file again,
allow dreamweaver to add the scripts and change the embed code,
save, upload including the two scripts, open in IE and view a nice
fat red X...
Please see link below for the example...
Here is the broken
code
Thanks in advance.
John

It ain't gonna work. In your case, you are falling afoul of
the script
itself. Here is what you have -
<div><p>Youttube embed</p><script
type="text/javascript">
AC_AX_RunContent(
'width','425','height','355','src','
http://www.youtube.com/v/bkeycliUjSg&rel=1&border=0','type','application/x-shockwave-flash ','wmode','transparent','movie','http://www.youtube.com/v/bkeycliUjSg&rel=1&border=0'
); //end AC code
Note that the FILENAME for the swf file in that line IS
MISSING THE "SWF".
This is because DW assumes that you are not going to be
linking to a file
with URL variables like you have there
(&rel=1&border=0), and it
automatically inserts the SWF there giving you a bogus link,
e.g.,
http://www.youtube.com/v/bkeycliUjSg&rel=1&border=0.swf
See what I mean?
For something like this, use this method -
http://blog.deconcept.com/swfobject/
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
==================
"Web_deverz" <[email protected]> wrote in
message
news:[email protected]...
> Hello All-
>
> I have searched until I am blue in the face and most of
the issues
> around
> the Dreamweaver fix for "click to activate" issues in IE
revolve around
> the end
> user in this case ME not uploading the scripts to the
site...well I am
> lucky
> enough to understand that key step and have left it as
Dreamweaver wants
> to do
> it, by installing in the root of the site in the Scripts
folder, I have
> also
> moved it to the same level as the index.html and
everywhere in between
> with no
> Avail... In IE after adding the automated scripts
Dreamweaver includes I
> get a
> big fat Red X...Anyone else having this issue? I have
updated Dreamweaver
> CS3
> and it on the latest and greatest, all i want to do is
embed the youtube
> video
> on a page. Any Ideas?
>
> To get to this I did the following: New html file, grab
embed code from
> any
> youttube video, paste, save, close, open file again,
allow dreamweaver to
> add
> the scripts and change the embed code, save, upload
including the two
> scripts,
> open in IE and view a nice fat red X...
>
> Please see link below for the example...
>
http://client.jfwebdev.com/activex/
>
> Thanks in advance.
>
> John
>

Weirdness In Dreamweaver CS3!!

Using Dreamweaver CS3...
Copy and paste this to create a new page. I've got the box shadow effect on the bottom most div firing when I hover over the 'SVG' text link, but I haven't got anything set for this behaviour!?
I've placed the link div off to the left so that you can see for yourself. Otherwise it's placed in the appropriate position for the button.
Anyone got an explanation?
<!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 Document</title>
<style type="text/css">
body,td,th {
          font-family:Geneva, Arial, Helvetica, sans-serif;
          font-size:16px;
a:link{
color:#000;
text-decoration:none;
a:hover{
text-decoration:blink;
a:visited{
color:white;
#svgText {
          position:absolute;
          width:100px;
          height:30px;
          z-index:9;
          left: 124px;
          top: 3px;
          z-index:9;
#svgText:hover {
          text-shadow: 0px 2px 2px #333;
-webkit-text-shadow: 0px 2px 2px #333;
-o-text-shadow: 0px 2px 2px #333;
-ms-text-shadow: 0px 2px 2px #333;
transition-duration: 1000ms;
-moz-transition-duration: 1000ms;
-webkit-transition-duration: 1000ms;
-o-transition-duration:1000ms;
#svgBoxShadow{
          position:absolute;
          width:100px;
          height:30px;
          left:3px;
          top:3px;
          border-radius: 0.4em;
          -moz-border-radius: 0.4em;
          -webkit-border-radius: 0.4em;
          box-shadow:3px 3px 4px #000000;
          z-index: 8;
#svgBk{
          position:absolute;
          width:106px;
          height:36px;
          left:7px;
          top:8px;
          border:1px solid #000000;
          border-radius: 0.4em;
          -moz-border-radius: 0.4em;
          -webkit-border-radius: 0.4em;
          z-index: 7;
#svgBk:hover{
box-shadow:3px 3px 4px #333;
transition-duration: 1000ms;
-moz-transition-duration: 1000ms;
-webkit-transition-duration: 1000ms;
-o-transition-duration:1000ms;
#svgBk{
          border:1px solid #000000;
          transition-duration: 1000ms;
-moz-transition-duration: 1000ms;
-webkit-transition-duration: 1000ms;
-o-transition-duration:1000ms;
.highlight{
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
line-height:30px;
</style>
</head>
<body>
<div id="svgBk">
<svg id="svgBoxShadow">
    <defs>
      <linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#a30909"/>
        <stop offset="1" stop-color="#fcfcfc"/>
      </lineargradient>
    </defs>
    <g>
      <rect id=<"svg_9" height="30" width="100" y="0" x="0" rx="5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="url(#fill)"/>
    </g>
</svg><div class="highlight" id="svgText" ><a href="#next">SVG</a></div>
</div>
</body>
</html>

The box-shadow is on #svgBk and should only fire when hovering over it.
That is the point. While you've separated the text from the box, your text div is still contained within the svgBk div which is the very first div that is holding everything on your page. The hover effect on this div will affect everything within it.
Actually, you dont have to separate it. You can create another CSS ID rule and put both your svgBk and svgBoxshadow rules within it. It will work just fine. IN this case, you can remove the svgBk div container. This way, only the box will have the box-shadow effect. Your text will be unaffected, but will still have the 'blink' effect you've specified for all a tags generically.
I have a solution for your gradient change. Here you go:
Add to CSS:
rect:hover{
    fill: url('#fill2');
Rewrite your svg code:
<svg id="svgBoxShadow">
    <defs>
      <linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#a30909"/>
        <stop offset="1" stop-color="#fcfcfc"/>
      </lineargradient>
      <linearGradient id="fill2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ae9c4f"/>
      <stop offset="1" stop-color="#ffffff"/>
      </linearGradient>
    </defs>
    <g id="test1">
      <rect id="svg_9" height="30" width="100" y="0" x="0" rx="5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="url(#fill)"/>
    </g>
</svg>
I've tested only FF & Chrome. Unsure about IE. Try it though - wont hurt!
Trust this helps.
-ST

Photoshop CS3 to Dreamweaver CS3 CSS question

Hi all,
I am sorry if this is allready dicussed a couple of times.I did a search and just could not find it. When I export a site from Photoshop CS3 to DIV (generate CSS by ID) it is aligned to the left and all DIV's have a specific position on the page. How can I get my site to center in Dreamweaver CS3 without having to adjust al separate DIV's?
For Example: When I export from Photoshop all slices are exported as folowed.
#Table_01 {
position:absolute;
left:auto;
top:0px;
width:832px;
height:562px;
right: auto;
#test-13 {
position:absolute;
left:275px;
top:26px;
width:9px;
height:189px;
#test-14 {
position:absolute;
left:284px;
top:26px;
width:128px;
height:98px;
I know how to make a DIV center (with Margin auto left and right) but I do not know how to center all DIV's at once.
I hope you are willing to help me with this. In case you have more questions let me know.

The answer is to not let Photoshop write either your HTML or your CSS for you. What you show is a disaster waiting to happen, really, and is characteristic of the kind of mess produced by any wizard that writes HTML based on a graphic layout. Use your graphics editors to produce your graphics. Build your page in DW. It's a much better way to go.
I know how to make a DIV center (with Margin auto left and right) but I do not know how to center all DIV's at once.
I hope you are willing to help me with this. In case you have more questions let me know.
Leaving your page with all absolutely positioned elements is really asking for trouble, but here's how to make them all center at once -
Change this -
</head>
to this -
<style type="text/css">
#wrapper { width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. Change as needed */
</style>
</head>
change this -
<body ...>
(the ellipsis represents any other attributes that might be mentioned in the body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.

Drawing AP Divs..In Dreamweaver CS3..

Similar Messages

Maybe you are looking for