CCC escribió:Ocupo ayuda porq en explorer toda mi página se ve muy bien pero en firefox se ve toda en códigos, de hecho mi index en firefox se ve excelente, pero a la hora de ver la plantilla se ve toda asco. Esta es la pág del problema: http://christophercontreras.myartsonline.com/plantilla.html
:roll: cualquiera que me ayude se lo agradeceré montones.
Antes que todo quiero que sepan que he podido ir solucionando cada uno de mis problemas sobre este tema, pero ya que nuestro amigo CCC tiene un problema semejante, pues colocare aquí alguna ayuda que pueda aportar a su solución, de antemano quiero que sepas que al igual que tu, también soy principiante.
Es bueno que coloques la hoja de estilos.css pero viendo el código de tu plantilla veo que hay varios errores.
1. Recuerda que los párrafos comienzan con
y terminan con </p> así que si abres un párrafo, siempre siérralo antes de colocar otro, en azul te marco a lo que me refiero.
2. No es necesario encerrar los títulos con
ni </p> simplemente coloca las etiquetas que te señalan que son títulos ya listos, estos son <h1></h1> h2, h3, etc…….
3. En la capa Div del pie de página, no lo cerraste, recuerda que esto se hace con el </div> en verde te lo muestro.
4. Borra lo que este en Rojo.
Tu codigo de tu plantilla en estos momentos se vera asi:
<head>
<title>Página Principal</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[contenido no disponible]</div>
<div id="publicidad"><h3>Bienvenidos a mi Web</h3></div>
</div>
<div id="navegación"><ul>
PortadaConciertosDescargasDiscosForoHistoriaSouvenirs</div>
<div id="contenido">
<h1>Esta será la zona principal de la web</h1></p>
El text indent sirve para definir cuanta distancia hay entre un párrafo
y otro después de poner la p, por lo q es de gran importancia</p>
<h2>
También se le pueden asignar propiedades
a los títulos definidos con h, observar este párrafo en la css</h2>
Para poner los bordes hay que poner border top, bottom, left, right.</p>
También si se quiere se puede poner float:left, right o center si se quiere q algo flote, para ejemplo ver el menú. en la hoja css</p>
Ver como se consigue la sangría aqui e el editor.. se consigue poniendo una p que termina con una q empieza juntas. Pero a mí me surgió la duda de que pasaría si sigo escribiendo,
es decir como se acomoda por si sólo el texto</p>
Jaja si se nota la sangría q curioso. Acabo de descubrir que se pueden definir todos los bordes de
un espacio con solo poner: border color, número de pixeles de ancho(2px) y solid. Para insertar las curvaturas en las esquinas: mirar curva-inferior y curva-superior en
la css.
En el logotipo de arriba accesa a la página index.html, es recomendable para realizar ese efecto, primero crear el enlace abriendo un < y luego, una a y finalmente
un espacio para que salga href y una vez hecho esto insertar la imagen.
Mirar la última línea que hay entre los head, es para q fierefox reconozca las tildes.</p>
Que no se me olvide recordar que para indicar el ancho de una capa se pone width en la css y float para ubicarlo ya sea en el centro o a los lados. Si se quiere indicar algo para
las propiedades de las listas se pone el nombre de la lista:ejemplo + li{y aquí lo que se quiera cambiar}.También se puede definir que clase de enlace poniendo de entre a y href esto:
class="enlaceuno" o dos o lo que sea.
Cuando se pone "a:" en la css es para determinar las características de un enlace.Ejemplo mm q curioso no funciono,
seguro porq está dentro del texto.</p>
Jaja sí.. era x eso veamos abajo el ejemplo 2
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactosNos Enlazan
Ejemplo 2</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSiteMapa de la Web</div>
<div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Y estos seria lo que tendrias que arreglar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Página Principal</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad"><h3>Bienvenidos a mi Web</h3></div>
</div>
<div id="navegación"><ul>PortadaConciertosDescargasDiscosForoHistoriaSouvenirs</div>
<div id="contenido">
<h1>Esta será la zona principal de la web</h1> </p>
El text indent sirve para definir cuanta distancia hay entre un párrafo
y otro después de poner la p, por lo q es de gran importancia</p>
<h2>
También se le pueden asignar propiedades
a los títulos definidos con h, observar este párrafo en la css</h2>
Para poner los bordes hay que poner border top, bottom, left, right.</p>
También si se quiere se puede poner float:left, right o center si se quiere q algo flote, para ejemplo ver el menú. en la hoja css</p>
Ver como se consigue la sangría aqui e el editor.. se consigue poniendo una p que termina con una q empieza juntas. Pero a mí me surgió la duda de que pasaría si sigo escribiendo,
es decir como se acomoda por si sólo el texto</p>
Jaja si se nota la sangría q curioso. Acabo de descubrir que se pueden definir todos los bordes de
un espacio con solo poner: border color, número de pixeles de ancho(2px) y solid. Para insertar las curvaturas en las esquinas: mirar curva-inferior y curva-superior en
la css. </p>
En el logotipo de arriba accesa a la página index.html, es recomendable para realizar ese efecto, primero crear el enlace abriendo un < y luego, una a y finalmente
un espacio para que salga href y una vez hecho esto insertar la imagen. </p>
Mirar la última línea que hay entre los head, es para q fierefox reconozca las tildes.</p>
Que no se me olvide recordar que para indicar el ancho de una capa se pone width en la css y float para ubicarlo ya sea en el centro o a los lados. Si se quiere indicar algo para
las propiedades de las listas se pone el nombre de la lista:ejemplo + li{y aquí lo que se quiera cambiar}.También se puede definir que clase de enlace poniendo de entre a y href esto:
class="enlaceuno" o dos o lo que sea. </p>
Cuando se pone "a:" en la css es para determinar las características de un enlace.Ejemplo mm q curioso no funciono,
seguro porq está dentro del texto.</p>
Jaja sí.. era x eso veamos abajo el ejemplo 2 </p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactosNos Enlazan
Ejemplo 2</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSiteMapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>