Hi there,
Does anybody know what’s the right way to make your horizontal navigation into 2 lines? I set my nav to “inline” and it becomes one horizontal nav but how can i break it into 2 lines as 1 line is too long for my layout.
thanks in advance!!
I assume you mean the html validator as the above is html and should be in the head of the page. I just tried the code above and it passes as valid html when I try it.
If you have that code in your stylesheet then that’s the error as only css can go in a stylesheet.
Otherwise I’d need to see your whole page to narrow down the error 
[ot]
and here I was hoping I can bookmark this post and whenever anybody around here says DW sucks, I could refer him/her to your post 
Anyway, I’ll leave it at that, as I don’t want to get this thread sidetracked, though if I ever open a thread “Why Dreamweaver doesn’t suck” I’m looking forward to your contribution 
[/ot]
Yes I like the code editor in DW and I haven’t found any others that can match it in terms of usefulness or usability. I’ve tried coda and others but they don’t have all the features in one package.
Code collapse (a must for me - especially on very long files)
Immediate Error highlighting (missing tags, commas or unmatched elements)
Code hints
Extensive formatting of css and html
css/html reference built in
Ftp and site management capabilities
& more…
However, it’s very pricey just to use as a code editor and if I didn’t have it already I probably wouldn’t buy it as there are cheaper and free alternatives although they don’t work so well.
The main problem with DW is that it is very slow and very large files will choke it or make it crawl very slowly. Apart from being slow it does work very well and I use it all the time especially when helping in the forums as I just copy and paste the code into the editor and immediately the color highlighting tells me where somethng is wrong and helps to fix problems I would not have noticed by eye.
PS - Don’t tell anyone I use it though
I use Dw too and really like it, though I probably only use about 1% of its features, which is disconcerting. Like Paul, I use it basically because I have it, as it comes with Adobe’s Creative Suite. I’ve just upgraded to CS5, and Dw is even better than before. I like it far more even than TextMate, which many swear by.
wow, the first time I see any of the established html/css guys openly admit that DW code editor is actually quite good.
Don’t use DW in design view at all. Just use its code editor window (which is quite good) and just work from there.
To view your work simply have the page saved and already loaded in a browser. Then just click refresh in the browser and the page is displayed.
I usually have the page open in about 6 browsers at the same time and then just click each to check for bugs every time I complete a little section. I have ie6,ie7,ie8, safari, Firefox and opera (latest versions) all open and loaded with the work in question. It then takes a couple of seconds to check all by clicking refresh and is the only way to develop properly. You must check regularly during development in the browsers you want to support and not when you are finished.
Hi Paul,
I noticed that Dreamweaver is not a good tool to create this kind of tableless layout, it looks totally screwed up in the Design view in DW but it looks totally fine and accurate in the browsers. What do you normally use for your coding?
cheers.
Bravo! you are the man Paul. Really appreciate your prompt reply and I learned a lot from this. I will get the book that you reckon.
cheers!
Hi,
The way the margins are calculated are explained more fully in the faq link I gave above so may be worth a read
Basically, the height of the footer is the same as the negative top margin on the outer wrapper. Then the border top on the header is also the same height as both of those to soak up the margin and to make fit all fit together.
You must account for borders and padding of course.
In the footer you have floated 3 elements but you need to confine those floats to the parent by setting overflow:hidden to #footer otherwise the footerbg element won;t rise up behind the floats.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sticky footer</title>
<style type="text/css">
* {/* for demo only - reset styles individually in a real applicaion */
margin:0;
padding:0;
}
p {
margin:0 10px 1em
}
html, body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:#ccc url(footer_bg.jpg) repeat-x 0 0;
}
#wrap {
background:#9cc;
width:800px;
margin:0 auto;
min-height:100%;[B]
margin-top:-100px;[/B]
position:relative;
border-right:2px solid #A6B2BC;
border-left:2px solid #A6B2BC;
z-index:2;
}
#header {
width:800px;
margin:auto;
height:46px;
background:#333;
color:#fff;
[B]border-top:102px solid #A6B2BC;[/B]
border-bottom:2px solid #A6B2BC;
position:relative;
z-index:3;
}
#main {
width:800px;
}
/*left column */
.content {
width:400px;
float:left;
}
/* right column */
.right {
float:right;
width:399px;
z-index:3;
position:relative;
}
#footer {
text-align:center;
clear:both;
color:#fff;
border:2px solid #A6B2BC;
position: relative;
[B] height:96px;[/B]
width:800px;
margin:auto;
background: url(footer_bg.jpg) repeat-x 0 0;
[B]overflow:hidden;[/B]
}
#footer .leftcol {
[B]height:92px;[/B]
width:230px;
float:left;
border:2px solid #A6B2BC;
}
#footer .midcol {
[B] height:92px;[/B]
width:230px;
float:left;
border:2px solid #A6B2BC;
}
#footer .rightcol {
[B] height:92px;[/B]
width:230px;
float:right;
border:2px solid #A6B2BC;
}
#footerbg {
height:99px;
margin-top:-99px;
background:red url(footer_bg.jpg) repeat-x 0 0;
width:100%;
clear:both;
}
/* absolute column colours only */
.absright {
position:absolute;
right:0;
bottom:0px;
width:398px;
background-color:#CCCC99;
z-index:1;
border-left:1px solid #A6B2BC;
}
html>body .absright {
top:96px;
}
/*Opera Fix for sticky footer*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#wrap:after {
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#wrap {height:100%}
#wrap{z-index:1}
.absright{height:999em;bottom:0}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<p>this is the #header div this is the #header div this is the #header div this is the #header div</p>
</div>
<div id="main">
<div class="right">
<p>Start right column content here : This is the right column content here : This is the right column content here : This is the right column content here : This is the right column content here : This is the right column content here : This is the right column content here :</p>
<p>This is the right column content here : This is the right column content here : This is the right column content here : This is the right column content here : This is the right column content here : This is the right column content here</p>
</div>
<div class="content">
<p>See the <a href="http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm">sticky footer demo</a> for the basic techniques which are used here (and another example <a href="http://www.pmob.co.uk/temp/sticky-f.htm">here</a>). Then have a look at the <a href="http://www.pmob.co.uk/temp/equal-columns-3fluid.htm">absolute column technique</a> to make the right column.</p>
</div>
</div>
<div class="absright">
<!-- holds no content -->
</div>
</div>
<div id="footer">
<div class="leftcol">
<p>left column</p>
</div>
<div class="midcol">
<p>middle column</p>
</div>
<div class="rightcol">
<p>right column</p>
</div>
</div>
<div id="footerbg"></div>
</body>
</html>
Hi Paul,
no luck, I tried to adjust the negative margins but it doesn’t make a difference so i guess i have missed some other things as well. It looks not that bad in IE but in firefox, the footer is totally out. May I know how you calculate those negative margins? I have attached my files here.
cheers.
Thanks Paul, no wonder it doesn’t work as the height already exceeded the original height. I will try to adjust a corresponding negative margins and see whether i can make it work, otherwise I will need to ask the master again. 
cheers.
Hi,
You can just float three columns of appropriate width and they will line up in the footer without doing much at all. The only thing to watch out for is that the height of the footer must not be exceeded because it is the height that is used in all the calculations and must be consistent with the negative margins and soak up techniques. If you need more height in the footer then you need to change all the corresponding negative margins and other fixes.
The drawback of a sticky footer is that it needs to be a fixed height as there is simply no other way to account for it.
If you have an updated page with your extra footer columns in place then I’ll take a look and see what’s going on.
Hi Paul,
I have completed my website and everything works perfectly fine. Now I tried to validate it by using W3C CSS validator. There is one error caused by this conditional statement
<!–[if lt IE 7]>
<link href=“iecss.css” rel=“stylesheet” type=“text/css” />
<![endif]–>
and I got the following error message from the validator.
Lexical error at line 388, column 58. Encountered: “>” (62), after : “<link href=\“iecss.css\” rel=\“stylesheet\” type=\“text/css\” /” > [endif]–>
Thanks Paul and I hope you had a nice holiday. My question is as below.
I got 3 groups of information need to be presented on the footer so i need to create 3 columns (left,center and right) inside my footer.
I tried to create 3 divs inside the “footer” div but once i do that, my sticky footer is not working anymore. May I know what’s the proper way to create 3 columns inside the current sticky footer? thanks!!
Just back form Holiday today so if you are still having problems post again and I’ll take a look.
sorry, quick question here.
I tried to copy your CSS in the html page to an external document (main.css) but once i do that, the right column goes beyond the footer’s height. May I know why?
thanks!
The smart answer would be that you did it wrong but I won’t say that:)
I’d need to see what you have done as there should be no difference with an external css file.
You didn’t copy the CC (conditional comments) into an external file did you? Only css goes into an external file.
To call IE styles you would place a link to the ie only stylesheet inside the conditional comments like so.
<!--[if lt IE 7]>
<link href="iecss.css" rel="stylesheet" type="text/css" />
<![endif]-->
Ahh… thanks! I didn’t know that and now it works! I’m having the 101 essential tips, tricks & Hacks but now i want to learn more about it. May i know which book you reckon?
thanks heaps.
lol - this one
(Just do a search on this forum for css books and you will see loads of other recommendations)