¡¡¡ Ayuda por favor, CAPA LOCA !!!

sanmi86 · #1 (**permalink**) 01/10/2010, 06:55

Hola soy un programador chapao a la antigua (tablas y asp). Hace 6 meses me aventure a aprender por mi mismo php, div,css y mysql y como prueba me puesto a desarrolar una pagina para mi negocio (una autoescuela) y tengo un problema el cual llevo con el un mes y ni mis conocidos ni yo, hemos lograo solventar, por eso confio en que vosotros me podais ayudar.

La pagina en cuestion es esta :
[URL="http://www.alonso-autoescuela.es/portada.php"]http://www.alonso-autoescuela.es/portada.php[/URL]

El problema comienza cuando en el menu desplegamos la opcion "¿Quienes somos? y pinchamos en ""localizacion".
Vemos que el div del menu se desplaza hacia arriba.

Os pongo el enlace del apartado localizacion:
http://www.alonso-autoescuela.es/Quienes_Somos/localizacion.php

Informacion:

Es el esquema de la pagina es repetitivo en los diferentes html, el unico div cambiante en su contenido es "navegador"el cual se redimendina alo largo segun el contenido, por ello las demas partes estan llamadas con "includes" a diferentes archivos.

HTML:

Cita:

<!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>
<link rel="STYLESHEET" type="text/css" href="/Css/estilos.css">
<link href='/Images/Favicon/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>¡¡¡ Bienvenidos a Autoescuela Alonso !!!</title>
<body>
<div id="resolucion"> 

<div id="cabecera">
<img src="/Images/Cabecera/Cabecera.jpg" name="img_cabecera" id="img_cabecera"/>
<div id="barra_despla">

<marquee>
<img src="/Images/Tunel-Coche/Tunel-Coche.gif" name="img_coche" id="img_coche"/>
<div id="cont_noticia">
<a id="noticia"> ¡¡¡ Nuevo Curso C.A.P !!!
</a></div>
</marquee>
</div>
</div>

<div id="barra_usuario">

<form name="form1" method="post" action="portada.php">

<div id="bienvenido">Bienvenid@ a Autoescuela Alonso</div>
<div id="usuario">Usuario</div>
<div id="txt_dni"><input type="text" name="dni" size="6"/></div>
<div id="contra">Contraseña</div>
<div id="txt_contra"><input type="text" name="contrasena" size="6" /></div>
<div id="sub_entrar"><input type="submit" name="login" value="Entrar"></div>
</form>

<div id="registrarse"><a href="default.php?opc=0">Registrarse</a></div>
<div id="perd_contra"><a href="default.php?opc=0">¿Perdiste la contraseña?</a>
</div>
</div>

<div id="contenedor">

<div id="navegador">

<img id="coche_principal" src="Images/Principal/Coche_principal.jpg" />

</div>

<div id="menu">
<div class="navbar">

<div class="mainDiv">
<div class="topItem" >¿Quienes somos?</div>
<div class="dropMenu" >
<div class="subMenu">
<div class="subItem"><a href="/portada.php">Inicio</a></div>

<div class="subItem"><a href="/Quienes_Somos/localizacion.php">Historia</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Contacto</a></div>
<div class="subItem"><a href="Quienes_Somos/localizacion.php">Localizacion</a></div>

</div>
</div>
</div>



<div class="mainDiv" >

<div class="topItem" >Autoescuela</div>
<div class="dropMenu" >
<div class="subMenu">
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Permisos</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Horarios</a></div>
<div class="subItem"><a href="default.php?opc=0"target="_contenido">Instal aciones</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Vehiculos</a></div>

<div class="subItem"><a href="default.php?opc=0" target="_contenido">Texts</a></div>
</div>
</div>
</div>



<div class="mainDiv" >
<div class="topItem" >M. Peligrosas</div>
<div class="dropMenu" >
<div class="subMenu">
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Cursos</a></div>

<div class="subItem"><a href="default.php?opc=0"target="_contenido">Instal aciones</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Texts</a></div>
</div>
</div>
</div>



<div class="mainDiv" >
<div class="topItem" >C.A.P</div>
<div class="dropMenu" >

<div class="subMenu">
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Cursos</a></div>
<div class="subItem"><a href="default.php?opc=0"target="_contenido">Instal aciones</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Texts</a></div>
</div>
</div>
</div>



