Trouble with <Div> coords in dreamweaver

**evan** · 01-29-2008, 04:36 PM

I have recently got away form using tables(mostly), I now use CSS, <DIV> and Templates.

So far, we started out making a page with a table and three rows. each cell has a background image.

when placing the text and additional graphics we started using <div>s. The trouble is that In Dreamweaver (it calls them "layers") it uses <div> and assigns coordinates when you move them around the screen. This is problematic when we preview the page in the browser, all <div> content is moved over and not lined up properly.

I have some ideas.

One would be to dispense with the tables and put Everything into <div>. But to simplify the amount of divs used, can I put background images into the <divs>either in the tag or in the CSS?

The other would be to assign CSS classes to everything separatly and make sure they have the same coords in the css.

-any ideas or suggestions

**BLiZZaRD** · 01-29-2008, 06:42 PM

any ideas or suggestions

Yeah... quit using DreamWeaver. It is a horrible application. Instead learn about CSS and how to properly position divs and other elements. Set your margins in teh body { element, set widths and heights in a #container { element. Learn about float: left; and how it can stack divs properly, as well as having a relative positioned outer div so you can absolute position inner divs. The HTML would look something like:

HTML Code:

<body>
<div id="container">
     <div id="outer">
           <div id="inner1">
           //right side contents here
           </div>
           <div id="inner2">
           //left side contents here
           </div>
      </div>
</div>
</body>
</html>

**auntnini** · 01-29-2008, 09:41 PM

What Buzzard said was essentially true. But please! Dreamweaver is a fantastic and reliable "editing" tool that provides visual feedback. The "horrible" part is that people don't take the time to learn basic CSS and expect Dreamweaver to do all the work. If you are trying to switch (more your head than your web site) from tables to CSS layout, Jeffrey Zeldman's "Designing with Web Standards" has examples of applying CSS to table cells so it might smooth the transition http://alistapart.zeldman.com/dwws/

**BLiZZaRD** · 01-30-2008, 03:23 PM

Dreamweaver is a fantastic and reliable "editing" tool that provides visual feedback.

Well.. you are 1/3 right.. it does provide visual feedback. There are more known bugs and problems with DreamWeaver than the Rain Forrest.

I would make a list here but I am not allowed that many characters in a post. However let's try some more frustrating ones:

Losing focus - using the tag auto complete? You can/will lose focus on the window and have to re-click (No know fix)

Auto-tags - They complete themselves... they also close themselves... usually before you are ready to close them.

Text width auto-sizing - Yup, DW takes it into it's own hands to decide how wide the display of a text column should be... another wasted hour trying to redo it to the width you want.

No free tech support. Adobe (and Macromedia) both admit the existence of a TON of bugs and problems... and they give you 2 ways to contact for help... and they both cost you money, because you know... you didn't pay them enough for the program as it is.

Auto-Complete code - also means auto-insert of "what-ever-the-hell-that-is" code. When you look at your final product online, 8 out of 10 times there will be that "something" wrong with it.. you just don't know... Only to find out (usually hours later or through a forum) that there was some extraneous code put in by DW itself.. if you don't know the language you are using.. you don't know how to fix it.

Lastly - Config folder on the computer - an auto-open and write to folder where only, oh the most important files for running the program, are stored. Because of the nature of this folder every aspect of the program uses it, some writing to the same file at the same time.. which, as you can guess, causes corrupt files. You have to either delete the files or the folder or uninstall/reinstall the whole program.

One more lastly - Uninstalling.. have you tried that yet? You can't do it without an act of God. It is easier to uninstall IE from Windows.

**evan** · 01-30-2008, 03:42 PM

Thanks Blizzard ,
The Divs and DW input

I changed my mind about buying it -I use it at work but I'll save the $$$ and just do it by hand -It's would be nice if there was a visual tool that had less features -because I like seeing my work as I go along, but an open browser could do that for me.

**BLiZZaRD** · 01-30-2008, 04:14 PM

You are welcome. You may find these links helpful:

CSS only layout design

Learn CSS basics with W3C.org

CSS Positioning tutorial

and

CSS Layers tutorial

That should at least get you started. And if you are on a PC - check out notepad++ It's great!

**evan** · 01-31-2008, 03:15 PM

good stuff,

been to w3schools allot,

quick question about using classes like:

div.sideLink {
/* side link container */
position: absolute;
left: 30px;
top: 50px;
width: 140px;
}

what's cool about that is I don't have to just assign properties to tags like <li> or <a> or <p> -but using div.sidelink is supported right? (they wouldn't post it if it wasn't I suppose)

I get confused because in my XHTML book it says you can create new tags and call them whatever you want which is great for formatting but iffy in some browsers.

**BLiZZaRD** · 01-31-2008, 06:56 PM

Yes, but XHTML isn't widly supported yet, and actually may fall out of favor. I wouldn't be using that either.

instead of using div.className, just use .classname, then you can assign that class name to whatever tag you want. a ul, li, p or a div, or use ID's for single applications:

Code:

#wrapper {
     width: 710px;
     min-height: 100%;
     color: #FFF;
     background: #000 url('/images/background.gif');
}

#nav {
     position: absolute;
     background-color: #F00;
     color: #00F;
}

.nav {
     background-color: #0F0;
}

Now using that mix (which is very ugly, btw) you can mix and match:

HTML Code:

<body>
<div id="wrapper">
     <div id="nav">
          <ul>
          <li>text blah blah or a link</li>
          <li>text blah blah or a link</li>
          <li>text blah blah or a link</li>
          <li class="nav">text blah blah or a link</li>
          <li>text blah blah or a link</li>
          <li>text blah blah or a link</li>
          </ul>
     </div>
</div>
</body>

Perhaps that marks the current page, or something. But I am not limited to using it in a div only.

**evan** · 02-01-2008, 04:08 PM

.nav and the #nav works, so why is it ugly -to ask a dumb question? Most of the time I use IDs instead of classes. Do some poeple have a prefference and why?

**BLiZZaRD** · 02-02-2008, 05:10 PM

It's ugly because those hex colors I used in the example are a nasty mix together.

ID vs class... okay simply put:

ID is short for "individual" all by oneself. Everyone went to recess and you are all alone, it is easy for me to pick you out cause you are not like the others.

CLASS is the rest of them all playing outside together. I have to group them in one word "class" to be recognized.

An ID is used to tell HTML/CSS/Whatever that this ONE, singular item has these attributes. A class on the other hand can be used over and over and over again. If you have 12 elements on a page and want elements 1, 2, 7, 9 and 12 to be identical then you can "group" them in the same class, the rest need to be individuals. If you use ID on element #4 and again on element #11 you will get an error. The ID is defined the first time it is used, and it shouldn't be redefined elsewhere.

Hope that explains it well enough.

Thread: Trouble with <Div> coords in dreamweaver

Thread Tools

Search Thread

Trouble with <Div> coords in dreamweaver

CSS vs. Tables

Fun with Deamweaver

Classes Vs Names

Bookmarks

Bookmarks

Posting Permissions