DW CS3: Template & CSS Rules problems

Dreamweaver CS3 Templates and CSS Rules.
I've built a basic html page with a header, navigation links and main content area, then saved this as a template with the content area as the edit region.
When I create new html pages from this template I want to insert Divs in the edit region for each new page, which I can successfully do, but for some reason Dreamweaver is not allowing me to create new CSS Rules for each new Div? So I'm not able to control position, text layout, colours etc for the new content. So my question is how do I do this?
I got around this with the current website by creating the template with virtually all of the content for the entire website firstly, then deleting as necessary for each page, which I know is the wrong way to build html site pages from a template!
I wonder if someone could please point me in the right direction to get me back on track? Any pointers would be very much appreciated.
Thanks in advance.

Yes, there is a meta tag at the start of the CSS rules. Here's a copy and paste of the code generated in DW CS3. Template was created from a html doc...
<!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">

</style>
</head>

Similar Messages

CS3 Templates - css disappears in design view

In DW CS3, I've noticed that after I've been working with
templates for a while, often with several templates open
simultaneously, the style rendering suddenly disappears in design
view, and I see only the unformatted text on the screen. If I close
DW and restart, the pages render correctly, but after 15 min. or
so, the style problem returns. Anyone else run into this?

Wait - is this about FLASH or CSS? (see your subject line).
Anyhow - the solution posted here 3 or 4 times a day would be
to make the
links to the Flash in the Template page be ROOT relative
links, i.e., change
this -
<script type="text/javascript">
AC_FL_RunContent(
'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','860','height','31','src','../news_alert','quality','high','pluginspage','http://www.a dobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../news_ alert'
); //end AC code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="860" height="31">
<param name="movie" value="../news_alert.swf" />
<param name="quality" value="high" />
<embed src="../news_alert.swf" quality="high"
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="860"
height="31"></embed>
</object>
</noscript></div>
to this -
<script type="text/javascript">
AC_FL_RunContent(
'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','860','height','31','src','/news_alert','quality','high','pluginspage','http://www.ado be.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','/news_aler t'
); //end AC code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="860" height="31">
<param name="movie" value="/news_alert.swf" />
<param name="quality" value="high" />
<embed src="/news_alert.swf" quality="high"
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="860"
height="31"></embed>
</object>
</noscript></div>
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
==================
"pluto_nash" <[email protected]> wrote in
message
news:[email protected]...
> Here are links to the page with little bit of
explanation:
> Please use IE to view all links
>
> View this page (master template for LG site) using.
Flash works fine
>
http://www.resilire.com/client_projects/LG/templates/master.dwt
>
> View the child page (child page of the master template
for the LG site)
> the
> flash disappears:
>
http://www.resilire.com/client_projects/LG/index.html
>
> Another Example:
> View the master template for the flashy site (flash
works fine)
>
http://www.resilire.com/client_projects/flashy/templates/master.dwt
>
> View the child page of this template for the flashy site
( flash does not
> work)
>
http://www.resilire.com/client_projects/flashy/Untitled-3.html
>

Problem inserting Flash video into DW CS3 template

I would like to insert some flash video into an editable
region inside a DW CS3 template. The template I am using seems to
work for literally hundreds of other pages I have made (none of
which, incidentally, have any media of any kind in them).
I have created the template and then an editable region and
now want to insert the flash video in that editable region. All
goes well until I hit the OK button. then I get this error--Making
this change would require changing code that is locked by a
template or translator The change will be discarded.
Can anyone suggest how I might over come this error??
Thx.
Jane

The problem is the detection option in the video insertion
dialog. If you
disable that option, you will not get the error.
This is a problem because the detection routine requires a
modification to
the <body> tag (insertion of an onload event) which you
cannot easily do in
a template child page.
If you really must have the detection, then you can copy and
past the load
call from a dummy (non-templated) page on which you have also
done the same
insertion. Post back with that page's body tag code, and I'll
show you
how....
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
==================
"Jane Smith 2300" <[email protected]> wrote
in message
news:fehcup$e6u$[email protected]..
> Further to my post before--The .htm that I am trying to
insert the Flash
> video
> (converted an AVI file using Flash video encoder) was
built from a .dwt.
>
> The template page has several editable regions in it.
There is also CSS.
> formatting the document. I am trying to insert the Flash
video into one
> of the
> editable regions.
>
> I have no problem installing the video in a page not
built with a template
> or
> without css..
>
> Thanks for any help you can provide.
>
> jane
>

