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?
>

Similar Messages

Tables to layers

I have a very old site that was built using layers converted to a table. In the CC version under modify, the layout mode does not display. The Adobe help section says this is where convert tables to layers exists. Can anyone tell me how to access this option?

And for great reason, too. In the conversion, EVERY TABLE CELL becomes a separate absolutely positioned div. Someone was definitely sitting on their brain when they thought that would be a useful thing!
I'm, afraid a rebuild might be your only good option. What is it about the site that makes you use the word "massive"?

Help Please: How to Undo Tables to AP divs

I think I did something silly! I was playing around in Dreamweaver on and I was looking under the tabs > Modify > Convert > Tables to AP divs. So I clicked on "Tables to AP divs" (just to see what it would do) THINKING that anything I would have done I would be able to "undo" - well no, I couldn't undo it. The page is titled "RequestOrder". Then I opened up another page called "RequestInspection" and this also effected that page! I opened up a whole other website and all pages titled "Request[any name]" also had the same effect! Any pages that do not have "Request" in the title have not been effected.
Can someone please tell me what I did wrong and how to please undo it? When I view the pages in the browser everything looks normal. But I would like it all to go back to the way it was.
I have learned my lesson - not to just click on something just to see what it does...usually I don't get into a situation where I cannot undo something.
Thanks so much!!
-J
Example of what the page looks like in Dreamweaver:

JanineP wrote:
I have learned my lesson - not to just click on something just to see what it does...usually I don't get into a situation where I cannot undo something.
My father said the same thing four times in 2009, after I had to reformat his entire system in 2008, 2007 and 2006 for things he "clicked on to see what they did". What they did was install rootkit viruses that even AVG couldn't remove.
I don't touch his system anymore. A local company does it for $200 a shot... This is a $300 e-machine we're talking abut and he spends $800- $1000 a year to "clean it up" because he STILL hasn't learned to investigate things before putting his files at risk by clikcing things.
You CAN undo this, but it won't be with a single click (sorry to disappoint you). Even if there were a "one click" way to do it, I'd recommend that you do what I'm going to suggest as a lesson in why you don't click things "just to see what they do" with something important.
Open your site one page at a time and above every APDiv, insert a new table, then copy (one cell at a time) the content from the APDiv to the table, and delete the ADiv.
Better yet, since using TABLES for LAYOUT is a bad practice that has been shunned for about seven years now, just start with a new page, using CSS and (not AP) DIVs, and lay it out all over. Then copy the content from your main body into the proper sections and "Save As" to replace each page with one that is W3C compliant and a lot simpler.
Sorry if that sounds a little sarcastic, but I just got off the phone with a 'friend' who wants me to come over and clean up her PC because she opened an infected e-mail and her six months expired trial of McAfee can't help.I just lost a friend, but saved myself a migraine.

Can I use CSS to target a table or a DIV

Ok, I am trying to use DW Layers so when I click on a
thumbnail, I can trigger the "SetTextofLayer". The reason i do this
is because I dont know of any other way to do it., but as you all
know, the positioning of DW layers is absolute. So is there a
simple way i can have an image trigger the change of text in a
table or div. How do I do that? I looked, but all Ive found was
tutorials on how to swap an image, not change text. Is there anyway
to trigger table data using an image? Any help would be greatly
appreciated
-psy

Look again at how I did it on my sample page. I removed ALL
positioning
from the div after applying the behavior (leaving it as a
position:static,
the default). It still works fine.
http://murraytestsite.com/stol-text2.html
shows a few tweaks I did -
1. Moved the onclick event to an <a> tag surrounding
the <img> tag so that
you get a proper cursor on the image.
2. Added a return false to the onclick event to avoid an IE
flake.
3. Added quotes to your STOL code.
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
==================
"psypent81" <[email protected]> wrote in
message
news:[email protected]...
> Hi,
> Thanks again. Ive tried using the two methods A) Using
the SetTextofLayer
> -Which is nice, but it brings me to the whole absolute
vs relative
> positioning
> deal.
> Here's what I tried:
>
>
http://www.helenbwilson.com/SetTextofLayer-01
>
> It's great but it still stays in an absolute position
even though I
> changed the
>
> #imageLayer {
> position:relative;
> width:400px;
> height:400px;
> z-index:1;
> left: 290px;
> top: 94px;
> }
>
> I also tried to use the change of position to this page:
>
>
http://www.helenbwilson.com/helen-portfolio-1.html
>
> All it did was make my caption disappear completely!
> Actually, I tried both on that one page. If you click,
you dont get the
> caption anymore, whereas in
>
>
http://www.helenbwilson.com/helen-portfolio-2.html
>
> you get the captions, albeit in absolute position form..
> I just want this to be a quick patch, since I am now
beginning to see the
> light in terms of CSS positioning
>
> So what exactly am I doing wrong (Besides the obvious
answer of Do not use
> DW
> Layers, lol) .
> I really appreciate all the help. Thanks
>
> -psypent
>

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

