Ayuda: SOLAPAS

Hola... alguien podría explicar, por favor, como poner un menú con solapas, como el de la página de CCTW??

Gracias =)

aqui està

http://unpocodemucho.atwebpages.com/plantilla2.html

solo checa el codigo fuente para que veas como và

http://unpocodemucho.atwebpages.com/estilo-general.css

saludos

Gracias, ahora lo veo (Y)

Che, es diferente el menú que me pasaste ahí, con el de la página de CCTW.

Yo lo que quiero, es que cuando selecciono uno, la solapa cambie de color y el borde de abajo de la solapa activa, no se vea...

HOLA: YO CREO QUE LO QUE BUSCAS ES NI MAS NI MENOS QUE :

http://www.comocreartuweb.com/curso-paso-a-paso/introducion.html

El Segundo, Curso Paso a Paso con Tablas es un curso completo y detallado paso a paso con el que conseguirás, sin necesidad de tener ningún conocimiento previo de ninguno de estos temas, crear y llegar a tener tu propia web en la red. Eso si, las tablas no son muy recomendables, es mejor usar capas para modelar la web,

recuerda que no basta con copiar la plantilla hay que seguir el curso para saber llegar a la conclusion de COMO SE HACE EL CAMINO HASTA LLEGAR A COMPRENDER y saber como hacer para ajustarlas a tu WEB y entonces sera cuando tengas que recurrir al FORO para buscar ayudas que se te daran gustosamente

Ya pude poner las comunes... pero me falta saber cómo poner la solapa activa, diferente a las demás.

<STYLE>
<!--
DIV DIV #tema01 {BACKGROUND-IMAGE: url(file:///C|/Documents and Settings/Usuario/Escritorio/Webs/plantilla-01/comun/objetos/tema-activo.gif)}
#tema01 A, .apartado-a, .subapartado-a {FONT-WEIGHT: bold}
#apartados {MARGIN-LEFT: 10px}
#apartados A {MARGIN: 0px 20px}
-->
</STYLE>
creo que te estas refiriendo a esto, no estoy muy saguro pero es que tampoco te explicas muy bien
yo es que ya no me acuerdo pero las lecciones de paso a paso y curso con divs y esos otros te lo explicaban bien no se si es esto lo que preguntas
[contenido no disponible]

Sí, son esas solapas a las que me refiero.
Las comunes (blancas) ya las pude poner. Lo que no logro hacer, es que cuando elijo una, cambie a una solapa activa...

Si se fijan en la página de CCTW, son blancas, pero cuando seleccionan una, se vuelve naranja. Lo que yo no puedo hacer en mi página es que cambie a la que sería la naranja.

Hola:
Espero contestarte bien ya que es algo que desde ayer lo tengo en la mollera

creo que tienes que revisar el grupo de las a
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited { :roll: CREO QUE ES AQUI DONDE DEBES PONER EL COLOR SI NO ES ASI NO SE COMO PUEDO AYUDARTE}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

eSTO ES EL FINAL DE LOS CODIGOS no del HTML

espero haberte sido de ayuda ya me diras
UN SALUDO: VICENTE

saruman escribió:Hola:
Espero contestarte bien ya que es algo que desde ayer lo tengo en la mollera

creo que tienes que revisar el grupo de las a
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited { :roll: CREO QUE ES AQUI DONDE DEBES PONER EL COLOR SI NO ES ASI NO SE COMO PUEDO AYUDARTE}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

eSTO ES EL FINAL DE LOS CODIGOS no del HTML

espero haberte sido de ayuda ya me diras
UN SALUDO: VICENTE

Según tengo entendido, los "a:visited" son para las opciones de todos los links ya visitados, por lo tanto si lo pongo ahí, cada vez que entre en una solapa, va a cambiar y si entro en otra también va a cambiar, y van a ir quedando todas las visitadas cambiadas.
La idea sería que se vea diferente la solapa del menú en el que estoy. Por lo tanto sería "a:active", pero lo probé y no funciona tampoco xD

bueno es que yo tengo esa pagina en el ordenata del trabajo y ahora estoy en casa asi que no puedo decirte como lo tengo por lo menos hasta mañana que vuelva al trabajo aunque quiero recordar que le puse dos grupos de (A) uno para el menu y otro para la navegacion
no recuerdo si fue esto asi pero creo que si