CS3 DW, CSS templates, Spry widgets

Hello--I'd appreciate any comments/advice. I created a new
website using CS3 templates with CSS that came with the application
and used the Spry widgets, horizontal navibar and tabbed panels.
The site loads in all of the browsers fine; but, it sometimes does
not allow movement from one navibutton to the next...like the
navibar gets stuck on the previous button and/or the browser
crashes (IE). Any thoughts? Thanks!

Post a link to one of these pages, please.
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
==================
"ARCCHARI" <[email protected]> wrote in
message
news:glas3n$81l$[email protected]..
> Hello--I'd appreciate any comments/advice. I created a
new website using
> CS3
> templates with CSS that came with the application and
used the Spry
> widgets,
> horizontal navibar and tabbed panels. The site loads in
all of the
> browsers
> fine; but, it sometimes does not allow movement from one
navibutton to the
> next...like the navibar gets stuck on the previous
button and/or the
> browser
> crashes (IE). Any thoughts? Thanks!
>

Dreamweaver css rules and bc templates for viewing phones, tablets & desktops

How do I connect css rules for phones, tablets and desktops to work with Business Catalyst for all viewing on all 3

I've never used BC myself. But I would imagine it's the same for any project you develop in Dreamweaver. Do you have 3 external CSS files yet? Are you using Media Queries in the <head> of your documents?
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

CSS Float Problem

Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!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>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
    <div id="toporange_bg">login</div>
</div>
   <div id="wrapperfix_top_grey">
    <div id="top_grey_content_wrapper">
      <div id="big_logo"></div>
      <div id="welcome_user">Welcome "username here"</div>
    </div>
</div>
</div>
    <div id="main_content">
      <p>
        
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
    <div id="footer_container">
      <div id="footer">
        <div id="footer_left">Footer Left</div>
        <div id="footer_centre">Footer Centre</div>
      <div id="footer_right">Footer Right</div></div>
    </div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;

I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm

How do you save css rules created in web inspector?

Being a web developer, I usually use Firebug on Firefox to test CSS when I'm developing a website. Ever since I got my new iMac, I've really grown to love Safari. I like the Web Inspector but I cannot seem to find a way to copy any of the CSS rules I create for testing. Is there an effective way to create CSS rules and copy the whole CSS rule (property + declarations) so I can paste them somewhere else?

You can import and replace any styles you want from other documents, but templates are templates. That is what they are for.
Styles are document specific for a reason. Imagine the fun and games if the styles in one document changed the behavior of same name style in other unopened documents. You would be chasing your tail forever.
Someone would send you a file and it would inexplicably change layout and appearance just because your styles didn't match.
Peter

How can I view/edit the CSS rules that apply to an Order Registration Layout ?

