BG DM 2004 Template not affecting its children

Jacky Kenna · June 22nd, 2005, 04:54 AM

Hi Imar

Good to read what you recommend and I will go as you direct. One thing. Do you use Dreamweaver to delevop your sites?

Jacky

Imar · June 22nd, 2005, 06:27 AM

Yes, I do, for ASP and static sites.

Lately we do a lot of ASP.NET development. Dreamweaver just isn't the right tool for complex .NET programming, so for that we use Visual Studio .NET. However, I still use Dreamweaver a lot for the initial designs, and layout tweaking after we built the rough outlines in VS.NET. (VS.NET has a very very crappy HTML designer creating horrible code; fortunately that's going to change with the 2005 release).

Cheers,

Imar

Jacky Kenna · June 22nd, 2005, 08:57 AM

Hi Imar

I just spoke to a mate of mine who has given me some web space and he does exactly the same as you.

Take cAKE

All the Best Jacky

Jacky Kenna · June 22nd, 2005, 01:02 PM

Hi Imar

VS.Net is an MS product and only work with ASP. Am I correct?
What do programmers use or is it by hand or css or something.

Jacky

PS sorry about the teke cake above.

All the best

Imar · June 22nd, 2005, 01:09 PM

Darn, I just grabbed the whole cake because I thought it was mine... ;)

Yes, VS.NET is a Microsoft product. It works only with ASP.NET, the successor to ASP. You *could* use it for ASP as well, although it's not optimal for that task.

What do you mean with:

Quote:

quote:What do programmers use or is it by hand or css or something.

Use for what? For other programming languages than ASP.NET?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Jacky Kenna · June 24th, 2005, 02:51 AM

Hi Imar

I assume you mean me to continue here.

Firstly please see www.renovations.co.uk and you will see the crude layout that I have done for this project. More links need to be in place. Letâs call this Example 1.

Below is a copy of the above done in the style mine should have been. Letâs call this Example 2 which I have accessed by opening the html file sent as an attachment and copying the source code.

Pop style into a file on your machine and you will see that it looks almost the same.

I took style 2 code, opened a file in DW and dropped it in. The resulting look was not as above.

My objective is to be able to work on the above project with my colleagues who currently have a copy of all the code on their individual machines and I make designs and directions which they implement.

We have been working on this program for a couple of years and I can no longer see any light at the tunnel. I can give you more background and where I want to go if youâre interested.

Code for Example 2 followed by Styles for Example 2

Code

<HTML>
<HEAD>
<TITLE>MRNS Design V2</TITLE>
<link href="./mainStyle.css" rel="stylesheet" type="text/css">
<script language=Javascript src="./main.js"></script>
</HEAD>
<BODY>
<DIV id="mainTop">
<img id="mainImg" src="./images/logo.png" width="241" height="73" border="0">
<DIV id="mainLinks">
    <DIV id="linkitem">
        <A HREF="logon.html">Customer Log on</A>
    </DIV>
    <DIV id="linkitem">
        <A HREF="logon.html">Your Account</A>
    </DIV>
    <DIV id="linkitem">Logged on as: </DIV>
</DIV>
</DIV>
<DIV id="menuBar">
    <DIV id="menuItemNarrow"> </DIV>
    <DIV id="menuItem"><A HREF="javascript:hideIt();">Home</A></DIV>
    <DIV id="menuItem"><A HREF="javascript:hideIt();">About us</A></DIV>
    <DIV id="menuItemWide"><A HREF="javascript:showIt();">Project Selector</A></DIV>
    <DIV id="menuItem"><A HREF="javascript:hideIt();">Recruitment</A></DIV>
    <DIV id="menuItemWide"><A HREF="javascript:hideIt();">Management Reports</A></DIV>
    <DIV id="menuItem"><A HREF="javascript:hideIt();">Controller</A></DIV>
    <DIV id="menuItem"><A HREF="javascript:hideIt();">Contact us</A></DIV>
    <DIV id="menuItemNarrow"><A HREF="javascript:hideIt();">Help</A></DIV>
    <DIV id="menuItem"> </DIV>
</DIV>
<DIV id="secondLevel">
    <DIV id="secondLevelSpacer">
        <DIV id="menuSpacerNarrow"> </DIV>
        <DIV id="menuSpacer"> </DIV>
        <DIV id="menuSpacer"> </DIV>
        <DIV id="menuSpacerSel"> </DIV>
        <DIV id="menuSpacer"> </DIV>
        <DIV id="menuSpacerWide"> </DIV>
        <DIV id="menuSpacer"> </DIV>
        <DIV id="menuSpacer"> </DIV>
        <DIV id="menuSpacerNarrow"> </DIV>
        <DIV id="menuSpacer"> </DIV>
    </DIV>
    <DIV id="menuBar2nd">
        <DIV id="menuItemWide"><A HREF="javascript:hideIt();">Project Selection</A></DIV>
        <DIV id="menuItemWide"><A HREF="javascript:hideIt();">Location Criteria</A></DIV>
        <DIV id="menuItemWide"><A HREF="javascript:showIt();">Custom Data</A></DIV>
        <DIV id="menuItemWide"><A HREF="javascript:hideIt();">Selection Groups</A></DIV>
        <DIV id="menuItemWider"><A HREF="javascript:hideIt();">Control Screen Builder</A></DIV>
        <DIV id="menuItemWider"><A HREF="javascript:hideIt();">Report Screen Builder</A></DIV>
    </DIV>
