CSS based layouts

HTML DB's (even 2.0) layout features are based firmly on pure HTML tables. Rows and cells, rowspans/colspans. etc.
Reading some of the bleeding edge web development sites/blogs out there, they have been proclaiming the death of HTML tables for page layout purposes for years now. CSS support is pretty well established in all major browsers, CSS standards have matured substantially over the past few years.
What does the HTML DB development team think about adding native support for CSS-based page layouts?
Thanks

Hello,
You can pretty much ,with some exceptions' create a fully XHTML/CSS based templates in HTML DB.
The Builder will not be doing this for some time yet and some comments in your own post explains why.
Reading some of the bleeding edge web development sites/blogs out there,I would suspect most people would want production quality not bleeding edge.
You will notice we have removed pretty much removes all deprecated tags though.
What follows next is a rant but it's only because I take my HTML 'VERY' seriously, been building pages since the bleeding edge browser was lynx , you have been warned.
--BEGIN RANT
CSS support is 'pretty well established' in all major browsers, CSS standards have
matured substantially over the past few years.I can't even begin to count all the different ways pretty well established does not equal looks the same in all major browsers, if you don't believe me just ask google.
I don't like pointing at any one browser in particular (all heads look towards Redmond , Washington) but one of these browsers doesn't stack up compared to the others. It is unfortunate that it has the huge install base it does.
examples of things that just plain suck:
style="display:inline-table;"
png's with transparency
background image under links blinking bug
caching of backgroud images
oh and the whole box model thing
I'm a huge fan of xhtml/css layout's but the css hacks involved, the css issues between different browsers, unless it's a demonstration of how cool you can make things with only <div> tags and css it's not worth the time and effort to get it perfect.
You need to email Mozilla Foundation and Microsoft and complain to them once they get it right.
I 'personally' will make it right till then LONG LIVE TABLES!!!!?
--END RANT
Thanks,
Carl
[pre]

Similar Messages

Creating template areas when using CSS based layout

