Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 10 de 10

Tema: Curso CCTW, leccion 3, redondeando por arriba y por abajo

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    27 dic, 12
    Mensajes
    4
    Poder de Reputación
    0

    Curso CCTW, leccion 3, redondeando por arriba y por abajo

    Estoy siguiendo el curso con calma, pero creo que con éxito, y aprovecho para felicitar al creador del curso y de la web, estas estupendas lecciones y las soluciones a las consultas a través del foro. Estoy aprendiendo un montón.

    Utilizo el navegador "Comodo Dragon", y no me aparecen los márgenes redondeados añadidos en los apartados "Por arriba y Por abajo", en cambio si intento visionar la plantilla.html con explorer me aparecen sin problemas, mi plantilla y hoja de estilos las copio continuación.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido">
    <div id="menu">
    <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
    </div>
    <h1>Esta será la zona principal de la web</h1>
    <p>Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta, luego ni es un párrafo, ni un enlace,
    ni ná de ná. Nosotros pretendemos que sea un párrafo, verdad? Pues vamos a indicárselo poniéndole a esa frase la etiqueta
    al incio y como no, la etiqueta de cierre al final. Ale, dale al teclado! Ha de quedar así:</p>
    <h2>La cosa va mejorando</h2><p> pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la
    página. Eso no queda muy bien, así que vamos a arreglarlo.
    Tienes dos opciones, una es definirle el margen concreto a cada uno de los párrafos de todas tus páginas web,
    o algo un poco más sencillo, poner un par de palabras en la Hoja de Estilo y listo. Qué prefieres? je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    * {text-indent:0px; margin:0px; padding:0px; border:0px;}
    body {text-align:center;}
    #global {width:800px; margin:4px auto;}
    #cabecera {background-color:white; border-left:black 1px solid; border-right:black 1px solid; }
    #navegacion {background-color:gray; border: black 1px solid}
    #contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}
    #contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
    #menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px}
    #menu li {list-style:none; margin:4px 0px 4px 6px;}
    #pie {background-color:white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid;}
    a {color: brown ; text-decoration: none ; display:block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver;padding-right:8px;}
    a:active {}
    p {text-align:justify;}
    h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
    h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
    #curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
    #curva-inferior {background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}


    Ademas y curiosamente, con el Comodo sí se sombrean los elementos del menú lateral al colocar el cursor fuera del texto de cada elemento, pero en el Explorer, solo si coloco el cursor en el texto de cada elemento del menú.
    Supongo que esto es debido a las "manias" de los navegadores, pero como que os interesa cualquier cosa rara, pues ahí va, y ademas confirmare que estoy haciendolo bien, este es el dominio que estoy utilizando: http://www.laprimerawebdeterminator....plantilla.html

    Gracias de antemano por la atención que prestáis a nuestras dudas.

  2. #2
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,599
    Poder de Reputación
    71
    hola
    ya lo solucionaste????
    yo miro las curvas superior e inferior perfectas en firefox
    y el sombreado fuera del texto del menu, tambien

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  3. #3
    Recien Llegado! Merodeador
    Fecha de Ingreso
    27 dic, 12
    Mensajes
    4
    Poder de Reputación
    0

    Redondeado por abajo y por arriba

    Gracias por tu interes y por tu respuesta, y disculpa que no te haya contestado antes en ocasiones pasan varios dias sin que siga el curso y por tanto no compruebe las respuestas.

    De echo con el explorer si veo la página redondeada , pero eso no ocurre con el comodo dragon, aunque si me da muchos problemas puedo cambiar y buscar otro navegador, claro que alguien lo utilizará también, y seria interesante conocer la forma de que se vea correctamente.

    Un saludo

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    27 dic, 12
    Mensajes
    4
    Poder de Reputación
    0
    Yaneth, esto ya me funciona perfecto en el Comodo Dragon, hace dos semanas que no me ponía en faena y ni recordaba como estaba todo, o ha sido un duende o ya lo solucione, al revisar el foro, ver mi pregunta y tu respuesta te he contestado antes de abrir la página con el explorer y el Comodo.

    Los redondeados van bien en los dos navegadores, y el sombreado solo sobre el texto en el explorer, que en el Comodo todo perfecto.

    Gracias por tu interés.

  5. #5
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    19 mar, 14
    Mensajes
    2
    Poder de Reputación
    0
    A mi me sale un margen entre el redondeado y la imagen redondeada de fondo. Alguien sabe porque? Os dejo mis codigos.
    Gracias!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido">
    <div id="menu">
    <ul><li><a href="spm.html">SPM </a></li><li><a href="pm.html">PM </a></li><li><a href="apm.html">APM </a></li><li><a href="cm.html">CM</a></li><li><a href="fm.html">FM</a></li><li><a href="tsm.html">TSM</a></li></ul>
    </div>
    <h1>Esta será la zona principal de la web</h1>
    <p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
    <h2>Tras esta aclaración</h2>
    <p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>



    body {text-align:center;}
    a {color:blue; font-size:1em; text-decoration:none;display:block;}
    a: link {}
    a:visited {color:brown; font-size:1em; text-decoration:none;}
    a:hover {color:red; text-decoration:underline; background-color: silver;}
    a:active {}
    #global {width:800px; margin:4px auto;}
    #cabecera {background-color:pink;}
    #navegacion {background-color:gray;border:1px solid black;}
    #contenido {background-color:orange;width:800px; float:left;}
    #contenido p {padding:5px 10px 5px 10px;}
    #menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px}
    #menu li {list-style:none; margin:4px 0px 4px 6px;}
    #pie {background-color:brown;}
    p {text-align:justify;}
    h1 {font-size:1.2em; color:black; font-weight:bold; text-decoration:underline; text-align:center;}
    h2 {font-size:1.1em; color:black; font-weight:bold; text-decoration:none; text-align:center;}
    #curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;}

  6. #6
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    19 mar, 14
    Mensajes
    2
    Poder de Reputación
    0

    Margenes no deseados en el redondeado

    A mi me sale un margen entre el redondeado y la imagen redondeada de fondo. Alguien sabe porque? Os dejo mis codigos.
    Gracias!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido">
    <div id="menu">
    <ul><li><a href="spm.html">SPM </a></li><li><a href="pm.html">PM </a></li><li><a href="apm.html">APM </a></li><li><a href="cm.html">CM</a></li><li><a href="fm.html">FM</a></li><li><a href="tsm.html">TSM</a></li></ul>
    </div>
    <h1>Esta será la zona principal de la web</h1>
    <p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
    <h2>Tras esta aclaración</h2>
    <p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>



    body {text-align:center;}
    a {color:blue; font-size:1em; text-decoration:none;display:block;}
    a: link {}
    a:visited {color:brown; font-size:1em; text-decoration:none;}
    a:hover {color:red; text-decoration:underline; background-color: silver;}
    a:active {}
    #global {width:800px; margin:4px auto;}
    #cabecera {background-color:pink;}
    #navegacion {background-color:gray;border:1px solid black;}
    #contenido {background-color:orange;width:800px; float:left;}
    #contenido p {padding:5px 10px 5px 10px;}
    #menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px}
    #menu li {list-style:none; margin:4px 0px 4px 6px;}
    #pie {background-color:brown;}
    p {text-align:justify;}
    h1 {font-size:1.2em; color:black; font-weight:bold; text-decoration:underline; text-align:center;}
    h2 {font-size:1.1em; color:black; font-weight:bold; text-decoration:none; text-align:center;}
    #curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;}

  7. #7
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,599
    Poder de Reputación
    71
    hola

    en el csss, debes acomodar las "ordenes" de forma ascendente a como aparecen en el html
    en tu caso

    #curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;}


    deberia estar debajo de

    #global {width:800px; margin:4px auto;}
    y agregale ; overflow:hidden
    aqui

    #curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;overflow;hidden}


    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  8. #8
    Recien Llegado! Pasaba por aquí... Avatar de Waskachu
    Fecha de Ingreso
    14 jul, 14
    Mensajes
    1
    Poder de Reputación
    0
    Hola a todos. Como ya ha hecho el compañero Pacagarsen, me gustaría felicitar y dar las gracias tanto al creador de esta web como a todos aquellos que la han hecho posible, me está resultando de gran ayuda y qué menos que mostraros mi gratitud.

    Ahora bien, voy por la lección 3 y hasta el momento no había tenido mayor percance hasta que llegué al momento en que tenía que añadir las imágenes que redondean los bordes.

    Dandole al botón "preview" del html-kit me sale todo correcto, pero una vez que subo la plantilla.html y el estilo-general, en el navegador no se me ven los bordes redondeados (lo he mirado tanto en Google Chrome como en Internet Explorer). ¿Alguien podría hacerme el favor de ayudarme al respecto?

    Mi código html como el de estilos css para la plantilla son los siguientes:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegacion</div>
    <div id="contenido">
    <div id="menu">
    <ul><li><a href="#">Elemento de lista, 1</a></li><li><a href="#">Elemento de lista, 2</a></li><li><a href="#">Elemento de lista, 3</a></li></ul>
    </div>
    <h1>Ésta será la zona principal de la web</h1>
    <p>Las normas son muy sencillas: Cada persona nace o llega con una sola vida. Si alguien te mata, te roba una vida. Si matas a alguien robas una vida. Si alguien envejece hasta una edad determinada, sufre una enfermedad, se envenena, o tiene una muerte que no haya sido causada directamente por la acción de otra persona, pierde una vida que no va a parar a nadie.</p>
    <h2>Y éste es el segundo párrafo</h2>
    <p>Aquella persona cuyas vidas lleguen a cero, morirá definitiva e irremediablemente y nada ni nadie será capaz de traerlo de nuevo a la existencia. Nadie puede saber las vidas que tiene otra persona. Estás son las normas de este mundo: ¿las aceptarás?</p>
    </div>
    <div id="pie">Éste es el pie de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    ---------------

    * {margin:0px; padding:0px; border:0px;}
    body {text-align:center;}
    #cabecera {background-color:white; border-right:black 1px solid; border-left:black 1px solid;}
    #navegacion {background-color:gray; border:black 1px solid}
    #contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}
    #contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
    #pie {background-color:white;border-right:black 1px solid; border-left:black 1px solid; border-top:black 1px solid;}
    #global {width:800px; margin:4px auto;}
    #menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px;}
    #menu li {list-style:none; margin:4px 0px 4px 6px;}
    a {color:brown; text-decoration:none; display:block;}
    a:link {}
    a:visited {}
    a:hover {color:red; text-decoration:underline; background-color:silver;}
    a:active {}
    p {text-align:justify}
    h1 {font-size:1.3em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
    h2 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
    #curva-superior {background-image:url(objetos/curva-superior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
    #curva-inferior {background-image:url(objetos/curva-inferior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}


    Y aquí una imagen del preview dentro del html-kit:

    http://i.imgur.com/N9KRfAF.png

    El enlace a la web es el siguiente:

    http://webparaseguireltutorial.comoc...plantilla.html


    Gracias por adelantado y un saludo.

  9. #9
    Recien Llegado! Merodeador
    Fecha de Ingreso
    30 mar, 15
    Mensajes
    7
    Poder de Reputación
    0
    Buenas a todos!!!

    A mí no se me ve la imagen curva-superior.gif ni en explorer ni en firefox :( :( :(

    *{margin:0px; padding:0px; border:0px}
    #cabecera {background-color:white; border-left: solid 1px black; border-right: solid 1px black;}
    #navegacion {background-color:gray; border: solid 1px black}
    #contenido {background-color:orange; border-left: black 1px solid; border-right: black 1px solid;}
    #pie {background-color:brown; border-top: solid black 1px; border-bottom:solid black 1px;}
    #global {width:800px; margin:4px auto;}
    #curva superior {background-image:url(objetos/curva-superior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
    body {text-align:center;}
    #menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px;}
    #menu li{list-style:none; margin: 4px 0px 4px 6px;}
    a {color:brown;text-decoration:none; display:block;}
    a:link {}
    a:visited{}
    a:hover {color:red; text-decoration:underline; background-color:silver;}
    a:active {}
    p {text-align: justify;}
    #contenido p {padding: 5px 10px 5px 10px; text-indent:15px;}
    h1 {font-size:1.2em;color:blue;font-weight:bold; text-decoration:underline; text-align:center}
    h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration: none; text-align:center}

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>Plantilla</title>
    </head>
    <body><div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi página web</div>
    <div id="navegacion">Barra de navegación</div>
    <div id="contenido"><div id="menu">
    <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
    </div><h1>Esta será la zona principal de la web.</h1>
    <p>Aquí vamos a añadir unos cuántos párrafos más, concretamente dos. Este es el primero y lo vamos a terminar en la siguiente... palabra.</p>
    <p>Este es el segundo párrafo. La cuestión es que queremos ver el comportamiento del menú al meterle un texto grande a la zona principal.</p>
    <h2>De acuerdo, le cabe un párrafo más</h2>
    <p>Es importante recordar que los textos deben de ir etiquetados, además de por sus capas, por párrafos, links o lo que sea...</p>
    <div id="pie">Este es el pie de página</div>
    </div>
    </body>
    </html>

    Gracias a todos los que andáis por aquí!! ;)

  10. #10
    Recien Llegado! Merodeador
    Fecha de Ingreso
    30 mar, 15
    Mensajes
    7
    Poder de Reputación
    0
    Valeee!!! Qué bobo soy!!

    Me acabo de dar cuenta que en el html no he nombrado la capa como "curva-superior", sino como "curva superior".... así imposible!!!

    Sorry!!!!

Temas Similares

  1. Poner botón de ir arriba/abajo en tu página
    Por Doodleo en el foro Scripts
    Respuestas: 0
    Último Mensaje: 11/05/2011, 18:34
  2. Background por abajo y por arriba
    Por Mikel L en el foro Foro General
    Respuestas: 2
    Último Mensaje: 13/06/2008, 14:54
  3. como consigo tabla centrada por arriba y x abajo
    Por fae en el foro Dreamweaver
    Respuestas: 1
    Último Mensaje: 20/10/2006, 11:17

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •