PDA

View Full Version : layers not moving with page


marcia
12-30-2008, 10:36 PM
Hi,

It's been a while since I've written. I've done a lot of work and have created a new page for a restaurant client who is happy enuf with it, but I'm not.

Tho the site is o.k. in Firefox and IE on a regular screen , when I view it on a wide screen, the layers stay stationary and 2 of the pages (home and seating) move when I try to center the pages. Tho I have studied HTML now, I still can't figure out why this is happening. I'm not using CSS and basically did the site using tables in the Design view.

The page is www.teliorestaurant.com (http://www.teliorestaurant.com)

The code for these 2 pages is pretty long so I didn't send it, but I can send it if necessary.

(I know there is a problem with the background colors of the Flash buttons - I hopefully can fix this).

I want to add some Flash, but can't until I fix the problem of movement.

Ricky55
12-30-2008, 10:59 PM
Don't use layers for your main layout.

Layers are just absolutley positioned divs and as a result they are postioned from a datum if this is just the html element which I suspect it will be then it will look wrong on a wide screen.

You could wrap all of the layers in a container div and set this to have a position: relative; and then the layers would use this as a datum but like I said above you would be best laying this out properly with CSS. Absolutley positioned elements should only really be used when you can float or work things in normal flow.

Also the flash buttons just look silly I'd take them off and its common to have home as the first button not the last.

Cary
01-01-2009, 06:03 PM
There are several ways you can do this. Here is one, but you should have an h1 header in there somewhere.

<!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=iso-8859-1" />
<title>main page</title>
<style type="text/css">
body {
background-color:#D97B23;
color:#FFFFFF;
padding:0;
margin:0;
}
#wrapper {
width: 945px;
margin: 0 auto;
background: url(headers/outdoor3sakorg-tint2.jpg) no-repeat 0 0;
}
#content {
height: 520px;
position: relative;
}
#content div {
width:568px;
text-align: center;
position: absolute;
left: 182px;
bottom: 10px;
}
#nav {
width:526px;
margin: 20px auto;
}
.style3 {
font-size: 21px;
}
.style4 {
font-size: 18px
}
.style8 {
font-size: 24px;
font-weight: bold;
}
.style10 {
font-size: larger;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content" class="style3">
<div>
<p class="style4"><span class="style8">Welcome</span> to Telio fine Greek-Italian cuisine. Delight your palette with <br />
the authentic moderately priced Mediterranean cooking, originated by Yiani's Mama and Papa in Greece years ago. Your only complaint will be that <br />
you will leave too full because of the generous portions. Each plate is artistically arranged to beautify your <br />
eating experience.<br />
<span class="style3">Our friendly staff and owner <br />
will make you feel comfortable in a lively environment.</span></p>
<p class="style10">&ldquo;We want you to be happy with your meal.&rdquo;</p>
<p class="style8"> Please come inside and look around.</p>
</div>
</div>
<div id="nav">
<object type="application/x-shockwave-flash" data="directions.swf" width="100" height="20">
<param name="movie" value="directions.swf" />
<param name="quality" value="high" />
<a href="directions.html">Directions</a><!-- text link for those who don't have flash -->
</object>
<object type="application/x-shockwave-flash" data="seating.swf" width="100" height="20">
<param name="movie" value="seating.swf" />
<param name="quality" value="high" />
<a href="seating.html">Seating</a>
</object>
<object type="application/x-shockwave-flash" data="menu.swf" width="100" height="20" title="menutrial">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<a href="menu-page.html">Menu</a>
</object>
<object type="application/x-shockwave-flash" data="about-us.swf" width="100" height="20" title="aboutbut">
<param name="movie" value="about-us.swf" />
<param name="quality" value="high" />
<a href="about-us.html">About Us</a>
</object>
<object type="application/x-shockwave-flash" data="home2.swf" width="100" height="20" title="home to index button">
<param name="movie" value="home2.swf" />
<param name="quality" value="high" />
<a href="index.html">Home</a>
</object>
</div>
</div>
</body>
</html>

marcia
01-01-2009, 09:59 PM
Cary,

Hi! - been along time. Thanks for code. I pasted it into a new page and unfortunately, the image, nor the nav. bar doesn't show up. I don't know how to fix it, do you?

Also, you said there are many ways to do this. Do you know how to write it for CSS?

In general,

Thinking that if I set the entire 2 pages, 'home' and 'seating' to allign left, the layers and the page parts would stay together.

I did not want to upset the applecart, however, from the way it is, as most people don't have the new widescreen, so figure that most people can view it o.k. As the designer, tho, I am bugged by it. There will be some that won't be able to view it properly.

Cary
01-01-2009, 10:21 PM
Hi! - been along time. Thanks for code. I pasted it into a new page and unfortunately, the image, nor the nav. bar doesn't show up. I don't know how to fix it, do you?

Also, you said there are many ways to do this. Do you know how to write it for CSS?

Yes, there are different ways to achieve the same result. This one is already using CSS. I'm not sure about the image problem. I kept the paths the same, so the code should have worked if the new page is in the same folder as the original, so I don't know what else can be done other than making sure the paths are correct, which would be the simplest way to go.

Thinking that if I set the entire 2 pages, 'home' and 'seating' to allign left, the layers and the page parts would stay together.

Probably, but if the paths are corrected, this won't be necessary.

EDIT:
Now, I hadn't even looked at your other pages, so I'll take a look at the seating page later when I have time.

Cary
01-02-2009, 05:17 AM
Here's some code you can try for your seating page:

<!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=iso-8859-1" />
<title>seating options</title>
<style type="text/css">
body {
background-color: #D97B23;
color: #B7E4FB;
margin:0;
padding:0;
}
#wrapper {
width: 888px;
margin: 15px auto;
text-align: center;
}
h1, p {
margin: 0;
padding: 0;
}
#thumbs {
position:absolute;
left:96px;
top:15px;
width:152px;
height:349px;
}
#bar, #outdoor-cafe, #dining-room {
position:absolute;
left:287px;
top:75px;
width:500px;
height:252px;
}
.style7 {
font-size: 30px;
text-align: center;
}
.style8 {
font-size: smaller;
}
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<h1><img src="outdoor3sak-2figsheaderorg7.jpg" alt="Telio ~ Greek-Italian Cuisine" width="888" height="170" /></h1>
<div>
<object type="application/x-shockwave-flash" data="directions.swf" width="100" height="20" title="directions">
<param name="movie" value="directions.swf" />
<param name="bgcolor" value="#D97B23" />
<param name="quality" value="high" />
<a href="directions.html">Directions</a>
</object>
<object type="application/x-shockwave-flash" data="seating.swf" width="100" height="20" title="seating-pg">
<param name="movie" value="seating.swf" />
<param name="bgcolor" value="#D97B23" />
<param name="quality" value="high" />
<a href="seating.html">Seating</a>
</object>
<object type="application/x-shockwave-flash" data="menu.swf" width="100" height="20" title="menumenu">
<param name="movie" value="menu.swf" />
<param name="bgcolor" value="#D97B23" />
<param name="quality" value="high" />
<a href="menu-page.html">Menu</a>
</object>
<object type="application/x-shockwave-flash" data="about-us.swf" width="100" height="20">
<param name="movie" value="about-us.swf" />
<param name="bgcolor" value="#D97B23" />
<param name="quality" value="high" />
<a href="about-us.html">About Us</a>
</object>
<object type="application/x-shockwave-flash" data="home2.swf" width="100" height="20" title="home-seat-pg">
<param name="movie" value="home2.swf" />
<param name="bgcolor" value="#D97B23" />
<param name="quality" value="high" />
<a href="index.html">Home</a>
</object>
</div>
<p class="style7">By now you must be hungry. Where would you like to sit?</p>
<div style="position:relative">
<div id="thumbs">
<table width="148" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="20" class="style8" scope="col">in the dining room? </th>
</tr>
<tr>
<th scope="row"><span class="style8"><span class="style7"><img src="images/the-restaurant/indoor-tables.jpg" alt="indoor tables" width="150" height="94" onmouseover="MM_showHideLayers('thumbs','','show','bar','','hid e','outdoor-cafe','','hide','dining-room','','show')" /></span></span></th>
</tr>
<tr>
<th height="20" class="style8" scope="row">at the outdoor cafe? </th>
</tr>
<tr>
<th scope="row"><img src="images/PIX_SAKIS/outdoor-cafe-seating.jpg" alt="outdoor-cafe" width="150" height="94" onmouseover="MM_showHideLayers('thumbs','','show','bar','','hid e','outdoor-cafe','','show','dining-room','','hide')" /></th>
</tr>
<tr>
<th height="21" class="style8" scope="row">or just relax at the bar? </th>
</tr>
<tr>
<th scope="row"><img src="images/the-restaurant/bar-thumb.jpg" alt="bar thumb" width="150" height="98" onmouseover="MM_showHideLayers('thumbs','','show','bar','','sho w','outdoor-cafe','','hide','dining-room','','hide')" /></th>
</tr>
</table>
</div>
<img id="bar" src="images/the-restaurant/bar.jpg" width="500" height="252" alt="" />
<img id="outdoor-cafe" src="images/PIX_SAKIS/outdoor-cafe-seating.jpg" alt="outdoor seating" width="500" height="252" />
<img id="dining-room" src="images/the-restaurant/indoor-tables.jpg" alt="indoor tables" width="500" height="252" />
</div>
</div>
</body>
</html>