Ahora si no sabes que hacer puedes probar esa opcion total es copiarlo y ponerle

me acordado que tenia el PEN en el bolsillo mira estos codigos para saber en que varian con los tuyos es que no se si aqui lo tengo terminado o no
#lenguetas {BACKGROUND-IMAGE: url(../comun/objetos/lenguetas-fondo.gif); BORDER-RIGHT: black 1px solid; BACKGROUND-POSITION: left bottom; BORDER-LEFT: black 1px solid; WIDTH: auto; BACKGROUND-REPEAT: repeat-x; HEIGHT: 70px; BACKGROUND-COLOR: #FFFFFF}

#temas-arriba {MARGIN: 0px 15px; WIDTH: 735px}
#temas-arriba DIV {FLOAT: left; OVERFLOW: hidden; WIDTH: 146px; HEIGHT: 22px; TEXT-ALIGN: center; BACKGROUND-IMAGE: url(objetos/tema-arriba-inactivo.gif)}
#temas-arriba DIV A {DISPLAY: block; COLOR: #000; LINE-HEIGHT: 32px; COLOR: black}
#temas-arriba DIV A:LINK {}
#temas-arriba DIV A:VISITED {}
#temas-arriba DIV A:HOVER {FONT-WEIGHT: bold}
#temas-arriba DIV A:ACTIVE {COLOR: red}

#temas-abajo {MARGIN: 0px 15px; WIDTH: 735px}
#temas-abajo DIV {BACKGROUND-IMAGE: url(../comun/objetos/tema-abajo-inactivo.gif); FLOAT: left; OVERFLOW: hidden; WIDTH: 146px; HEIGHT: 31px; TEXT-ALIGN: center}
#temas-abajo DIV A {DISPLAY: block; COLOR: #000; LINE-HEIGHT: 32px; COLOR: black}
#temas-abajo DIV A:LINK {}
#temas-abajo DIV A:VISITED {}
#temas-abajo DIV A:HOVER {FONT-WEIGHT: bold}
#temas-abajo DIV A:ACTIVE {COLOR: red}

#apartados {clear:both}
#apartados A {DISPLAY: block; FLOAT: left; MARGIN: 0px 15px; LINE-HEIGHT: 12px; COLOR: blue}
#apartados A:LINK {}
#apartados A:VISITED {}
#apartados A:HOVER {FONT-WEIGHT: bold}
#apartados A:ACTIVE {COLOR: red}

#navegador {BORDER-RIGHT: #000000 1px solid; padding: 1px 0px 1px 0px ; BORDER-LEFT: #000000 1px solid; WIDTH: auto; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center}
#navegador {BACKGROUND-COLOR: #fef1c3}
#navegador #buscador {MARGIN-TOP: 5px; FLOAT: left; WIDTH: 545px; TEXT-ALIGN: center}
#navegador .left {BACKGROUND-POSITION: right top; FLOAT: left; BACKGROUND-IMAGE: url(objetos/punto-separacion.gif); MARGIN: 0px 0px 0px 0px; WIDTH: 110px; BACKGROUND-REPEAT: repeat-y; TEXT-ALIGN: left}
#navegador .right {BACKGROUND-POSITION: left top; FLOAT: left; BACKGROUND-IMAGE: url(objetos/punto-separacion.gif); MARGIN: 0px 0px 0px 0px; WIDTH: 110px; BACKGROUND-REPEAT: repeat-y; TEXT-ALIGN: right}
#navegador P {PADDING: 0px 0px 0px 0px; MARGIN: 2px 10px 0px ; HEIGHT: 32px}
#navegador A {TEXT-DECORATION: none}
UN SALUDO: VICENTE

Si podés pasarme algún link de la página, para ver a qué corresponde cada Div, mejor.

De paso pongo acá qué es lo que hice yo y el link para que vean como tengo las solapas hasta el momento, para ver si me pueden decir que es lo que falta.

Te agradezco toda la ayuda que me estás dando.




http://pagej.onlinewebshop.net/plantilla.html

Html:

<div id="navegacion">
<ul>

Menú 7

