AP Layers (divs)...

Hi,
I'm just getting comfortable with the concept of using DIVS
vs. tables. I just watched a tutorial on YouTube in which a
developer used AP Layers to create all his div tags, in DW CS3.
(absolute placement layers) I'd like to know what you think of this
method? Have layers changed into divs? I don't recall them being
able to do this on former software versions. Now, everything stays
in place, as it should, in the browser. Please let me know if the
layers tool has been modified/upgraded as so, because a few years
back I was instructed to keep clear of using it.
Thank you!

The problem is not in coding them. It's in using them.
It's best not to use absolutely positioned elements for
layout, whether they
are manually coded, written by DW using the INSERT | Layout
Objects > AP
div, or appear magically on the page! 8)
For good CSS information, check these -
http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
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
==================
"r_tist" <[email protected]> wrote in
message
news:gjtgjj$4g4$[email protected]..
> So it is best to hard code all divs, rather than using a
ready-made tool
> in Dreamweaver?
>
> Please let me know any info you have...
>
> Thanks

Similar Messages

Tables or layers (div's)

Hi, I am developing a site and I'm not sure if I should use
tables or layers (div's). I like the freedom when laying out with
layers but I'm afraid of browser compatibility with layers. I know
that tables always look good in every browser but layers are
displayed different. What would you suggest?

Whatever you are comfortable with. Stay with tables until you
are
comfortable with using divs and css. Layers are absolutely
positioned divs
and should really not be used as a way to lay out a whole web
page unless
you know their drawbacks. Divs styled with CSS are the way to
go if you want
to move away from tables.
Good beginner tutorials available at the Adobe site:
http://www.adobe.com/devnet/dreamweaver/css.html
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
> Hi, I am developing a site and I'm not sure if I should
use tables or
> layers
> (div's). I like the freedom when laying out with layers
but I'm afraid of
> browser compatibility with layers. I know that tables
always look good in
> every browser but layers are displayed different. What
would you suggest?
>

Centering a web page with nested layers (divs)

Hi, I know this must be asked numerous times but some help woud be appreciated. I am currently upgrading my wed site produced in Dreamweaver 6 and 8.
I used layers and nested layers with the page aligned to the left of the browser. I am now redesigning the whole site and would like the page centred. As a designed and signmaker I am trying a avoid an out of the box design.
How can I centre my pages, preferably adapting existing pages to start with.
www.curtissigns.com is the site and appologies for some of the very ancient and dated pages!!!
If any can provide some advice or point me to some discussions.
All my efforts with CSS seem to be failing at the moment.
Thanks Stuart

All individual elements on your page at the moment are 'absolutely' positioned - very bad pracitce. But, I understand you've mentioned you made this site a while ago.
A quick fix for now would be to add this right after opening <body> tag:
<div id="container">
and this right before closing </body> tag:
</div>
Then, add this to the CSS part of your page (just after opening <style type...> right now, Line 85 on your HTML page. This will come before #apDiv1 rule:
#container{
left: 50%;
margin-left: 520px;
position: absolute;
left: 50% will offset the Div container to 50% of page width. margin-left: 520px will slice that in almost half (at the moment, your page is about 1004px wide), thereby displaying the entire page in the center. I've used position: absolute now since otherwise, you cannot center it (as you already have all nested elements as absolute).
But, I'd definitely recommend taking some time to re-create your webpage - never use 'position: absolute;' unless it is definitely required. You can do a great job with using 'float' and 'position: relative' tags.
Good luck.
-ST

Hidden layers div elements are printing

Hidden layers for drop down menus created by fireworks have
<div> code at the bottom of the page for the menu's content.
Its printing when a user prints the website from a browser. I don't
know how to make that code (not visible but prints) stop
printing!

Post a link to the page, please.
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
==================
"sgw" <[email protected]> wrote in message
news:eptlmk$7rs$[email protected]..
>
> Hidden layers for drop down menus created by fireworks
have <div> code at
> the
> bottom of the page for the menu's content. Its printing
when a user prints
> the
> website from a browser. I don't know how to make that
code (not visible
> but
> prints) stop printing!
>

How do I get rid of the white background in text boxes in Dreamweaver?

I use a lot of reversed text on my site, and not being able to see the text in the split view means I have to edit in the code view slows me down no end… I've tried changing the obvious view options, but can never seem to find the one that makes the boxes transparent. Is there an easy fix to this???anx if you can help
Many thanx if you can help. (;

Here's a screengrab of the problem.
This page uses no text nav; instead uses z-index' similar to layers in photoshop, where image maps on overhangs from the pictures/pages underneath, to navigate to other pages.
But when working on it in Dreamweaver, it's a nightmare, because of the white boxes, which often almost completely obscure the layered divs underneath.
Is there no easy way 4 DW to just make these boxes transparent in the View. Switching off Style Rendering doesn't really help.
But thanx all for your help so far.

Gallery with HTML text under image

I'm working on a gallery of images with thumbnails on the left and larger photos on the right. My problem is the larger photos on the right need some text under them. I've been adding the text to the photos in photoshop and doing this as a standard swap image/swap image restore. What I was wondering, is there a way to add this text as HTML. When I do the swap image I would need to swap out the HTML text also. I've done this as a layered div in the past, but it gets cumbersome when you have 30 thumbnails. Hopefully someone has a good solution for this. I'm thinking about giving up on Dreamweaver and doing this sort of thing in Flash.
----Here's the website I'm working on -- http://www.elyssabassdesigns.com/fashion_collection/fashion_cuffs.html

There are literally hundreds of CSS, DHTML or jQuery solutions you could use.
http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solut ions/
http://www.dynamicdrive.com/dynamicindex14/index.html
www.JAlbum.net
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Glossary in Japanese

Using English version to build WebHelp in Japanese, I have
.HHC, .HHK, .GLO files in Japanese, after opening the RoboHelp
project, TOC and Index were displayed fine, but Definition of
glossary term is unreadable. After generating WebHelp, some terms
appeared as blank lines, and some definition remained in corrupted
codes (strangely there were terms displayed OK in Japanese). Any
hint to solve this problem?
Thanks in advance,
Jenny Hung

Here's a way if your used to hand coding and are using tables instead of Floating Boxes/Layers/DIVs...
Set your text up in tables, 1 row for each Japanese term with translate and close links and a row under it for the translation. In the "translation" row, set the cell to have a unique id, like so...
< td id="firstterm">Text you want to appear on page load, or blank if you want nothing to appear< /td>
Then in your "Translate" link you will use GetElementID javascripting like so...
< a href="#" onclick="javascript:document.getElementById('firstterm').innerHTML='Text you want to pop up on click goes here'">Translate< /a>
Your close link...
< a href="#" onclick="javascript:document.getElementById('firstterm').innerHTML='Original text from the cell or blank'">Close< /a>
Each "Translation" row will have a different ID and each GetElementId will reference that ID where you see 'firstterm' above. The page will appear to grow in length when you click the Translate link, and shrink back up when you click the Close link. (remove the space after each < to get the code to work)

CSS Background

Hey all,
I have a CSS sheet that has the layers with their respective background images for each, but there's one layer that I want to remove the background image from, I know how to do this, but the catch is, I only want to remove the background on one single page without messing around with the css sheet and wind up removing it on all pages.....any ideas?
Thanks in advance
Allen

Paula,
Sorry, I failed to ask you one more question, when creating a layout using layers (div tags), I like to use the "green" guide lines in the design view of Dreamweaver, have you ever seen where when you drag a layer to the guide line and try to get it to snap to it, it does snap to it, but it looks like the layer sort of "jumps" away from it, not staying in place and making it look like it didn't snap to the line....any idea what's up with that?
Thnaks again so much for your help
Allen

What to do about these overly large header images

Hi,
I have a header image that is big and wide, 950px by 400px. It takes a tad long to load and plus I need to make a part of it clickable to link to another page.
If this were six years ago I'd slice it up and put it in a table. But I refuse to do things the old way. Can anyone suggest a good way to make this header load faster and slice it up in a CSS friendl manner?
Thanks,
Stan

I'm not entirely correct.
The loading of images varies on both the browser and the server.
>
HTTP/1.1 spec, 8.1.4
>Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than
2 connections with any server or proxy.
If you follow this concept, loading 3 different 900 KB+ images from a single server
should result with the third image not starting to load until either of the first two images completely loads. But this seems to be a theoretical spec. The HTTP/1.1 server I just tested does not seem to follow this. But then we rarely make persistent connections to a server.
On a test I just ran with IE, FF, Safari, Chrome, and Opera, only Safari had a random loading of images with this layered DIV technique. The other browsers appear to start to load all the images at the same time (the smallest stand-in images fully load first as they arrive more quickly).
You can test this for yourself on your own server and browsers with 3 different sets of an exaggerated small file of 2 KB and a large file of 900 KB. Unless the browser is extraordinary, the small files will load first.
YSlow, a Firefox add-on, is very helpful in picking apart page load issues.
>Make the real image as small as you can and let it go at that.
At about 40 KB for the image in question, I would agree. This should not be a problem for the average DSL/cable user. Dial up users should already be tolerant of image loading times and would not be any more adversely affected.
...and if your client complains that the image loads slowly, tell them that you will work on it tonight and they should check it in the morning. The cached image will load much more quickly. :)

Issue with images and AP div layers

Im a bit of a noobie. but i have a problem with this website
im working on. I have a table with an image in it serving as a
background for some text i wish to put into it. I use an AP Div
layer to put in the text on top of the image. Of course when i open
the page in a full window, it displays properly, but when resizing
the window, the text shifts as a cause of the div layer not
moving... Is there a way to fix this or another way to do this
properly?
thanks in advance.

This is a problem with absolute positioned tags it's a CSS
thing not a Dreamweaver problem.
You should be staying from layers and using hand CSS with
divs ID and class. Check out the adobe site for tutorials on using
Dreamweaver with CSS. You should find these in the designer
section. They are quite good and they'll give you what you're
looking for
Also a good book on this is CSS the Missing Manaul it really
explains what's happening and going on here

AP Divs (layers) move when I open my website on different window size.

First of all, this is my first time trying to make a website.
I'm doing an assignment for my class and i found it difficult for me to fix. I have spend 4-5 hours researching online but nothing work for me.
Well,the problem is the AP Divs (layers) move when I open my website on different window size(iphone,ipad).
The website only look right on 1366 x 786 resolution. Please take a look at my 2 pics below:
And I don't know how to make the website to fit on the iphone and ipad so that I don't have to scroll down or sroll to the right to view the whole thing.
Please someone help me!
The code:
<!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" />
    <meta name="viewport" content="width=device-width" />
<title>Boston Green Community College</title>
<style type="text/css">

</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="Pictures/34d-1.png" alt="Insert Logo Here" name="Insert_logo" width="619" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
    <div id="apDiv11"><font color="#f4f1f1">
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script></font>
</div>
    <div id="apDiv1">


<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
                              </div>
                                </div>
<div class="content">
    <center><img src="Pictures/DFDF11.png" width="959" height="556" longdesc="Pictures/junior-2-960x.jpg" /></h1></center>
</div>
<div class="footer">
     <img src="Pictures/RRR1.png" width="202" height="70" />
     <div id="apDiv3">
       <p> </p>
       <p><a href="Job.html">Jobs</a>         </p>
       <p><a href="Art Gallery.html">Art Gallery</a>         </p>
       <p><a href="Contact us.html">Contact Us </a></p>
    </div>
    <div id="apDiv4"><center>
<P>About</P>
<a href="visiting.html">visiting</a> | <a href="Map.html">maps </a>| <P><a href="About.html">about BGCC</a></P>
<P>Academic</P>
<P><a href="Courses.html">schools+courses</a></P>
<P>Admissions </P>
<P><a href="cost & aid basics.html">cost & aid basics </a>| <a href="Apply now.html">join BGCC</a>
<P>Studen Life</P>
<P><a href="Athletics.html">Athletics</a></P>
<P>Greenforce Education</P>
<P><a href="Career.html">career center</a></P>
</center> </div>
     <p><font size="2" color="black">BGCC | 99 GreenField | Boston, MA 02199 |617-0101-1000| TTY 617-0202-9944|</font></p>
    <div id="apDiv9"><a href="Donate.html" target="_blank"><a href="Donate.html"><img src="Pictures/three-green-logo.jpg" width="218" height="99" longdesc="Pictures/three-green-logo.jpg" /></div>
    <div id="apDiv8"><a href="Apply now.html" target="_blank"><a href="Apply now.html">
<img border="0" src="Pictures/cxgvxdvxgd.jpg" alt="Apply Now" width="218" height="99"></a></div>
</div>
</div>
</body>
</html>

That's what APDivs do. This is the single most common problem new people have with web page layouts. DO NOT use positioning. You don't need it. Start over. Learn to use CSS floats, margins and padding to align elements.
Below is a basic HTML5 Layout. View source in browser to see the code.
http://www.alt-web.com/sandbox/HTML5-BasicLayout.html
Nancy O.

Where is the Layers palette with DIV custom names?

Hello!
Where is the Layers palette with DIV custom names and Z orders? Wy in last update we don't have one?
I think in Ideas area many people request this feature.
Thanks

The default location for the Layers panel is in the lower right of the Editor (while in Full Edit mode).
If you don't see it, it may have been hidden or minimized. Try going to the Window menu at the top and select Layers from the list. This should unhide or maximize the panel.

Lock ap-DIV's together (like layers) to move?

I built a few pages and feel like I would like to move all
the content up symmetrically. In go-live I could just lock all the
layers together (I think, at least I know you can in PS). Anyway,
is there a way to do this in DW? I have quite a few things to move
and to do each DIV independantly would be pain.

As osgood said, APDivs are not a good primary layout method. It's often helpful to make a preliminary sketch of your web pages with notes on where things will be placed, how many columns or grid boxes you'll need, etc... Then find a pre-built CSS layout that meets your requirements. You can learn a great deal from looking at source code.
Free CSS Layouts
http://alt-web.com/Free-CSS-Templates.shtml
Dreamweaver CSS Templates for beginners
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Ultimate Multi-Column Layouts -
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Div Layers move in firefox and safari

I am a newbie. The problem is : I have one layer containing
an inserted background box and another layer on top with text to
fit in it. Everything looks fine on my screen but the layer
containing the text slips down about 26 pix. I have tried
everything I know - absolute, relative, nested, un nested - all
with the same result. Help!

> I have tried everything I know - absolute, relative,
nested, un nested -
> all with the same result.
Stop 'flailing' and start learning. Until you understand CSS
positioning,
you should stay away from 'layers' or anything using
positioning.
Let's see your page's code, 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
==================
"Dottydog" <[email protected]> wrote in
message
news:fvpjsj$98d$[email protected]..
>I am a newbie. The problem is : I have one layer
containing an inserted
> background box and another layer on top with text to fit
in it. Everything
> looks fine on my screen but the layer containing the
text slips down about
> 26
> pix. I have tried everything I know - absolute,
relative, nested, un
> nested -
> all with the same result. Help!
>

Layering Flash over Flash with DIVs is causing cursor to flicker...

I have a problem with a set-up I have, where I have one Flash
SWF file placed over another SWF file, in two different DIV tags in
my HTML.
I have used "z-index" to order my DIVs, and I have used
"wmode=transparent" etc. to view the one file under the other, and
the 2 files together display in all browsers just fine. That's not
the problem. It looks and renders just great.
The problem I have is that when I hover my curser over a
button in my top SWF file, instead of just getting the usual
arrow-to-hand cursor change, my cursor flickers wildly between the
two (and I have checked the button rollover state in the Flash
authoring app, and it's just fine). It's as if my cursor is
flickering between deciding whether to display the button rollover
hand in the top Flash layer or the standard arrow for the
non-button area in the bottom Flash layer.
Weirdly though, this behaviour is only happening in Safari on
my Mac. When I look at my test page in Firefox (for Mac), my cursor
behaves just fine. When I check it in both IE and Firefox for
Windows, again my cursor works as expected.
It's just Safari.
Does anyone have a solution for this problem?
The thing is though, I cannot use one DIV and bring in the
two SWFs through one Flash 'container' movie. I have to use the two
DIVs, because on some pages, I need the content to scroll using the
browser's standard/included scroll-bars, but I need the top DIV to
NOT scroll with it, but rather to stay still on the screen using
"position: fixed;".
My entire code is below:

*bump*
- *bump*

AP Layers (divs)...

Similar Messages

Maybe you are looking for