<div class="mainDiv" >
<div class="topItem" >Cursos de Formacion</div>
<div class="dropMenu" >
<div class="subMenu">
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Cursos</a></div>
<div class="subItem"><a href="default.php?opc=0"target="_contenido">Instal aciones</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Texts</a></div>
</div>

</div>
</div>



<div class="mainDiv" >
<div class="topItem" >Noticias y Cursos</div>
<div class="dropMenu" >
<div class="subMenu">
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Nuevas Normativas</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Próximos Cursos</a></div>

</div>
</div>
</div>



<div class="mainDiv" >
<div class="topItem" >Notas</div>
<div class="dropMenu" >
<div class="subMenu">
<div class="subItem"><a href="default.php?opc=0" target="_contenido">C.A.P</a></div>
<div class="subItem"><a href="default.php?opc=0" target="_contenido">Resto de Permisos</a></div>

</div>
</div>
</div>

</div>

</div>

</div>
<div id="pie_pagina">
<a id="enl_pie" href="/pol_privacidad.php" target="_contenido" title="Política de privacidad">Política de privacidad</a>. </span><a id="enl_pie" href="nota_legal.php" target="_contenido" title="Nota legal">Nota legal</a>. <a id="enl_pie" href="req_sistema.php" target="_contenido" title="Requisitos del sistema">Requisitos del sistema</a>. <br />

Copyright (c) 2010. Mediaconcha Formacion. Todos los derechos reservados
</div>

<script type="text/javascript" src="/Js/xpmenuv21.js"></script>
</body>
</html>

Os pongo el CSS mas abajo

Muchas Gracias por adelantado, espero me podais ayudar y tambien pueda aprender de ello.Un Saludo

sanmi86 · #2 (**permalink**) 01/10/2010, 06:57

Css:

Cita:

@charset "utf-8";
/************************************************** ************************************************** *********************************** css document ************************************************** ************************************************** ********************************************/
/*****************************************general** ************************************************** ************************************************** ********************************************/

body{
/*background-color:#ffcb00;*/
background-color:#ffcb00;
}
#resolucion{
width:1000px;
height:560px;
background-color:#ffcb00;
position: Absolute;
top: 50%;
left: 50%;
margin-top: -280px; /* height/2 = 500px / 2 */
margin-left: -500px; /* width/2 = 500px / 2 */

}
#cabecera{
border:none;
width:100%;
margin-top:-20px;

}
#img_cabecera{
border:none;
width: 100%;
}
#barra_despla{
width:85%;
border:none;
position:absolute;
margin-top:-2em;
margin-left:4em;
}
#img_coche{
width:4.5em;
}
#noticia{
text-align:left;
width:100%;
color:#fff;
font-stretch:expanded;
font-size:20px;
}
#cont_noticia{
margin-top:-1.5em;
padding-bottom:0.5em;
margin-left:6em;
}
#barra_usuario{
background-color:#ffcb00;
width:100%;
height:2.4em;
}
#bienvenido{
float:left;
margin-left:10px;
margin-top:9px;
font-style:italic;
font-weight:bold;
color: #313068;
font-size:16px;
}
#usuario{
float:left;
margin-left:60px;
margin-top:9px;
font-style:italic;
font-weight:bold;
font-size: 14px;
color:black;
}
#txt_dni{
float:left;
margin-left:15px;
margin-top:9px;
font-style:italic;
font-weight:bold;
}
#contra{
float:left;
margin-left:15px;
margin-top:9px;
font-style:italic;
font-weight:bold;
font-size: 14px;
color:black;
}
#txt_contra{
float:left;
margin-left:15px;
margin-top:9px;
}
#sub_entrar{
float:left;
margin-left:15px;
margin-top:8px;
font-style:italic;
}

#registrarse{
float:left;
margin-left:60px;
margin-top:9px;
font-style:italic;
color: #313068;
font-size: 14px;
}

