layers in dreamweaver

[whitneystar]

I set up my layers in dreamweaver, some are hidden and controlled by the show-hide layers behavior. when i preview the page in internet explorer, the layers scatter all over the place and the hidden layers show up behind images. anyone have any idea whats going on? I just upgraded to dreamweaver 8, so I don't know if this is an issue with this particular version.

[Centauri]

Repeat after me ... "there is no such thing as layers"

"Layers" is Dreamweaver-speak for absolutely-positioned divs, and they should be avoided as much as possible - the only time you need absolute positioning is for special effects where you want something to overlap another.

Now that you have Dreamweaver8, you will see the css panel to the right - make good use of it. Rather than laying out your site in the Design view, use it to enter your content only, and use the Code view to insert logical grouping divs, and use the css panel to style things to look the way you want, including applying presentational graphics. IE is the worst browser for standards compliance, and an understanding of html and css coding techniques is required to get around its problems. Dreamweaver is a great tool, but should be used as a tool for coding - relying on DW to generate the code will result in a lot of garbage that causes cross-browser compatability issues.

Dreamweaver's actions are messy javascript functions that quite often are not needed, especially for doing rollover effects which are better handled via css.

Can you provide a link to what you are working on?

[whitneystar]

I don't know how to use the CSS panel to arrange the layout. I see the coordinates for where i have positioned the layer but I don't know how to affect anything in there that will help me fix this problem...

I didn't have the html document uploaded before, but its www.whitneystar.com/home.htm

the headline and the menu weren't displaced until i entered the image i wanted in the middle and and the text, the 4 links that show up on the bottom are supposed to be 2 seperate hidden layers.

oh and I needed the hidden layers to overlap. so I don't know if that makes a difference

[Centauri]

That code IS a mess!

Looks like dreamweaver has done something silly and copied a large section of code within another, which has generally caused havoc... This may have been associated with a few divs having the same id name, but not sure. After sorting that bit, I think I can see your general layout here. I assume the two hidden divs are to be dropdown menus under "Related Links" and "Contact" ? - if so, there is a much better way to do this.

Give me a little while, and I will fix up and rewrite a bit of this, and post back the code and a little tutorial you can follow along with in Dreamweaver.

[whitneystar]

no those two sets of links are hidden behind where that paragraph of text is. so when i click on related links or contact it shows up in that black box which is supposed to be sort of in the middle and hide the other text. and the copyright thing is supposed to be at the very bottom obviously. the header and the menu were supposed to be at the top left edge of where the gray starts. it is a total mess. my old version of dreamweaver never did this.

thank you for your help!

[Centauri]

Ok, I have had time for a fiddle.

Even with the copy/paste error corrected, the page has serious accessiblity issues due mainly to letting Dreamweaver produce what it thinks is the appropriate coding. These days, other things besides computer browsers access web pages (including screen readers for the vision impared, and search engine spiders), so the page should be written so that it is understandable by anything that reads it. This is where css styling comes in, as defining the visual look via css frees the html to describe the content of the page. The functionality of the page should also not be reliant on technologies like javascript or flash, as not all users have, or choose to disable, these. At the moment, besides the content being not in a logical order, the image links in your menu cannot be "read", thereby not allowing some users to know what the links do. Some user agents will not be able to access the hidden links, as they have no way of unhiding them.

Starting with the doctype, in Dreamweaver select the Edit menu and Preferences, select "New Document" and change the default document type tp HTML 4.01 Strict and the default encoding to UTF-8. I usually have the default extension set to .html, as that makes more sense to me (.htm is left over from the days when file extensions could only have three letters). This will make all new pages you create use the html 4.01 strict doctype, which is still the most appropriate one to use for new pages.

Save this block of code as index.html (or index.htm if you prefer) and open it up in Dreamweaver and a browser (I hope you have Firefox browser to preview as your main browser? - if not, get it now). The first page on your site should always have the name of "index" as this is what the server looks for when just the domain name is given. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Whitney Star | Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src='sfhover.js'></script>
</head>

<body>
<div id="wrapper">
<h1>Whitney Star</h1>
<ul id="nav">
<li class="navmusic"><a href="music.html">Music</a></li>
<li class="navbio"><a href="bio.html">Bio</a></li>
<li class="navphot"><a href="photos.html">Photos</a></li>
<li class="navlink">Related Links
<div>
<ul>
<li><a href="http://www.myspace.com/whitneystarent">Whitney Star's Music Myspace</a></li>
<li><a href="http://www.myspace.com/boykinbeats">Boykinbeats Myspace</a></li>
</ul>
</div>
</li>
<li class="navcont">Contact
<div>
<ul>
<li><a href="mailto:webmaster@whitneystar.com">email Webmaster</a></li>
<li><a href="mailto:whitneystar@whitneystar.com">email Whitney Star</a></li>
</ul>
</div>
</li>
</ul>
<div id="newsbox">
<p>Whitney Star is currently recording her first album with Mike &quot;Boykinbeats&quot; Boykin as well as other numerous collaborations. Keep checking back for more music and information.</p>
</div>
<div id="footer">
<p>All images and media are property of whitneystar.com. any use of these images or media without permission is a violation of copyright law. please contact <a href="mailto:webmaster@whitneystar.com">webmaster@whitneystar.com</a> for further inquiries. website design by Whitney Star Entertainment.</p>
</div>
</div>
</body>
</html>

I will describe this in the next post due to post word count limits.

[Centauri]

Upon looking at this, you will notice that it is a bland text page, which is exactly what it should be - remember that it is the job of css styling to make things look good. You will notice that the title of your page appears as large text, and the menu is text links - as such, anything can read and understand this. This was written mainly in the code view of Dreamweaver 8 - the design view is handy when you are typing in the paragraph and link text, though.

The process I used was to first write the content, with little regard to anything else. Starting at the top of the page, I marked up the name graphic as a <h1> (top level) heading (don't worry, it will be replaced by the graphic later! ). A menu, disregarding what it may visually look like, is nothing more than a list of links to follow - therefore, the most logical way to represent it in the html is to use an unordered list of links. As the last two menu items are not actually links, but are associated with the links you are trying to initially hide, these links will be lists of links within the main list. Don't worry about the classes and id's in the code yet, just look at the structure - a list where the last two items contain sub lists. The news item and text at the bottom of the page are nothing more than paragraphs of text, so they are marked up as such using <p> tags.

Once that is done, it is a matter of looking for logical divisions. As the footer text paragraph is to be placed at the bottom and is unrelated to everything else, I put a div around it and gave a descriptive id of "footer". Similarly, as the news item is to be contained within the black box graphic, and may contain more than one paragraph, I surrounded this in a div with an id of "newsbox". As the background of your site has a finite width, the site should not extend outside this and would look better centered horizontally, so I wrapped everything in a div with id of "wrapper". To target and identify the parts of the menu list, I gave the main list an id of "nav". The main list items I gave class names to identify them when assigning graphics - id's could have been used here, but using classes looks less messy in the css file - just a matter of personal choice.

Note that the last steps have not actaully changed the look of anything - they are to provide grouping and identification which can provide more meaning in the html, and it prepares the html for the styling process.

Last thing to note about the html is the two lines under the <title> tag - the first one references the external styling file which I will describe next, and the second one references an external javascript file which allows some of the tricks used to work in Internet Explorer 6 (probably the world's buggiest browser).

I combined the menu normal and rollover graphics into combined ones, which makes the job of doing the rollover effects much easier, and eleiminates the need for preloading - these are attached with this post, and should be saved to the images folder.

Save this following block of code as a file named "style.css" and save it to the same folder as the html file :* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(images/homebg.jpg);
background-repeat: no-repeat;
background-position: center 20px;
background-color: #47BB4C;
padding-top: 20px;
}
p {
padding-top: 1em;
}
#wrapper {
width: 880px;
margin: 0 auto;
}
h1 {
height: 124px;
width: 500px;
background-image: url(images/whitneystar1.jpg);
font-size: 1px;
color: #A4A4A4;
}
#nav {
margin-left: 20px;
height: 21px;
position: relative;
}
#nav li {
list-style: none;
float: left;
height: 21px;
font-size: 1px;
background-position: left top;
text-indent: -1000px;
}
#nav li:hover, #nav li.sfhover {
background-position: left bottom;
}
#nav a {
display: block;
height: 21px;
color: #FEFAF9;
text-decoration: none;
}
#nav div {
position: absolute;
top: 21px;
left: -2000px;
padding: 145px 0 0 80px;
z-index: 20;
}
#nav li:hover div, #nav li.sfhover div {
left: 250px;
}
#nav ul {
background-color: #000000;
width: 260px;
height: 155px;
display: block;
}
#nav ul li {
float: none;
font-size: 13px;
height: 2em;
}
#nav ul a {
color: #FFFFFF;
text-indent: 0px;
margin-left: 10px;
line-height: 2em;
height: 2em;
text-decoration: underline;
}
#nav ul a:hover {
color: #47BB4C;
font-weight: bold;
text-decoration: none;
}
#nav .navmusic {
width: 81px;
background-image: url(images/music.jpg);
}
#nav .navbio {
width: 59px;
background-image: url(images/bio.jpg);
}
#nav .navphot {
width: 72px;
background-image: url(images/photos.jpg);
}
#nav .navlink {
width: 151px;
background-image: url(images/links.jpg);
}
#nav .navcont {
width: 99px;
background-image: url(images/contact.jpg);
}
#newsbox {
background-image: url(images/newsgraphic.gif);
width: 250px;
height: 170px;
padding: 90px 74px 90px 90px;
font-weight: bold;
color: #FFFFFF;
margin: 45px 0 0 265px;
}
#footer {
color: #FFFFFF;
text-align: center;
margin-top: 10px;
}
#footer a {
color: #FFFFFF;
}
#footer a:hover {
color: #47BB4C;
text-decoration: none;
}