Cary
01-02-2009, 05:29 AM
Never mind, looks like that code won't fly with IE6.

Cary
01-02-2009, 05:58 AM
At about line 103 in the code above is <div style="position:relative">.

I changed that to <div id="gallery"> and added this style rule:

#gallery {
position:relative;
width:888px;
}

IE 6 was acting like that div had no width and was centered in the middle of the page, so this styling gives it the necessary width.

marcia
01-08-2009, 10:22 PM
Cary,

I wrote to you last week, but can't find the post in this thread. 1st, your code worked and the image DID show up the next day (don't know what happened the first time).

I've been reading and reading all week and can't figure out the following things, so I can't use the code (great as it is) yet.

1. I can't change the nav bar. I want to raise it to the awning, and change the order of the buttons.

2. I can't find the word "wrapper" anywhere. Pls. tell me where it is. I saw it quickly in the tutorial, but then I lost it and can't get it back.

3. I am not clear how you centered the entire page, with all its elements.

I've tried all sorts of things with tables and have a problem with the background repeating even if I choose 'no repeat'. I know it's possible in CSS but I can't figure it out. I can't even figure out how I did it originally.

Guess it's pretty clear that I don't understand CSS yet. I guess div tags is the answer, but I can't get past that word 'wrapper'. I have found out that layers are absolute, so won't use them so much even if they are so easy to use - they don't quite do the job, tho.

