Forum Moderators: not2easy
Maybe someone can help me with this problem...
Basically I have been trying to create a template for HTML pages using CSS.
I have created a style sheet, and linked it to the template, and everything looks exactly how i want it to.
The problem comes when I come to apply the template to a new HTML page. When I preview the new HTML page (with template applied) it looks like the CSS goes wonky and some of the divisions have moved.
It's really frustrating because the template looks perfect, but when it is applied to a new page, it goes wrong.
The styles and colours are all there but the css boxes have just moved.
I checked the code between the HTML page and the original template and the coding is exactly the same apart from the very top line which says
[ <!-- InstanceBegin template="/Templates/Basic.dwt" codeOutsideHTMLIsLocked="false" --><!DOCTYPE HTML PUBLIC> ]
as opposed to
[<!DOCTYPE HTML PUBLIC>]
on the template page.
Any help would be really greatly appreciated! this is driving me mad!
Meak
If this is in IE6, and IE6 is in compliant mode because of the!DOCTYPE statement, then having a comment before the!DOCTYPE will switch IE6 back to quirks mode which may render differently.
the template is here <snip>
and the html page is here <snip>
as you can see, in the test.htm page, the right hand menu has dropped, for no apparent reason, when it is fine in the template!
(PS, all the existing pages on my site are coded separately, which is why i'm trying to create this template)
[edited by: SuzyUK at 4:29 pm (utc) on Aug. 20, 2004]
[edit reason] oops no URLS per TOS #13 [webmasterworld.com] [/edit]
change
<!-- InstanceBegin template="/Templates/Basic.dwt" codeOutsideHTMLIsLocked="false" --><!DOCTYPE HTML PUBLIC>
to just
<!DOCTYPE HTML PUBLIC>
Incidentally, your doctype, while not technically invalid, is missing some information. Go here, [w3.org...] for the full list of valid doctypes.
you are aright.
Removing the gumpf from the doctype line does work.
HOWEVER... the only way to do this is to detach the html from the template... thus rendering the template useless.
Is there any way to change it without detaching from the template?
And which doctype heading should i have?
Are these comments in the template itself? If so, make the changes there, preferably in a text editor as opposed to Dreamweaver itself.
The problem is when Dreamweaver applies the template to the new html page.... it also adds the extra code
<!-- InstanceBegin template="/Templates/Basic.dwt" codeOutsideHTMLIsLocked="true" --><!DOCTYPE HTML PUBLIC>
when i only want it to say
<!DOCTYPE HTML PUBLIC>
how do i go about stopping dreamweaver doing this?
On Ultradev the comments are applied inside the <html> element by default. I assume you are using a later version?
I know that the comment links to the template.... but surely something is wrong here, seeing as the template is not displayed properly when linked to.
... and read the page that createErrorMsg linked to.
I have solved the problem now!
I needed to insert the following into the <head> tag
<!--Templateinfo codeOutsideHTMLIsLocked="true" -->
and now it works!
<!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">
You seem to have found the solution, but having looked at your site anyway, the doctype you have chosen is inappropriate for the style of markup you are using in the rest of the document. I would recommend using the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">For the HTML tag, you won't need the xmlns attribute if you use the above doctype, but you should declare the language of the document there instead, which will help search-engine bots and screenreaders identify the language appropriately (I assume the document will be in English):
<html lang="en">
sorry about linking to my site.... i just thought it might be the only way to show people what i meant!
And you should consider moving the style information out of the markup and into an external stylesheet. It speeds up the page and makes changing/tweaking your layout MUCH easier. DW MX may even have a way of automating this for you.
It's all soretd and I don't want to even touch it again in case it goes wrong!
I already have a whole external style sheet, so I'm not sure which style markup you are referring to>?
not sure which style markup you are referring to
Your code is littered with inline style attributes. In fact, in order to see how the pieces of the site are positioned, requires flipping back and forth between the external stylesheet and the source code where the inline styles are. A minor nuisance for me, looking over your code, but a potential headache for you when the day comes that you want to make layout changes to your site. Keeping it ALL in one place makes for easier updates.
i'm new to css, and thought that this was a pretty good first effort
thought that this was a pretty good first effort
Don't misunderstand me! This is all meant as constructive, not destructive critisism. Your site does look good, and most of what is 'wonky' about the CSS looks like trademark DW tagsoup (stuff DW did without you necessarily knowing it). I suspect all of those inline styles were added by DW in response to point-and-click choices you made in Design View. Since the site is working fine, you may not want to go in and clean things up. but if you DO, here's a way to start.
Open your external stylesheet in a text editor and have it ready to go. Then open the source code for the document and zero in on the main <div>s of your page. Any of those <div>s that have style="WHATEVER" in the tag, you want to move that style info into the external stylesheet. So find the stylesheet selector that matches the <div> and copy the style information, in proper CSS format, into the stylesheet. (If the <div> already has an entry in the stylesheet, simply add the inline rules to the existing rule declaration. If there isn't already an entry, make one.)
So, say you find this in the source code...
<div id="main" style="float:left; width:200px; margin:0;">
...in the stylesheet, this becomes...
#main {
float: left;
width: 200px;
margin: 0;
}
...and the <div> tag should be edited to this...
<div id="main">
You can see how much cleaner that looks, which is one of the main reasons doing this is worthwhile.
Once you've got the main <div>s pared down, then move on to smaller, more specific elements until all of the style info is out of the source code and squirreled happily away in the stylesheet.
Bear in mind that this is only a suggestion. Some people are extremely anal about using ONLY external stylesheets and keeping the html code clean. I happen to be one of them, but that doesn't make it the right way, just a way.
Great job and congratulations on your first CSS site!
:)
thankx for the advise though, it is much appreciated!
<!-- InstanceBegin template="/Templates/main_index.dwt" codeOutsideHTMLIsLocked="false" -->
are placed in the very top line above
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
How do I eliminate this from happening so that my CSS does not mess up?
while I understand your question, in that you need nothing to appear before the Doctype because of Quirks Mode rendering - I can honestly say I don't know how to achieve that with DW, as far as I know, once you have set up your basic template, then it should be only defined areas that are instance editable, which means that your pre <doctype> section need never be touched..
note my past tense, I only tried it a few times, so cannot give you the best advice
I will ask around the forums to see if we can find you a better answer.. or perhaps you might be better asking in WYSIWYG [webmasterworld.com] forum.. those guys know their editors and can perhaps help you better how set it up for your needs
-Suzy
