Jump to content
blinky

No consigo insertar una caja en una posición

Recommended Posts

Hola a todos, sigo a vueltas con mi pagina web, una vez resulto el tema del menú, y probado ya en todo los navegadores que funciona perfecto (IE, FireFox, Safari, Chrome) ahora vuelvo porque al intentar insertar una presentación de imágenes en la misma no soy capaz de hacer que respete los 30px que el menú tiene y no se cuele donde esta dicho menú... en brutito que es uno.

 

Para que lo veáis mejor un ejemplo: http://www.desarrollo.ivoryescapes.com/indexprt1.htm

 

El código html es este junto con el CSS

 

MUCHISIMAS GRACIAS, seguro que para alguno de vosotros es pan comido pero yo no acabo de dar con ello de una forma correcta.

 

 

 

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

<html>

<head>

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

<title>IVORY ESCAPES - APARTAMENTOS DE LUJO, DIAS, SEMANAS, MESES</title>

<link type="text/css" href="menu.css" rel="stylesheet" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="menu.js"></script>

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>IVORY ESCAPES - APARTAMENTOS DE LUJO, DIAS, SEMANAS, MESES.</title>

<meta name="keywords" content="MADRID APARTMENTS FOR RENT SHORT TERM LETS, SERVICED APARTMENTS ACCOMODATION SPAIN, ACCOMODATION MADRID, SHORT RENTAL, MADRID HOTELS, SPAIN LUXURY ACCOMODATION, LUXURY RENTS, LUXURY LETS. ALQUILER APARTAMENTOS EN ESPAÑA, MADRID ALOJAMIENTOS, GUIA MADRID, ESTANCIAS CORTAS, SEMANAS DIAS, ALOJAMIENTO PARA VACACIONES, ALQUILER TEMPORAL DE CORTA DURACION, VENTA DE PISOS, HOTELES EN MADRID, APARTAMENTOS AMUEBLADOS DE CORTO TIEMPO EN EL CENTRO DE MADRID, RESERVAS ON LINE, FURNISHED APARTMENTS MADRID, FURNISHED FLATS MADRID, VACACIONES MADRID, ALQUILER POR DIAS, SEMANAS, MESES EN MADRID. CHIC RENTALS APARTMENTS IN MADRID, CHARMING APARTMENTS MADRID, RELOCATION MADRID, RELOCATION SPAIN, ESPAT MADRID, ESPAT SPAIN, ALQUILER HERMOSILLA MADRID/RENT HERMOSILLA MADRID, ALQUILER JESUS MADRID/RENT JESUS MADRID, ALQUILER TRAVESIA BELEN/RENT TRAVESIA BELEN, ALQUILER PRINCIPE DE VERGARA MADRID/RENT PRINICPE DE VERGARA MADRID, ALQUILER CONDE DE ARANDA MADRID/ RENT CONDE DE ARANDA MADRID.">

<meta name="title" content="Ivory Escapes. Luxury Serviced Apartments">

<meta name="description" content="MADRID APARTMENTS FOR RENT SHORT TERM LETS, SERVICED APARTMENTS ACCOMODATION SPAIN, ACCOMODATION MADRID, SHORT RENTAL, MADRID HOTELS, SPAIN LUXURY ACCOMODATION, LUXURY RENTS, LUXURY LETS. ALQUILER APARTAMENTOS EN ESPAÑA, MADRID ALOJAMIENTOS, GUIA MADRID, ESTANCIAS CORTAS, SEMANAS DIAS, ALOJAMIENTO PARA VACACIONES, ALQUILER TEMPORAL DE CORTA DURACION, VENTA DE PISOS, HOTELES EN MADRID, APARTAMENTOS AMUEBLADOS DE CORTO TIEMPO EN EL CENTRO DE MADRID, RESERVAS ON LINE, FURNISHED APARTMENTS MADRID, FURNISHED FLATS MADRID, VACACIONES MADRID, ALQUILER POR DIAS, SEMANAS, MESES EN MADRID. CHIC RENTALS APARTMENTS IN MADRID, CHARMING APARTMENTS MADRID, RELOCATION MADRID, RELOCATION SPAIN, ESPAT MADRID, ESPAT SPAIN, ALQUILER HERMOSILLA MADRID/RENT HERMOSILLA MADRID, ALQUILER JESUS MADRID/RENT JESUS MADRID, ALQUILER TRAVESIA BELEN/RENT TRAVESIA BELEN, ALQUILER PRINCIPE DE VERGARA MADRID/RENT PRINICPE DE VERGARA MADRID, ALQUILER CONDE DE ARANDA MADRID/ RENT CONDE DE ARANDA MADRID.">

<meta name="Distribution" content="Global">