Have a look at the page now in Firefox, and you will see the full functionality. I will discuss this last file in the next post.

[Centauri]

If you open the page now in Dreamweaver, the first thing you will notice is that the view in Design View differs to what the browser showed. This is because Dreamweaver is not a browser, and does not render a web page fully as per the W3C standards (I believe Dreamweaver CS3 is better in this regard), which is why Design View should never be relied on as an accurate representation of your page - always preview in several browsers as you are developing a site, using Dreamweaver's design view only to give some visual clues.

The next thing you should notice is that the css file appears in the css panel at the right - if you right click on the filename and select "Go to Code", the css file will open up in another code view tab, so you can see the correlation between the code and the entries in the css panel.

Starting at the top of the css, the first entry is a "*" - this is the "universal selector" and means everything - in this case I assigned margin and padding of zero to everything. Different browsers apply different amounts of default margins and/or padding to various elements, depending on what the browser thinks is appropriate. Unfortunately, this makes rendering a site the same in all browsers very difficult, so zeroing out all default margins and paddings gives us a known start point for all browsers.

Next, the body gets the base font style and size - the "cascade" part of css applies this as the base to all other elements on the page. The main background is applied here, and as the site will look better centred, we put the background in the centre. The 20px top padding and top spacing on the background image gives a little space above the site which improves appearance. I also made the background colour match the green on the sides of the graphic - looks much better than white.

The next entry defines the spacing for paragraphs, as we stripped the default spacing at the start of the css. As IE has big problems implementing margin collapse properly, I used a top padding as paragraph spacing rather than top and bottom margins.

The #wrapper div gets a width of 880px, which is a little less than the width of the grey are in the background graphic, which means everything will be contained within this area. The margin applies zero to top and bottom, and "auto" to the sides, effectively centering the div (and everything inside) on the page.

The h1 heading is given a size to match the name graphic, which is applied as a background. The actual h1 text is hidden from view by making it 1px high and colouring it to match the graphic background grey - therefore people can't see it, but software can.