#perd_contra{
float:left;
margin-left:15px;
margin-top:9px;
font-style:italic;
color: #313068;
font-size: 14px;
}
#nombre_user{
float:left;
color: #009933;
font-size: 16px;
font-weight: Bold;
margin-left:6px;
margin-top:9px;
}
#cerrar_sesion{
margin-left:15px;
margin-top:9px;
font-style:italic;
color: #313068;
font-size: 16px;
float:left;
}
#menu{
background-color:#ffcb00;
width:190px;
height:auto;
float:left;
margin-top:-387px;

}
#navegador{
background-color:#ffcb00;
width:810px;
height:auto;
margin-left:190px;
margin-top:0px;
float:right;
}
#coche_principal{
width:50.6em;
height:24.2em;
}
#pie_pagina{
background-color: #000;
height:2.5em;
width:1000px;
text-align: Center;
color:#f5d116;
font-size:0.7em;
margin-top:0px;
float:left;

}
#enl_pie{
color:#f5d116;
font-size:0.7em;
}

#contenedor{
clear:left;
}
/************************************************** ************************************************** *******************************************menu*** ************************************************** ************************************************** ******************************************/

.navbar
{
}

.maindiv
{
width:185px;
}

.topitem
{
font: Bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: Url(/images/menu/arrow-up-title.jpg) no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
border: None;
width: 185px;
height: 25px;
color: #66ff33;
cursor:pointer;
text-indent:10px;
}

.topitemover
{
text-indent:10px;
font: Bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: Url(/images/menu/arrow-up-title-on.jpg) no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #df0024;
cursor:pointer;
}

.topitemclose
{
text-indent:10px;
font: Bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: Url(/images/menu/arrow-down-title.jpg) no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #313068;
cursor:pointer;
}

.topitemcloseover
{
text-indent:10px;
font: Bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: Url(/images/menu/arrow-down-title-on.jpg) no-repeat 0 0;

background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #df0024;
cursor:pointer;
}

.dropmenu
{
font: Bold 11px tahoma,verdana,sans-serif;
background-color: #f9e166;
color: #000;
border: 1px solid #ffffff;
border-width: 0 1px 1px 1px;
filter:alpha(opacity=100);
padding-top:5px;
padding-bottom:5px;
}

.submenu
{
display:block;
}

.subitem
{
margin-left:10px;
margin-top:2px;
height:18px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #c93c31;

}

.subitem a
{
margin-left:23px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #215dc6;
}

.subitemover
{
margin-left:10px;
margin-top:2px;
font: 11px tahoma,verdana,sans-serif;
height:18px;
color: #428eff;
}

.subitemover a
{
margin-left:23px;
font: 11px tahoma,verdana,sans-serif;
cursor:pointer;
color: #428eff;
text-decoration:underline;
cursor:pointer;
}

.drop
{
border-left:1px solid black;
border-right:1px solid black;
}

jomaruro · #3 (**permalink**) 01/10/2010, 14:58

Hola:

Primero solucionamos el problema, cambia tu CSS:

Código CSS:

Ver original#menu{
    background-color:#ffcb00;
    width:190px; 
    height:auto;
    float:left;
    /*margin-top:-387px;*/
}
 
#navegador{
    background-color:#ffcb00;
    width:810px;
    height:auto;
    /*margin-left:190px;
    margin-top:0px;*/
    float:right;
}

Segundo, una pequeña bronca, tu código es un poco complicado y con un "algún" error:

1º Tienes el head sin cerrar.
2º En el pie de la página tienes un span cerrado que no has abierto.
3º Exceso de "divitis".

Date una vuelta por los ejemplos de menús desplegables que hay en las FAQ's, verás que es mucho más sencillo hacer un menú simplemente con CSS sin usar Javascript y con mucho menos código.

Otro consejo, no utilices salvo que sea extrictamente necesario la posición absoluta.

Saludos.

sanmi86 · #4 (**permalink**) 03/10/2010, 15:55

Cita:

Iniciado por jomaruro

Hola:

Primero solucionamos el problema, cambia tu CSS:

Código CSS:

Ver original#menu{
    background-color:#ffcb00;
    width:190px; 
    height:auto;
    float:left;
    /*margin-top:-387px;*/
}
 
#navegador{
    background-color:#ffcb00;
    width:810px;
    height:auto;
    /*margin-left:190px;
    margin-top:0px;*/
    float:right;
}

Segundo, una pequeña bronca, tu código es un poco complicado y con un "algún" error:

1º Tienes el head sin cerrar.
2º En el pie de la página tienes un span cerrado que no has abierto.
3º Exceso de "divitis".

Date una vuelta por los ejemplos de menús desplegables que hay en las FAQ's, verás que es mucho más sencillo hacer un menú simplemente con CSS sin usar Javascript y con mucho menos código.

Otro consejo, no utilices salvo que sea extrictamente necesario la posición absoluta.

Saludos.

Muchas Gracias compañero por tu tiempo, me has sacao de un gran apuro y de un bucle del que no podia salir.

Respecto a mi codigo perdon por los errores que no habia depurado y ya te digo que empezao hace poco con los divs y el css.
Voy a seguir el consejo sobre los menus y me voy a empapar sobre el tema haber que puedo llegar a hacer.

Gracias de nuevo y doy por cerrado el tema.

sanmi86 · #5 (**permalink**) 07/10/2010, 17:02

Hola, soy yo de nuevo otra vez. Esto de las capas se me atasca por mas que me pego con ello. Haber si me podeis ayudar, porque php y mysql lo llevo bastante bien, pero esto de los divs.

La pagina de (Portada) es esta :
http://www.alonso-autoescuela.es/Inicio/portada.php

El problema comienza de nuevo , pero esta vez solo visualizando la pagina con IE8. En en el momento en el que desplegamos la opcion "Inicio" en el menu y pinchamos en ""localizacion".
Vemos que el div del menu se desplaza hacia la derecha, ademas de esta vez ensanchar la barra de usuario y desplazar el "coche" que va por la carretera".
Aunque tambien en la "portada" se presentan los sintomas de engrosamiento de la barra de usuario[/COLOR].

Tambien indicar qe en "localizacion" si pulsamos cualquiera de los dos enlace que hay de "Email" nos aparecera una capa emergente pra el envio de un correo electronico,esta capa no he conseguido ajustala al navegador,sino que se posicione por encima del pie de pagina.

La pagina del apartado (Localizacion) es esta :
http://www.alonso-autoescuela.es/Inicio/localizacion.php

Informacion:

Es el esquema de la pagina es repetitivo en los diferentes html, el unico div cambiante en su contenido es "navegador"el cual se redimendina a lo largo segun el contenido, por ello las demas partes estan llamadas con "includes" a diferentes archivos.

Os pongo a continuacion el HTML Y CSS:

sanmi86 · #6 (**permalink**) 07/10/2010, 17:25

Cita:

Iniciado por sanmi86

os pongo a continuacion el html y css:

html:

Cita:

<!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>
<link rel="stylesheet" type="text/css" href="/css/estilos.css">
<link rel="shortcut icon" href="/images/favicon/favicon.ico">

<link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>¡¡¡ bienvenidos a autoescuela alonso !!!</title>
</head>
<body>
<div id="resolucion"> 

<div id="cabecera">
<img src="/images/cabecera/cabecera.jpg" name="img_cabecera" usemap="#img_cabeceramap" id="img_cabecera"/>
<map name="img_cabeceramap" id="img_cabeceramap">
<area shape="rect" coords="0,8,535,68" alt="inicio" href="/inicio/portada.php" />
</map>

<div id="barra_despla">
<marquee>
<img src="/images/tunel-coche/tunel-coche.gif" name="img_coche" id="img_coche"/>
<div id="cont_noticia">
<a id="noticia"> ¡¡¡ nuevo curso c.a.p !!!
</a></div>
</marquee>
</div>
</div>

<div id="barra_usuario">

<form name="form1" method="post" action="/inicio/portada.php">
<div id="bienvenido">bienvenid@ a autoescuela alonso</div>
<div id="usuario">usuario</div>
<div id="txt_dni"><input type="text" name="dni" size="6"/></div>
<div id="contra">contraseña</div>
<div id="txt_contra"><input type="text" name="contrasena" size="6" /></div>
<div id="sub_entrar"><input type="submit" name="login" value="entrar"></div>
</form>
<div id="registrarse"><a href="/inicio/construccion.php">registrarse</a></div>
<div id="perd_contra"><a href="/inicio/construccion.php">¿perdiste la contraseña?</a>
</div>
</div>

<div id="contenedor">

<div id="navegador">

<div id="banner_titulo">contacto y localización</div>