*Note: I am new to web design and I did not create the site that I am working on. I am also very VERY clumsy with CSS at the moment *
I have just begun using Dreamweaver to work on a Business Catalyst site. I am attempting to edit the CSS of the layout for the Order Registration Form. The CSS is applied from the site-wide template that is assigned to the Order Registration Layout. When viewing the layout in Dreamweaver, it does not display any CSS info for the page. However, when viewing the live page for the Order Registration, it is clear that CSS is adversely affecting the layout.
Is there a way to link the css rules from the site-wide template to the Order Registration Layout? Or should I just add a new CSS rule directly to the Order Registration Layout (possibly overriding the site-wide template's CSS)?
Thanks!
Nate

I've used Firebug as well as the Webkit developer tools in Chrome and Safari which have surpassed Firebug in my opinion. But they all suffer from the fact that the changes you make in them have to later be applied to your code which means you have to take the extra steps of trying to remember what all changes you made in Firebug and copying and pasting them back into your files. Whereas in Dreamweaver you can Inspect, make changes directly to the code in your file, and you're done. Not happy with the last few changes? Undo. Want to start completely over? File > Revert.
Dreamweaver has excellent tools for determining what css is being applied to an element and by what means. And it's a more streamlined and direct workflow where you work directly in your code. I still use Firebug and the others from time to time though. But only for very basic "spur of the moment" testing. And usually only when I don't have immediate access to the raw files.

Is there a way to find out which CSS rules are being used by the different html files?

Is there a way in Dreamweaver CS3 to find out which CSS rules are being used by the different html files, sitewide?
Thanks - Dave

Firefox add-on "Web Developer Toolbar" is a must have. Information > Display Div & Class details.
https://addons.mozilla.org/en-US/firefox/addon/60
Another handy Firefox Add-on to add to your tool chest is called "Dust-Me Selectors."
http://www.sitepoint.com/dustmeselectors/
"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.
You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Disabling a CSS rule in the Page Inspector deletes it

I have been using the Firefox Page Inspector lately to see how it compares to Firebug. I noticed that if you disable a CSS rule by unchecking the checkbox next to it, it is still shown in the inspector, so you can check the box again and reenable it. However, if I click some other element, and then come back to the previous one, I found that the CSS rule seems to have been deleted entirely i.e. there is no checkbox for me to check to reenable that rule.
This is a pretty major problem for me, as Firebug and Chrome's inspector both remember rules you have disabled and give you the options of reenabling them again later, even if you click a different element. Is it a problem with my particular installation of firefox, or is it just a bug with the inspector?

I've seen that too.<br />
What is happening that deleting and adding rules rules is the same as editing the style sheet via the style editor and changes that you make are actually edits in the style sheet file.<br />
I agree that it would be better to comment out rules so you could at least enable them by editing the file rather than removing the rule completely.

Need some help using CSS Rules and Positioning Image Place Holders

Evening all,
I need to get this done by tomorrow so some speedy help would be very much appreicated!
I'm doing a website for an IT company, and as you may/may not know, support for XP and Office 2003 is dropped tomorrow - they want a button in the header of their site which basically says 'click here for upgrade advice' and when you click on it you're taken to a page telling you the benefits of upgrading. They want it to look like the mock up below:
I've had a right old job even getting the button (it's in PNG format) to go above the BrownTech logo. I inserted a placeholder, linked it to the PNG file, and then I made a custom CSS rule/class called '.header_fltrt' to put the image in and position it in that place, directly above the BrownTech logo.
To get the upgrade button in the desired position, here are the 'Box' CSS properties I used for the .header_fltrt CSS rule.
It's worth noting that the dimensions for the header itself are 960x235px, and the BrownTech logo is the background image for the header class (and is 960x235 in dimensions).
The problem I am having is that when I view the page in Design Mode in Dreamweaver, it looks fine, but when I view it in Live View or in a web browser, it looks like this:
As you can see, the upgrade button is not even visible!
Furthermore, when I go back into design mode on Dw, when I click on the upgrade button, I don't get any placeholder properties like I do when I click on green logo in the top left (which by the way is just a link back to the index page).
I'm not sure why this is but I cannot find any way to resolve it. I've even tried putting the BrownTech logo on a transparent background thinking that the block white background may be covering the upgrade button, but that's not the case.
Sorry if I haven't explained it very clearly. Hopefully you can see my problem.
Any help in etting the upgrade button to preview in the correct place would be very much appreciated!