<meta name="Robots" content="All">

<style type="text/css">

* {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

color: #000;

margin: 0;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

}

body {

background-color: #96A8B4;

background-image: ;

}

div#copyright {

font:11px 'Trebuchet MS';

color:#96A8B4;

text-indent:30px;

padding:300px 0 0 0;

}

div#copyright a { color:#96A8B4; }

div#copyright a:hover { color:#96A8B4; }

 

div#menu {

top:0;

left:0px;

width:100%x;

}

#apDiv1 {

position:relative;

width:856px;

height:30px;

z-index:1;

background-color:#EFF6F8;

overflow: visible;

top:0px;

}

</style>

 

</head>

 

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td height="583" rowspan="2" align="right" valign="top" background="img/l_back.gif"> </td>

<td width="57" height="583" rowspan="2" align="right" valign="top"><img src="img/l.gif" width="57" height="583"></td>

<td width="856" height="558" align="center" valign="top"><p><img src="img/top.gif" width="856" height="91" border="0" usemap="#Map">

<div id="apDiv1">

<div id="menu">

<ul class="menu">

<li><a href="#" class="parent"><span>IVORY ESCAPES</span></a>

 

<li><a href="#" class="parent"><span>MIS ESCAPADAS</span></a>

<div><ul>

<li><a href="#" class="parent"><span>Nidos Urbanos</span></a>

<div><ul>

<li><a href="#"><span>Sub Item 1.1</span></a></li>

<li><a href="#"><span>Sub Item 1.2</span></a></li>

</ul></div>

<li><a href="#" class="parent"><span>Casas Únicas</span></a>

<div><ul>

<li><a href="#"><span>Sub Item 1.1</span></a></li>

<li><a href="#"><span>Sub Item 1.2</span></a></li>

</ul></div>

<li><a href="#" class="parent"><span>Localizaciones</span></a>

<div><ul>

<li><a href="#"><span>Sub Item 1.1</span></a></li>

<li><a href="#"><span>Sub Item 1.2</span></a></li>

</ul></div>

</ul></div>

</li>

<li><a href="#"><span>SERVICIOS</span></a></li>

<li><a href="#"><span>CÓMO RESERVAR</span></a></li>

<li><a href="#"><span>BIENVENIDA</span></a></li>

<li><a href="#"><span>CONTACTO</span></a></li>

</ul>

</div>

 

<div id="portada">Colocar aquí el contenido para id "portada"</div>

 

<td width="57" height="583" rowspan="2" align="left" valign="top"><img src="img/r.gif" width="57" height="583"></td>

<td height="583" rowspan="2" align="left" valign="top" background="img/r_back.gif"> </td>

</tr>

 

<td width="856" height="20" align="left" valign="center"><img src="img/esping.jpg" width="856" height="20" border="0" usemap="#Map2"></td>

</tr>

<tr bgcolor="#96A8B4">

<td colspan="5"> </td>

</tr>

</table>

<div id="copyright"><a href="http://apycom.com/"></a></div>

 

<map name="Map">

<area shape="rect" coords="259,13,566,75" href="#">

</map>

 

<map name="Map2">

<area shape="rect" coords="29,4,95,22" href="#">

<area shape="rect" coords="103,0,163,19" href="#">

</map>

</body>

</html>

 

CSS:

 

 

/**

*********************************************

* Prototype of styles for horizontal CSS-menu

* @data 30.06.2009

*********************************************

* (X)HTML-scheme:

* <div id="menu">

* <ul class="menu">

* <li><a href="#" class="parent"><span>level 1</span></a>

* <div><ul>

* <li><a href="#" class="parent"><span>level 2</span></a>

* <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>

* </li>

* </ul></div>

* </li>

* <li class="last"><a href="#"><span>level 1</span></a></li>

* </ul>

* </div>

*********************************************

*/

 

/* menu::base */

div#menu {

background: transparent url(images/menu_m.png) repeat-x scroll 0 0;

position: relative;

top: 0;

left: 0;

color: #000;

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 150%;

}

 

ul.menu {

clear: both;

float: none;

cursor: pointer;

z-index: 1;

position: absolute;

 

}

 

div#menu ul {

margin: 0px;

padding: 0px;

list-style: none;

float: left;

z-index: 2;

position: fixed;

}

 

div#menu li {

position: relative;

margin-left: 0px;

padding-left: 0px;

display: block;

overflow: visible;

float: left;

width: 143px;

height: 30px;

z-index: 3;

}

/* menu::level1 */

div#menu li a {

height: 30px;

display: block;

float: none;

line-height: 30px;

text-decoration: none;

color: #333;

overflow: hidden;

z-index: 4;

position: relative;

 

}

 