Hi:
I'm ransitioning to pure CSS based layouts. When I used tables for layouts I could select a table cell and make that an editable template region. But when I'm setting everything up in Divs, you can't "select" a div in Layout mode. Indeed, layout mode doesn't really work at all - things are shown all jumbled and you have to use Preview or open in a browser window to see how things will look. (I'm not using the grid - maybe I should?) Is there a way to select a div and make it an editable template region?
I'm using GoLive CS2 on a Mac.
Thanks!

Is this affecting ALL text on that page?
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
==================
"matthewtrefz" <[email protected]> wrote in
message
news:eo5o8v$aqa$[email protected]..
> We have recently performed an upgrade to our site. The
entire layout is
> css
> based. The problem we have run into is that Contribute
users can no longer
> select the content using the mouse. In fact the only way
to edit the
> content is
> to use the arrow keys on the keyboard. Though it is
possible to edit
> content
> this way it is very time consuming and confusing to most
of our users.
>
> I have tired to edit pages based on a template, and
pages not based on a
> template and get the same issue.
> What can I do to fix this problem?
>
> The web address is
http://engineering.osu.edu
>
> Thanks,
> Matthew
>

How to view semantic css based layouts in design view in dreamweaver?

Hi all,
I havent had a lot to do with CSS based layouts (tables have alwasy just worked for me fine) but I am wondering how do I view the semantic/css based layout in design view in Dreamweaver?
As when I write the code, in design view its not showing me what the page will look like, I have to click on "Live View" to see what the page actually looks like.
I guess I am asking is there a way to using WYSIWYG on css layouts in design view??? Just like I do table layouts (In design view I can grab the edge of the table and resize etc)?
Any help would be great

Lou yeah I don't think the term WYSIWYG really applys to dreamweaver anymore when building CSS layouts.
The term "WYSIWYG" never applied to DW. It was never such a thing, nor was any other HTML authoring, no matter what the marketing hype said. It's not possible to deliver wysiwyg layouts when there are so many different browsers/platforms/versions to worry about. This is particularly true when you go back to the era when WYSIWYG was actively used (but not with DW, which was not advertised in such a way) - Netscape 4, and IE5/Mac would alone be enough to destroy any layout....
The view you are getting in Design view is happening because your CSS is misplaced BELOW the <body> tag - it should be in the head of the page (i.e., above </head>). Your CSS should never be placed within the body of the page.

How to transform fixed table iWeb layouts to liquid CSS based layouts

I'm in the process of changing my website over iWeb and would like to change the iweb fixed table layout to a liquid based layout.
Here's the website I have now: http://teacherweb.com/CA/Newhart/CanKuhn and when changing to iweb I want the layout to change with the window size like it does with my website.
Is this possible with iWeb?

Lou yeah I don't think the term WYSIWYG really applys to dreamweaver anymore when building CSS layouts.
The term "WYSIWYG" never applied to DW. It was never such a thing, nor was any other HTML authoring, no matter what the marketing hype said. It's not possible to deliver wysiwyg layouts when there are so many different browsers/platforms/versions to worry about. This is particularly true when you go back to the era when WYSIWYG was actively used (but not with DW, which was not advertised in such a way) - Netscape 4, and IE5/Mac would alone be enough to destroy any layout....
The view you are getting in Design view is happening because your CSS is misplaced BELOW the <body> tag - it should be in the head of the page (i.e., above </head>). Your CSS should never be placed within the body of the page.

Dreamweaver to be CSS-based by default?

Does anyone know if Adobe plans on having a new version of
Dreamweaver to be CSS based by default. I heard the new Web
Expression by Microsoft is to be totally CSS design.

The person who wrote that had not only no understanding of
CSS but also none
of DW. So far, I have found nothing in EW regarding CSS that
cannot also be
done just as easily in DW.
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
==================
"chichi8" <[email protected]> wrote in
message
news:el1vn4$3ij$[email protected]..
>I read this article about Web Expresson and was wondering
if Dreamweaver
>would
> do the same in a later release.
>
> "Unlike FrontPage or Macromedia Dreamweaver, Expression
Web creates tight,
> easily maintained CSS-based pages automatically, instead
of treating CSS
> as an
> add-on to traditional HTML. This alone may make
Expression Web the leading
> Web
> editor before version 1.0 is even released"
>
> "Expression Web is the first major Web editor designed
from the ground up
> to
> create code based on CSS and XML. Even when you drag an
image or text box
> to
> resize it, the program inserts CSS-based layout code
rather than the
> old-style
> HTML tags created by FrontPage or DreamWeaver."
>
>
http://www.pcmag.com/article2/0,1895,2012364,00.asp
>

CSS Based Design

Hi All
A client of mine is looking for a way to manage content on
their website. I have used contribute 3 before but I have found
that it isn't too great with CSS based websites.
Does anyone know if the latest version of Contribute supports
accessible CSS based websites?... float-based layouts in
particular.
Many thanks
Rit

I hate to say it, but Contribute's support for CSS is bad.
Our organization just started offering Contribute to clients who
have a lower budget (those who can't afford our normal, custom CMS
tools), and we immediately noticed that Contribute's WYSIWYG
doesn't render CSS-based layouts properly. In fact, this is an
understatement. Some pure-CSS layouts are completely unintelligible
in Contribute--things are all over the place. Therefore, we're
forced to use hybrid table/css-based layouts for our
Contribute-managed sites.
I'm very surprised that Contribute has this issue... in this
day-and-age of purely CSS-based layouts. Personally, I hate the
tool (for this, and many other reasons), but alas, our clients have
demanded it :*(

"inc" extension wont display in css page layout

i am new to building pages with css. all i know is table based layouts. im trying to make a new template for my sites. also they are ASP pages. my problem is when im trying to use the "inc" code for my headers, footers, navigation, and a right menu. they dont display.
what would be different for getting those files to display in a css page layout?

You're close but you're missing quotes around your include file names. And your includes contain too much information.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
HeadMenu.ssi
LeftLinks.ssi
Footer.ssi
My parent page has been saved as Untitled.shtml (.shtml or .shtm tells the server there are include statements in the page). You may also use .php or .asp if your server supports these, however those include statements look different from the ones in this demo.
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">

 </div>
<div id="sidebar1">

 </div>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
 </div>
<div id="footer">

 </div>
 </div>
</body>
</html>
My HeadMenu.ssi file looks like this with only the relevant menu code.
<div id="menu">
<a href="#content">skip menu ></a>
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="links" href="links.php">links</a>
<a class="contact" href="contact.shtml">contact</a>
</div> 
You can see a working example of this on my website: http://alt-web.com
One last thing, you won't see includes appear on in browser until you publish to a web server. If you want to test pages locally, you'll need to install a local testing server (WAMP, XAMP, MAMP) on your computer.
Ask your server host if they support SSIs and whether or not .shtml or .shtm files are set-up up to parse includes. Sometimes you need to add this to your .htaccess file.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

I need help finding a workable web program that is not CSS based. I tried IWeb and it just won't work for me. Way too limiting. I've been using a 12 year old copy of Macromedia Dreamweaver, but the new Dreamweaver is CSS

Been building web pages for nearly 20 years, starting with GoLive. Went to Dreamweaver about 12 years ago, the Macromedia version. Tried going to iWeb when it came with a new Mac, but found it way too limiting with it's CSS template base.   Unknowlingly, I then bought a new copy of Dreamweaver.   Ooops, Adobe had bought Macromedia and Dreamweaver, too, is now CSS based, which for my money makes it useless to anyone who likes simplicity.   Now I find that even iWeb has been discontinued. I was told yesterday that Apple doesn't have a web program any more.   At 12 years old, I just don't think it's practical to try to load my old Macromedia Dreamweaver into the new Mountain Lion (I'm getting a new Mac), though it is running, barely, in Snow Leopard.
I need to find a web builder program that will permit simple construction of educational pages, nothing fancy, nothing artistic, just create a page, give it a color, type or drag in text, insert a table, insert pix in the table blocks, add text under the pix... done!    I should note that I am not looking to build traffic. I teach simple things for free and people who want to learn those things (antique sewing machine repair, quilting, building longbows) find me.
I've downloaded trial versions of half a dozen or so programs and looked at maybe 20 more, but all are either CSS based and drive me insane with requirments for constantly making rules and template models, and/or require that you base your web presence in their server.   Also, many will not work with pages built in other programs. I maintian a volume of over 1000 web pages, many requiring regular updating, and they have been with the same server for more than 15 years. I'm not about to change.
So, anybody know a simple, old fashioned web builder that's happpy on a Mac platform?
Captain Dick

Although not supported anymore, iWeb does still function using Mountain Lion...
http://www.iwebformusicians.com/iWeb/mountain-lion.html
... and you can purchase it from Amazon.
Start with a blank page using the Black or WHite template.
All modern websites use CSS and there are thousands of free templates to be had if you want to use a code entry style application. You will need to go this route if you want to create a site that is viewable on mobile devices although you can create an iPhone version using iWeb...
http://www.iwebformusicians.com/iWeb/Mobile-iWeb.html
Search this forum for numerous topics about iWeb alternatives.

Java.swing is there anyway to use coordinate based layout in java

i'm new to java and swing and all this gridlayout thing is starting to iritate me well not starting i'm fedup of that. i used to like my simple coordinate based layout system from wxpython, and even that of C# , so is there anyway to do that in Java. and whenever i try to add more than one wigit to the frame using frame.getcontentpane().add(wigit) one widit is displayed over the other, plus none of the methods for those wigits work, when i use setbounds i see no change in the wigits and so on. u can ask for my source code i can send it for u if u like.

You can use absolutes, but your shouldn't.
Try usign a combination of BoxLayouts and BorderLayouts and you should be able to do anything. Just realize that only one component can be placed in one location, and if you need more, then add a sub JPanel, and add more components there.
http://java.sun.com/docs/books/tutorial/uiswing/layout/using.html

Mac 10.5.7 update has made golive 9 stop rendering css in layout view

Has any one else on Mac with the mac 10.5.7 update have new issues with golive 9 not rendering css in layout view. It works still in pdf preview and if I boot to 10.5.6 all is normal again. Also in the live rendering engine it works as well...just not in layout view- its very disconcerting. Any workarounds? anyone else with this issue?
thanks
Adam

I have been using an external CSS file simply for defining font styles
site wide. The rendering of them on screen in layout view is now just
the plain default font prior to showing the CSS altered version of it.
Sorry, I'm not sure I understand what you mean here. You mean it shows your text in the default and *then* renders it correctly using the CSS after a delay?
I tried torching the prefs...perhaps I did the wrong file...what file is to be deleted?
~/Library/Preferences/Adobe GoLive 9.0 Prefs
~/Library/Preferences/Adobe/GoLive/Settings9 (a folder)
~/Library/Preferences/com.Adobe.GoLive.plist
Move them out to, say, the Desktop. If they are not the cause of the problem, put them back replacing the newly-created versions.
I cloned my os prior to the update and all was fine. Rebooting to clone
css renders normal...but in 10.5.7 its not rendering in layout view.
I'm not seeing the same thing here with GL9/OS X 10.5.7, so it may be its something specific to your particular update. You might also want to consider doing a re-import of the site to recreate the site file and see if that helps.
John

Adobe recommends: CSS page layout basics

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's   been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Continuing on our quest for great layout tips, our next recommendation comes from yours truly:
CSS page layout basics
This article takes you through the A-Z of what makes up a basic CSS layout. It also shows you how to use some of the CSS layouts that come packaged with Dreamweaver.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101

Although I love sending newbies to tutorials, I am sometimes stuck with a quandary especially when I see the word basics.
To me, a basic layout does not require any more than
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
          body {width: 960px; margin: auto;}
          #header {height: 85px; background: #060;}
          #nav {height: 35px; background: #000;}
          #aside {height: 400px; width: 180px; background: #999; float: left;}
          #article {margin-left: 200px;}
          #footer {height: 35px; background: #000; clear: both;}
     </style>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="aside"></div>
<div id="article"></div>
<div id="footer"></div>
</body>
</html>
In the above I have used fixed heights. That is because I have not placed any content into the div elements, but still wanted to show the outcome.
When the basic layout has been settled on, we can start with our niceties like resetting styles, padding for the content etc. I have noticed that David Powers has written an article (which I have not as yet read) on Modernizr wich will help as a good starting point.
The main thing to keep in mind is to keep it simple.
Gramps
Oops! Sorry! the Modernizr article goes way beyond the basics. Please only tackle this if you are brave enough. The reason I thought that it may be a good starting point is beacause I have been using HTML5Boilerplate (which includes Modernizr) for quite some time now.
Message was edited by: altruistic gramps

Design View and a CSS Div layout page

There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
       <input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
       <input class="button" type="submit" value="Search" name="submit" />
       <input type=hidden name="col" value="mpr dno dnos1" />
</form>
    <div id="main">

<div id="newsBox" class="box">
   <div class="boxHeader">
    <div class="headerLeft"><h2>MP News</h2></div>
    <div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
   </div>
   <div class="boxContent">
    <h3>
     <script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
    </h3>
    <div id="newsContent">
     <div class="loading">
      Loading...
     </div>
    </div>
    
    <h3>My Subscriptions</h3>
     <ul style="list-style-type:none;">
      <li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
      <li><a href="http://">View Subscriptions</a></li>
     </ul>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
   </div>
</div>


<div id="content">
   
   
   <div id="alert" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft"><h2>Important Notice</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div id="alertContent" class="boxContent">
     <div class="article">
      <a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
      Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
      unable to access their PCs.
     </div>
    </div>
   </div>
            <div id="home_page_id">) Home Page</div>
   
   <div id="activities" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div class="boxContent">
     <div style="width:100%;">
      <ul>
       <li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
         <option name="selectRecruit" selected="selected">*** make selection ***</option>
         <option value="http.htm">Sourcing & Prospecting</option>
         <option value="http://.htm">Selecting & Assessing Candidates</option>
         <option value="http://_process.htm">Post Acceptance Process</option>
         <option value="http">Developing an Internship Program</option>
         <option value="http.htm">Tracking Activity, Results & Accountability</option>
         <option value="http://.htm">Recruiter Development</option>
        </select></a></li>
       <li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
       <li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
       <li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for   managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
       <li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
          <li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
          <li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
      </ul>
      <div id="slideshow1" class="activitySlideshow" style="height:212px;">
       <img src="image/slideshow_photos/photo06.jpg" />
       <img src="image/slideshow_photos/photo07.jpg" />
       <img src="image/slideshow_photos/photo08.jpg" />
       <img src="image/slideshow_photos/photo09.jpg" />
       <img src="image/slideshow_photos/photo10.jpg" />
      </div>
     </div>
    </div>
   </div>
   
   <div class="leftColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Events Calendar</h2></div>
     </div>
      <div class="boxContent"><ul>
      <li>April 25-30<br />
     <a href="http_020110.htm" target="_blank"></a></li>
     <li>May 12-14<br />
     <a href="http://030510.htm" target="_blank"></a></li>
       <li>June 16<br />
     <a href="http://.htm" target="_blank">Series conversation</a></li>
                      </ul>
      </div>
    </div>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
     The $25 association membership fee will be charged to June 30 home
     office supply bills. Representatives who wish to decline membership
     may submit a <a href="http://.htm" target="_blank">decline
     form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
     Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
                          <div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
     Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
              <div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
     Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
              <div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
     The Current Year Scale page on LINKnet provides the latest information
     and sales support materials based on the 2010 dividend announcement.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Approaching Deadlines</h2></div>
     </div>
     <div class="boxContent">
       <ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
       <li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
                      <li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
                      </ul>
      </div>
    </div>
    
    <div id="techalerts" class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
      <div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
     </div>
     <div class="boxContent">
      <div class="loading">
       Loading...
      </div>
     </div>
     <iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
    </div>
   </div>
</div>

Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes.

Css centering layout problem

Hi,
I'm building a website from a photoshop design and I have a
problem with the layout I can't see how to fix:
I have a header and a footer which both need to stay centered
and expand to whatever the browser window width is set to.
Between them I have a div of the main content of the pages
which also needs to be centered.
All seems very simple. I would normally just have a big div
around the whole page with an align="center". Job done.
But the problem is the space to the left of the content div
needs to be grey and the space on the right needs to be black.
Therefore I assume I'm going to need 3 divs. 2 for the left and
right spaces and another with the main content between them.
Both the side divs will need to expand somehow to fill the
space while keeping the fixed width content div centered. But I
think they will also have to be floated to sit side by side.
I cant seem to get the divs to stay in the correct places or
keep the side ones filling the space between the content div and
the edges of the browser.
Can anyone help?
Thanks,
Olliebear

Is this what you au trying to do?
http://starttoweb.com/
If so, you are welcome to grab the CSS file and mostly to fit
your needs.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Olliebare" <[email protected]> wrote in
message
news:fpn0q2$p1v$[email protected]..
> Hi,
>
> I'm building a website from a photoshop design and I
have a problem with
> the
> layout I can't see how to fix:
>
> I have a header and a footer which both need to stay
centered and expand
> to
> whatever the browser window width is set to.
>
> Between them I have a div of the main content of the
pages which also
> needs to
> be centered.
>
> All seems very simple. I would normally just have a big
div around the
> whole
> page with an align="center". Job done.
> But the problem is the space to the left of the content
div needs to be
> grey
> and the space on the right needs to be black. Therefore
I assume I'm going
> to
> need 3 divs. 2 for the left and right spaces and another
with the main
> content
> between them.
>
> Both the side divs will need to expand somehow to fill
the space while
> keeping
> the fixed width content div centered. But I think they
will also have to
> be
> floated to sit side by side.
>
> I cant seem to get the divs to stay in the correct
places or keep the side
> ones filling the space between the content div and the
edges of the
> browser.
>
> Can anyone help?
>
> Thanks,
>
> Olliebear
>

Cfmap inside table based layout

I'm noticing that the table attributtes set within a table are dropped from any data cells after a cfmap tag is placed in the table. In a simple example with cellpadding you will see that it works in the data cells before the cfmap tag but not after. Here is some sample code:
<html>
<body>
<table cellpadding=20 width=800>
     <tr>
          <td width=200>
           This is a test of cellpadding before a cfmap tag is hit in the code...
          </td>
          <td width=400>
               <cfmap centeraddress="15090" height="300" name="aca" width="400" zoomlevel="15" typecontrol="advanced" markerwindowcontent="Adventure Cycling Association Headquarters" zoomcontrol="large3d">
          </td>
          <td width=200>
           This is a test of cellpadding after a cfmap tag is hit in the code...
          </td>
     </tr>
</table>
</body>
</html>
I know that using tables for layout is not a desired practice, but I'm curious as to why this is happening. I'm not noticing anything in the source that should cause this and it is happening across multiple browsers. Any input would be greatly appreciated.

I looked at this issue a little further today and noticed that using any of the cfajax based tags cause this issue. I figured I could use a cfwindow to move the map out of the page to keep from breaking the cellspacing attribute. I noticed that using cfwindow or even cfajaximport breaks the cellpading for the remaining table cells. Is this a bug or is there something I'm not understanding about using any of the ajax based tags?

CSS elastic layout - Why does main column have two widths?

In my first all-CSS site, things were going well until I added content to the pages.
The layout is Dreamweaver's 3-column elastic with a header and footer. I also inserted an extra div for a Spry horizontal menu.
As soon as the main column content gets below that of the sidebars, it expands -- the top three paragraphs might appear about 5 inches wide and all the rest below are 6 inches wide. I don't get it.
See www.krempelsfoundation.org/test/test.html. Any help appreciated.

You don't have enough left and right margins on your #mainContent division. Try this:
.thrColElsHdr #mainContent {
margin: 0 15em 0 15em; /**left & right margins = space down the sides**/
padding-top: 3em;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CSS based layouts

Similar Messages

Maybe you are looking for