Foros del Web » Creando para Internet » CSS »

Me presento y solicito ayuda

Estas en el tema de Me presento y solicito ayuda en el foro de CSS en Foros del Web. Hola a todos, aunque llevo tiempo siguiendo el foro hasta ahora no me había registrado, tan solo miraba y aprendía. Me ha ayudado mucho pues ...
  #1 (permalink)  
Antiguo 25/05/2010, 13:31
 
Fecha de Ingreso: mayo-2010
Mensajes: 4
Antigüedad: 7 años, 6 meses
Puntos: 0
Me presento y solicito ayuda

Hola a todos, aunque llevo tiempo siguiendo el foro hasta ahora no me había registrado, tan solo miraba y aprendía. Me ha ayudado mucho pues casi todos los problemas de novato los he resuelto gracias a vosotros. Enhorabuena por este excelente sitio de ayuda con la web.

Tendo una duda que no he encontrado la manera de resolver.

Quiero hecer una web con varios botones que haré en CSS con efecto hover y tal, pero y aquí viene mi complicación, quiero que al pulsar un boton se cargue un texto en una caja centrada en la página, y que al pulsar otro se borre el texto y aparezca uno nuevo y así con todos los botones. Mi idea es hacer una página muy sencilla con solo un documento html en el que se vea el contenido sin enlaces solo al pulsar los botones del menú.

Os pongo la imagen de lo que quiero [URL="http://yfrog.com/6xquieroj"]aquí[/URL]


Esto que parece sencillo no lo he encontrado por ningún lado, supongo que se hará combinando javascript y css. Mis conocimientos de CSS son muy básicos y de Java nulos. ¿Podeis ayudarme?

Gracias de antemano por vuestra atención.
  #2 (permalink)  
Antiguo 25/05/2010, 13:51
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años
Puntos: 126
Respuesta: Me presento y solicito ayuda

Hola, bienvenido al foro

Has de usar HTML DOM (la propiedad display)

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 26/05/2010, 01:52
 
Fecha de Ingreso: mayo-2010
Mensajes: 4
Antigüedad: 7 años, 6 meses
Puntos: 0
Me presento y solicito ayuda

No tengo ni idea, pongo el codigo de lo máximo a lo que he llegado casi lo tengo pero la cajas no consigo posicionarlas siempre en la misma posición. Partí de un menu y aparecen siempre alineadas con el botón.


CODIGO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> prueba menu </title>
<meta name="Author" content="yo" />





<script type='text/javascript'>
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName ("LI");
var getAgn = getEls;

for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
}
}
</script>

<style type="text/css">
<!--
#contenedor {width:500px; height:500px; border:1px solid #000000; border-width:1px 1px 1px; position:relative;}

#menu {list-style-type:none; width:644px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background: #FFCC66; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background: #6699FF; width:100px;height:24px; }
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:300px; height:300px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;} /* SUBMENUS TAMAÑOS */
#menu li:hover, #menu li a:hover {background: #33CC99;}
#menu ul {position:absolute;left:-9999px;width:160px;}
#menu li.click {background: #FF0099;}
#menu li.click ul{left:0; margin-left:0px; top:60px; background:url(transparent.gif);} /* la imagen de fondo es para IE7 */
-->
</style>
</head>

<body onload="clickMenu('menu')">



<ul id="menu">
<li class="sub">menu1
<ul>
<li><a href="#nogo1">01</a></li>
</ul>
</li>
<li class="sub">menu2
<ul>
<li><a href="#nogo6">02</a></li>

</ul>
</li>
<li class="sub">menu3
<ul>
<li><a href="#nogo10">03</a></li>

</ul>
</li>
<li class="sub">menu4
<ul>
<li><a href="#nogo10">04</a></li>

</ul>
</li>

<li class="sub">menu5
<ul>
<li><a href="#nogo10">05</a></li>

</ul>
</li>

<li class="sub">menu6
<ul>
<li><a href="#nogo13">06</a></li>

</ul>
</li>
</ul>
</div>




</body>
</html>
  #4 (permalink)  
Antiguo 26/05/2010, 08:30
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años
Puntos: 126
Respuesta: Me presento y solicito ayuda

Hola

Es un problema de CSS. Dirígete a ese foro, allí te ayudarán mejor

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 26/05/2010, 09:10
 
Fecha de Ingreso: mayo-2010
Mensajes: 4
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Me presento y solicito ayuda

Gracias Adler, pensaba que sería más cuestion de java que de CSS y que la solución era combinada.

En cuanto a solicitar a yuda en la sección de CSS, no sé si los administradores me dejarán repetir el post allí, quizás algún moderador pueda moverlo al sitio adecuado, eperaré un poco haber que pasa.

Gracias de nuevo por tu ayuda.
  #6 (permalink)  
Antiguo 26/05/2010, 13:39
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola sentencia3

Para reportar un mensaje puedes usar el icono que está debajo de tu nick.

Muevo tu tema al foro de CSS desde Javascript.

Saludos,
  #7 (permalink)  
Antiguo 28/05/2010, 11:11
 
Fecha de Ingreso: mayo-2010
Mensajes: 4
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Me presento y solicito ayuda

Gracias moderador por moverlo a CSS. Haber si hay suerte y algún experto en CSS me ilumina.
  #8 (permalink)  
Antiguo 28/05/2010, 15:40
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Me presento y solicito ayuda

Sinceramente no veo como esto pueda ser un problema de CSS, ya que (Por lo que entendí), lo que sentencia3 intenta es:

-O una carga dinámica en el divisor del texto (Que se haría mediante AJAX).
-O mostrar y ocultar textos en un mismo lugar mediante los botones (Que se haría con JavaScript).

Cualquiera que sea, la solución es sencilla, pero sería bueno saber antes si lo que deseas es que el texto se cargue de manera dinámica mediante otros textos externos, o si el texto estará todo incluido en la página y únicamente deban mostrarse y ocultarse los correspondientes.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 30/05/2010, 04:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Me presento y solicito ayuda

Hola:

Quizá este ejemplo de Mikmoro te pueda servir.

Saludos.


Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:18.