Need help with disjointed popups in Dreamweaver

cwright · Oct 31, 2008

Here's a link to the website I'm working on:
http://fusedm.com/x/pinnacle/html2/

With the nav bar at the top, I have both a rollover and a popup for each menu item. For some reason the popups are not disappearing when the mouse leaves the button, while the rollovers are working just fine. In my behaviors palette, each Swap Image action also has a Swap Image Restore attached to it, so I'm not sure what the problem is. I also tried doing both Swap Image actions first and only one Swap Image Restore action after that, but it did not work either.

Also, If I removed the rollover from the button, the popup works as it should. Just not when I do both. Any ideas?

So far I just have the main page here done. The content needs to be reworked a bit, but if anyone has any suggestions on the design or coding of the site I'd greatly appreciate it!

Thanks

SrWebDeveloper · Oct 31, 2008

You're not gonna like what I have to say!

Don't use DW for things like this (menu problems only), it's former code written by Macromedia folks long before Adobe took over, full of problems and unreliable. I suggest using modern DOM supported frameworks like Lightbox2, JQuery or Mootools to perform DHMTL menus and popups. Efficient code, OOP based, tons of third party plugins available to extend the functions, and compartmentalized code.

Google all of these and you'll find them.

In terms of design, it's coming along - the header is a placeholder, can't wait to see that finished. The color scheme is pleasant, probably the font size a little small and inconsitent (keep the same basic font). Maybe make the pipe symbols between menu names much darker, closer to the background, so the menu looks a little more streamlined and classic. But I really love the compass and its transparent integration into the center elements, well done.

Lookin' good!

And I'll leave it to others to try to help you debug the native MM functions that render your current menus. I've spent hours upon hours trying to do the same when I tried it with DW years ago, I gave up long, long ago. You might come to the same conclusion.

-jim

cwright · Oct 31, 2008

Thanks for the reply! I've got lots of questions based on your post... hope you don't mind

SrWebDeveloper said:
Don't use DW for things like this (menu problems only), it's former code written by Macromedia folks long before Adobe took over, full of problems and unreliable. I suggest using modern DOM supported frameworks like Lightbox2, JQuery or Mootools to perform DHMTL menus and popups. Efficient code, OOP based, tons of third party plugins available to extend the functions, and compartmentalized code.

Yea, this scares me a bit. I'm a visual personI hate math and I hate code. Just can't get my head wrapped around it. A while back I posted my portfolio site here that I had made in SiteGrinder and got lots of feedback with concerns about accessibility. This is one of my early attempts to build from the ground up in Dreamweaver, and using minimal CSS code was a big first step for me here. These DOM frameworks you mentioned I've never even heard of, let alone use. And this site needs to be done relatively quickly (I've got about a week). I'll look into learning those but that might be more of a long-term goal.

SrWebDeveloper said:
In terms of design, it's coming along - the header is a placeholder, can't wait to see that finished. The color scheme is pleasant, probably the font size a little small and inconsitent (keep the same basic font). Maybe make the pipe symbols between menu names much darker, closer to the background, so the menu looks a little more streamlined and classic. But I really love the compass and its transparent integration into the center elements, well done.

You say the header is a placeholder. Is that because it's just a single image right now? I was going to try making a table cell that width with a background color fill instead, and then place the logo and the address inside that. Is that the better way to go? And also on the fonts... right now it's only 2 fonts, Century Gothic and Times New Roman. I think that I used a bit too wide of a variety in weights and styles though, so I'll cut back on that.

Also another question I forgot about before... The faded background works well behind that text, but when you add more content and expand the page, the picture repeats vertically. I haven't been able to find out how to fix this. I found a CSS style that looked promising, but for some reason it didn't work. Is there an easy fix for this?

Thanks again!

SrWebDeveloper · Oct 31, 2008

When I first viewed your site the header took about 20 seconds to load, then it came in and simply said, in black text, "header" - probably while you were uploading or whatever.

Now I see it, looks awesome. Well done!

As to placement of any content on a page, I will always recommend using a div and CSS to do it instead of embedding images or text in tabular HTML. But that's a best practice, not a requirement, so stick with what ya got for now. As to the background repeating, if you did it in a div with an assigned ID, added in to your CSS "background-image: url('whatever.gif');" along with "background-repeat: no-repeat" that will prevent the problem. Of course if you set static width and height and match the background image to the same size and stick that in a table cell, same thing. But alot more work and code, which is the point about using div's and CSS.

As to being a WYSIWYG kind of person as you seem to be, I fully understand your hesitation at manually coding solutions using popular JavaScript frameworks. I'll put it this way, anything is usually better than Dreamweaver, for Mac Rapidweaver is the way to go, Sitegrinder and million products like it come next, then iWeb, and finally --- bite the bullet, spend an evening or two reading documentation and examples on how to use Lightbox 2 - my suggestion of all those I listed. You don't need to be a guru, most of it is copy/paste and tweaking a few lines of code. You seem very into developing, maybe it's worth taking that first step in at least adding some fancy Javscript to your sites. I'm not asking you to learn how to code from scratch.

http://www.huddletogether.com/projects/lightbox2/

-jim

cwright · Oct 31, 2008

SrWebDeveloper said:
When I first viewed your site the header took about 20 seconds to load, then it came in and simply said, in black text, "header" - probably while you were uploading or whatever. Now I see it, looks awesome. Well done!

As to placement of any content on a page, I will always recommend using a div and CSS to do it instead of embedding images or text in tabular HTML. But that's a best practice, not a requirement, so stick with what ya got for now. As to the background repeating, if you did it in a div with an assigned ID, added in to your CSS "background-image: url('whatever.gif');" along with "background-repeat: no-repeat" that will prevent the problem. Of course if you set static width and height and match the background image to the same size and stick that in a table cell, same thing. But alot more work and code, which is the point about using div's and CSS.

As to being a WYSIWYG kind of person as you seem to be, I fully understand your hesitation at manually coding solutions using popular JavaScript frameworks. I'll put it this way, anything is usually better than Dreamweaver, for Mac Rapidweaver is the way to go, Sitegrinder and million products like it come next, then iWeb, and finally --- bite the bullet, spend an evening or two reading documentation and examples on how to use Lightbox 2 - my suggestion of all those I listed. You don't need to be a guru, most of it is copy/paste and tweaking a few lines of code. You seem very into developing, maybe it's worth taking that first step in at least adding some fancy Javscript to your sites. I'm not asking you to learn how to code from scratch.

http://www.huddletogether.com/projects/lightbox2/

-jim

Interesting that you like to use div tags. When I posted my SiteGrinder site on here I got alot of feedback saying that all it did was throw a bunch of div tags everywhere and I got the feeling that that wasn't the proper way to do it. So that's why I looked into just using tables and CSS code.

I looked at the tutorial and downloaded the test page for Lightbox2 and I think I could implement that fairly easily. Seems that I just supply the images and copy the code. After the Pinnacle site is done I'm going to start on a friend's portfolio site and using Lightbox would probably be better suited there. I'll definitely give it a try.

For now I just need to figure out the best way to code the Pinnacle site. I looked at JQuery and Mootools and both seemed much more daunting to me (yes, I am very much a WYSIWYG person). Is it possible to recreate the nav bar I have with that code and leave the rest of the site as simple tables? Or should the whole site be recoded?

Thanks again for your help.

angelwatt · Oct 31, 2008

cwright said:
Interesting that you like to use div tags. When I posted my SiteGrinder site on here I got alot of feedback saying that all it did was throw a bunch of div tags everywhere and I got the feeling that that wasn't the proper way to do it. So that's why I looked into just using tables and CSS code.

Well, there's a line between using divs/CSS for doing layout and divitis --the overly abundant and unnecessary use of the div tag. It's hard to quantify the line, but experienced web coders will know it when they see it.

SrWebDeveloper · Nov 1, 2008

No need to recode the entire website. Just take your time introducing new elements, one at a time, and learning how to properly work with div's and CSS, not over use as angelwatt noted. Learn CSS first, then read the forum here and maybe read a tutorial or two like this one about div's and site layout (i.e. how to float and position div's to create a layout instead of using tables).

Basics of CSS (W3C schools tutorial, excellent)
DIV layout tutorial with examples

-jim

cwright · Nov 4, 2008

Thanks for the tutorial links.

Right now I'm focusing on getting the faded background to stay in place and not repeat. I tried doing this with the CSS palette and again by copying the code from the example of the W3C schools site (which essentially did the same thing) but it still won't work

I first tried using the palette, and this did exactly what I wanted, but only in the Dreamweaver preview pane. Once previewing in any web browser, the background disappears entirely. Using this method, the only way I was able to get the background image to appear at all was to set the background attachment to 'inherit' instead of 'fixed', but doing this made the background squish and stretch as the text size decreased and increased.

Here's what it looks like now:
http://fusedm.com/x/pinnacle/html3/legacy.html

Background doesn't work, at now the body table refuses to sit next to the header and footer tables without a gap.

I've also tried putting a div tag and a div layer on top of the background to set the text in, but this doesn't work either. When using a div layer, the text expands out of the grey background, and I can't get them to stay centered along with all of the other elements on the page.

I've been messing with this all evening and I'm about to give up for now. If anyone knows what I'm doing wrong, please let me know!

SrWebDeveloper · Nov 5, 2008

Best to show you an actual example of div's and CSS. I took a few minutes to create a test page that mirrors your compass layout below the headers, using your actual images...

Create a file called styles.css containing:

Code:

            * { margin: 0; padding: 0; }
            p { padding: 0px; margin-left: 31px; }
            div#wrapper {
                float: none;
                width: 730px;
            }
            div#solid_compass {
                float: left;
                width: 186px;
                height: 463px;
                background-image: url('http://fusedm.com/x/pinnacle/html3/images/image.jpg');
                background-repeat:no-repeat;
            }
            div#top {
                float: right;
                width: 544px;
                   height: 56px;
                background-image: url('http://fusedm.com/x/pinnacle/html3/images/legacytitle.gif');
                background-repeat:no-repeat;
            }
            div#content {
                float: right;
                width: 544px;
                height: 384px;
                background-image: url('http://fusedm.com/x/pinnacle/html3/images/pagebackground.jpg');
                background-repeat:no-repeat;    
            }
            
            div#footer_wrapper {
            
                float: left;
                position: relative;
                width: 544px;
                height: 56px;
                background-image: url('http://fusedm.com/x/pinnacle/html3/images/footertile.gif');
                background-repeat:no-repeat;
            
            }
            div#footer-left {
                  position:absolute;
                bottom: 0;
                
            }
            div#footer-right {
                float: right;
                width: 220px;
                height: 56px;
                background-image: url('http://fusedm.com/x/pinnacle/html3/images/footerimage.jpg');
                background-repeat:no-repeat;
            }