</DIV>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><H1>Pa ge detail goes in here.</H1><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<DIV id="mainBottom">
    <DIV id="menuBar" style="vertical-align: baseline;">
        <DIV id="menuItemWide">© All rights Reserved 2005</DIV>
        <DIV id="menuItemWide"> </DIV>
        <DIV id="menuItem"><A HREF="aboutUs.html">About us</A></DIV>
        <DIV id="menuItem"><A HREF="sales.html">Sales</A></DIV>
        <DIV id="menuItemNarrow"><A HREF="help.html">Help</A></DIV>
        <DIV id="menuItem"><A HREF="contactUs.html">Contact us</A></DIV>
    </DIV>
</DIV>
</BODY>
</HTML>

Styles for Example 2

Imar · June 24th, 2005, 04:49 PM

Boy, where do I start.....

I am not surprised Dreamweaver isn't able to display your site exactly as the browser does.
First of all, that may be part due to your "developing for IE only".
Secondly, don't expect Dreamweaver to render exactly as a browser. Just as there is a difference between FireFox, IE, Opera and Netscape, there is also a difference in how DW renders. I tries to render very close to IE, even emulating its standards compliant doctype mode, but it's not perfect.

I am also not very clear on what you're asking me Are you asking why Dreamweaver cannot render this page? Are you asking for help?

That said, you are making it very hard for Dreamweaver. The page you posted contains a least a dozen HTML and CSS violations, contains a lot of unnecessary code and just plain wrong code. I wish I had the time to redo it for you but unfortunately I don't. Besides, I should be outside in the garden drinking wine instead of sweating all over the place in this hot office of mine.

Anyway, I'll try to summarize the largest mistakes:

1. Add a doctype. Learn here why doctypes are cool, useful, make web development a lot easier, how they make your page work cross browser (possibly even in Dreamweaver) and learn how to teach doc types to make coffee for you: http://www.alistapart.com/articles/doctype/

2. Drop the old skool HTML and use XHTML instead. Those ugly upper case tags are so passÃ© ;) Use lower case tags, and self closing tags instead.
Look here, here, here or basically at any page in Google that has the words XHTML, rules and Benefits.

3. IDs in a page *must* be unique. IE lets you get away with that and still gives you a reference to an element with a duplicate Id; other browsers won't. So this doesn't make sense:

<DIV id="menuItem"><A HREF="javascript:hideIt();">Home</A></DIV>
<DIV id="menuItem"><A HREF="javascript:hideIt();">About us</A></DIV>

If you want to apply multiple style rules to a single element, apply a class, not an ID:

<div class="menuItem"><a href="javascript:hideIt();">Home</a></div>
<div class="menuItem"><a href="javascript:hideIt();">About us</a></div>

Then don't use the # in your CSS selector but a . instead:

.menuItem
{
color: blue;
}

4. Properties with a value of 0 should be set to 0 and nothing else. 0 means 0%, 0pt, 0horses, 0em, 0px 0cm, 0browsers, 0cssdevelopers etc etc all at the same time. To simplify specifying that, simply use 0:

margin: 0;

sets the margin for all four directions to 0.

5. Don't apply the font-family property on every selector; apply it to a top element, like body and then let the cascade do its work. Child elements will inherit their parent's settings. This rule doesn't apply to just the font-family but to any other property that can inherit a value from its parent.

6. You're using loads of <div> tags which are, in the current implementation, about as bad as tables. If you want to use them for layout like this, you better switch to tables as they'll be easier to manage....
Instead of nested <div>s, the menu could be a simple[list] with a bunch of <li> items with some CSS applied. This is something for lower down on the todo list though.

If you don't understand all of what I am suggesting here, take a look at the left of this page; it's likely you'll see an add for Beginning CSS: Cascading Style Sheets for Web Design. Go get yourself a copy of it. It's worth every penny, interesting to read and opens a wonderful world of CSS for you allowing you to create fancy looking, cheaper to build and better to maintain web sites. Believe me....

OK, off to the garden now...

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: 07 - Six Shooters by Queens of the Stone Age (Track 7 from the album: Songs For The Deaf) What's This?