Hola,
he seguido el curso paso a paso y no he tenido ningún problema en construir la página siguiendo las indicaciones, pero cuando he decidido hacer algo diferente por mi cuenta, me surgen varios problemas que no puedo solucionar. La prueba está hecha con Firefox, con Internet Explorer es aún peor y se me descuadra todo.
Os pongo el enlace a mi página, (le falta mucho todavía, de momento todos son pruebas pero poco a poco), mi hoja de estilos, mi hoja html, y a continuación los problemas que me gustaría solucionar, gracias.
mi página: http://magspace.onlinewebshop.net
mi hoja de estilos.css:
*{margin:0px ; padding:0px ; border: 0px}
body {text-align: center ; background-color: #ADD8E6}
#global {width: 800px ; margin: 4px auto ; font-family: sans-serif; }
/*-----------------------------------------------------------------CONTENIDOS Y DIVS-----------------------------------------------------*/
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat; height: 12px}
#cabecera {background-color: #8c2c2c;height: 90px;}
#logotipo {background-image: url(objetos/logotipo.gif) ;height: 90px;background-repeat: no-repeat;}
#navegacion {background-color: SteelBlue;
height: 30px;
border-top: 1px solid black;
border-bottom: 1px solid black;}
#navegacion li {list-style: none; float: left;margin: 0px 50px 0px 60px;} /*float: left es para que se alinee horizontalmente la lista*/
#contenido {background-color: chocolate; border-left:1px solid black;border-right:1px solid black; width: auto;}
#contenido img {padding: 10px 10px 10px 0px}
#menu {background-color: white ;width: 150px ; float: left; margin: 10px;
background-image: url(objetos/menuinf.gif); background-repeat: no-repeat;
background-position: bottom;}
#menu h2 {background-image: url(objetos/menusup.gif); background-repeat: no-repeat ; padding-top: 20px}
#menu li {list-style: none; text-align: left;margin: 5px 10px ; padding-top: 20px;}
#pie {background-color: yellow; height: 150px;border-left: 1px solid black; border-right: 1px solid black ; height: 85px;}
#pie-uno {width:247px; height: 85px; float: left; background-color: white;}
#pie-dos { ; float: left; width: 551px ; background-color: white}
#pie-dos p {padding:10px 30px 0px 30px ; color:gray; font-size: 1.1em; font-weight: bold; ; text-indent: 25px}
#curva-inferior { height: 12px; background-image: url(objetos/curva-inferior.gif)}
/*------------------------------------------------FORMATO DE PARRAFO Y TEXTOS----------------------------------------------*/
h1 {color: brown ; font-size: 1.5em; text-decoration: none; text-align: center; padding-top: 20px}
h2 {color: maroon; font-size: 1.2em; text-decoration: none; text-align: center; margin-top: 0px}
p {text-align: left; text-indent: 15px ; padding: 20px 10px 20px 10px;}
.derecha {padding-left: 30px}
/*--------------------------------------------------FORMATO DE ENLACES--------------------------------------------------------------*/
a {color: blue ; text-decoration: none ; display: block}
a:link {}
a:visited {color: black}
a:hover {color: white ; text-decoration: underline ; background-color: silver; }
a:active {}
#pie a {color:blue ; text-decoration:none ;}
#pie-dos a:link {}
#pie-dos a:visited {color: black;}
#pie-dos a:hover {color: brown ; text-decoration:underline ;}
#pie-dos a:active {}
-------------------------------------------------------------------------------Mi hoja de html:---------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<style>
.centrado {text-align: center ; color: red;}
</style>
<title>Primera pagina</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
</div>
</div>
<div id="navegacion">
<ul>
Portada
Dedicatorias
varios
curiosidades
</div>
<div id="contenido">
<div id="menu">
<h2>Menu</h2>
<ul>
Enlace 1
Enlace 2
Enlace 3
Enlace 4
Enlace 5
Enlace 6
Enlace 7
</div>
<h1>Portada de la página</h1>
Esto es una prueba de párrafo, y de imágenes a ver los acentos. Esto es una prueba párrafo,
Esto es una prueba de párrafo, a ver los acen tos Esto es una prueba de párrafo, a ver los acentos
Esto es una prueba de párrafo, a ver los acentosEsto es una prueba de párrafo, a ver los acentos
</p>
[contenido no disponible]Esto
es una prueba de párrafo y de imágenes,a ver los acentosEsto es una prueba párrafo, a ver los acentos
Esto es una prueba de párrafo, a ver los acentosEsto es una prueba de párrafo, a ver los acentos
Esto es una prueba de párrafo,
</p>
<br clear="all">
Eso es una prueba de párrafo, a ver que tal. Esto es una prueba de párrafo,
Eso es una prueba de parrafo, a ver que tal.Esarrafo, a ver que tal.
Eso es una prueba de parrafo, a ver que tal.Eso es una prueba de parrafo, a ver que tal.
Eso es una prueba de parrafo, a ver que tal.</p>
[contenido no disponible]
[contenido no disponible]
Este texto debe aparecer en la parte derecha de la foto. Este texto debe aparecer en la parte
derecha de la foto.Este texto debe aparecer en la parte derecha de la foto. Este texto debe aparecer
en la parte derecha de la foto.
</p>
<br clear="all">
</div> <!------etiqueta cierre div contenidos>
<div id="pie">
<div id="pie-uno">[contenido no disponible]
</div>
<div id="pie-dos">
Esta página está siendo creada gracias a comocreartuweb.
</p>
<p class="centrado">GRACIAS</p>
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Los problemas son:
1) en las imágenes me aparece un trozo de texto en la parte superior de ésta, cuando me gustaría que me apareciera en línea con la imagen. Nota: esto lo he podido solucionar justificando el texto, pero es que prefiero tenerlo ahí alineado a la izquierda.
2) el enlace del pie, el de "comocreartuweb", tiene definida unas propiedades en mi hoja de estilos.css y no me las respeta, en concreto, lo que quiero es quitarle es el display block y el fondo en color silver.
3) en las imágenes no me sale el texto que le tengo puesto en "alt=" cuando paso el ratón por encima.
4) los acentos no funcionan
Esto son pruebas diferentes que estoy haciendo para ver si he asimilado correctamente las lecciones, no es que sean relevantes en sí, pero son retos que me propongo para ver si lo puedo hacer y me doy cuenta que todavía me queda mucho por aprender (espero que sea con vosotros, jeje).
Por favor, si notáis algún otro error o alguna mejora posible, me gustaría que me lo hagáis saber.
De nuevo Gracias por vuestra atención.:D :D
he seguido el curso paso a paso y no he tenido ningún problema en construir la página siguiendo las indicaciones, pero cuando he decidido hacer algo diferente por mi cuenta, me surgen varios problemas que no puedo solucionar. La prueba está hecha con Firefox, con Internet Explorer es aún peor y se me descuadra todo.
Os pongo el enlace a mi página, (le falta mucho todavía, de momento todos son pruebas pero poco a poco), mi hoja de estilos, mi hoja html, y a continuación los problemas que me gustaría solucionar, gracias.
mi página: http://magspace.onlinewebshop.net
mi hoja de estilos.css:
*{margin:0px ; padding:0px ; border: 0px}
body {text-align: center ; background-color: #ADD8E6}
#global {width: 800px ; margin: 4px auto ; font-family: sans-serif; }
/*-----------------------------------------------------------------CONTENIDOS Y DIVS-----------------------------------------------------*/
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat; height: 12px}
#cabecera {background-color: #8c2c2c;height: 90px;}
#logotipo {background-image: url(objetos/logotipo.gif) ;height: 90px;background-repeat: no-repeat;}
#navegacion {background-color: SteelBlue;
height: 30px;
border-top: 1px solid black;
border-bottom: 1px solid black;}
#navegacion li {list-style: none; float: left;margin: 0px 50px 0px 60px;} /*float: left es para que se alinee horizontalmente la lista*/
#contenido {background-color: chocolate; border-left:1px solid black;border-right:1px solid black; width: auto;}
#contenido img {padding: 10px 10px 10px 0px}
#menu {background-color: white ;width: 150px ; float: left; margin: 10px;
background-image: url(objetos/menuinf.gif); background-repeat: no-repeat;
background-position: bottom;}
#menu h2 {background-image: url(objetos/menusup.gif); background-repeat: no-repeat ; padding-top: 20px}
#menu li {list-style: none; text-align: left;margin: 5px 10px ; padding-top: 20px;}
#pie {background-color: yellow; height: 150px;border-left: 1px solid black; border-right: 1px solid black ; height: 85px;}
#pie-uno {width:247px; height: 85px; float: left; background-color: white;}
#pie-dos { ; float: left; width: 551px ; background-color: white}
#pie-dos p {padding:10px 30px 0px 30px ; color:gray; font-size: 1.1em; font-weight: bold; ; text-indent: 25px}
#curva-inferior { height: 12px; background-image: url(objetos/curva-inferior.gif)}
/*------------------------------------------------FORMATO DE PARRAFO Y TEXTOS----------------------------------------------*/
h1 {color: brown ; font-size: 1.5em; text-decoration: none; text-align: center; padding-top: 20px}
h2 {color: maroon; font-size: 1.2em; text-decoration: none; text-align: center; margin-top: 0px}
p {text-align: left; text-indent: 15px ; padding: 20px 10px 20px 10px;}
.derecha {padding-left: 30px}
/*--------------------------------------------------FORMATO DE ENLACES--------------------------------------------------------------*/
a {color: blue ; text-decoration: none ; display: block}
a:link {}
a:visited {color: black}
a:hover {color: white ; text-decoration: underline ; background-color: silver; }
a:active {}
#pie a {color:blue ; text-decoration:none ;}
#pie-dos a:link {}
#pie-dos a:visited {color: black;}
#pie-dos a:hover {color: brown ; text-decoration:underline ;}
#pie-dos a:active {}
-------------------------------------------------------------------------------Mi hoja de html:---------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<style>
.centrado {text-align: center ; color: red;}
</style>
<title>Primera pagina</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<h2>Menu</h2>
<ul>
</div>
<h1>Portada de la página</h1>
Esto es una prueba de párrafo, y de imágenes a ver los acentos. Esto es una prueba párrafo,
Esto es una prueba de párrafo, a ver los acen tos Esto es una prueba de párrafo, a ver los acentos
Esto es una prueba de párrafo, a ver los acentosEsto es una prueba de párrafo, a ver los acentos
</p>
[contenido no disponible]Esto
es una prueba de párrafo y de imágenes,a ver los acentosEsto es una prueba párrafo, a ver los acentos
Esto es una prueba de párrafo, a ver los acentosEsto es una prueba de párrafo, a ver los acentos
Esto es una prueba de párrafo,
</p>
<br clear="all">
Eso es una prueba de párrafo, a ver que tal. Esto es una prueba de párrafo,
Eso es una prueba de parrafo, a ver que tal.Esarrafo, a ver que tal.
Eso es una prueba de parrafo, a ver que tal.Eso es una prueba de parrafo, a ver que tal.
Eso es una prueba de parrafo, a ver que tal.</p>
[contenido no disponible]
[contenido no disponible]
Este texto debe aparecer en la parte derecha de la foto. Este texto debe aparecer en la parte
derecha de la foto.Este texto debe aparecer en la parte derecha de la foto. Este texto debe aparecer
en la parte derecha de la foto.
</p>
<br clear="all">
</div> <!------etiqueta cierre div contenidos>
<div id="pie">
<div id="pie-uno">[contenido no disponible]
</div>
<div id="pie-dos">
Esta página está siendo creada gracias a comocreartuweb.
</p>
<p class="centrado">GRACIAS</p>
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Los problemas son:
1) en las imágenes me aparece un trozo de texto en la parte superior de ésta, cuando me gustaría que me apareciera en línea con la imagen. Nota: esto lo he podido solucionar justificando el texto, pero es que prefiero tenerlo ahí alineado a la izquierda.
2) el enlace del pie, el de "comocreartuweb", tiene definida unas propiedades en mi hoja de estilos.css y no me las respeta, en concreto, lo que quiero es quitarle es el display block y el fondo en color silver.
3) en las imágenes no me sale el texto que le tengo puesto en "alt=" cuando paso el ratón por encima.
4) los acentos no funcionan
Esto son pruebas diferentes que estoy haciendo para ver si he asimilado correctamente las lecciones, no es que sean relevantes en sí, pero son retos que me propongo para ver si lo puedo hacer y me doy cuenta que todavía me queda mucho por aprender (espero que sea con vosotros, jeje).
Por favor, si notáis algún otro error o alguna mejora posible, me gustaría que me lo hagáis saber.
De nuevo Gracias por vuestra atención.:D :D