<div id="capa_email">
<div id="titulo_form_email">formulario de consultas</div><br>
<form id="enviar_correo" method="post" action="/inicio/localizacion.php">
nombre <input type="text" name="rmt_nombre" size="10"/><br>
email <input type="text" name="rmt_email" size="10"/><br>
teléfono <input type="text" name="rmt_telefono" size="10"/><br>
mensaje<br><textarea name="rmt_mensaje" rows="6" cols=32></textarea><br>
<img src="../lib/captcha.php" width="100" height="30" vspace="3"><br>
<input name="tmptxt" type="text"><br>
<input type="submit" name="rmt_enviar" value="enviar">
<input type="button" name="rmt_cancelar" value="cancelar" onclick="document.location.href='/inicio/localizacion.php'">
<input name="action" type="hidden" value="checkdata">

</div>
<div id="cont_localizacion">
<div id="alonso">
<div id="local_alonso">
<div id="alonso_titulo">autoescuela alonso</div>
<div id="alonso_direccion">avenida españa, nº24 bajo, 39610 el astillero</div>
<div id="alonso_telefono">942 54 29 01 - 616 63 87 75 (móvil)</div>
<div id="alonso_como_llegar"><a href="http://maps.google.es/maps?hl=es&georestrict=input_srcid:6d01b88a7886325 6&ie=utf8&view=map&f=d&daddr=avenida+espa%c3%b1a,+ n%c2%ba24+bajo,+39610+el+astillero&geocode=cfxmfhr ykdtxffk9lgiddarf_yev4b4rbvr8cw&ved=0cgoq_wy&sa=x& ei=qbeptn7fczww_qbptlsuca" target="_blank">cómo llegar</a>  <a href="javascript:muestra();">email</a>
</div>
</div>
<div id="mapa_alonso">
<iframe width="240" height="165" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?hl=es&georestrict=input_srcid:6d01b88a788 63256&ie=utf8&view=map&cid=86384057962 5082927&q=autoescuela+alonso&ved=0chaqpqy& amp;ei=aoqkti_pis3__qbzq7tkaw&hq=autoescuela+a lonso&hnear=&ll=43.400697,-3.823091&spn=0.006295,0.006295&output=embe d">
</iframe><small>
<div id="alonso_mas_grande"><a href="http://maps.google.es/maps?hl=es&georestrict=input_srcid:6d01b88a788 63256&ie=utf8&view=map&cid=86384057962 5082927&q=autoescuela+alonso&ved=0chaqpqy& amp;ei=aoqkti_pis3__qbzq7tkaw&hq=autoescuela+a lonso&hnear=&ll=43.400697,-3.823091&spn=0.006295,0.006295&source=embe d" target="_blank">ver mapa más grande</a></small>
</div>
</div>
</div>

<div id="media">
<div id="local_media">
<div id="media_titulo">mediaconcha formación s.l.</div>
<div id="media_direccion">polígono industrial barros, parc.24, nav.2, 39408<br>los corrales de buelna</div>
<div id="media_telefono">616 63 87 75 (móvil)</div>
<div id="media_como_llegar"><a href="http://maps.google.es/maps?hl=es&georestrict=input_srcid:f16d4b5f7a438df b&ie=utf8&view=map&f=d&daddr=pol%c3%adgono+industr ial++barros,+parc.+24++nav.,+2,+39408+los+corrales +de+buelna&geocode=cvjspmqtxe2ffbr6laidusrb_yf4w7w gwwz5sg&ved=0cbmq_wy&sa=x&ei=sduptpx8jm3__qalv-n2bw" target="_blank">cómo llegar</a>  <a href="javascript:muestra();">email</a>

</div>
</div>
<div id="mapa_media">
<iframe width="240" height="165" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?hl=es&georestrict=input_srcid:f16d4b5f7a4 38dfb&ie=utf8&view=map&cid=54023628135 38392952&q=mediaconcha+formaci%c3%b3n.s.l.&amp ;ved=0cbkqpqy&ei=xtuptpu2i8mj_gbm0jhibg&hq =mediaconcha+formaci%c3%b3n.s.l.&hnear=&ll =43.285172,-4.07687&spn=0.006295,0.006295&iwloc=a& output=embed"></iframe><br /><small>