Take 2_Newbie question re. tables/frames/layers

Hi all
I have created this as a new post as the original one by
DummyPete has become a bit too long and the topic has altered
somewhat :)
DummyPete orignially wrote:
"Basically, I'd like to create the fairly common design where
the left sidebar has hotspot buttons and remains static/consistent
across all pages, along with the top header banner. The sidebar and
the banner are sizeable GIFs, so I don't want to keep reloading
them for every page.
I tried frames, but couldn't get the images to lineup and all
the separate HTML files to work; besides, the book says to avoid
frames. Then I tried layers, but neither Firefox nor IExplorer
displayed my basic layout properly; I didn't even get as far as
hyperlinking the regions. I was able to create the desired effect
with tables, but I can't seem to figure out how to update only one
cell of the table when clicking the different hotspots in the
adjacent sidebar cell -- is this even possible?
I have a similar query:
I am trying to create a online folio where you click an image
with a link on a menu and it opens up a larger image on the page.
Like DummyPete If I use links it jumps between pages. What is the
easiest way to make such a gallery?
I have found a site to show what I am trying to do:
http://www.nolovelost.co.nz/main.html
I believe this uses frames. Is there a way to do this kind of
thing without frames? Are there any major problems using frames?
The responses i have had so far are:
HI! I think this is what you want unless you have a larger
gallery.
http://javascript.internet.com/miscellaneous/gallery-viewer.html#source
Sales
Webcan design
http://www.webcandesign.com
and
that opens a new window resized to the actual size of the
larger image...
this extension will allow you to do that:
www.dreamweaverfever.com/grow/
No need to use frames at all.
Nadia
Adobe� Community Expert : Dreamweaver
Thank you to those who posted:) much appreciated. It isn't
quite what I was looking for.
I have read may other posts about this subject and most point
to pre made galleries. I am happy to have each image as a separate
page. All I want to do is have a link and when it is clicked it
opens somewhere else on the pages without the rest of the page
jumping. When I create each image on a separate page (eg
image1.html, image2.html) with the same navigation setup on each
page it flicks as the each page loads. I really like how in the
example i posted you click the text link on the left and the image
opens to the right - how can i do this?
thanks
Poppit

Investigate either the FREE ShowPic extension from PVII -
http://www.projectseven.com/
or do it yourself using the SetTextofLayer behavior in DW,
using the method
demoed here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
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
==================
"novice dw" <[email protected]> wrote in
message
news:[email protected]...
> Hi all
>
> I have created this as a new post as the original one by
DummyPete has
> become
> a bit too long and the topic has altered somewhat :)
>
> DummyPete orignially wrote:
> "Basically, I'd like to create the fairly common design
where the left
> sidebar
> has hotspot buttons and remains static/consistent across
all pages, along
> with
> the top header banner. The sidebar and the banner are
sizeable GIFs, so I
> don't
> want to keep reloading them for every page.
>
> I tried frames, but couldn't get the images to lineup
and all the separate
> HTML files to work; besides, the book says to avoid
frames. Then I tried
> layers, but neither Firefox nor IExplorer displayed my
basic layout
> properly; I
> didn't even get as far as hyperlinking the regions. I
was able to create
> the
> desired effect with tables, but I can't seem to figure
out how to update
> only
> one cell of the table when clicking the different
hotspots in the adjacent
> sidebar cell -- is this even possible?
>
> I have a similar query:
>
> I am trying to create a online folio where you click an
image with a link
> on a
> menu and it opens up a larger image on the page. Like
DummyPete If I use
> links
> it jumps between pages. What is the easiest way to make
such a gallery?
>
> I have found a site to show what I am trying to do:
>
>
http://www.nolovelost.co.nz/main.html
>
> I believe this uses frames. Is there a way to do this
kind of thing
> without
> frames? Are there any major problems using frames?
>
> The responses i have had so far are:
>
> HI! I think this is what you want unless you have a
larger gallery.
>
>
http://javascript.internet.com/miscellaneous/gallery-viewer.html#source
>
> Sales
> Webcan design
>
http://www.webcandesign.com
>
> and
>
> that opens a new window resized to the actual size of
the larger image...
> this extension will allow you to do that:
www.dreamweaverfever.com/grow/
>
> No need to use frames at all.
>
> --
> Nadia
> Adobe? Community Expert : Dreamweaver
>
> Thank you to those who posted:) much appreciated. It
isn't quite what I
> was
> looking for.
>
> I have read may other posts about this subject and most
point to pre made
> galleries. I am happy to have each image as a separate
page. All I want
> to do
> is have a link and when it is clicked it opens somewhere
else on the pages
> without the rest of the page jumping. When I create each
image on a
> separate
> page (eg image1.html, image2.html) with the same
navigation setup on each
> page
> it flicks as the each page loads. I really like how in
the example i
> posted you
> click the text link on the left and the image opens to
the right - how can
> i do
> this?
>
> thanks
> Poppit
>