Menú 6

Menú 5

Menú 4

Menú 3

Menú 2

Menú 1

</div>

Css:

#navegacion {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:20px}
#navegacion li {background-image: url(objetos/solapa-normal.PNG) ; float:right ; list-style:none ; padding: 4px 0px 2px 0px ; width: 100px ; font-size: 14px}
#navegacion a {color: black ; text-decoration:none ; font-weight: bold ; display: block }
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color: brown ; text-decoration: underline ; font-weight: bold}
#navegacion a:active {color: brown}



Lo que a mí se me había ocurrido era agregar a "#navegacion a:active" la opción "background-image: ulr(objetos/solapa-activa.PNG)", pero no funcionó... fue lo más lógico que se me ocurrió, pero visto que no funciona... no sé qué hacer.
Lo que también noté fue que no me toma las opciones en general de los "a:active" porque quise probar ponerle un subrayado al link activo (o sea en el que estoy en el momento), y tampoco funciona :S Capaz tenga algún problema en los "a".

Aún no logro hacerlo andar =\

#lenguetas {BACKGROUND-IMAGE: url(../comun/objetos/lenguetas-fondo.gif); BORDER-RIGHT: black 1px solid; BACKGROUND-POSITION: left bottom; BORDER-LEFT: black 1px solid; WIDTH: auto; BACKGROUND-REPEAT: repeat-x; HEIGHT: 70px; BACKGROUND-COLOR: #FFFFFF}

#temas-arriba {MARGIN: 0px 15px; WIDTH: 735px}
#temas-arriba DIV {FLOAT: left; OVERFLOW: hidden; WIDTH: 146px; HEIGHT: 26px; TEXT-ALIGN: center; BACKGROUND-IMAGE: url(objetos/tema-arriba-inactivo.gif)}
#temas-arriba DIV A {DISPLAY: block; COLOR: #000; LINE-HEIGHT: 32px; COLOR: black}
#temas-arriba DIV A:LINK {}
#temas-arriba DIV A:VISITED {}
#temas-arriba DIV A:HOVER {FONT-WEIGHT: bold}
#temas-arriba DIV A:ACTIVE {COLOR: red}
Esto tengo en "estilo general, y al pulsar se ponen rojas las letras pero cuando cambias a otra lengüeta o solapa, le que dejas vuelve a coger color negropara cambiar toda la solapa de color , creo que te bastara poner un color a: A:VISITED ENTRE LAS LLAVES {YELLOW} O EL CODIGO QUE TE PAREZCA
No creas que yo te puedo ayudar mucho mas que estoy haciendo la otra y ya me he liado yo solito bastante
:oops: :oops: :oops:
entre las paginas que puedes visitar estan, todas las de los cursos de como crear paginas web :twisted: :twisted: :twisted: :twisted:

Es que ya probé... no sé qué es lo que pasa, que no funciona lo que pongo en "a:active"... fijate que le puse un color "brown", pero cuando estoy en el link, no pasa nada =S

Bueno, aún no pude solucionarlo, pero igual gracias Saruman por toda la ayuda.
Seguiré intentando, y buscando alguna solución para esto.
Lo que pasa es que en la página, cuando arranca el curso, dice que después de leer todo eso, se puede llegar a tener una página igual a la de CCTW, y cuando termina el curso, no está ni cerca de ser exactamente igual xD
Entonces quería probar hacer esas solapas, pero todavía no le encuentro la forma.

Gracias igual.

hola

a mi me gusta ese tipo de retos
y mira lo que conseguì

http://unpocodemucho.atwebpages.com/plantilla2.html

bonito no????
pues solo bastò una pequeña linea

Seccion 1

saludos

Ya me lo había pasado así...
Pero el que yo necesito es uno como el de la página de CCTW T_T

Gracias de nuevo de todas formas.

Hola.


Tengo entendido que lo que quieres es que en el menú de navegación el texto del enlace tenga otro color según en la pagina que se encuentre.

Para hacer eso es muy facil:

Primero le aplicas una clase al enlace del menú que quieras que tenga el color. Ejemplo:

Menú 1

Después en la hoja de estilos le pones los tributos que quieras. Ejemplo.

.actual { color: red; }


Saludos.