Then create an test.html as follows:

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" xml:lang="en" lang="en">
    <head>
        <title>Layout test</title>
          <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        
        <div id='wrapper'>
            <div id="solid_compass"></div>
            <div id="top"></div>
            <div id="content"><p>Content...</p></div>
            <div id="footer_wrapper">
                <div id="footer-left"><p>Links...</p></div>
                <div id="footer-right"></div>
            </div>
        </div>
    
    </body>
</html>

Use the above example to see how CSS and div's work together such as how wrappers are used, float works, bottom alignment for the footer, background images and styling the <p> tag so it aligns content properly for your site. The whole point is all styling is completely separate from content, just edit the stylesheet, and notice how little HTML was actually used.

Note:

Apply this to your existing code, replacing the tabular layout below your header, if you like the way it looks. Tweak as you see fit, this is obviously using your actual images on your web server which is why I used the full URL for all background-images. On the production version remove all instances of "http://fusedm.com/" in your stylesheet and use relative paths instead. This layout was only tested in FFox, I wrote it quickly, pardon any mistakes - it's just a starting point for you, not a "final".

Enjoy.

-jim

SrWebDeveloper · Nov 5, 2008

Here's a pic of the above code in action...

cwright · Nov 5, 2008

Thanks for taking the time to do that! I wont be able to experiment with this until I get off work in a few hours, but it does make sense reading through it. I'm starting to understand what you were talking about as far as using the div tag in correlation with the CSS code. I'm already familiar with using a CSS style sheet for my background tile and color and my font styles, so adding the div tags there for the layout makes sense.

Forgive me for asking questions before I get a chance to try this...

I don't see a div tag for the navigation bar or the placeholder image used for rollovers. Does that mean that that space will be left open on the page if I were to copy the code exactly (while fixing the links)? Since I have a few hours before I get home I'm going to look for info on how to rebuild the navigation bar using JQuery (if that's the best option). Once that is done, does it get placed into the CSS file or the HTML for each page separately?

Thanks againthis is very helpful!

cwright · Nov 5, 2008

SrWebDeveloper said:
Here's a pic of the above code in action...

Didn't see this post before my first reply. Looks great! So this should be added under the table that holds my header and nav bar, or should I position those using another div tag as well?

SrWebDeveloper · Nov 5, 2008

As I noted, that's just example code to get you started if you opt to switch to div/css and not use tables and cells for layout. If so, create your header/nav bar stuff in the same way I created the footer, with a wrapper around each major element and div's inside that hold actual content, including JQuery stuff. Then to center the entire page, put a div wrapper around everything and lookup on Google how to center an entire page (hint: it's NOT "text-alignment: center", nor is it "<div align='center' id='main_wrapper'>" for example). Just use sensibly named id's for all your div's and put all the CSS in the single stylesheet. I coded the example to encourage you to re-write your site, but only if you have the time and the desire.

If you like what I did but can't rewrite the entire site, merge yours and mine via:

1) Backup your existing HTML - you'll need it later
1) use the stylesheet and add the "link" tag which calls the stylesheet into the head section of your HTML
2) In the table you created, in the cell below the header/nav bar stuff, replace your code with mine (i.e. whatever I put between the "body" tags)
3) Copy from the backup HTML all your content, footer links, etc. and put all that inside the appropriate div's - I named them sensibly for you to figure it out

Have fun!

-jim

Search

Search

Need help with disjointed popups in Dreamweaver

cwright

macrumors 6502a

SrWebDeveloper

macrumors 68000

cwright

macrumors 6502a

SrWebDeveloper

macrumors 68000

cwright

macrumors 6502a

angelwatt

Moderator emeritus

SrWebDeveloper

macrumors 68000

cwright

macrumors 6502a

SrWebDeveloper

macrumors 68000

SrWebDeveloper

macrumors 68000

Attachments

cwright

macrumors 6502a

cwright

macrumors 6502a

SrWebDeveloper

macrumors 68000

Our Staff