On the 'seating' I haven't a clue as to how you did the images without using layers. For now, the site will remain as it is and I will just hope that most people have a computer like mine (or slightly wider). BTW, do you have a wide wide screen? Have you seen the site on it?

I will change all the text to html styles as you suggested.

Cary
01-09-2009, 12:50 AM
1. I can't change the nav bar. I want to raise it to the awning, and change the order of the buttons.

I'm going to have to take a look at this...

2. I can't find the word "wrapper" anywhere. Pls. tell me where it is. I saw it quickly in the tutorial, but then I lost it and can't get it back.

3. I am not clear how you centered the entire page, with all its elements.

The wrapper div opens just after the opening body tag and closes just before the closing body tag.

<body>
<div id="wrapper">
.
.
.
...all the page content...
.
.
.
</div><!-- end of #wrapper -->
</body>


As you can see in the styling for #wrapper, the wrapper div has a fixed width (equal to the width of your background picture). It also has left and right margins of "auto" which means, when the div also has a width, that the left and right margins will be kept equal by the browser so the div will center.

margin: 0 auto;

is the same as

margin: 0 auto 0 auto;

which is the same as

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

This site has a tutorial on centering pages.

Then there are two other divs, #content and the div within #content.

#content {
height: 520px;
position: relative;
}
#content div {
width:568px;
text-align: center;
position: absolute;
left: 182px;
bottom: 10px;
}