<div id="media_mas_grande"><a href="http://maps.google.es/maps?hl=es&georestrict=input_srcid:f16d4b5f7a4 38dfb&ie=utf8&view=map&cid=54023628135 38392952&q=mediaconcha+formaci%c3%b3n.s.l.&amp ;ved=0cbkqpqy&ei=xtuptpu2i8mj_gbm0jhibg&hq =mediaconcha+formaci%c3%b3n.s.l.&hnear=&ll =43.285172,-4.07687&spn=0.006295,0.006295&iwloc=a& source=embed" target="_blank">ver mapa más grande</a></small>
</div>
</div>
</div>
</div>

</div>

sanmi86 · #7 (**permalink**) 07/10/2010, 17:31

Cita:

<div id="menu">
<div class="navbar">

<div class="maindiv">
<div class="topitem" >inicio</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/inicio/quienes_somos.php">¿quiénes somos?</a></div>
<div class="subitem"><a href="/inicio/construccion.php">historia</a></div>
<div class="subitem"><a href="/inicio/localizacion.php">contacto y localización</a></div>
</div>
</div>
</div>



<div class="maindiv" >
<div class="topitem" >autoescuela</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/inicio/construccion.php">permisos</a></div>
<div class="subitem"><a href="/inicio/construccion.php">horarios</a></div>
<div class="subitem"><a href="/inicio/construccion.php">instalaciones</a></div>
<div class="subitem"><a href="/inicio/construccion.php">vehiculos</a></div>
<div class="subitem"><a href="http://www.todotest.com/tests/idxtests.asp" target="_contenido" >tests</a></div>
</div>
</div>
</div>



<div class="maindiv" >
<div class="topitem" >m. Peligrosas</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/inicio/construccion.php">cursos</a></div>
<div class="subitem"><a href="/inicio/construccion.php">instalaciones</a></div>
<div class="subitem"><a href="http://www.todotest.com/tests/idxtests.asp" target="_contenido" >tests</a></div>
</div>
</div>
</div>



<div class="maindiv" >
<div class="topitem" >c.a.p</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/cap/informacion.php">¿en que consiste?</a></div>
<div class="subitem"><a href="/inicio/construccion.php">cursos</a></div>
<div class="subitem"><a href="/inicio/construccion.php">instalaciones</a></div>
<div class="subitem"><a href="/inicio/construccion.php">tests</a></div>
</div>
</div>
</div>



<div class="maindiv" >
<div class="topitem" >cursos de formación</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/inicio/construccion.php">cursos</a></div>
<div class="subitem"><a href="/inicio/construccion.php">instalaciones</a></div>
<div class="subitem"><a href="/inicio/construccion.php">tests</a></div>
</div>
</div>
</div>



<div class="maindiv" >
<div class="topitem" >noticias y cursos</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/inicio/construccion.php">nuevas normativas</a></div>
<div class="subitem"><a href="/inicio/construccion.php">próximos cursos</a></div>
</div>
</div>
</div>



<div class="maindiv" >
<div class="topitem" >notas</div>
<div class="dropmenu" >
<div class="submenu">
<div class="subitem"><a href="/inicio/construccion.php">c.a.p</a></div>
<div class="subitem"><a href="http://aplicaciones.dgt.es/examenes/consulta/calificacionesbuscar.jsp" target="_contenido">resto de permisos</a></div>
</div>
</div>
</div>

</div>

</div>

</div>
<div id="pie_pagina">
<a id="enl_pie" href="/copyright/pol_privacidad.php">política de privacidad</a>. <a id="enl_pie" href="/copyright/nota_legal.php">nota legal</a>. <a id="enl_pie" href="/copyright/req_sistema.php">requisitos del sistema</a>. <br />
copyright © 2010. Mediaconcha formación. Todos los derechos reservados
</div>
<script language="javascript">
function muestra(){
document.getelementbyid('capa_email').style.visibi lity = "visible";
}
</script>


<script type="text/javascript" src="/js/xpmenuv21.js"></script>
</body>
</html>

ccs:

Cita:

@charset "utf-8";
/************************************************** ************************************************** *********************************** css document ************************************************** ************************************************** ********************************************/
/*****************************************general** ************************************************** ************************************************** ********************************************/

