Cómo hacer lenguetas?

Hola a todos:
Me gustaría que me pudierais decir como hacer que la:
Sección 1
Sección 2 y
Sección 3,
se viera de otra manera. Por ejemplo con lenguetas o pestañas.
Tener en cuenta que os lo pide un novato por lo que me gustaría que fuese lo más clarito posible. :oops: :oops:

Graciasssss :lol:

No se preocupe amigo que a todos nos pasa lo mismo.....
más adelante en la lección 4 le explicarán cómo se hace un menú con lengüetas... sinembargo, para satisfacer su curiosidad en este enlace está lo que desea: http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
Un amigo desde Colombia.

para hacer lenuetas es un poco dificil pero como todo con el tiempo sera facil

tienes que crear la imagen con la forma de lenueta

:arrow: " .html "

<div id="navegacion">
<div id="navegacionuno">...</div>
<div id="navegaciondos"><h1>TU TEXTO</h1></div>
<div id="navegaciontres"><h1>TU TEXTO</h1></div>
<div id="navegacioncuatro"><h1>TU TEXTO</h1></div>
</div>

----------------------
:arrow: ".css"

#navegacion {background-color:white ; border-right:black 1px solid ; border-bottom:black 1px solid ; border-left:black 1px solid ; height:20px}
#navegacion h1 {text-decoration:none ; text-align:center ; font-size:16px ; background-image: url(Aqui la imagen de la lenueta) ; background-repeat:no-repeat}
#navegacionuno {float:left ; width:198px}
#navegaciondos {float:left ; width:120px}
#navegaciontres {float:left ; width:120px}
#navegacioncuatro {float:left ; width:120px}

Gracias.
Pero también he encontrado una página donde ya te las dan hechas, os la pongo por si a alguien le interesa:

http://www.dynamicdrive.com/style/

Yo no entiendo mucho de esto (bueno ya os habreís dado cuenta) pero parece que está bastante bien.

Un saludo

la he visitado rapidamente y si parece que este bien tienes que poner algo de publicidad por su lenguetas

musicarlos escribió:Gracias.
Pero también he encontrado una página donde ya te las dan hechas, os la pongo por si a alguien le interesa:

http://www.dynamicdrive.com/style/

Yo no entiendo mucho de esto (bueno ya os habreís dado cuenta) pero parece que está bastante bien.

Un saludo

Ps Es MALISIMO..

PORQUE TE LA DAN ECHAS..

y asi no aprendes nada .. ¬¬

mas adelante Jorgens no enseñara como hacerlas (como dijo power--)
pero hay que ser pacientes.

si el codigo que deje creo que puede servir lo unico que tienes que crear tu lengueta o buscar una y ponerla


es muy facil pones una imagen de fondo en .CSS la pones de tal forma que simpre que pongas <h1>Cualquier Palabra</h1> salga esa imagen de fondo y ya esta.

ya enseño algo parecido por no decir lo mismo en el menu lateral con la imagen mira la url
http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…