Generally, when you use layers, aka absolutely positioned elements, the left and top positions are based on the top, left corner of their nearest positioned parent element or the browser window. When based on the browser window, they don't center with the rest of the page.

The div within #content is absolutely positioned, but I wanted it to move with the #content div that contains it as the page centers on wider or narrower screens. By making #content "position:relative" I gave it a positioning style, but one that will allow it to maintain its normal flow in the page. This positioning makes #content's absolutely positioned child elements move with it.

I've tried all sorts of things with tables and have a problem with the background repeating even if I choose 'no repeat'. I know it's possible in CSS but I can't figure it out. I can't even figure out how I did it originally.

You may have forgotten the hyphen, so you didn't have "no-repeat".

On the 'seating' I haven't a clue as to how you did the images without using layers.

Well, imagine this is your image and layer code:

<div id="Layer1"><img ... ></div>

In the case of your images, the images themselves can be treated as layers. Just move the ID's inside the image tags and lose the divs.

<img id="Layer1" ...>

Now the styling that was telling the div where to go, will position the image directly.

For now, the site will remain as it is and I will just hope that most people have a computer like mine (or slightly wider). BTW, do you have a wide wide screen? Have you seen the site on it?

I can go as wide as 1440px, and the centering problems are certainly more apparent on wider views.

marcia
01-09-2009, 03:39 AM
this certainly makes things more clear. I didn't know that about auto. I still want to know where you found the word 'wrapper'. I know where it is in your code, but I don't know how to find it in the DW rules.

"This site has a tutorial on centering pages." By 'this tutorial' I guess you mean somewhere in the forum.

As far as 'no repeat', I just click on the box in the drop down menu, I don't write anything. So I'll recheck tomorrow to see if it has a hyphen.

Will study this all again tomorrow. Thanks again.

marcia
01-09-2009, 03:56 AM
Cary,

Wow! Just read the centering tutorial!

Still don't know where that word wrapper comes from.

Anyway, the CSS is longer than the HTML. Now I'm confused because I thought CSS was a shortcut. There's always something!

Cary
01-09-2009, 04:15 AM
Okay, I thought you meant you couldn't find "wrapper" in the code. It's not something you'll will find in DW. This particular div, like any other, can have any id name you like, but "wrapper" is commonly used for this div which contains, or wraps around, all the content on the page.

edbr
01-09-2009, 05:33 AM
as for css it is not a shortcut as such although is when you want to make style changes or additions sitewide.

Cary
01-11-2009, 12:06 AM
1. I can't change the nav bar. I want to raise it to the awning, and change the order of the buttons.

I finally had a chance to take another look at this. I changed the code I gave you before so the menu comes before the text.