How to update Spry-table and present the updated table in a div element?

Hello!
I am using a very interesting AJAX-framework called Spry when designing a web page. Here the web page is: Link.
I need some help.
Every time a new project or shift is added, the changes are written to an xml-file. When the page is reloaded, Spry reads data from xml-files.
This is caused by this code:
dsProjects = new Spry.Data.XMLDataSet("timetable/projects.xml", "projects/project");
dsShifts = new Spry.Data.XMLDataSet("timetable/{dsProjects::url}", "project/shift"); //look inside projects.xml and //extrac xml-file. url
dsName = new Spry.Data.XMLDataSet("timetable/{dsProjects::url}", "project");
I call this function that I have written: loadProjectsIntoDivElement ().
This function does the following: [See attached code.]
It iterates through the Spry-datastructure and puts the data in a table inside of the div-element called 'projectsList'.
Now, when I add a new project, I want it to be inserted into the Spry-datastructure and then cause the new data to be written into the div element called 'Specials_DIV'.
I have found out how to update a Spry-datastructure (e.g. dsProjects above), but I don't know how to update the table containing the data without refreshing the page. This should be done using Spry.
Some code:
1:
2:
3:
function loadProjectsIntoDivElement () {
$('#projectsList').html('');
$('#projectsList').append('<table id="Specials_Table"><tr><th spry:sort="id">ID</th><th spry:sort="NAME">Name </th><th spry:sort="hoursestimated">Nr. of hours estimated</th><th spry:sort="hoursworked">Nr. of hours worked</th><th spry:sort="costperhour">Cost per hour.</th></tr>{function::init_hours}<tr spry:repeat="dsProjects" onclick="chooseProject({ds_RowID})"><td>{id}</td><td>{NAME}</td><td>{hoursestimated}</td><td>{hoursworked}</td><td>{costperhour}</td></tr></table><br/>{function::get_hours}<br/>');
I have tried to accomplish this in various ways but I don't succeed.
I want to do it without refreshing the page.
Update: I found some code here that I will try: Link
Thanks in advance!
Anders Branderud
My blog

Hello!
Thanks!
I don't succeed with the implementation in any browser.
I have found a way to it, but I would like a way that updates the data quicker and without reloading all of the page. After all, I am only adding one row on the end of the data structure, so there should be no need to read in all data again.
Now I do it like this:
When a project is added, do this:
1. Store a new row in the project file through a php script.
2. When the post-call to the php-file returns, do refresh of the whole page.
Then the newest version of the xml file will be read in.
However, I don't want to read the data from a xml file each time that a new project is created.
I know how to add the new data to a Spry-datastructure [in my code 'dsProjects'], but I don't know how to display the updated data without reloading the whole page.
I have tried some various ways to do it, but haven't succeded.
Thanks!
Anders Branderud

Inserting a table in a div in FF blows my design

Hello,
I've been wrestling with this problem for weeks now and found
a fix that works in IE, but not in FF (big surprise). So - my
question is - is there a fix for FF ? here goes:
www.stainlessrhino.com
Finally have all three divs in the center of the page (left
nav, content and right nav) filling the container div. Works in IE
by placing the content in the right div inside a table with 95%
width. However, in FF this right div fills 95% of the page and
shoots down below the other two divs. Why does this happen and is
there a fix?
(I know the page doesn't validate... most of it is this
shopping cart script I'm using - rrrrrrrrrrrrrrgh)
Thanks

Hello,
It's a couple of typo mistakes in your CSS.
Change this:
#Lnav
float: left;
width:
20%:
to this:
#Lnav
float: left;
width: 20%;
Notice the " : " after 20% is replaced with " ; "
and then, change this:
#Rnav
float:right;
width: 25%:
To this:
#Rnav
float:right;
width: 25%;
Notice the " : " after 25% is replaced with " ; "
Firefox is the standards compliant browser so it behaves as
it should by ignoring the invalid line (25%:) in the #RNav CSS.
Leave it to IE to still render the page and cause trouble :-)
Hope that helps,
Tim

Slice Exports as table instead of Div

Using FW CS5, when I export a sliced image to .htm file, the contents are all in a <table> format instead of as <div> tags, for example;
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">
<tr>
<td colspan="3"><img name="background_r1_c1" src="background_r1_c1.png" width="1024" height="26" border="0" alt=""></td>
</tr>
Here is the image I'm trying to slice. All the images are created ok, but no .css file is generated. As you can see there are essentially 4 boxes with some overlapping, do I need to create each box as a separate image?

Linda,
Thanks for the response, however the link you provided is for CS3, not CS5 like I mentioned. Although in your defense the steps outlined are similar to what I read in the Help pages, http://help.adobe.com/en_US/fireworks/cs/using/WSF26E374A-45C0-482b-92E7-8BBA71F98D8D.html
I was able to get the image to export <div> layouts, however they were less than ideal, so I used Visual Web Developer to create the fixed position tags, it actually took less time to do than it did to write this response.

Tables or Layers?

I have a photography website www.ashleybaumann.com Right now
the images are just positioned in tables on the page. I am trying
to reduce the number of pages I have by just having thumbnails at
the top of the page that when rolled over or clicked the larger
image appears below. The larger image needs to go away and have a
new one appear when a different thumbnail is chosen. I know how do
this with layers, but I'm having trouble with the layers not
centering. What is the best method to achieve this? I was also
trying to do this without using a premade album. That may be my
best bet but I was hoping I could do it on my own.

Correct. That's the other side of the coin I mentioned.
Extending Knowledge, Daily
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
No registration req'd for free content
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> Yes, sorta. But why pay the price for download of images
you may never
ask
> to see?
>
> --
> 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
> ==================
>
>
> "Bill Horvath" <[email protected]> wrote in
message
> news:[email protected]...
> > Gotcha. So it really depends on whether the user
wants a slow page load
> > initially, or a slow image retrieval for each
larger image.
> >
> > --
> > Extending Knowledge, Daily
> >
http://www.communityMX.com/
> > CommunityMX - Free Resources:
> >
http://www.communitymx.com/free.cfm
> >
> > No registration req'd for free content
> > "Murray *ACE*"
<[email protected]> wrote in message
> > news:[email protected]...
> >> Doesn't matter. If the images are mentioned in
the page's direct
markup,
> >> then they will be fetched from the server. This
encumbers the page
with
> > the
> >> weight of all those images. That's why the
ShowPic is nice - the image
> >> is
> >> not fetched until you click on the thumbnail.
> >>
> >> --
> >> 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
> >> ==================
> >>
> >>
> >> "Bill Horvath" <[email protected]>
wrote in message
> >> news:[email protected]...
> >> >I haven't used any disjoints in quite a
while. Do the images have to
be
> >> > preloaded?
> >> >
> >> > --
> >> > Extending Knowledge, Daily
> >> >
http://www.communityMX.com/
> >> > CommunityMX - Free Resources:
> >> >
http://www.communitymx.com/free.cfm
> >> >
> >> > No registration req'd for free content
> >> > "Murray *ACE*"
<[email protected]> wrote in message
> >> > news:[email protected]...
> >> >> The problem with simple disjoints is
that the page is encumbered
with
> > the
> >> >> weight of all the images....
> >> >>
> >> >> --
> >> >> 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
> >> >> ==================
> >> >>
> >> >>
> >> >> "Bill Horvath"
<[email protected]> wrote in message
> >> >>
news:[email protected]...
> >> >> > No need for an extension. Read up
on disjointed rollovers at
> >> >> >
http://www.communitymx.com/content/article.cfm?cid=E11E8
and just
> > apply
> >> >> > the
> >> >> > same logic to the OnClick event.
> >> >> >
> >> >> > --
> >> >> > Extending Knowledge, Daily
> >> >> >
http://www.communityMX.com/
> >> >> > CommunityMX - Free Resources:
> >> >> >
http://www.communitymx.com/free.cfm
> >> >> >
> >> >> > No registration req'd for free
content
> >> >> > "ashbee5923"
<[email protected]> wrote in message
> >> >> >
news:[email protected]...
> >> >> >> I have a photography website
www.ashleybaumann.com Right now the
> >> > images
> >> >> > are
> >> >> >> just positioned in tables on
the page. I am trying to reduce the
> >> > number
> >> >> > of
> >> >> >> pages I have by just having
thumbnails at the top of the page
that
> >> >> >> when
> >> >> > rolled
> >> >> >> over or clicked the larger
image appears below. The larger image
> >> >> >> needs
> >> >> >> to
> >> >> > go
> >> >> >> away and have a new one
appear when a different thumbnail is
> >> >> >> chosen.
> >> >> >> I
> >> >> > know
> >> >> >> how do this with layers, but
I'm having trouble with the layers
not
> >> >> > centering.
> >> >> >> What is the best method to
achieve this?
> >> >> >>
> >> >> >
> >> >> >
> >> >>
> >> >>
> >> >
> >> >
> >>
> >>
> >
> >
>
>

Moving Beyond Tables-.Understanding the DIV :)-

