Forum Moderators: not2easy
I want to use CSS-P to layout a page, but I don't want to absolutely size the DIVs. I want the DIVs to float and change size depending on their content and screen res (also to enable the user to change text sizeusing browser settings and hence the DIV size must stretch with it).
In Dreamweaver if you create a DIV and then put text in it, and then tell it is a bullet list it blows the DIV apart. It creates DIVs out of each LI item as well and generates lousy html coding (see link below) :
If the DIV is absolutely positioned then the list behaves as it should do and sits in the DIV quite happily and generates nice neat html coding (see link below)
sample code live on the web : ..snip
I have tried this on DW 3, DW Ultradev 4 (4.01) and DW MX (6.1) and they all seem to do the same thing.
Floating (or relative?) DIVs that change size with the text they contain (using the browser text size option so that the viewer can change the screen text size according to what they prefer) would seem the logical way to go. But DW doesn't want to let me use the bullet lists in this sort of layout - it is happy if I prescribe the font and DIVs sizes and positions in the CSS, but this isn't as user friendly ...
Any ideas on how to get round this - or is it a Dreamweaver bug?
[edited by: SuzyUK at 3:45 pm (utc) on Oct. 4, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]
<div id="divfloater">
<p>Bullet list in a floating stretchy DIV</p>
</div>
<ul>
<li>
<div id="divfloater">Bullet point 1</div>
</li>
<li>
<div id="divfloater">Bullet point 2</div>
</li>
</ul>
<div id="divfloater">
<p>The div and li code here gets blown apart by the bullets in the html code</p>
</div>
<div id="divabsolute" style="position:absolute; left:22px; top:187px; width:428px; height:146px; z-index:2">
<p>Bullet list in an absolute positioned div </p>
<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
<p>The div and li code here stays as they should be in the html code</p>
</div>
Does coding it the old fashioned way work? I.e., dropping into code view and making the list by hand?
Also, on a slightly unrelated note, if you have the moolah, I recommend upgrading to MX 2004. There's much better (although not perfect) support for CSS in it.
Good luck! :)
EDIT: oops! I guess your post came in while I was writing mine. That's very naughty of DW to do that...wonder why? If I had a small working page of your code with CSS, I'd be happy to test it in MX 2004 and let you know if DW behaves better :)
:) removed - Steve already posted it..
I don't know much about DW but immediately see there is another problem and that is using id="divfloater" more than once.. when you are getting the choice in DW (to insert a bulleted item) is that the bit that you mean DW is inserting for you?
Suzy
I'm trying to put together templates for use in Dreamweaver to be used by people who don't know html and need to use WYSIWYG editing
Why not hand-code the lists in the template? They would then be alterable with DW but have the right coding. Of course, I could be a moron and this might not work at all. ;)
Create a blank page
... insert two DIVs (click and drag out)
... type the following in to each DIV
paragraph
bullet
bullet
paragraph
... go into code view and in one of the DIVs edit out all the css positioning code so it is a floating DIV so you have code something like :
<div id="divfloater">
<p>Paragraph</p>
<p>Bullet point 1</p>
<p>Bullet point 2</p>
<p>paragraph</p>
</div>
<div id="divabsolute" style="position:absolute; left:22px; top:187px; width:428px; height:146px; z-index:2">
<p>Paragraph</p>
<p>Bullet point 1</p>
<p>Bullet point 2</p>
<p>paragraph</p>
</div>
... then go back to WYSIWYG mode or split screen and set the bullet paras to bullets by selecting them and clicking on the bullet button.
Watch what happens in the code window ...
Absolute positioned DIVs work fine and you get the decent code as I posted above. Any other DIVs (relative positioned, floaters etc) blow apart completely (also above) and all the li's end up with their own DIVs of the name of the parent DIV.
The result is the same whether the CSS code is as above or in the html header or in a separate linked CSS file.
Trouble is absolute positined DIVs don't resize and reflow the text if the text size is changed by the user or the screen window is changed - so you either lose text at the bottom of the DIV or off the right hand edge of the screen.
The idea from 'createErrorMsg' to hand code the blank lists into the template doesn't work either as not all pages need lists, and if they do they are in different places in the page. Also if you need to add an extra bullet point and hit return in WYSIWYG mode the li's then all blow apart again (in non absolute positiiend DIVs) and get their own DIV tag as described above.
I have an existing website of around 2000 pages taht is growing all the time so a template that supports working lists, DIVs and CSS all to be edited in WYSIWYG mode in DW is what I am really after ...
Or do I just give up and go back to tables for layout - lists work fine in that sort of HTML?
I typed the following code
<div id="test">
<ul>
<li>This</li>
<li>works</li>
<li>ok</li>
<li>in MX 2004</li>
</ul>
</div>
I then switched to design view and added a line - no problem.
Kaled.
<div id="test">
<ul>
<li>This</li>
<li>works</li>
<li>ok</li>
<li>in MX 2004</li>
<li>another bullet</li>
</ul>
</div>
... but if you then add another one in the same way and then tell it it isn't a bullet it does this :
<div id="test">
<ul>
<li>This</li>
<li>works</li>
<li>ok</li>
<li>in MX 2004</li>
<li>another bullet</li>
</ul>
</div>
<div id="test">back to text</div>
... then convert that to a para tag :
<div id="test">
<ul>
<li>This</li>
<li>works</li>
<li>ok</li>
<li>in MX 2004</li>
<li>another bullet</li>
</ul>
</div>
<div id="test">
<p>back to para</p>
</div>
... then try and add another bullet :
<div id="test">
<ul>
<li>This</li>
<li>works</li>
<li>ok</li>
<li>in MX 2004</li>
<li>another bullet</li>
</ul>
</div>
<div id="test">
<p>back to para</p>
</div>
<ul>
<li>
<div>bullet</div>
</li>
</ul>
oh dear, as I am sure someone somewhere sung ...
Some things in life are bad,
They can really make you mad,
Other things just make you swear and curse.
When you're chewing on life's gristle,
Don't grumble, give a whistle,
And this'll help things turn out for the best ...
And ... always look on the bright side of life ...
dee dum, dee dum dee dum dee dum
(feel free to join in)
Kaled.
Classes are the way to go.
... but if you then add another one in the same way and then tell it it isn't a bullet it does this :
... then convert that to a para tag :
... then try and add another bullet :
Why on EARTH would you do all this? I mean, if you can code the list, then add items TO the list in your WYSIWYG editor, that should solve your problem. The above list of possible foils for the method sounds like looking for a problem. If you're making a list and you interupt that list with a paragraph tag, then want another list item...you should start a new list anyway (only list items belong inside of a list).
Anyway, this is primary reason why handcoding is best.
Incidentally, if your site is that big (2000+ pages) have you looked into the possibility of using a CMS (Content Management System) to manage it, instead of DW? One php template, a mySQL database, and an external stylesheet could do your whole site. Some CMS programs even allow WYSIWYG editing of content.