<!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=iso-8859-1" />
<title>main page</title>
<style type="text/css">
body {
background-color:#D97B23;
color:#FFFFFF;
padding:0;
margin:0;
}
#wrapper {
width: 945px;
margin: 0 auto;
background: url(headers/outdoor3sakorg-tint2.jpg) no-repeat 0 0;
}
#content {
height: 520px;
position: relative;
}
#content #nav {
width:526px;
padding-top:130px; /* this controls how far down from the top of the page the menu appears */
margin: 0 auto;
position: static; /* this overcomes the absolute postioning style of "#content div" */
}
#content div {
width:568px;
text-align: center;
position: absolute;
left: 182px;
bottom: 10px;
}
.style3 {
font-size: 21px;
}
.style4 {
font-size: 18px
}
.style8 {
font-size: 24px;
font-weight: bold;
}
.style10 {
font-size: larger;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content" class="style3">
<div id="nav">
<object type="application/x-shockwave-flash" data="directions.swf" width="100" height="20">
<param name="movie" value="directions.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /><!-- so the background color shows around the edges -->
<a href="directions.html">Directions</a><!-- text link for those who don't have flash -->
</object>
<object type="application/x-shockwave-flash" data="seating.swf" width="100" height="20">
<param name="movie" value="seating.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="seating.html">Seating</a>
</object>
<object type="application/x-shockwave-flash" data="menu.swf" width="100" height="20" title="menutrial">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="menu-page.html">Menu</a>
</object>
<object type="application/x-shockwave-flash" data="about-us.swf" width="100" height="20" title="aboutbut">
<param name="movie" value="about-us.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="about-us.html">About Us</a>
</object>
<object type="application/x-shockwave-flash" data="home2.swf" width="100" height="20" title="home to index button">
<param name="movie" value="home2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="index.html">Home</a>
</object>
</div>
<div>
<p class="style4"><span class="style8">Welcome</span> to Telio fine Greek-Italian cuisine. Delight your palette with <br />
the authentic moderately priced Mediterranean cooking, originated by Yiani's Mama and Papa in Greece years ago. Your only complaint will be that <br />
you will leave too full because of the generous portions. Each plate is artistically arranged to beautify your <br />
eating experience.<br />
<span class="style3">Our friendly staff and owner <br />
will make you feel comfortable in a lively environment.</span></p>
<p class="style10">&ldquo;We want you to be happy with your meal.&rdquo;</p>
<p class="style8"> Please come inside and look around.</p>
</div>
</div>
</div>
</body>
</html>

I also changed the #nav selector in the styling to "#content #nav" to give it a higher specificity (http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html) than "#content div" and modified its styling.

#content #nav {
width:526px;
padding-top:130px; /* this controls how far down from the top of the page the menu appears */
margin: 0 auto;
position: static; /* this overcomes the absolute postioning style of "#content div" */
}

As far as changing the order of the menu items goes, you basically just have five menu items, each of which looks something like this block of code:

<object type="application/x-shockwave-flash" data="directions.swf" width="100" height="20">
<param name="movie" value="directions.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="directions.html">Directions</a>
</object>

Simply reorder the blocks of code so each button appears in the sequence you like.

marcia
01-12-2009, 09:30 PM
Just checked everything out. New problems:

In the #content, you say relative - what is it relative to, as the block doesn't seem to want to follow your directions

Can the nav bar be transformed to tilt like the angle of the awning? (I added 5 more px to your code here). Maybe the buttons have to be separated and a table put here with each button a little lower than the one before it - a lousy solution - not even sure you can put a flash button inside a table inside a div.

Another possibility: move the copy block up and put the nav bar below it. I cannot find how to close up the last 2 lines just a little as I can't find the menu or CSS code that lets you change line height. Also, the block changes position between IE and Firefox (see above comment). I could also change the line of 'come inside' to be in a different place so that there would be more space to put in the nav bar.

Additionally, I want to insert some Flash images of food (fade outs and ins) over the background image. (I can't remember how to do the fades tho I've done it before - do you know how? If so, pls. tell me how).

http://www.teliorestaurant.com/indexcary2.html

Sorry to cause you this headache, but as you know, I am very appreciative. If you think it's a drag to go any further, just let me know.

Cary
01-13-2009, 12:19 AM
In the #content, you say relative - what is it relative to, as the block doesn't seem to want to follow your directions.

It's relative to itself, to the place it appears in the normal flow of the page. Since I didn't offset it from its original position, position:relative has no affect on #content. It's only there so when I tell the text block to be positioned absolutely from the left and the bottom, it will be from the left and bottom edges of #content rather than the browser window.

Can the nav bar be transformed to tilt like the angle of the awning? (I added 5 more px to your code here). Maybe the buttons have to be separated and a table put here with each button a little lower than the one before it - a lousy solution - not even sure you can put a flash button inside a table inside a div.

They can't be tilted, but they can be stepped using css as the code below demonstrates. In that code I gave the last four buttons ID's so they can have individual top margins to create the stepped effect.

Another possibility: move the copy block up and put the nav bar below it. I cannot find how to close up the last 2 lines just a little as I can't find the menu or CSS code that lets you change line height. Also, the block changes position between IE and Firefox (see above comment).

The code below also uses line-height and defined margins and padding to control this and make for a more consistent look across browsers, each of which has its own default line-heights, margins and padding for text.