div#menu li span {

color: #96A8B4;

display: block;

padding: 0 15px;

background-repeat: no-repeat;

background-position: 95% 0px;

z-index: 6;

position: relative;

}

 

div#menu li span.bg {

display: block;

background: url('images/menu_level1_item.png') repeat-x scroll 0pt 100%;

padding: 0;

height: 30px;

z-index: 5;

position: relative;

float: left;

}

 

div#menu li.current {

font-weight: bold;

}

 

div#menu li.current ul {

font-weight: normal;

}

 

/* menu::level2 */

div#menu ul.menu ul {

padding: 0px 0px 10px;

background: transparent url('images/menu_dropdown_bg.png') no-repeat scroll 0pt 100%;

_background: transparent url('images/menu_dropdown_bg.gif') no-repeat scroll 0pt 100%;

left: -999em;

width: 165px;

position: absolute;

top: 30px;

}

 

div#menu li:hover ul, div#menu li.sfhover ul {

left: 0px;

z-index: 100;

visibility: visible;

}

 

div#menu li li {

width: 100%;

text-indent: 0px;

float: none;

height: auto;

}

 

div#menu li li a, div#menu li li span.separator {

margin: 0px 1px;

padding: 0px;

background: url('images/menu_level2_item.gif') no-repeat scroll 100% bottom;

height: auto;

float: none;

display: block;

line-height: 25px;

width: 163px;

}

 

div#menu li li a.parent {

background: url('images/menu_level2_item_parent.gif') no-repeat scroll 100% bottom;

}

 

/* menu::level3 */

div#menu li ul ul {

margin: -31px 0 0 164px;

}

 

div#menu li:hover ul ul, div#menu li.sfhover ul ul {

border-top: 1px solid #ccc;

}

 

div#menu li:hover ul ul, div#menu li.sfhover ul ul, div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul, div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {

left: -999em;

}

div#menu li li:hover ul, div#menu li li.sfhover ul, div#menu li li li:hover ul, div#menu li li li.sfhover ul, div#menu li li li li:hover ul, div#menu li li li li.sfhover ul {

left: 0pt;

z-index: 100;

}

 

div#menu a:hover {

color: #FFF;

}

div#menu span:hover {

color: #FFF;

}

div#menu li ul span:hover {

color: #FFFFFF;

}

Share this post


Link to post
Share on other sites

Hola blinki.

Lo que te voy a comentar no lo he probado, pero haz tu la prueba. Antes que nada quisiera aclararte algunas cosas de css y html.

Un <div> es una capa, donde normalmente le ponemos un "id" para asignarle unos estilos concretos. Veo que has llamado al <div> del contenido "portada" a través de su "id", pero en los CSS no hay ningún estilo llamado "portada" (por lo menos yo no lo he visto).

 

Crea en el css un:

#portada {
margin-top:30px;
}

Si con "margin-top:30px;" no funciona, prueba con "padding-top:30px;" y luego con "top:30px;" hasta que te haga el resultado que quieres obtener. Te pongo esas tres posibilidades para que pruebes las diferencias de cada uno y lo aprendas.

 

Otra cosa. (a mi por lo menos) Cuando hago scroll hacia abajo el menu me desaparece, está como fijo en la pantalla, mira ese detalle en los css. Si ponemos "positio:fixed;" ocurrirá eso, pero échale un vistazo y si no te aclaras lo miramos entre todos.

 

Estoy seguro que con todo esto estarás aprendiendo. wink.gif

 

Un saludo

Share this post


Link to post
Share on other sites

Muchas Gracias, pues si tienes toda la razón estoy aprendiendo mucho, la verdad es que me estas ayudando una barbaridad y te LO AGRADEZCO.

 

Voy a probar todo lo que me dices y cuento como han ido tus aportaciones, que creo van a funcionar porque las anteriores funcionaron sin problemas. Pruebo también lo que me comentas que el menu desaparece al hacer scroll.

 

Muchas gracias.

Share this post


Link to post
Share on other sites

Hola Mr_Joker ya he aplicado tus sabios consejos y este es el resultado, lo he probado en todos los navegadores mas usados tanto de Mac como de Windows y funciona a la perfección, es bastante parecido a lo que quería de pagina de inicio, bueno puedes verla tu mismo:

 

http://www.desarrollo.ivoryescapes.com/index.htm

 

Una vez mas muchas gracias, no te vayas muy lejos porque seguro que voy a tener que hacer uso de ti y de todo el foro, gracias a todos por la ayuda prestada.

 

Saludos.

Share this post


Link to post
Share on other sites

Me alegro. Queda muy bien.

Ya sabes donde estamos, para lo que haga falta. wink.gif

 

Un saludo

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.