Entrar

Problema con los bordes

joaquinblue · · Solicitar retirada
buenas tardes!! He intentado buscar por el foro la solucion a mi problema, pero no he encontrado nada. Os pido disculpas por tener que atender problablemente una cuestion tan boba...

En fin... mi problema es que a pesar de seguir los pasos del curso, no consigo redondear los bordes; he copiado las imagenes en objetos, les he aplicado el nombre.gif correspondiente y he metido los parametros oportunos, pero no consigo que se vean como en el ejemplo del curso.

Os dejo el trabajo que he hecho hasta ahora y si podeis echarme una manita por favor...
Oye... una pasada vuestra web, felicitaciones!!!

ESTILO GENERAL

a:hover {color:red;text-decoration:underline;background-color: silver}
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}

PLANTILLA
<!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>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    No tengo ni idea de que escribir
    desde luego... esto es mas complicado de lo que me temía
    Entonces claro... no se muy bien si reconoce los margenes o se los pasa por el arco del triunfo
    en fin voy a guardar los cambios y a ver que es lo que aparece</p>
    <h2>El segundo párrafo</h2>

    para ver si ocupo todo el menú de la izquierda de un
    vez</p>


    Y la tercera y última línea, espero que con esto finalice todo</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>
    • Novato · · Solicitar retirada
    Hola, peganos lo que tienes en estilo-general.css ya que veo que no está completo, faltan definir la caracteristica de global, menu, pie,...
    En fin, que te faltan cosas, si solo tienes lo que nos has puesto dilo tambien.
    Un saludo.
    joaquinblue · · Solicitar retirada
    Hola de nuevo!!
    Tienes toda la razón, lo he pegado mal. Te lo dejo entero ok??
    Gracias de antemano

    * {text-indent: 0px;margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink; border-left: black 1px solid; border-right:
    black 1px solid; border-top: black 1px solid; border-top: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 }
    #pie {background-color: brown; border: black 1px solid}
    #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.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}

    Un saludo
    Raulyure · · Solicitar retirada
    joaquinblue escribió:Hola de nuevo!!
    Tienes toda la razón, lo he pegado mal. Te lo dejo entero ok??
    Gracias de antemano

    * {text-indent: 0px;margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink; border-left: black 1px solid; border-right:
    black 1px solid; border-top: black 1px solid; border-top: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 }
    #pie {background-color: brown; border: black 1px solid}
    #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.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}

    Un saludo
    Hola:
    Adelantándome un poco a la respuesta de novato, le daré alguna sugerencia. Habría que ordenar un poco la hoja de estilo, ya que usted las directivas para la curva inferior la tiene casi al final de ella, sería conveniente que las pusiera mas o menos así:

    * {text-indent: 0px;margin:0px ; padding:0px ; border: 0px}
    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}
    body {text-align: center}
    #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 }
    #cabecera {background-color: pink; border-left: black 1px solid; border-right:
    black 1px solid; border-top: black 1px solid; border-top: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: brown; border: black 1px solid}
    #curva-inferior{background-image: url(objetos/curva-inferior.gif);
    background-repeat:no-repeat;
    width:800px;
    height:12px;
    overflow:hidden}
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color: silver}
    a:active {}
    Después de ordenar la hoja de estilo, revise si la curva aparece, aunque no me queda claro si es que la imagen no aparece o es que se queda mal colocada
    por si es que no aparece, puede que usted cuando la haya bajado y al ponerle el nombre, usted haya escrito en la casilla "nombre" curva-superior.gif Eso implicaría que la imagen se llama curva-superior.gif no solo curva-superior. Cuando se baja uno una imagen y tiene que ponerle nombre, en la casilla "nombre " solo se pone el nombre de la imagen, y después en la casilla que hay mas abajo, la que dice "tipo", allí se busca la extensión de como uno quiere guardarla, se pulsa en la extensión nada mas, (ya se pone ella sola) y después se pulsa en guardar y luego se cierra, así que es probable (y solo digo probable) que su imagen se llame ahora curva-superior.gif. y que la extensión sea gif, por lo tanto su imagen sería curva-superior.gif.gif Así que en la hoja de estilo habría que escribir en donde pone la imagen :
    #curva-superior {background-image: url(objetos/curva-superior.gif.gif);
    background-repeat:no-repeat;
    width:800px;
    height: 12px;
    overflow: hidden }
    Eso sería por una parte, otra razón es que (aunque parezca tonto) debe revisar muy bien que lo que tenga escrito con minúsculas en una parte que también sea con minúsculas en otra, y tener cuidado con los espacios cuando no debe haberlos si nada de eso arregla el problema, entonces habría que ver la otra posibilidad.
    Saludos
    Agradecido de los que aprenden enseñando
    Novato · · Solicitar retirada
    Efectivamente hay que llevar un orden en las hojas de estilo, como muy bien te dice Raulyure, si en la plantilla tienes antes la capa curva-superior que la cabecera pues en la hoja de estilos el orden ha de ser el mismo, si te fijas Raulyure te lo coloca bien, cuidado con estas cosas, si no se solucionó dilo.
    Un saludo a ambos.
    joaquinblue · · Solicitar retirada
    Buenos dias a los dos!!! Problema solucionado!!!!

    Supongo que el problema vendría por ambas cosas, por un lado la extensión de los bordes era gif.gif (espero que no me vuelva a pasar) y por otro lado el desorden. Lo he hecho todo como me habeis dicho y solucionado.

    Muchisimas gracias a los dos sois unos cracks!!!!

    Que paseis buen dia
    Saludos