Gracias amigo Pedro, aquì te envìo el html completo:
<!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>Plantamos</title>
<style type="text/css">
body,td,th {
color: #00F;
font-weight: bold;
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
}
body {
background-color: #9F3;
}
#apDiv1 {
position: absolute;
width: 659px;
height: 1188px;
z-index: 1;
left: 67px;
top: 147px;
}
#apDiv2 {
position: absolute;
width: 83px;
height: 28px;
z-index: 2;
left: 68px;
top: 99px;
}
#apDiv3 {
position: absolute;
width: 90px;
height: 34px;
z-index: 3;
left: 159px;
top: 55px;
}
#apDiv4 {
position: absolute;
width: 126px;
height: 42px;
z-index: 4;
left: 273px;
top: 54px;
}
#apDiv5 {
position: absolute;
width: 118px;
height: 40px;
z-index: 5;
left: 417px;
top: 54px;
}
#apDiv6 {
position: absolute;
width: 129px;
height: 44px;
z-index: 6;
left: 549px;
top: 53px;
}
#apDiv7 {
position: absolute;
width: 141px;
height: 41px;
z-index: 7;
left: 694px;
top: 53px;
}
#apDiv8 {
position: absolute;
width: 146px;
height: 45px;
z-index: 8;
left: 849px;
top: 51px;
}
#apDiv9 {
position: absolute;
width: 152px;
height: 38px;
z-index: 3;
left: 250px;
top: 100px;
}
#apDiv10 {
position: absolute;
width: 161px;
height: 36px;
z-index: 4;
left: 418px;
top: 102px;
}
#apDiv11 {
position: absolute;
width: 1209px;
height: 54px;
z-index: 2;
left: 67px;
top: 88px;
}
#apDiv12 {
position: absolute;
width: 149px;
height: 49px;
z-index: 3;
left: 0px;
top: 1px;
}
#apDiv13 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
}
#apDiv14 {
position: absolute;
width: 1300px;
height: 44px;
z-index: 2;
left: 67px;
top: 99px;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv15 {
position: absolute;
width: 244px;
height: 0px;
z-index: 3;
left: 69px;
top: 8px;
visibility: visible;
}
#apDiv16 {
position: absolute;
width: 143px;
height: 62px;
z-index: 4;
left: 294px;
top: 42px;
}
#apDiv17 {
position: absolute;
width: 355px;
height: 350px;
z-index: 5;
left: 737px;
top: 149px;
background-color: #339966;
}
#apDiv18 {
position: absolute;
width: 637px;
height: 309px;
z-index: 1;
}
#apDiv19 {
position: absolute;
width: 661px;
height: 219px;
z-index: 6;
left: 2px;
top: 406px;
background-color: #339966;
}
#apDiv20 {
position: absolute;
width: 359px;
height: 680px;
z-index: 6;
left: 737px;
top: 506px;
background-color: #339900;
}
#apDiv20 #WRchTxt1m-ivh h1 {
color: #FFF;
font-family: "Arial Black", Gadget, sans-serif;
}
#apDiv20 #i1ro5uco h2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
#apDiv21 {
position: absolute;
width: 667px;
height: 75px;
z-index: 2;
left: 2px;
top: 662px;
font-family: Arial, Helvetica, sans-serif;
}
#apDiv22 {
position: absolute;
width: 672px;
height: 299px;
z-index: 3;
left: 1px;
top: 738px;
}
#apDiv23 {
position: absolute;
width: 659px;
height: 74px;
z-index: 4;
top: 560px;
left: 0px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="MenuBarHorizontal" id="apDiv1">
<div id="apDiv18"><img src="Images/1.jpg" width="665" height="350" alt="banner" /></div>
<div id="apDiv21">Nuestras oficinas y predios de producción se encuentran en la Finca La Palma ubicada en el Municipio de Sampues – Sucre, a 500m al sur de la cabera municipal, vía que conduce al Municipio de Chinú – Cordoba.</div>
<div id="apDiv22"><img src="Images/2.jpg" width="670" height="299" alt="flor2" /></div>
<div id="apDiv23">
<p>Bienvenido a</p>
<p>PLANTAMOS VIVEROS</p>
</div>
</div>
<div id="apDiv14">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div id="apDiv19">
<h3>Plantamos Ltda, es una empresa agroexportadora de plantas nativas de origen tropical con muy buena adaptación a la cadena de frio como lo son el clavel y la rosa. Nuestra empresa tiene una gran conciencia verde, cuya función es la producción de plantas de óptima calidad mediante métodos orgánicos, los cuales permiten cumplir las demandas de calidad nacional e internacional de nuestros clientes, y sobre todo cuidando el entorno ambiental preservando el medio ambiente y dando un manejo racional a los recursos de flora y fauna disponibles en nuestras zonas de producción.</h3>
</div>
<a href="index.html">Inicio</a> </li>
<li><a href="Páginas/resenahstorica.html" class="MenuBarItemSubmenu">Empresa</a>
<ul>
<li><a href="Páginas/resenahstorica.html">Reseña Histórica</a></li>
<li><a href="Páginas/mision.html">Misión</a></li>
<li><a href="#">Visión</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Productos1</a>
<ul>
<li><a href="Páginas/productos.html">Productos</a> </li>
<li><a href="#">Bromelias</a></li>
<li><a href="#">Carnívoros</a></li>
<li><a href="#">Cera</a></li>
<li><a href="#">(insulto)jes</a></li>
<li><a href="#">(insulto)jes cortos</a></li>
<li><a href="#">Heliconias</a></li>
<li><a href="#">Invernadero</a></li>
<li><a href="#">Jardín</a></li>
<li><a href="#">Orquídea</a></li>
<li><a href="#">Palmas</a></li>
<li><a href="#">Plumerias</a></li>
<li><a href="#">Suculentas</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Productos2</a>
<ul>
<li><a href="#">Vendas</a></li>
<li><a href="#">Bonche</a></li>
<li><a href="#">Bonsai</a></li>
<li><a href="#">Cactus</a></li>
<li><a href="#">Corales</a></li>
<li><a href="#">Flor del desierto</a></li>
<li><a href="#">Frutales</a></li>
<li><a href="#">Gingers</a></li>
<li><a href="#">Ornamental</a></li>
<li><a href="#">Trinitarias</a></li>
</ul>
</li>
<li><a href="Páginas/servicios.html">Proyectos</a></li>
<li><a href="Páginas/servicios.html">Servicios</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="apDiv15">
<h1>PLANTAMOS</h1>
</div>
<div id="apDiv16">
<h1>Viveros</h1>
</div>
<div id="apDiv17">
<div id="Cntnrc-kt1" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrc-kt1">
<div id="Cntnrc-kt1inlineContent" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrc-kt1.1">
<div id="WRchTxt1p-197c" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrc-kt1.1.$WRchTxt1p-197c">
<h1><center> NOVEDADES</center></h1>
</div>
<div id="FvGrdLnd-1aex" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrc-kt1.1.$FvGrdLnd-1aex">
<div id="FvGrdLnd-1aexline" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrc-kt1.1.$FvGrdLnd-1aex.0"></div>
</div>
</div>
</div>
<div id="comp-iq0555ry" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-iq0555ry">
<ul>
<li>
<h2>Nuevo servicio</h2>
</li>
<li>
<h2>Otro punto de venta</h2>
</li>
<li>
<h2>Recuperación de especies nativas</h2>
</li>
<li>
<h2>Exposición orquídeas</h2>
</li>
</ul>
</div>
</div>
<div id="apDiv20">
<div id="WRchTxt1m-ivh" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrb-1atu.1.$WRchTxt1m-ivh">
<h1>TIPS</h1>
</div>
<div id="i1ro5uco" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$Cntnrb-1atu.1.$i1ro5uco">
<h2>Cultura ambiental</h2>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Y es es el código CSS:
body,td,th {
color: #00F;
font-weight: bold;
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
}
body {
background-color: #9F3;
}
#apDiv1 {
position: absolute;
width: 659px;
height: 1188px;
z-index: 1;
left: 67px;
top: 147px;
}
#apDiv2 {
position: absolute;
width: 83px;
height: 28px;
z-index: 2;
left: 68px;
top: 99px;
}
#apDiv3 {
position: absolute;
width: 90px;
height: 34px;
z-index: 3;
left: 159px;
top: 55px;
}
#apDiv4 {
position: absolute;
width: 126px;
height: 42px;
z-index: 4;
left: 273px;
top: 54px;
}
#apDiv5 {
position: absolute;
width: 118px;
height: 40px;
z-index: 5;
left: 417px;
top: 54px;
}
#apDiv6 {
position: absolute;
width: 129px;
height: 44px;
z-index: 6;
left: 549px;
top: 53px;
}
#apDiv7 {
position: absolute;
width: 141px;
height: 41px;
z-index: 7;
left: 694px;
top: 53px;
}
#apDiv8 {
position: absolute;
width: 146px;
height: 45px;
z-index: 8;
left: 849px;
top: 51px;
}
#apDiv9 {
position: absolute;
width: 152px;
height: 38px;
z-index: 3;
left: 250px;
top: 100px;
}
#apDiv10 {
position: absolute;
width: 161px;
height: 36px;
z-index: 4;
left: 418px;
top: 102px;
}
#apDiv11 {
position: absolute;
width: 1209px;
height: 54px;
z-index: 2;
left: 67px;
top: 88px;
}
#apDiv12 {
position: absolute;
width: 149px;
height: 49px;
z-index: 3;
left: 0px;
top: 1px;
}
#apDiv13 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
}
#apDiv14 {
position: absolute;
width: 1300px;
height: 44px;
z-index: 2;
left: 67px;
top: 99px;
}
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #39C;
background-repeat: no-repeat;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
position: relative;
text-align: left;
cursor: pointer;
width: 9em;
float: left;
font-family: Arial, Helvetica, sans-serif;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 145px;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
width: 160px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 160px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #093;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #0F3;
color: #FFF;
background-repeat: no-repeat;
font-size: 14px;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #0F3;
color: #FFF;
background-repeat: no-repeat;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: right;
background-color: #093;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: right;
background-color: #0F3;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
#apDiv17 #Cntnrc-kt1 #Cntnrc-kt1inlineContent #WRchTxt1p-197c h1 center {
color: #FF0;
}
#apDiv17 #comp-iq0555ry ul li h2 {
color: #FF0;
}
#apDiv14 #MenuBar1 li #apDiv19 h3 {
font-family: Arial, Helvetica, sans-serif;
color: #FF0;
}
#apDiv1 #apDiv23 p {
font-size: 14pt;
}
#apDiv15 {
position: absolute;
width: 244px;
height: 0px;
z-index: 3;
left: 69px;
top: 8px;
visibility: visible;
}
#apDiv16 {
position: absolute;
width: 143px;
height: 62px;
z-index: 4;
left: 294px;
top: 42px;
}
#apDiv17 {
position: absolute;
width: 355px;
height: 350px;
z-index: 5;
left: 737px;
top: 149px;
background-color: #339966;
}
#apDiv18 {
position: absolute;
width: 637px;
height: 309px;
z-index: 1;
}
#apDiv19 {
position: absolute;
width: 661px;
height: 219px;
z-index: 6;
left: 2px;
top: 406px;
background-color: #339966;
}
#apDiv20 {
position: absolute;
width: 359px;
height: 680px;
z-index: 6;
left: 737px;
top: 506px;
background-color: #339900;
}
#apDiv20 #WRchTxt1m-ivh h1 {
color: #FFF;
font-family: "Arial Black", Gadget, sans-serif;
}
#apDiv20 #i1ro5uco h2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
#apDiv21 {
position: absolute;
width: 667px;
height: 75px;
z-index: 2;
left: 2px;
top: 662px;
font-family: Arial, Helvetica, sans-serif;
}
#apDiv22 {
position: absolute;
width: 672px;
height: 299px;
z-index: 3;
left: 1px;
top: 738px;
}
Tema: Submenú detrás de franja de título HTML y CSS problema solucionado con z-index (Leído 3743 veces)
RSS -
WAP2