Try this in place of what you have now.
.header {
    background-color: #FFFFFF;
    min-height: 335px; /**adjust as needed**/
    width: 960px;
    background: url(../assets/banner2.png) no-repeat;
.header_fltrt {
/**no floats or positioning required**/
    width: 552px;
Nancy O.

Is there anyway to lock CSS rules? What's happening in design view?

Hi,
I have no idea what I've done, but I've accidentally deleted some CSS rules. Now my design view shows almost a random pattern, yet most things seem to still be working when I view it in a browser.
So,
Is there a way to lock CSS rules so that you don't accidentally loose them? Is there a way to toggle them on and off? Why does my design view suddenly look all whacked out?
The jpg shows my design view and here is the link to the page.
http://test.taffyproductions.com/reservations.htm

You have an id set on one of the divs, but there is no rule for that ID selector:
<div id="sidebar2-1"><img src="_images/sidebar2.jpg" alt="sidebar2" width="180" height="479" /></div>
Change the id to sidebar2 and see what happens. The page should fall back into place correctly.
There is no way to 'lock' in styles, you just need to be careful on editing the style rules as you go
You could always keep a backup copy of a stylesheet that works correctly and if you then want to play around with the rules, do so, but knowing that you have a backup copy if you need it.
I'd also take a look at the naming convention you use for file names. I'd not start a file name or folder with and underscore... some browsers may choke. always better off starting a name with a letter, no characters, or numerals etc.,to be on the safe side.
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

"change" css rule of a label

Hi,
how can I change the css rule of a label?
My problem is: I type some text, add a link to it and so I get a css rule automatic. But I don't want it. And if I change the rule properties, then all the other links change. I only want to change this specific text.
So how can I set the rule of this label?

Try this:
#header a {text-decoration:none}
#header a:link {color:red}     /**unvisited**/
#header a:visited {color:gray} /**visited**/
#header a:hover,               /**on mouse over**/
#header a:active,              /**on click**/
#header a:focus                /**on tab key**/
    {text-decoration:underline}
#footer a {text-decoration:none; background: #000}
#footer a:link {color:white}
#footer a:visited {color:yellow}
#footer a:hover,
#footer a:active,
#footer a:focus
    {text-decoration:underline}
HTML:
<div id="header">
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
</div>
<div id="footer">
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
</div>
For more:
[useless link removed]

Firefox ignores CSS rules I have set

So, if you look at my site:
http://leaveyourdailyhell.com
In, say, Chrome and Firefox, you will see vastly different things. In Chrome, it looks as I intended; namely, the strip of WordPress custom-loop posts on the front page and at the top of every "single post" has properly-sized, left-floated thumbnails. In other words, it obeys the CSS rules I have set. (And CSS copy I have, for the record, W3C validated -- it came back perfect.)
In Firefox, however, both of these DIVs ignore the CSS rules I set. No floats; images are their original sizes and, on the single page, where the strip of posts is supposed to have a custom background, it is nowhere to be found. It doesn't even obey simple rules, such as ascribing a custom color to the links. When I right click to inspect the elements, the CSS rules are nowhere to be found!

It looks like you've marked my previous post as the solution. Based on your reply afterwards, I take it that was done in error. If you've figured out what the problem is on your own, others might appreciate it if you shared the solution.
Can you post a screenshot comparing what you see with what you're expecting to see? This is what your site looks like to me, in the latest version of Firefox. I see nothing wrong with it at first glance.
Your site relies on third-party content from www.hellobar.com, ajax.googleapis.com, fonts.googleapis.com, and possibly others. It will look wrong if Javascript is disabled, or the third-party content is blocked in an extension like Adblock Plus or NoScript.
* [[Websites look wrong or appear differently than they should]]

Rename CSS rule

Is there an easy way to rename an existing CSS rule (actually, a compound selector) and retain all the properties that were oringally set for that rule. I'd like to simply change a name of a rule to better fit my layout and naming scheme. Better planning up front would have eliminated this problem, but I goofed on the naming conventions. By renaming some of the rules, I can make my whole layout easier to understand and work with.
I tried the "edit selector," function, but when I did that, it deleted all the properties in that rule. For example, I had a container element that had float, margins, padding and text properties in it. When I changed the name using the "edit selector" function, the element no longer floated, the width had changed, etc.
Any help appreciated.

Grab the original name from your CSS file.
Do a CTRL+F to do a search and change Find In: to be Entire Current Local Site.
Type the original name into the Find: field
Type the new name into the Replace: field
Do a Replace All and let Dreamweaver fix all of those for you.
Rename the rule in your CSS file.
Probably seems a bit basic but it's very thorough (DW won't miss anything) and you can see all the files it did a replace inside of in the Search Results panel so if there is one that looks out of place you can look into.
Of course, be careful what you search on. If the CSS rule you want to change is called RedText, you're planning on changing it to text-red and you have another rule called BigRedText then you might end up with a bunch of Bigtext-red throughout your pages. If you can do it this way, I'd suggest using class="RedText" for your search value so that you don't have any of the forementioned whoopsies.
Hope that helps.

DW CS3: Template & CSS Rules problems

Similar Messages

Maybe you are looking for