Hola:
Le voy a explicar como funciona una página con una hoja de estilo
Se crea una carpeta en el escritorio, (como bien sabemos, el escritorio es en este caso la pantalla del ordenador). A esa carpeta la llamaremos mi-web
Dentro de esa carpeta mi-web creamos una pagina web a la que le ponemos por nombre por ejemplo plantilla.html
Luego de haber creado esa pagina que tiene por nombre plantilla.html, creamos una hoja de estilo para esa página.
¿Porqué creamos una hoja de estilo para esa página?.
Porque si no creo una hoja de estilo para que le de un estilo mio a esa página, esa página va a tener el estilo prefijado por los navegadores.
¿Qué significa eso?
que los navegadores ya tienen un estilo prefijado para mostrar las páginas web
Por ejemplo, los títulos, o sea los que uno pone entre el <h1> y el </h1> ya tienen una medida por defecto y suelen ser de color azul.
Fuera de eso, todo lo que escriba en esa página se pondrá a la izquierda.
¿Porqué?.
Porque la forma de escribir y el formato de los idiomas que se hablan y se escriben en Occidente, comienzan desde la parte superior izquierda como bien sabe usted, sino Escriba algo en un cuaderno y se dará cuenta.
Pues ese es el estilo prefijado por los navegadores para una página web.
Por eso, si queremos darle otro estilo, que no sea el prefijado, entonces debemos crear una hoja de estilo para esa página
Resumiendo:
En el escritorio, creamos una carpeta llamada mi-web
Dentro de esa carpeta creamos una página a la que le ponemos como nombre plantilla.html, y dentro de esa misma carpeta creamos una hoja de estilo para esa página, hoja de estilo a la que le pondremos como nombre estilo-general.css
como ya tenemos dentro de esa carpeta una página y una hoja de estilo, entonces también dentro de esa carpeta creamos una carpeta a la que le pondremos por nombre objetos.
En esa carpeta llamada objetos es donde pondremos las imagenes que irán en la página web
Existen dos maneras de poner imagenes en una página
Una es directamente
Y la otra es por medio de la hoja de estilo
Ahora, si yo escribo en la página, esta me va a mostrar el estilo por defecto.
¿Porqué?
Porque para que me muestre el estilo que yo quiero darle, tengo que decirselo por medio de la hoja de estilo-general que he creado
Pero no saco nada con ponerle a la hoja de estilo-general todas las directivas que se me ocurran si antes no he
relacionado la pagina con esa hoja de estilo
Por tanto para "crear un puente" o relacionar la pagina plantilla.html con la hoja de estilo-general.css, debo ir a esa página, y poner entre la etiqueta <head> y la etiqueta </head> el siguente código
<link rel=stylesheet" href="estilo-general.css" type="text/css" media="all">
Con eso entonces ya la página puede recibir órdenes desde la hoja de estilo
...........................
Ahora, si en la página plantilla.html le ponemos estos códigos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mi Pagina</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
</body>
</html>
.............................................
Cuando veamos la página en la vista previa, (o vamos a la carpeta del escritorio, donde tenemos la página, y la abrimos para ver como está) seguro que solo se verá una página en blanco. ¿Porqué?
Porque aunque tengamos la página relacionada con la hoja de estilo, a la hoja de estilo no le hemos dicho nada.
Así que vamos a la hoja de estilo-general.css, y en la primera línea le ponemos una directiva al body, (ya que el body es, diríamos toda nuestra pantalla, y ponemos en la hoja de estilo-general.css lo siguiente:
body {text-align: center}
Eso significa, que en nuestra página, todo lo que escribamos, o capas que creemos se pondrán al centro, por eso, si vamos ahora a la página plantilla y la abrimos para escribir algún párrafo, este párrafo comenzará a escribirse desde el centro de la página, esparciéndose hacia la izquierda y hacia la derecha.
Por ejemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mi Pagina</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
Este parrafo está centrado</p>
</body>
</html>
................................................
Entonces, cuando abra la página en vista previa, o sea cuando la abra para ver como ha quedado el parrafo que he escrito, este aparecerá centrado.
Si veo que no aparece centrado. Y que me aparece a la izquierda. ¿Qué puede haber pasado?.
Pues lo más lógico, es que haya escrito mal alguna cosa en alguna parte
entonces tendré que revisar el nombre exacto de la hoja de estilo.
¿Qué nombre le puse a la hoja de estilo
Pues estilo-general.css
Luego abro la página en modo código para revisar ese <link rel etc. etc. etc. que puse entre el <head> y el </head>
Y veo que al parecer está todo bien, pero ¡no!. De repente me doy cuenta de que en ese <link rel=etc. etc. etc.
yo puse estilo
s-general.css
O sea yo tengo una hoja de estilo que le puse por nombre estilo-general.css y desde la pagina estoy pidiéndo que se pongan los estilos desde una hoja de estilo que se llama estilos-general.css
Lógicamente esa hoja de estilos-general.css, sencillamente no existe.
Eso hay que revisarlo muy bien, de la misma manera que si la extensión de las hojas de estilo son css, tener cuidado que no le haya puesto uno ccs
Resumiéndo:
Cualquier punto o coma mal puesto, o letra mal puesta o errónea, hará que la página no reciba las órdenes desde la hoja de estilo de esa página
..............................................................
¿Qué pasa ahora con las imágenes?.
Pues como le dije antes, existen dos formas de poner las imagenes, Una directamente en la página
Y otra, desde la hoja de estilo
En otro spot, le indiqué que las "curvas-superior e inferior" (las que miden 800px de ancho, se deben poner en la hoja de estilo.
Lo mismo es para las curvas de la capa menu.
Lo que usted está haciéndo es poniéndolas en la hoja de estilo-general.css y también en la página.
Por lo tanto el navegador no sabe que hacer
Fuera de eso, me recuerdo que le dejé más o menos el orden de como tenía que tener los códigos de su hoja de estilo
En lo que concierne al menu lateral, eso es después que todas las otras cosas estén bien, ya que no es llegar y poner una imagen en el menu lateral y después un texto, y que sirvan de enlaces, porque lo más probable es que una cosa se le ponga arriba y la otra abajo
¿Porqué?
Porque una imagen podríamos decir que tiene la misma propiedad que un párrafo, por lo tanto ocupará una línea completa
Y el texto, que le acompaña a esa imagen, al ser también un enlace, y los enlaces también suelen tener las propiedades (por decirlo así) de un párrafo, pues ese texto ocupará otra línea
Todo eso, a menos que las cosas las haga correctamente
Por ejemplo en el menu lateral de su página podría poner el enlace de esta manera:
[contenido no disponible]OSASUNA
Luego en la hoja de estilo, podría crear un grupo de aes (de pseudoclases o directivas para esos enlaces de la capa lateral)
Por ejemplo:
Esto al final de la hoja de estilo
#menu a{color: brown ; text-decoration:none ; display: inline}
#menu a:link{}
#menu a:visited{}
#menu a:hover{color:red ; text-decoration:underline ; background-color: silver}
#menu a:acrive{}
Luego en la misma hoja de estilo, ir a donde dice #menu li{etc. etc. etc.}
Y modificar los márgenes, para que la imagen y el texto que ponga como enlace en la capa lateral (que forman parte de la lista li) se mantenga en una línea, así que allí habría que poner más o menos esto
#menu li {list-style:none ; margin: 4px 3px 3px 3px }
El segundo 3px y el cuarto 3px se refieren a los márgenes derecho e izquierdo
Ya nos dirá
Saludos