body{
/*background-color:#ffcb00;*/
background-color:#ffcb00;
}
#resolucion{
width:1000px;
height:560px;
background-color:#ffcb00;
position: Absolute;
top: 50%;
left: 50%;
margin-top: -280px; /* height/2 = 500px / 2 */
margin-left: -500px; /* width/2 = 500px / 2 */

}
#cabecera{
border:none;
width:100%;
margin-top:-20px;

}
#img_cabecera{
border:none;
width: 100%;
}
#barra_despla{
width:85%;
border:none;
position:absolute;
margin-top:-2em;
margin-left:4em;
}
#img_coche{
width:4.5em;
}
#noticia{
text-align:left;
width:100%;
color:#fff;
font-stretch:expanded;
font-size:20px;
}
#cont_noticia{
margin-top:-1.5em;
padding-bottom:0.5em;
margin-left:6em;
}
#barra_usuario{
background-color:#ffcb00;
width:100%;
height:2.4em;
}
#bienvenido{
float:left;
margin-left:10px;
margin-top:9px;
font-style:italic;
font-weight:bold;
color: #313068;
font-size:16px;
}
#usuario{
float:left;
margin-left:60px;
margin-top:9px;
font-style:italic;
font-weight:bold;
font-size: 14px;
color:black;
}
#txt_dni{
float:left;
margin-left:15px;
margin-top:9px;
font-style:italic;
font-weight:bold;
}
#contra{
float:left;
margin-left:15px;
margin-top:9px;
font-style:italic;
font-weight:bold;
font-size: 14px;
color:black;
}
#txt_contra{
float:left;
margin-left:15px;
margin-top:9px;
}
#sub_entrar{
float:left;
margin-left:15px;
margin-top:8px;
font-style:italic;
}

#registrarse{
float:left;
margin-left:60px;
margin-top:9px;
font-style:italic;
color: #313068;
font-size: 14px;
}

#perd_contra{
float:left;
margin-left:15px;
margin-top:9px;
font-style:italic;
color: #313068;
font-size: 14px;
}
#nombre_user{
float:left;
color: #009933;
font-size: 16px;
font-weight: Bold;
margin-left:6px;
margin-top:9px;
}
#cerrar_sesion{
margin-left:15px;
margin-top:9px;
font-style:italic;
color: #313068;
font-size: 16px;
float:left;
}
#menu{
background-color:#ffcb00;
width:190px;
height:auto;
float:left; /*margin-top:-387px;*/
}
#navegador{
background-color:#ffcb00;
width:810px;
height:auto; /*margin-left:190px; margin-top:0px;*/
float:right;
position:relative;
z-index:0;
}
#coche_principal{
width:50.6em;
height:24.2em;
}
#pie_pagina{
background-color:#000;
height:2.5em;
width:1000px;
text-align: Center;
color:#f5d116;
font-size:0.7em;
margin-top:0px;
float:left;

}
#enl_pie{
color:#f5d116;
font-size:0.7em;
}

#contenedor{
clear:left;
}
#obras{
text-align:center;
}
#titulo_obras{
color: #ff0000;
font-size: 50px;
font-style: Italic;
font-family: "courier new", courier, monospace;
font-weight: Bold;
text-align:center;
}
#img_obras{
width:300px;
height:330px;
text-align:center;
}
#banner_titulo{
text-align:center;
font-weight: Bold;
color:#ffcb00;
font-style:oblique;
font-size:32px;
background-color:#013a68;
padding-bottom:3px;

}
#titulo_form_email{
font-weight: Bold;
color:#ffcb00;
font-style:oblique;
font-size:20px;
width:308px;
padding-top:2px;
padding-left:80px;

}
div#capa_email{
top:40px;
background-image:url(/images/varios/plantilla-email.gif);
z-index:5;
position:absolute;
left:200px;
width:398px;
height:398px;
visibility:hidden;
/*-moz-border-radius:20px 20px 20px 20px;*/
text-align: Left;
}
#enviar_correo{
margin-top:20px;
margin-left:40px;
}
#img_captcha{
font-family:"trebuchet ms",tahoma,verdana;
font-size:12px;
text-decoration:none;
}

sanmi86 · #8 (**permalink**) 07/10/2010, 17:33

Cita:

