Solved

Aligning Layer (div) using wysiwyg - convert later?

Posted on 2004-10-03
3
267 Views
Last Modified: 2010-04-25
Hi there,

I am designing a web page and i have a standard DIV Tag which has no properties assigned just an ID as I do positioning within an attached style sheet.. which works great.

Problem is now, I need to arrange more div tags (layers) within this div tag so i wanted to use the Wysiwyg editor of dreamweaver to INSERT LAYER which works great and produces something like this

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 280px; top: 81px;"></div>

My question is, does anybody know if this is the way I should do things?

Really I think I would like to put the style properties of this div tag into my external style sheet to keep everything together.

I could just remove the properties and paste them into my external style sheet with the ID of (above) Layer1 for example but wondered if anybody can comment if i doing this correct or is there an extension that automatically converts a Div tag with properties to a standard div tag and copies all the properties to an external style sheet.

I did think about doing it manually but because of the layout I really need to use the wysiwyg editor  or the layer in dreamweaver so i can position it exactly

Any comments or ideas?

Thanks

ian
0
Comment
Question by:ianinspain
3 Comments
 
LVL 9

Assisted Solution

by:prifre
prifre earned 250 total points
ID: 12211831
Nyumber one - I dont think there exist any right way to do it. It is one way of doing it, and I would say - if it works for you - go for it.

I myself mainly nowdays use DW where I switch between two documents - one document, the REAL document I use in Code-view and there I write all the code as I want. The second document I use for testing and there I switch between design&Code-view and first do things visually, then switch to code-view and take the part of the code that DW produced and that I like and copy&paste to my REAL document.

One thing that is great with DW is that it does not interfere&change code that you have edited yourself. (Well, you might have to change the DW-Preferences for Code rewriting...)

So - to summarize - as long at it works, dont break it.
with a smile
/prifre
0
 
LVL 5

Accepted Solution

by:
bitter_chicken earned 250 total points
ID: 12215813
I'm not sure if you know this already, but I'll write it here in case:

If you first create an ID Selector in the css file, or by just adding a new style through the dreamweaver interface. Set any dummy values for the width, height, left, top, etc...
also, make sure to set position:absolute. Even though CSS takes position:absolute as default, unless you include that property, dreamweaver wont recognise it as a draggable layer.

Now create a div tag with the ID of the selector you created. When you drag, resize, change, whatever, the properties will be changed in the external stylesheet.

This way takes a little longer to create the layer, since you have to create an ID and then position it, but you do get your properties in an external file.

bc :-)
0
 

Author Comment

by:ianinspain
ID: 12215970
much appreciated...

Yep seems to be working... You would think dreamweaver would have a convert to external style sheet but as everyone said it isn't too much hassle to copy over...

Thanks again

ian
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question