En este grupo En todos

Grupo de HTML 5 + CSS 3



tengo un problema con un menu desplegable

carmen
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 05/10/2010

Hola, necesito ayuda, tengo un problema con un menu desplegalbe tipo acirdeon, logre instalarlo en mi pagina de html pero se mueve en mi pc se ve bien pero en otra el menu desplegable se ve en la parte superior , en otra en un esquina, se mueve y no se que hacer,me pueden ayudar para que l el menu quede fijo en cualquier pc como las otras opciones que tengo arriba? Es una pagina donde tengo varios link verticales y este lo necesito desplegable, consegui uno por intertnet y lo adapte pero no sale donde quiero se mueve que puedo hacer?

Carlos Basilio Ferreira Silva
Superior de electrotecnia escola secun...
Escrito por Carlos Basilio Ferreira Silva
el 05/10/2010

Hola Carmen,

Que tal?

Que tipo de lenguage has utilizado, es un jquery?

Tienes el menu dentro de una div, como tienes posicionada la div?

Si puedes pon por aqui el codigo que tienes ahora mismo.


Gracias y saludos


Carmen Iriarte
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 05/10/2010

Ok, lo estoy haciendo en html estoy usando dreamweaver, y nvu para la creacion de la pagina, y bueno es un javascript, y si tiene un div, paso el codigo del menu , y de la pagina donde aparece pero se mueve por todos lados no se si hay que meterlo en una tabla? Pero no se como?..... BUENO ESTE ES EL CODIGO DE LA PAG COMPLETA ADENTRO ESTA EL MENU EL DIV ESTA AL PRINCIPIO, Y TE PASO EL JAVASCRIPT DEL MENU APARATE....

<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Software educativo: "Tutorial estrategias de
ense&ntilde;anza y aprendizaje basadas en la Web 2. 0"</title>
<script language="JavaScript" type="text/javascript"
src=".. /js/jglosario. Js"></script>
<script language="JavaScript" type="text/javascript"
src=".. /js/jglosario1. Js"></script>
<script language="JavaScript" type="text/javascript"
src=".. /js/jmenus. Js"></script>
<script language="JavaScript"
src=".. /js/jfuncionesGenerales. Js"></script>
<script src="SpryAssets/SpryAccordion. Js"
type="text/javascript"></script>
<script language="JavaScript">
function cambioSRC(ruta)
{document. GetElementById("ifr1"). Src=ruta;}
</script>
<script language="JavaScript" type="text/javascript"
src=".. /js/jmenudesple. Js"></script>
<style type="text/css">
. ClTopMenu {
position:absolute;
width:100px;
height:150px;
clip:rect(0px 100px 14px 0px);
layer-background-color:#eeeeee;
z-index:31;
visibility:hidden;
left: 43px;
top: 545px;
}
. ClTopMenuBottom {position:absolute; width:126px; height:4px; clip:rect(0px 126px 4px 14px); top:11; layer-background-color:#cecfce; background-color:#cecfce; z-index:2;}
. ClTopMenuText {position:absolute; width:130px; left:12px; top:45px; font-family:HandelGothic BT,helvetica,sans-serif; font-size:10px; background-image: url(algo. Png); z-index:1;}
</style>
<style type="text/css">
. Ver { display:block; }
. Ocultar { display:none; }
</style>
<script language="JavaScript">
function cerrar() {
window. Close()
}
</script>
<link href="SpryAssets/SpryAccordion. Css" rel="stylesheet"
type="text/css">
</head>
<body
style="background-color: rgb(0, 0, 0); margin-top: 1px; height: 715px;">
<div style="text-align: center;" id="divTopMenu0"
class="clTopMenu"><a href="#"
onmouseover="menuOver(0)" onmouseout="menuOut(0)"
onclick="topMenu(0); return false;"
onfocus="if(this. Blur)this. Blur();"><img
src="herra_boton1. Png" onmouseout="" onmouseover=""
onclick="src='herra_acti1. Png'" alt="" align="top"
border="0" height="42" width="144"></a>
<div id="divTopMenuText0" class="clTopMenuText"><br>
&nbsp;&nbsp;&nbsp;<a href=""><img
src="lista3. Png" alt=""
style="border: 0px solid ; width: 95px; height: 12px;"
onmouseover="" onmouseout=""><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
src="edublog2. Png" alt=""
style="border: 0px solid ; width: 95px; height: 12px;"
onmouseover="" onmouseout=""><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
src="Wiki. Png" alt=""
style="border: 0px solid ; width: 95px; height: 8px;"
onmouseover="" onmouseout=""><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
src="comunidades1. Png" alt=""
style="border: 0px solid ; width: 116px; height: 8px;"
onmouseover="" onmouseout=""><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
src="videoblog2. Png" alt=""
style="border: 0px solid ; width: 95px; height: 14px;"
onmouseover="" onmouseout=""><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
src="podcasting. Png" alt=""
style="border: 0px solid ; width: 95px; height: 12px;"
onmouseover="" onmouseout=""> </a></div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"><br>
</div>
</div>
<table
style="height: 47px; width: 923px; text-align: left; margin-left: auto; margin-right: auto;"
background="principals1-0-0. Png" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 66px; width: 925px;"></td>
</tr>
</tbody>
</table>
<table
style="width: 923px; height: 130px; text-align: left; margin-left: auto; margin-right: auto;"
background="principals1-0-1. Png" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 923px; height: 130px;">
<table style="text-align: left; width: 911px; height: 52px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
<td style="height: 24px;"></td>
</tr>
<tr>
<td style="width: 516px; height: 58px;"></td>
<td style="width: 0px; height: 58px;"><img
style="width: 86px; height: 54px;" alt=""
src="ficha_bot. Png"></td>
<td style="width: 5px; height: 58px;"></td>
<td style="width: 10px; height: 58px;"><img
style="width: 49px; height: 54px;" alt=""
src="mapa_bot. Png"></td>
<td style="width: 4px; height: 58px;"></td>
<td style="width: 24px; height: 58px;"><img
style="width: 50px; height: 52px;" alt=""
src="media_bot. Png"></td>
<td style="width: 5px; height: 58px;"></td>
<td style="width: 0px; height: 58px;"><img
style="width: 49px; height: 52px;" alt=""
src="glosa_bot. Png"></td>
<td style="width: 3px; height: 58px;"></td>
<td style="width: 26px; height: 58px;"><img
style="width: 57px; height: 52px;" alt=""
src="refe_bot. Png"></td>
<td style="width: 4px; height: 58px;"></td>
<td style="width: 48px; height: 58px;"><img
style="width: 49px; height: 54px;" alt=""
src="ayu_bot. Png"></td>
<td style="width: 6px; height: 58px;"></td>
<td style="width: 16px; height: 58px;"><img
style="width: 49px; height: 52px;" alt=""
src="credi_bot. Png"></td>
<td style="width: 6px; height: 58px;"></td>
<td style="width: 30px; height: 58px;"><img
style="width: 49px; height: 52px;" alt=""
src="salir_bot. Png"></td>
<td style="width: 5px; height: 58px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
style="text-align: left; margin-left: auto; margin-right: auto; height: 358px; width: 923px;"
background="principals1-0-2. Png" border="0"
cellpadding="0" cellspacing="0" width="924">
<tbody>
<tr>
<td style="width: 923px; height: 358px;" width="924">
<table style="width: 189px; height: 179px;" align="left"
border="0">
<tbody>
<tr>
<td>
<center style="width: 190px;"> <a
href="introduccions. Html"><img
style="border: 0px solid ; width: 144px; height: 42px;"
onmouseout="src='intro_boton. Png'"
onmouseover="src='intro_acti. Png'" alt=""
src="intro_boton. Png"></a></center>
</td>
</tr>
<tr>
<td>
<center> <a href="resenas1. Html"><img
style="border: 0px solid ; width: 144px; height: 42px;"
onmouseout="src='rese_boton. Png'"
onmouseover="src='rese_acti. Png'" alt=""
src="rese_boton. Png"></a></center>
</td>
</tr>
<tr>
<td>
<center> <img style="width: 144px; height: 42px;"
onmouseout="" onmouseover="" onclick="" alt=""
src="conce_acti. Png"></center>
</td>
</tr>
<tr>
<td>
<center> <a href="caracteristicas. Html"><img
style="border: 0px solid ; width: 144px;"
onmouseout="src='carac_boton. Png'"
onmouseover="src='carac_acti. Png'" alt=""
src="carac_boton. Png"></a></center>
</td>
</tr>
<tr>
<td>
<center> <a href="beneficios. Html"><img
style="border: 0px solid ; width: 144px;"
onmouseout="src='bene_boton. Png'"
onmouseover="src='bene_acti. Png'" alt=""
src="bene_boton. Png"></a></center>
</td>
</tr>
<tr>
<td>
<center> <a href="aplicaciones. Html"><img
style="border: 0px solid ; width: 144px;"
onmouseout="src='aplica_boton. Png'"
onmouseover="src='aplica_acti. Png'" alt=""
src="aplica_boton. Png"></a> </center>
</td>
</tr>
<tr>
<td> <br>
<div style="text-align: center;"></div>
<div style="text-align: center;" id="divTopMenu0"
class="clTopMenu"><a onfocus="if(this. Blur)this. Blur();"
onclick="topMenu(0); return false;" onmouseout="menuOut(0)"
onmouseover="menuOver(0)" href="#"><img alt=""
onclick="src='herra_acti1. Png'" onmouseover=""
onmouseout="" src="herra_boton1. Png" align="top"
border="0" height="42" width="144"></a>
<div class="clTopMenuText" id="divTopMenuText0"><br>
&nbsp;&nbsp;&nbsp;<a href=""><img
onmouseout="" onmouseover=""
style="border: 0px solid ; width: 95px; height: 12px;" alt=""
src="lista3. Png"><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
onmouseout="" onmouseover=""
style="border: 0px solid ; width: 95px; height: 12px;" alt=""
src="edublog2. Png"><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
onmouseout="" onmouseover=""
style="border: 0px solid ; width: 95px; height: 8px;" alt=""
src="Wiki. Png"><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
onmouseout="" onmouseover=""
style="border: 0px solid ; width: 116px; height: 8px;" alt=""
src="comunidades1. Png"><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
onmouseout="" onmouseover=""
style="border: 0px solid ; width: 95px; height: 14px;" alt=""
src="videoblog2. Png"><br>
</a>&nbsp;&nbsp;&nbsp;<a href=""><img
onmouseout="" onmouseover=""
style="border: 0px solid ; width: 95px; height: 12px;" alt=""
src="podcasting. Png"> </a></div>
<div class="clTopMenuBottom"
id="divTopMenuBottom0"><br>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 650px; height: 357px;"
border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td>&nbsp; &nbsp; &nbsp; &nbsp;<span
style="color: rgb(255, 255, 255);"></span><br>
</td>
<td
style="height: 353px; width: 612px; vertical-align: top; background-image: url(fondo_fr. Png);"><iframe
src="conceptos1. Html" style="height: 348px; width: 602px;"
id="ifr1" frameborder="0"></iframe> <br>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody><tbody>
</tbody>
</table>
<table
style="height: 113px; width: 923px; text-align: left; margin-left: auto; margin-right: auto;"
background="principals1-0-3. Png" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 923px; height: 113px;"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

ESTE ES EL SCRIPT....


/**********************************************************************************
NewsMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral. Com
*********************************************************************************/
function o_Navegador()
{
this. Nombre=navigator. AppName;
this. Sistema=navigator. Platform;
this. Iniciar=iniciar;
//Sabe el navegador
this. IE=this.nombre.toUpperCase(). IndexOf('MICROSOFT')>=0;
this. NS=this.nombre.toUpperCase(). IndexOf('NETSCAPE')>=0;
this. OP=this.nombre.toUpperCase(). IndexOf('OPERA')>=0;
//Verifica otro navegador que no sea el estandar
this. XX=! This. IE &&! This. NS &&! This. OP;
//Sabe el sistema de operaciones
this. MW=this.sistema.toUpperCase(). IndexOf('WIN')>=0;
this. LI=this.sistema.toUpperCase(). IndexOf('LIN')>=0;
this. MC=this.sistema.toUpperCase(). IndexOf('MAC')>=0;
//Verifica otro sistema de operaciones que no sea el estandar
this. OT=! This. MW &&! This. LI &&! This. MC;
this. Version=iniciar();
this. Estandar=(this. IE && this. Verent >=6) || (this. NS && this. Verent >=6);
}
function iniciar()
{
var ver=navigator. AppVersion;
if (ver+""! = "NaN")
if (this. IE)
{
ver. Match (/(MSIE)(\s*)([0-9]. [0-9]+)/ig);
ver = RegExp. $3;
}
return ver;
}
//----------------------------------------------------------
function saberNavegador()
{
var explorador= new o_Navegador;
if (explorador. NS) return;
if (primera)
window. Location="paginas/error. Html"
else
window. Location="error. Html"
}
//----------------------------------------------------------
function cargarError()
{
var explorador= new o_Navegador;
texto="Este material fue elaborado para verse en el navegador Mozilla Firefox, no para el navegador " +explorador. Nombre+". <br><br>Por favor, presione el bot"+unescape("%F3")+"n descargar para obtener la "+unescape("%FA")+"ltima versi"+unescape("%F3")+"n del navegador Mozilla Firefox de forma completamente gratuita. ";
document. GetElementById('textoMostrar'). InnerHTML=texto;
objeto=document. GetElementById('descargar');
objeto.style.cursor='pointer';
if (explorador. MW) refImagen=".. /archivos/FirefoxWin. Exe";
if (explorador. LI) refImagen=".. /archivos/FirefoxLin.tar.bz2";
if (explorador. MC) refImagen=".. /archivos/FirefoxMac. Dmg";
objeto. Href=refImagen;
}
function lib_bwcheck(){ //Browsercheck (needed)
this. Ver=navigator. AppVersion
this. Agent=navigator. UserAgent
this. Dom=document. GetElementById? 1:0
this. Opera5=(navigator.userAgent.indexOf("Opera")>-1 && document. GetElementById)? 1:0
this. Ie5=(this.ver.indexOf("MSIE 5")>-1 && this. Dom &&! This. Opera5)? 1:0;
this. Ie6=(this.ver.indexOf("MSIE 6")>-1 && this. Dom &&! This. Opera5)? 1:0;
this. Ie4=(document. All &&! This. Dom &&! This. Opera5)? 1:0;
this. Ie=this. Ie4||this. Ie5||this. Ie6
this. Mac=this.agent.indexOf("Mac")>-1
this. Ns6=(this. Dom && parseInt(this. Ver) >= 5)? 1:0;
this. Ns4=(document. Layers &&! This. Dom)? 1:0;
this. Bw=(this. Ie6 || this. Ie5 || this. Ie4 || this. Ns4 || this. Ns6 || this. Opera5)
return this
}
var bw=lib_bwcheck()
/********************************************************************************
If you want to change the appearance of the text, background-colors, size or
anything do that in the style tag above.
This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help...
****************************************************************************/
/***************************************************************************
Variables to set.
****************************************************************************/
//There are 2 ways these menus can be placed
// 0 = column
// 1 = row
nPlace=0

//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var nNumberOfMenus=2
var nMwidth=142 //The width on the menus (set the width in the stylesheet as well)
var nPxbetween=20 //Pixels between the menus
var nFromleft=71 //The first menus left position
var nFromtop=477//The top position of the menus
var nBgcolor='#CECFCE' //The bgColor of the bottom mouseover div
var nBgcolorchangeto='#6380BC' //The bgColor to change to
var nImageheight=43 //The position the mouseover line div will stop at when going up!
/***************************************************************************
You shouldn't have to change anything below this
****************************************************************************/
//Object constructor
function makeNewsMenu(obj,nest){
nest=(! Nest)? "":'document. '+nest+'.'
this. Css=bw. Dom? Document. GetElementById(obj). Style:bw. Ie4? Document. All[obj]. Style:bw. Ns4? Eval(nest+"document. Layers. " +obj):0;
this. Evnt=bw. Dom? Document. GetElementById(obj):bw. Ie4? Document. All[obj]:bw. Ns4? Eval(nest+"document. Layers. " +obj):0;
this. ScrollHeight=bw. Ns4? this.css.document. Height:this.evnt.offsetHeight
this. MoveIt=b_moveIt;this. BgChange=b_bgChange;
this. SlideUp=b_slideUp; this. SlideDown=b_slideDown;
this. ClipTo=b_clipTo;
this. Obj = obj + "Object"; eval(this. Obj + "=this")
}
//Objects methods
// A unit of measure that will be added when setting the position of a layer.
var px = bw. Ns4||window. Opera? "":"px";
function b_moveIt(x,y){this. X=x; this. Y=y; this=css.left.this. X+px; this=css.top.this. Y+px;}
function b_bgChange(color){this=css.backgroundColor.color; this=css.bgColor.color; this=css.background.color;}
function b_clipTo(t,r,b,l){
if(bw. Ns4){this.css.clip. Top=t; this.css.clip. Right=r; this.css.clip. Bottom=b; this.css.clip. Left=l
}else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(! This. Slideactive){
if(this. Y>ystop){
this. MoveIt(this. X,this. Y-5); eval(wh)
setTimeout(this. Obj+". SlideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this. Slideactive=false; this. MoveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(! This. Slideactive){
if(this. Y<ystop){
this. MoveIt(this. X,this. Y+5); eval(wh)
setTimeout(this. Obj+". SlideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this. Slideactive=false; this. MoveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
zindex=10
for(i=0;i<=nNumberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1]. MoveIt(0,nImageheight)
oTopMenu[i][0]. ClipTo(0,nMwidth,nImageheight+3,0)
if(! NPlace) oTopMenu[i][0]. MoveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
else{
oTopMenu[i][0]. MoveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
oTopMenu[i][0]. Css. ZIndex=zindex--
}
oTopMenu[i][0]. Css. Visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1]. Y==nImageheight) oTopMenu[num][1]. SlideDown(oTopMenu[num][2]. ScrollHeight+45,10,40,'oTopMenu['+num+'][0]. ClipTo(0,nMwidth,oTopMenu['+num+'][1]. Y+3,0)','oTopMenu['+num+'][0]. ClipTo(0,nMwidth,oTopMenu['+num+'][1]. Y+3,0)')
else if(oTopMenu[num][1]. Y==oTopMenu[num][2]. ScrollHeight+45) oTopMenu[num][1]. SlideUp(nImageheight,10,40,'oTopMenu['+num+'][0]. ClipTo(0,nMwidth,oTopMenu['+num+'][1]. Y+3,0)','oTopMenu['+num+'][0]. ClipTo(0,nMwidth,oTopMenu['+num+'][1]. Y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1]. BgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1]. BgChange(nBgcolor)}
//Calls the init function onload if the browser is ok...
if (bw. Bw) onload = newsMenuInit;
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/

CLARO YO MOVI UN POCO ESTO PARA QUE ME APARECIERA ABAJO DOND YO QUIERO PERO CUANDO LO CORRO EN OTRA PC SALE A UN LADO SE CORRE, Y ESTO NO PUEDE PASAR PORQUE DONDE LO VOY A PRESENTAR ES UN SISTEMA LIBRE DEBIAN Y SI SE ME MUEVE? IMAGINATE.... Por favor si me puedes decir que puedo hacer




Junior Rodríguez
Diseño grafico udi bucaramanga
Escrito por Junior Rodríguez
el 05/10/2010

Pued ser tambien por la resolucion que se maneja en otros pcs, a que resolucion hicieron la pag, bueno si es q tiene un diseño flexible, si es estatico el se acomoda a las malas dependiendo del pc dond sea a bierto la pag

Carlos Basilio Ferreira Silva
Superior de electrotecnia escola secun...
Escrito por Carlos Basilio Ferreira Silva
el 05/10/2010

Hola Carmen,

Veo que tienes divs con posicion absoluta, y claro: no olvides que al crear una pagina que las estas viendo en tu monitor; puede que parezca muy bien, pero al verle en oro monitor que tenga otra resolucion (como dije junior) se movera, pues le has defenido una posicion absoluta, y eso funciona desde el punto superior izquierdo del monitor o navegador.

Intenta no utilizar posiciones absolutas.


Ciau

Carmen Iriarte
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 05/10/2010

Y como le puedo poner disculpa? Que codigo uso? Para que no sea absoluta?

Carlos Basilio Ferreira Silva
Superior de electrotecnia escola secun...
Escrito por Carlos Basilio Ferreira Silva
el 05/10/2010

Carmen,

Tu puedes defenir la posicion de varios modos:

#static

(esta es la por "default", o sea, no tienes siquiera que defenirla)

...........................................................................................................................

#relative

(si defines "relative" entonces puedes utilizar "top" o "bottom", "left" o "right" y se movera teniendo en cuenta el canto superior izquierdo o elemento anterior, Ej;


#div-1 { position:relative; top:20px; left:40px; }

Asi, la div-1 se movera 20px desde arriba, y 40 desde la izquierda)

...........................................................................................................................

#absolute

(cuando defines "absolute" sea donde sea el elemento se pondra en la posicion que le digas, por encima de otros elementos, por debajo, fuera de la pagina, donde sea, se pondra, ej:

#div-1a { position:absolute; top:0; right:0; width:200px; }

)

...........................................................................................................................

#float
(para este, significa que va a "flotar" hacia la izquierda o derecha, como tu le defines, ej:
#div-1a { float:left; width:200px; }
)
Si necessitas ayuda, no pienses dos veces :)

Ciau Carmen