#cont_localizacion{
position:relative;
z-index:1;
}
#alonso{

}
#local_alonso{
margin-top:50px;
margin-left:20px;

}
#alonso_titulo{
font-size:154%;
font-weight:bold;
line-height:1em;
}
#alonso_direcion{
line-height:1.5em;

}
#alonso_telefono{
line-height:1.5em;

}
#mapa_alonso{
float:right;
margin-top:-130px;
margin-right:120px;
text-align:center;
position:relative;
z-index:1;
}
#alonso_mas_grande{
color:#0000FF;
}
#media{

}
#local_media{
margin-top:100px;
margin-left:20px;
}
#media_titulo{
font-size:154%;
font-weight:bold;
line-height:1em;
margin-top:75px;
}
#media_direcion{
line-height:1.5em;

}
#media_telefono{
line-height:1.5em;

}
#mapa_media{
position:relative;
z-index:1;
float:right;
margin-top:-140px;
margin-right:120px;
text-align:center;
}
#media_mas_grande{
margin-bottom:10px;
color:#0000FF;
}
#fermin{
text-align:center;
margin-top:10px;
}
#pili{
float:left;
margin-left:210px;
margin-top:10px;
}
#alvaro{
text-align:center;
margin-right:200px;
margin-top:10px;

}
#fernando{
float:left;
text-align:center;
margin-top:10px;
margin-left:120px;
margin-right:35px;
margin-bottom:10px;
}
#david{
float:left;
text-align:center;
margin-top:10px;
margin-right:20px;
margin-left:-10px;
margin-bottom:10px;
}
#jcarlos{
float:right;
text-align:center;
margin-top:10px;
margin-right:-70px;
margin-left:5px;
margin-bottom:10px;
}
#quienes_foto{
text-align:center;
}
#quienes_texto{
font-weight:bold;
}

/************************************************** ************************************************** *******************************************MENU*** ************************************************** ************************************************** ******************************************/

.navbar
{
}

.mainDiv
{
width:185px;
}

.topItem
{
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url(/Images/Menu/arrow-up-title.jpg) no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
border: none;
width: 185px;
height: 25px;
color: #66ff33;
cursor:pointer;
text-indent:10px;

}

.topItemOver
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url(/Images/Menu/arrow-up-title-on.jpg) no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #df0024;
cursor:pointer;
}

.topItemClose
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url(/Images/Menu/arrow-down-title.jpg) no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #313068;
cursor:pointer;
}

.topItemCloseOver
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url(/Images/Menu/arrow-down-title-on.jpg) no-repeat 0 0;

background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #df0024;
cursor:pointer;
}

.dropMenu
{
font: bold 11px tahoma,verdana,sans-serif;
background-color: #f9e166;
color: #000;
border: 1px solid #FFFFFF;
border-width: 0 1px 1px 1px;
filter:alpha(opacity=100);
padding-top:5px;
padding-bottom:5px;
}

.subMenu
{
display:block;
}

.subItem
{
margin-left:10px;
margin-top:2px;
height:18px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #c93c31;

}

.subItem a
{
margin-left:23px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #215dc6;
}

.subItemOver
{
margin-left:10px;
margin-top:2px;
font: 11px tahoma,verdana,sans-serif;
height:18px;
color: #428eff;
}

.subItemOver a
{
margin-left:23px;
font: 11px tahoma,verdana,sans-serif;
cursor:pointer;
color: #428eff;
text-decoration:underline;
cursor:pointer;
}

.drop
{
border-left:1px solid black;
border-right:1px solid black;
}

Bueno os he puesto el codigo , aunque me imagino que hoy todo el mundo cononoce "Firebug" y el "ver codigo fuente". Un Saludo

jomaruro · #9 (**permalink**) 10/10/2010, 02:46

Hola:

Añade esta etiqueta meta en el head de tu web.

Código HTML:

Ver original<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Saludos.

sanmi86 · #10 (**permalink**) 14/10/2010, 11:05

Cita:

Iniciado por jomaruro

Hola:

Añade esta etiqueta meta en el head de tu web.

Código HTML:

Ver original<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Saludos.

Gracias de nuevo Jomaruro, pero he hecho esto y no me soluciona nada. Al final pegandome con los Css he conseguido arreglarlo, no se si de manera chapuzas pero funciona. Un Saludo