CSS MENU IN iWEB

Well I've working, this is a quick course about codes and I'm thankful for the help.

First thing is that I'm working just inside my computer without uploading nothing, and I've found:

1-I did never tried to visit the page once the changes made in Iweb, and surprise I found that when Firefox opens the page the menu was there:

But in Iweb it looks like:

So I think here there's a problem of WYSIWYG.

2-Another thing I found is that the code:

<link rel="stylesheet" href="css3menu1/style.css"

Works when the css3menu1 folder is inside the Iweb folder created with the page

And this variable:

<link rel="stylesheet" href="../../css3menu1/style.css"

Works when the css3menu1folder is in the root directory of Iweb's web. Wich makes it perfect when you have to republish the page.

That solves the problem of menu not showing.

Now the problem for me is how can I work in Iweb having a normal view of the menu , because working in stethics is a trouble having to publish for to see and then coming back to make changes.

Is there anyway that I can make the css3menu showing up in Iweb? I mean no the plain text of the html snippet, but the final view.

Thanks for your guide and your time, and be patient with the newbie.

Upload the CSS file to the server and use an absolute path to it in the code. Then you will see the menu properly in iWeb.

Wyodor, I uploaded the menu.html and the css3menu1 folder to my ftp, then use a snippet with the code of the first of your links:

<iframe src="http://url.to.file.html" frameborder="0" width="500" height="500" scrolling="no" allowTransparency="true"></iframe>

I did change http://www.barbarossanautica.com/menu.html

but I've got the same plain text

What's wrong?

Rudy wha's the code for the absolute path? it's that an iframe?

Both the menu.html and the css3menu1 folder are uploaded in the ftp server now.

Thanks

OK I got it working now, the problem was that I uploaded the css3menu1 folder instead of Test_files folder.

Thanks

Now if for instance I don't have a internet connection and I want to link to a local folder of my computer

Can I use also the iframe? or do I must change the code?

I don't understand why you want to use an iframe!

Do you have an iWeb page with the menu on it uploaded to the server?

If so, what is the URL to that page?

So you want something like this :

Put a HTML Snippet in that position.

Add the < iframe> code.

And use the link to the menu.

This :

<iframe src="/menu.html" frameborder="0" width="991" height="40" scrolling="no" allowTransparency="true"></iframe>

Adjust the numbers for width and height to make it fit the area.

Well now I used what you told me the "absolute path" and I have tried with the iframe code from Wyodor's link:

http://www.wyodor.net/blog/archives/2011/08/entry_321.html

and begine to understand a little how it works.

So everything is on the way and the menu is showing in Iweb, iframe calls from the file in the ftp and it shows in Iweb, this is solved.

But now I would like to know if I can make Iweb to show the menu, but instead of getting it from the ftp, getting it from a local folder, or from the folders in the ftp once it's uploaded.

Roddy wrote:

I don't understand why you want to use an iframe!

Do you have an iWeb page with the menu on it uploaded to the server?

If so, what is the URL to that page?

You ask me why I use an iframe, because now is the only way I know, is there any other way?.

Yes I have a Iweb page in the server, but the new page that will have the menu is still in my computer.

Any way the css3 menu folder and the menu.html files are already in the server and working but with the Iweb pages of my computer

The url of my page is www.barbarossanautica.com but this is the old version I'm trying to make something better now.

Thanks for your patience

Wow, we were both writing at the same time, yes that's what I want, let me try it and I tell you.

Wyodor wrote:

So you want something like this :

Put a HTML Snippet in that position.

Add the < iframe> code.

And use the link to the menu.

This :

<iframe src="/menu.html" frameborder="0" width="991" height="40" scrolling="no" allowTransparency="true"></iframe>

Adjust the numbers for width and height to make it fit the area.

It doesn't work.

Might it be that the path: /menu.html, needs something else?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>css3menu.com</title>

<!-- Start css3menu.com HEAD section -->

<link rel="stylesheet" href="http://www.barbarossanautica.com/menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<!-- End css3menu.com HEAD section -->

</head>

<!-- Start css3menu.com BODY section -->

<ul id="css3menu1" class="topmenu">

<li class="topfirst"><a href="http://www.barbarossanautica.com/Venta_de_Embarcaciones/Venta_de_Embarcaciones.h tml" title="Venta de Embarcaciones" style="height:16px;line-height:16px;">Venta de Embarcaciones</a></li>

<li class="topmenu"><a href="http://www.barbarossanautica.com/Nosotros.html" title="Nosotros" style="height:16px;line-height:16px;">Nosotros</a></li>

<li class="topmenu"><a href="http://www.barbarossanautica.com/Nuestros_barcos/Nuestros_barcos.html" title="Nuestros Barcos" style="height:16px;line-height:16px;">Nuestros Barcos</a></li>

<li class="topmenu"><a href="http://www.barbarossanautica.com/Tarifas_y_ocupacion.html" title="Tarifas y Ocupación" style="height:16px;line-height:16px;">Tarifas y Ocupación</a></li>

<li class="topmenu"><a href="http://www.barbarossanautica.com/Contacto.html" title="Contacto" style="height:16px;line-height:16px;">Contacto</a></li>

<li class="topmenu"><a href="http://www.barbarossanautica.com/Servicios_Nauticos.html" title="Servicios Náuticos" style="height:16px;line-height:16px;">Servicios Náuticos</a></li>

<li class="toplast"><a href="http://www.barbarossanautica.com/Venta_de_Embarcaciones/Venta_de_Embarcaciones.h tml" title="Venta de Embarcaciones" style="height:16px;line-height:16px;">Venta de Embarcaciones</a></li>

</ul><p class="_css3m"><a href="http://css3menu.com/">CSS Menu Top Css3Menu.com</a></p>

<!-- End css3menu.com BODY section -->

</body>

</html>

Went to your menu page & viewed the page source:

I then selected & copied the HTML for the menu:

And then pasted it into a HTML Snippet changing the Stylesheet line from:

<link rel="stylesheet" href="menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<!-- End css3menu.com HEAD section -->

to

<link rel="stylesheet" href="http://www.barbarossanautica.com/menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<!-- End css3menu.com HEAD section -->

So if I'm not wrong, this is similar to an iframe but somehow different.

The only difference I found is that you insert my web's address into the link rel.

and it opens perfect in Iweb, but can it be done sending the path to the local folder in my computer?

thanks you'll make me wonder.

For a local folder the address would be something like this "file:///Users/jeffnitschke/Desktop/iPad.html" but, I am not sure how this display or work in iWeb

Jeff is telling you what I suggested in the first place which is to put the full code in the Snippet and reference the CSS on the server using an absolute URL.

The alternative is to add the CSS to the code in the Snippet like this...

http://96.0.63.10/iWeb-Test-3/apple-menu-2.html

This is actually a better way.

Why not put everything on the server where it belongs!