The navigation is where the real tricky stuff happens. First we give the main list itself a height to match the menu graphics, and a little left margin to briong it in from the edge. A relative position is used here so that the hidden sub menu items position will be referenced to this. The list items (li's) get a list-style of none to remove the default bullets found in lists, and they are floated left so that they all stack against each other in a horzontal line. They are given a height to match the background, and the background position is set to left top. If you looked at the composite graphics I attached last post, this positioning will allow just the top part of each graphic to show. The actual text within the list items is hidden by first making it ony one pixel high, and then indenting way off the left of the screen using negative text-indent. The text is still in the file, so can still be read by screen readers etc, but is gone visually. Hiding the text by colour, as used in the h1 above, could be used here, but gets messy due to the background colour changing on rollover.

The next enty is what actually does the rollover without any javascript being involved. When the li is hovered over, the background image is shifted to the bottom, thereby revealing the bottom half of the two-part graphic - simple, huh? The .sfhover class also included here is part of an IE6 fix which I will explain later. You may notice that none of the menu background images have been applied yet - that is coming.

The next entry assigns the <a> links a block display, ensuring that the full size of the menu button is available for the link activation, not just the text - this makes using the menu easier. The color and text-decoration properties are not actually required here - they were put in while I was playing with it, and I forgot to remove them :rolleyes:

The next entry styles the divs that surround each sub menu in the html. The absolute positioning allows them to be placed over top of the news box, and as the #nav list itself uses relative positioning, these divs will be positioned relative to the top left corner of that. The 21px top measurement places the div flush with the bottom of the menu so there is no gap to drop out the hover effect. The -2000px left measurement actually places the div way off the left of the screen initially so that it cannot be seen - this method is prefered to hiding the div with display:none as some screen readers will not be able to read hidden content. The 145px top padding and 80px left padding positions the div contents (the sub menu lists) over top of the news box when the div is moved to its display position. The next entry moves the position of the relevant div to a measurement of 250px (from the left of the main menu) when the list item is hovered, effectively bringing it into view. This position is just to the right of the start of the "Related Links" part of the menu to allow a seamless movement of the mouse from the button down to the popup links without the hover dropping out. Again, the .sfhover class is the IE6 fix which will be mentioned later.

The next entry styles the sub menu <ul> as a block with a black background and sized to cover the text within the news box when the sub menu div is moved into view. The sub menu list items (li's) will normally inheret the styles applied to the main list items, and as we don't want these side by side with 1px text like the top items, we have to style these separately with float:none to put them one under the other, and text size to restore the text. The height gives a little spacing between the links to make them easier to read and navigate. Similarly, the sub menu <a> links inheret the previous styles, so we reset the indent and the colour. A little left margin and height gives an appealing spacing. Next, a hover effect of colour change, bold change and underline removal is applied to the sub menu links to make them do something when hovered.

The next 5 entries apply the correct background image and width to each of the main menu list items, completing the menu styling.

Next is the styling of the news box. It is given a size to correspond with the usable black centre of the graphic, and padding is applied to bring the total size out to that of the graphic, which is applied as a background (remember that padding is added to the internal size to arrive at the external size). The margins space this div at 45px from the bottom of the menu, and 265px from the left of the wrapper (note the setting of positions using the margins - no need for absolute positioning here at all).

The footer div is then placed 10px further down under the news box with a top margin, text colour set to white, and text aligned to the centre. The footer's <a> links are also given a colour and a rollover effect.

All of this works fine in IE7, but if you have looked at it in IE6 you would have noticed the menu hover does not work - this is subject of next post.

[Centauri]

IE6, being a very "behind the times" browser, does not recognise css hover on anything other than <a> links. As a block level element (such as a ul) is not permitted inside an inline element (such as <a> links), the submenu list cannot be embedded inside the main menu links, so are put inside the main list items (li's). This means the hover effect must be applied to the li's, which works fine in all modern browsers except IE6. Enter the "suckerfish" script - a little bit of javascript used in the popular Suckerfish dropdown menu system. This script loops through all the <li>s in the #nav menu, and attaches a class of .sfhover to the relevant <li> only when it is hovered, and only in IE6 - hence the .sfhover classes mentioned ealier in the css. A very neat solution that works very well. Save the following block of code as filename "sfhover.js" into the same folder as your html file :sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);



Just a note about using Dreamweaver's css panel. Rather than write css code manually, I find the css panel works very well, producing well-formatted error-free css. To attach a css rule to an element which you have given an id or class, position your mouse cursor on that element in the code view, right click in a blank area of the css panel and select "New", which will bring up the "New CSS Rule window. Select whether you want this in an external file or embedded within the html file (not always recommended) and click "OK". Don't worry about filling out anything in the definition window that pops up, just click ok. A blank css rule now appears in the css panel list, and you can go through the properties, setting or adjusting whatever you like.

See if this gives you what you are after.

Cheers
Graeme

[whitneystar]

ok this definitely works and you're a genius. but now I have to write the whole site based on what you just told me which is gonna be tough for me. I didn't save the html file as index because there already is an index file so this is still the home.html file. I'm gonna change some of the text up but it works perfectly. where did you learn all this? I'm assuming you're a professional (correct me if I'm wrong) I can write html and I'm in school for web design but haven't gotten to css or java or anything that I need right now... of course, haha. thank you for helping. i may message you if i encounter more problems while i'm working on the rest of the site.

[Centauri]

Professional? - well, sort of. While I do charge for sites commercially, it is not my main occupation. Most of what I learnt was from hanging around forums such as this one, lots of experimenting (these rewrite posts help me refine skills), and useful sites such as
beginners guide (http://www.how-to-build-websites.com/)
ALA css articles (http://alistapart.com/topics/code/css/)
Wellstyled (http://www.wellstyled.com/index.html)
BonRouge (http://bonrouge.com/br.php?page=home)
Listamatic (http://css.maxdesign.com.au/listamatic/index.htm)
Stu Nicholls (http://www.cssplay.co.uk/)
Eric Meyer (http://meyerweb.com/eric/css/edge/)
IE did not handle it properly (http://www.howtocreate.co.uk/wrongWithIE/)
Paul O'Brien (http://www.pmob.co.uk/)

I really think that, after basic html, css should be taught as a parallel subject to html, but most curriculums don't work that way. Try to think content first, then "how do I style and position this", rather than the other way round - after you get used to it, it does seem more logical.

Any more problems, ask away - thats what this forum is here for.