Additionally, I want to insert some Flash images of food (fade outs and ins) over the background image. (I can't remember how to do the fades tho I've done it before - do you know how? If so, pls. tell me how).

Sorry, I don't know how to do this.

Sorry to cause you this headache, but as you know, I am very appreciative. If you think it's a drag to go any further, just let me know.

No problem as long as you learn something from this. You may not get all of it, but css can be tricky that way.

<!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=iso-8859-1" />
<title>main page</title>
<style type="text/css">
body {
background-color:#D97B23;
color:#FFFFFF;
padding:0;
margin:0;
}
#wrapper {
width: 945px;
margin: 0 auto;
background: url(headers/outdoor3sakorg-tint2.jpg) no-repeat 0 0;
}
#content {
height: 520px;
position: relative; /* relative to what */
}
#content #nav {
width:501px;
padding-top:117px; /* this controls how far down from the top of the page the menu appears */
margin: 0 auto;
position: static; /* this overcomes the absolute postioning style of "#content div" */
}

/* Flash button objects will ignore the stepped top margins unless they are display:block */
/* But then they need to be floated so they appear side-by-side rather than one above the other. */
#nav object {
display: block;
float: left;
}

/* Top margins on flash object buttons to make them stepped/sloped */
#seating {
margin-top: 6px;
}
#menu {
margin-top: 12px;
}
#about {
margin-top: 18px;
}
#home {
margin-top: 24px;
}

#content div {
width:568px;
text-align: center;
position: absolute;
left: 182px;
bottom: 10px;
}
#content div p {
line-height: 1.2em; /* this controls the line-spacing within paragrapshs */
padding: 0;
margin: .7em 0 0; /* this adds a top margin of .7em to create space between paragraphs */
}
.style3 {
font-size: 21px;
}
.style4 {
font-size: 18px
}
.style8 {
font-size: 24px;
font-weight: bold;
}
.style10 {
font-size: larger;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content" class="style3">
<div id="nav">
<object type="application/x-shockwave-flash" data="directions.swf" width="100" height="20">
<param name="movie" value="directions.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /><!-- so the background color shows around the edges -->
<a href="directions.html">Directions</a><!-- text link for those who don't have flash -->
</object>
<object id="seating" type="application/x-shockwave-flash" data="seating.swf" width="100" height="20">
<param name="movie" value="seating.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="seating.html">Seating</a>
</object>
<object id="menu" type="application/x-shockwave-flash" data="menu.swf" width="100" height="20" title="menutrial">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="menu-page.html">Menu</a>
</object>
<object id="about" type="application/x-shockwave-flash" data="about-us.swf" width="100" height="20" title="aboutbut">
<param name="movie" value="about-us.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="about-us.html">About Us</a>
</object>
<object id="home" type="application/x-shockwave-flash" data="home2.swf" width="100" height="20" title="home to index button">
<param name="movie" value="home2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="index.html">Home</a>
</object>
</div>
<div>
<p class="style4"><span class="style8">Welcome</span> to Telio fine Greek-Italian cuisine. Delight your palette with <br />
the authentic moderately priced Mediterranean cooking, originated by Yiani's Mama and Papa in Greece years ago. Your only complaint will be that <br />
you will leave too full because of the generous portions. Each plate is artistically arranged to beautify your eating experience.<br />
<span class="style3">Our friendly staff and owner <br />
will make you feel comfortable in a lively environment.</span></p>
<p class="style10">&ldquo;We want you to be happy with your meal.&rdquo;</p>
<p class="style8"> Please come inside and look around.</p>
</div>
</div>
</div>
</body>
</html>

marcia
01-16-2009, 08:04 PM
Hi Cary,

Just want to get back to you before you think I lost interest, which I did not. Yes, I learn a lot from you and now I am in the midst of another Janine Warner course that I hope makes things even more clear (I'm beginning to understand the ways of CSS as it should be learned - my education so far has been haphazard). I'll get back to you when I finish the course as I will apply everything you have written and test everything out and try to apply the knowlege that both of you have given me. There are just so many hours in a day, and there are always so many things to do.

Marcia