Puede que tengas razón al decir que estando hechas no se aprende pero creo que con lo que me ha costado acoplara a la página he aprendido unas cuantas cosas, y aun así no están del todo bien hay algo que falla pero no he podido encontrar el fallo.
Sin embargo yo soy partidario de hacerlo por uno mismo pero aun me queda mucho que aprender, y por otro lado y sin querer meter prisa a Jorgens, aun quedan muchas lecciones por hacer, para aprender como se ponen las lenguetas (por ejemplo) o como hacer que aparezca una hoja en blanco (sin ser el fondo de la página) y escribir dentro de ella (que es algo que también me interesa, para las páginas que estoy haciendo, ya que quiero meter dentro los curriculums de los cantores de la Peña.
En fin no me enrroyo más. ME QUEDA MUCHO POR APRENDER Y POCO A POCO Y SIEMPRE CON VUESTRA AYUDA SEGURO QUE LO CONSIGO.
GRACIAAASSSSS.
De momento ya tengo hecha una página web, cosa que hace un mes ni pensaba por lo más minimo que yo lo conseguiría.
De nuevo gracias al foro por vuestras opiniones y vuestra inestimable ayuda.

pero te has molestado en mirar el codigo que te deje haber si servia por que alomejor es como se hacen las lenguetas pero nada tu mismo

Si que he mirado ese código y lo he puesto en unas hojas que tengo para hacer pruebas. pero la lengueta que me sale es casi igual a lo que tengo (tenía) puesto en la página web, que no es otra cosa que lo que pone en el curso con las Secciones 1, 2, y 3 (tu has puesto TEXTO 1, TEXTO 2, Y TEXTO 3), no obstante seguiré probando porque esa es (creo) la manera de aprender todo esto, con muchas pruebas hasta dar con lo que realmente se quiere enseñar a los visitantes de las páginas, y que la gente te diga ¡Lo has logrado!
Como siempre gracias por ti interés y por tu ayuda.

primero que nada, necesitas tener la imagen

y si lo tienes en dos colores que mejor

asi cuando el raton pase por encima podrás hacer que cambie

ya tienes la imagen????

Si, y en dos colores.

Hola

mire te cuento como lo he hecho, seguro que hay varias formas de hacerlo, esta es solo una, o la que se me ocurrio a mi jejej

todo lo haremos en la hoja de estilos,

tenemos esto:

#navegacion {background-color: gray ; border: black 1px solid  ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }

pues ahora agregaremos los comportamientos de los enlaces asi:

#navegacion a         { background-image:url(objetos/menu-curva-superior.gif); padding:1px 40px 0px 40px}
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   { background-image:url(objetos/menu-parte-inferior.gif); background-position: bottom }
#navegacion a:active  {}

como te darás cuenta, yo no tenía preparada ninugna imagen, asi que he
utilizado la curva superior del menu,
en a: hover, es para darle el comportamiento al pasar el raton sobre el enlace
ahi le he puesto la curva de abajo del menu jejejje

si haces vista prvia, se mirará medio raro, pero eso es por los margenes que le hemos puesto en la div navegacion yo los modifiqué y los he dejado asi:

#navegacion {background-color: gray ; border: black 1px solid  ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 0px 0px 0px; }
#navegacion ul { margin-left: 100px }

tu prueba con varios valores, hasta que quedes conforme con el resultado

si quieres ver como me ha quedado aqui está
http://unpocodemucho.atwebpages.com/plantilla2.html

saludos y suerte

Genial. En cuanto tenga un momento libre (que será esta madrugada, ya que ahora mi hija no me deja hacer nada) me pondré a ello.

Gracias. :lol:

ya me contarás

saludos

Hola Yaneth:
Lo que has puesto esta genial, ahora solo tengo que cambiar los dibujos de las lenguetas para que quede más bonito. En cuanto tenga tiempo lo haré. Pero ahora tengo muuuuchas páginas que hacer para dar a conocer la Web de La Peña amigos del tango, donde van canciones (de tangos), poesías y también canciones de los cantores de la Peña, curriculums de sus actuaciones etc. Lo cual de momento me va a ocupar bastante tiempo. Pero como tengo que preparar otra página para unos herbolarios ahí aprovecharé todos esos conocimientos que teneis vosotros para que me quede algo bonito.

GRACIASSSSS :lol:

:wink:

Hola Yaneth.

Ya he puesto lo de las lenguetas (que por cierto me ha costdo mucho el poder dejarlas mas o menos en su sitio)
Aún no me queda como yo quisiera pero poco a poco lo conseguire
mando una foto de la página que estoy preparando a ver que te parece

gracias.

donde pusiste la foto pon una url para verla en internet

pues yo las veo bien centradas y muy bien y luego ¿ al pasar el raton cambia la imagen ?

Cambia el color pero se queda en forma de rectangulo mientras que a las lenguetas oscuras se les ve el dibujo redondeado.

Hola

subelo para ver los comportamientos


saludos

um es verdad si esque me he liado

esque creia que eran imagenes pero son fondos na olvidalo son tonterias mias

Yo intente ponerlas con ese codigo, pero me salen mal posicionadas, muy cerca del borde o muy separadas, o el texto afuera
Alguien podria decirme como lograr que queden bien????


Muchas Gracias