Hello,
Unfortunately I was taught Dreamweaver sorta backwards and have always used tables for layout. The advantage has always been a grid layout where you can move things by sliding the guides around. It works most of the time, but I am determined to move beyond it.
I admit my Dreamweaver skills are fair at best, and appreciate any input…. please be kind
Here is the current webpage : http://www.outposticearena.com/
Here is my rough draft (very much improved with added animation)…. and still confused regarding layout….http://taffyproductions.com/test/
1) Why are there lines between my sidebar1/nav? Which css rules control their spacing and size?
2) How do I control the top and bottom spacing between my H2 tag "Welcome to the Cooloop" and the .p tag below it?
3) I have 4 images/links in the sponsors div. I want to center/ space them. How can I do this?
Thanks again!!!
Gary

1. In style.css Line 111
ul.nav li
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
Remove the border and gone are the lines
2. At the start of style.css place the following code
* {margin:0;padding0;}
Each browser has its own default style rules. If they were all the same rules then we could live with it. Because they are not the same, it is best to bring all of the styli rules down to one denominator by setting the margins and padding to zero. This may mess up some of the other styles, but these can be fixed by a bespoke setting of the margins and padding.
3. First we need to re-arrange our markup
<div id="footer1">
    <div><a href="http://www.abqfsc.org/" target="_blank"><img src="images/afsc.jpg" alt="albuquerque figure skating club"/></a></div>
<div><a href="http://www.nmhockey.com/" target="_blank"><img src="images/nmhockeyadult.gif" alt="NM Hockey" /></a></div>
<div><a href="http://apps.planethockey.com/site/camps/default.aspx?CampId=176" target="_blank"><img src="images/planet_hockey.gif" alt="planet hockey" /></a></div>
<div><a href="http://www.nmice.org/" target="_blank"><img src="images/nmice.jpg" alt="New Mexico Ice Hockey" /></a></div>
<p>Web Design by <a href="http://taffyproductions.com/" target="_blank">Gary Goldblum</a></p>
</div>
Then we will add a bit of styling
#footer1 div {
    width: 25%;
    float: left;
#footer1 div img {
    display: block;
    margin: auto;
As a passing comment, just one question per post please.

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!
>

Choosing div vs table layout

Me again, hello.
I'd like to get your perspectives on the debate between <table>s and <div>s in CSS.
Over and over I've read the proponents of <div>s vs those of <table>s, and what I've taken away is:
"If you have a lot of tabular data, use a <table>, if not, use <div>s."
"Tables inside of tables are a big problem"
So I'll give you a specific example
Here is a mockup of a simple series of <div>s.
The large one on the right will be for a photo.
The other 12 <div>s will be for textual data.
http://www.heartinstitutehd.com/php/testingcsslayout.htm
I've done exactly the same layout using a table with rowspan="3" for the picture.
In your opinion(s), what are the pros and cons of using <div> vs <table> in this particular example?
For noobs such as myself, here's 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=windows-1252" />
<style>
.largebox {
height:200px;
width:800px;
margin-left:auto;
margin-right:auto;
background-color:lime;}
.shortwidebox {
width:85%;
height:33%;
background-color:gray;
float:left;}
.picturebox {
height:100%;
width:15%;
background-color:navy;
float:right;}
.smallboxblue {
    height:100%;
    width:25%;
    float:left;
    background-color:blue;}
