Hola a todos, os voy a pegar el contenido de la plantilla y de la hoja de estilos.general.css para ver si vosotros encontrais el fallo, ya que yo no lo he conseguido ( recalcar que la curva inferior si me aparece).
PLANTILLA
<!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>Page title</title>
</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 1Enlace 2Enlace 3
</div>
<h1>Esta será la zona principal de la web</h1>
Bueno pues me dicen que escriba y escriba para aver como queda esta parte jeje.</p>
Lo que no sé es de que va a ir la página pero</p><h2>bueno seguro que se me ocurre algo interesante</h2>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
ESTILOS.GENERAL.CSS
* {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}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid;
border-top: 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}
border: 1px solid black ;
#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 }
Decir tambien que la curva superior está guardada en objetos con el nombre de curva-superior.gif, espero vuestra ayuda, gracias de antemano.
Saludos.
La hoja de estilos se llama estilo-general.css y no estilos-general.css como dices, esta eso bien?, un saludo.
Si está bien, ha sido un error mio, disculpa.
Hola, en la hoja de estilos tambien hay que guardar un orden, si en tu hoja index está la capa de la curva superior debajo de la capa global en tu hoja de estilos tambien, tu tienes:
* {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}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid;
border-top: 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}
border: 1px solid black ;
#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 }
Tienes la capa #pie en mitad de todo y ha de estar al final o por ahi...la capa #curva-superior..la tienes casi abajo...está todo un poco desordenado...la capa #curva-superior...deberia ir aqui:
* {margin:0px ; padding:0px ; border: 0px}
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: 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}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid;
border-top: 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}
border: 1px solid black ;
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px ;
overflow:hidden }
Las demas ordenalas segun tienes tu hoja index...un saludo.
Ya solucioné el problema, tenias razón estaba desordenada la hoja de estilos, ya mas o menos la he ordenado, y ya sí me aparece la curva superior, gracias por la ayuda.
Un saludo.
buen día! anticipadamente muchas gracias por escucharme, el problema es que intento colocar imagenes de fondo en mi web de ejemplo tanto como la de la leccion uno y la de curva-superior y curva_inferior y nada de nada. ya revise la hoja de estilo, y esta bien. aquí les dejo lo que tengo: plantilla.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ramon Loaiza</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 ramonloaiza.com</div>
<div id="logotipo"></div>
[contenido no disponible]
<div id="publicidad">Bienvenidos a mi website</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
Este será el menu principal de mi website</p>
<ul>
Enlace 1
Enlace 2
Enlace 3
</div>
<h1>Esta será la página principal de mi website</h1>
.............................................................................................................................................................................</p>
</div>
<div id="pie">este es el pié de la página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
estilo.general.css
* {margin:0px ; padding:0px ; border: 0px}
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid}
#navegacion {background-color: gold ; border: black 1px solid}
#contenido {background-color: orange ; float:left ; text-indent:15px ; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding:5px 10px 5px 10px ; text-align:justify}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align: left ; margin-right: 10px; margin:3px 10px 3px 3px}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid}
#global {width:800px ; margin: 4px auto }
body {text-align: center}
#menu li { list-style:none ; margin: 4px 0px 4px 6px}
a {color: green; font-size:1.0em ; text-decoration: none}
a:link {}
a:visited {}
a:hover{color:blue ; text-decoration:underline ; background-color:silver}}
a:{color: brown ; text-decoration:none ; display:block }
p:{text-align: justify}
body {background-color: #E6E6FA}
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-aligne: 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.jpg) ; bacground-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
muchas gracias. les agradecería sus respuestas...
Hola
tu tambien tienes desordenada la hoja de estilos
las cosas, deben estar por orden de apáricion en el html
*
grupo de "a"
h y p
body
global
curva superior
cabecera
logotipo
publicidad
navegacion
contenido
menu
pie
curva inferior
ya la ordené, pero no hay ningun cambio, de todas formas tambien te dejo para que veas como la deje, muchas gracias por la ayuda:
plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ramon Loaiza</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 ramonloaiza.com</div>
<div id="logotipo"></div>
[contenido no disponible]
<div id="publicidad">Bienvenidos a mi website</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
Este será el menu principal de mi website</p>
<ul>
Enlace 1
Enlace 2
Enlace 3
</div>
<h1>Esta será la página principal de mi website</h1>
ramonloaiza.com les ofrece noticias de actualidad y todo lo referente a adolescencia. En el sitio web de Ramon Loaiza, podrás descargar musica, juegos, videos, letras de canciones y muchas cosas más. podrás ver noticias de farandula, los ultimos resultados del mundial de futbol sudafrica 2010, los ultinos resultados de las grandes ligas, etc. También podras aprender a como crear tu propio web site...
</div>
<div id="pie">este es el pié de la página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
hoja de estilo estilo-general.css:
* {margin:0px ; padding:0px ; border: 0px}
a {color: green; font-size:1.0em ; text-decoration: none}
a:link {}
a:visited {}
a:hover{color:blue ; text-decoration:underline ; background-color:silver}}
a:{color: brown ; text-decoration:none ; display:block }
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-aligne: center}
p:{text-align: justify}
body {background-color: #E6E6FA}
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: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid}
#navegacion {background-color: gold ; border: black 1px solid}
#contenido {background-color: orange ; float:left ; text-indent:15px ; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding:5px 10px 5px 10px ; text-align:justify}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align: left ; margin-right: 10px; 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}
#curva-inferior { background-image: url(objetos/curva-inferior.jpg) ; bacground-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
te agradezco una respuesta...