Ayuda Con Borde De Recuadro

gnomist · #1 (**permalink**) 03/03/2003, 14:42

Hola, alguien podría decirme cómo se hace el borde del recuadro que se ve en la web www.wellesley.edu? NO es una imagen, pero tampoco es el borde de una tabla...

Gracias y salu2 a to2!!

aprendiz_82 · #2 (**permalink**) 03/03/2003, 20:36

por lo que veo en el codigo , esta hecho con tablas y con algo de java , asi que si deseas saber como hacer tablas , puedes ver aqui: http://www.ldc.usb.ve/~vtheok/webmaestro/ , espero te sirva.

:-0

CORE · #3 (**permalink**) 03/03/2003, 22:04

Hola gnomist

Si es una imagen y esto se hace con dreamweaver usando un ID como imagen en este caso es la imagen de la derecha se llama decripcion y es un gif TRASPARENTE y el codigo es este

onMouseOver="cambiodeimagen('imagen1','','Images/about_f2.gif',decripcion,'','Images/descriptive_f3.gif',1)"

osea dice Imagen=imagen1 cambia por Imagen=decripcion

descripcion es un gif transparente y por eso se sigue viendo el fondo si no cres ve esto

CORE · #4 (**permalink**) 03/03/2003, 22:09

Tamien se puede con JS, CS y tablas

hace tiempo Chivi hizo esto para una POST en este foro y el codigo es este

Código PHP:

  <html> 
<head> 
<script> 
function c1_dentro(){ 
document.getElementById('c1c1').style.background='red' 
document.getElementById('c1c2').style.background='red' 
document.getElementById('c1c3').style.background='red' 
} 
function c1_fuera(){ 
document.getElementById('c1c1').style.background='white' 
document.getElementById('c1c2').style.background='white' 
document.getElementById('c1c3').style.background='white' 
} 
function c2_dentro(){ 
document.getElementById('c2c1').style.background='red' 
document.getElementById('c2c2').style.background='red' 
document.getElementById('c2c3').style.background='red' 
} 
function c2_fuera(){ 
document.getElementById('c2c1').style.background='white' 
document.getElementById('c2c2').style.background='black' 
document.getElementById('c2c3').style.background='white' 
} 
</script> 
</head> 
<body> 
<table border=1 cellpadding=0 cellspacing=0> 
<tr> 
<td id="c1c1" onmouseover="c1_dentro()" onmouseout="c1_fuera()" width="50%"> 
Columna 1 - Celda 1</td> 
<td id="c2c1" onmouseover="c2_dentro()" onmouseout="c2_fuera()" width="50%"> 
Columna 2 - Celda 1</td></tr><tr> 
<td id="c1c2" onmouseover="c1_dentro()" onmouseout="c1_fuera()" width="50%"> 
Columna 1 - Celda 2</td> 
<td id="c2c2" onmouseover="c2_dentro()" onmouseout="c2_fuera()" width="50%"> 
Columna 2 - Celda 2</td></tr><tr> 
<td id="c1c3" onmouseover="c1_dentro()" onmouseout="c1_fuera()" width="50%"> 
Columna 1- Celda 3</td> 
<td id="c2c3" onmouseover="c2_dentro()" onmouseout="c2_fuera()" width="50%"> 
Columna 2- Celda 3</td></tr> 
</table> 
</body> 
</html>

Aunque posiblemente tambien se pueda con Capas

solo es cosa de pensar que es lo mas conveniente o lo mas facil

Suerte

gnomist · #5 (**permalink**) 04/03/2003, 02:47

efactivamente, core, tambien se podría hacer con capas, pero personalmente me decanto por tu primero propuesta, ya que todos sabemos lo que les pasa a las capas con diferentes resoluciones de pantalla....

De todos modos, creo que no me explique bien, porque no me refería a ese borde, ese ya le tenia localizado, sino que me refería al borde del conjunto, es decir, a la linea que esta debajo del "wellesley college, click here", que va por la izquierda de los botones que hacen el efecto de la descripción que hablábamos y que baja por debajo de Address, Copyright... no veo que esté hecho con relleno de celdas, no con borde de tablas...

Pero sin duda me habeis sacado de dudas respecto al otro onmouseover de la descripcion, porque yo sabia hacer el clasico, no éste que las dos imagenes no son exactas en tamaño y posicion. Me pondré a practicar en ello...

Si veis algo que la linea que os comento, os agradeceré la ayuda...

Copiarlo sería muy facil, pero no se sabría hacer.

Salu2 a to2

webMailer · #6 (**permalink**) 04/03/2003, 13:12

Segun te entiendo, te refieres a borde delgado que rodea
el recuadro donde está toda la información, si es eso a lo que
te refieres, pues fijate que es con ayuda de imagenes, así:

Veras en el codigo que viene despues de la tabla que tiene
los dibujitos superiores (el nombre en pequeño y grande)
viene una tabla que inicia algo así:

<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>

<td rowspan="7" bgcolor="#666666"><img src="Images/spacer.gif" width="1" height="1" alt=" "></td>

<td bgcolor="#666666"><img src="Images/spacer.gif" width="1" height="1" alt=" "></td>

<td rowspan="5" bgcolor="#666666"><img src="Images/spacer.gif" width="1" height="1" alt=" "></td>

<td bgcolor="#666666" colspan="3"><img src="Images/spacer.gif" width="1" height="1" alt=" "></td>

<td rowspan="7" bgcolor="#666666"><img src="Images/spacer.gif" width="1" height="1" alt=" "></td>

</tr>

esa parte de codigo es para dibujar la linea horizontal superior
del recuadro, como te das cuenta, son celdas pintadas de color
#666666 y que se llenan con una imagen espaciadora de
ancho y largo = 1

Suerte
el cuadro

gnomist · #7 (**permalink**) 04/03/2003, 15:07

GRACIAS!!!

Ahora sólo me queda escudriñar lo que me dices y aprender de ello.

Muchas gracias a todos y gracias a ti, webmailer