.smallboxgreen {
    height:100%;
    width:25%;
    float:left;
    background-color:green;}
.smallboxred {
    height:100%;
    width:25%;
    float:left;
    background-color:red;}
.smallboxblack {
    height:100%;
    width:25%;
    float:left;
    background-color:black;}
</style>
</head>
<body>
<div class="largebox">
<div class="picturebox"></div>
<div class="shortwidebox">
<div class="smallboxblack"></div>
<div class="smallboxblue"></div>
<div class="smallboxgreen"></div>
<div class="smallboxred"></div>
</div>
<div class="shortwidebox">
<div class="smallboxred"></div>
<div class="smallboxgreen"></div>
<div class="smallboxblue"></div>
<div class="smallboxblack"></div>
</div>
<div class="shortwidebox">
<div class="smallboxblack"></div>
<div class="smallboxblue"></div>
<div class="smallboxgreen"></div>
<div class="smallboxred"></div>
</div>
</div>
</body>
</html>

"Tables inside of tables are a big problem"
That's really not true. Tables inside of tables is wasteful, and troublesome since it creates LOTS of markup that gets in the way of troublshooting, and that adds to the weight of the page. It's not uncommon to find tables nested 7 or 8 deep on pages that use tables for layout. You will rarely find such contorted structures on CSS pages. What makes tables within tables big trouble and even dangerous is when those tables contain lots of colspans and rowspans. This leads to relative unstable structures that will figuratively explode if someone bumps up the text size on the page.
My critique of your page is that you have assigned heights to those elements. While I recognize that you may be doing that for effect, it's never a good idea - let the contents determine the height - you risk overflow problems when you don't.
And finally, I have used tables on a page perhaps three times in the last year. All three times were to present tabular data. While tables can be an important tool in your toolbag when you need to use them, I'd avoid them for any other uses.

Tables, Divs or both

I think i asked this question a long time ago but I am now getting around to finalizing my web site and I am not sure if a table in a div is a good idea.
I have a div for wrapper, header, navigation,mainbody and footer. All are in my template and the only editable region is the mainbody.
I could place a right div, left div and possibly a center div and have several divs in those 3 larger divs.
Or I could use tables as for some of my pages, I will be using photographs (of fitted kitchens).
I am thinking about having about 9 small thumbnail pictures on left side of page and each would change bigger picture on right of page.
I am thinking that when I do the maths, a table may be better even although it is in amongst divs.
Am I causing myself future grief or is this the correct way round it.
Thank you for taking the time to read my short story and I hope you can help me.
regards
Michael

MichaelCo wrote:
Murray *ACP* wrote:
I know it can be done in tables but not sure if it can be done with thumbnails within a div.
The container of an element has no bearing on what events can be applied to that element. So, you can definitely do this whether the thumbs are within a span, a paragraph, a table, or a div.
Hi Murray, me again.
Do I have to use Fireworks or similar programme in order to create a layout for this. Or is there a better way using dreamweaver.
Michael
Don't use Fireworks use something like jquery or php
I don't know how experienced you are with coding and css but search google for 'jquery image gallery' or 'jquery image gallery tutorial'
Heres one I pulled up as an example:
http://www.twospy.com/galleriffic/#1
See list of examples, like:
http://www.twospy.com/galleriffic/example-2.html

Tables or layers (div's)

Similar Messages

Maybe you are looking for