Previo Erroneo L03 - Insertar Logotipo

tecojoesto · 20 Ago 2009, 11:23 · Solicitar retirada

Hola,

he seguido todos los pasos y en el prvio de este capítiulo al final del todo no me cuadra con lo que debería salir. Es una tonteria pero no me sale igual. En la capa de publicidad me aparece este texto:

Bienvenidos a mi Web que esta aqui
i

Como ves me muestra la repetición de la última letra que tengo escrita por código en otra linea centrada. 'i'

He revisado el código y no encuentro ninguna 'i' suelta por el código que se me haya podido escapar.

El código donde defino estas capas es:


<div id="cabecera">

<div id="logotipo">
[contenido no disponible]
</div>

<div id="publicidad">Bienvenidos a mi Web que esta aqui</div>

</div>

<div id="navegacion">Barra de Navegación</div>

Voy a seguir con el curso pero si ves algo me lo comentas para arreglarlo.

Gracias.

Y aprovecho para felicitaros por este magnifico curso.

Yaneth · 20 Ago 2009, 16:21 · Solicitar retirada

para poder ayudarte

debes pegar todo lo que tienes en html y en css aqui
para ver el fallo

saludos

tecojoesto · 21 Ago 2009, 08:31 · Solicitar retirada

Del HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>Pagina oficial de mi web</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">

</head>

<body>

<div id="global">

<div id="curva-superior"></div>


<div id="cabecera">

<div id="logotipo">
[contenido no disponible]
</div>

<div id="publicidad">Bienvenidos a mi Web que esta aqui</div>

</div>

<div id="navegacion">

<ul>

Portada

Historia

Discografía

<a href="conciertos/conciertos.h
tml">Conciertos</a>

Descargas

Souvenirs

</div>

<div id="contenido">

<h1>Indice de mi web</h1>

El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el menú horizontal de arriba igual que hicimos con las páginas de las secciones. En este caso no nos vale el mismo código que en aquellas páginas, pues esas estaban dentro de una carpeta mientras que index.html está fuera. Por eso, las rutas no son exáctamente las mismas y tenemos que ponérselas correctamente. Es fácil, ya veras.</p>

El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el menú horizontal de arriba igual que hicimos con las páginas de las secciones. En este caso no nos vale el mismo código que en aquellas páginas, pues esas estaban dentro de una carpeta mientras que index.html está fuera. Por eso, las rutas no son exáctamente las mismas y tenemos que ponérselas correctamente. Es fácil, ya veras.</p>

El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el menú horizontal de arriba igual que hicimos con las páginas de las secciones. En este caso no nos vale el mismo código que en aquellas páginas, pues esas estaban dentro de una carpeta mientras que index.html está fuera. Por eso, las rutas no son exáctamente las mismas y tenemos que ponérselas correctamente. Es fácil, ya veras.</p>

</div>

<div id="pie">

<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>

<div id="piedos">pie dos</div>

<div id="pietres">

<ul>

Directorio

TopSite

Mapa de la Web

</div>

</div>

<div id="curva-inferior"></div>

</div>
</body>
</html>

Y el código del CSS es:

/** Formatear todos los estilos para cambiarlos nosotros a nuestro gusto y que
en todos los navegadores se pueda ver nuestra web de la misma forma.
IMPORTANTE: Esta línea tiene que ir la primera de todas. **/
* {margin:0px ; padding:0px ; border: 0px}

/** Estilo para el parrafo **/
p {text-align: justify}

/** Estilo de los Titulos y Subtitulos.
Se pude llegar hasta h6 **/
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}

/** bug para algunos navegadores para centrar las capas ***/
body {text-align: center}

/** Creación de estilos que solo se usará en un elemento de una página web.
Se identifica por la almohadilla inicial y se usa en el código en el fichero .html
usando la palabra id en lugar de class como en clases de estilos. Ver estilos.css **/
/** Estilo para la capa que va a englobar al resto de capas.
Es especial ya que va definir el tamaño en el que se muestra nuestra web en el navegador.
Esto significa que la capa global tendrá un ancho de 800 pixeles (lo mas estandar).
'margin' define el margen a dejar entre el elemento (en este caso el div global) y el resto de cosas a su alrededor.
'4px' es la cantidad de margen que vamos a dejar por encima y por debajo de la web.
'auto' es la cantidad de margen que dejaremos por cada lado. Significa automático, por lo que se dejará todo lo que
exceda de 800px y automáticamente, es decir, la mitad a la derecha y la otra mitad a la izquierda y por tanto, centrado. **/
#global {width:800px ; margin: 4px auto }

/** Estilo de la capa para el logotipo **/
#logotipo {width:280px ; float:left}

/** Estilo para la capa de publicidad **/
#publicidad {width:518px ; float:right ; margin-top:25px}

/** Estilo para la cabecera de la página **/
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}

/** Estilo que usaremos para la barra de navegación **/
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

/** Estilos de las listas de la capa de navegación **/
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }

/** Estilo del grupo de elementos de la lista de la capa de navegación **/
#navegacion ul { margin-left: 60px }

/** Estilo para la parte principal de la página
'border' pinta una linea (borde) alrededor del objeto. Se puede poner la linea en un solo lado o en los que se
desee utilizando 'border-top', 'border-right', 'border-botton', 'border-left' **/
#contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid}

/** Crear un estilo para un elemento de una capa. En este caso para los parrafos de la capa de congtenido
'text-ident' es la identación de la primera linea de cada parrafo del contenido **/
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}

/** Estilo para la capa que contiene el menú.
'width:150px' anchura fija de 150 pixeles.
'float' La propiedad Float hace que el elemento flote sobre el resto de la web.
Esto vale para cambiarlo de posición más fácilmente. A la propiedad float se le suele poner uno de
estos dos valores: left (que flote a la izquierda) o right (lo manda a la derecha).
'text-align' establece el justificado del texto
'margin-right' le da mas margen a la capa de menu por la derecha. Ese margen no lleva el color de fondo. **/
#menu {
width: 150px ;
float:left ;
text-align:left ;
margin-right: 10px ;
margin:3px 10px 3px 3px ; /** Para separar la capa de menu del resto de capas **/
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ; /** Posición de la imagen pegada a abajo **/
padding-bottom:5px ;
}

/** Estilo para los titulos de la capa de menu **/
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px }

/** Crear un estilo para un elemento de una capa. SE hace poniendo el nombre de la capa delante del
objeto al que vamos a modificar las propiedades pero solo cuando se cumpla que está dentro de la capa.
Esto hace que no modifiquemos las propiedades de un objeto en toda la web y solo donde queremos. Con esto
vamos a modificar las propiedades de las listas contenidas en la capa menu y no las propiedades de todas las listas
de nuestra web.
'list-style' con valor none quitamos todos los estilos que pueda tener y solo dejamos el texto.
'margin' es el margen que dejamos a cada lado del texto (arriba, derecha, abajo, izquierda) **/
#menu li {
list-style:none ;
/** margin: 0px ; /** Valor para todos los lados **/
/** margin: 0px 0px ; /** Valor de (arriba-abajo) y (derecha-izquierda) **/
margin: 4px 8px 4px 6px ;
}

/** Estilo para el pie de la página **/
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ;
height: 65px }

/** Estilo para las listas del pie de pagina **/
#pie li {list-style: none ; font-size: 12px}

#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }

/** Estilo para la capa superior **/
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height: 12px ;
overflow : hidden }

/** Estilo para la capa inferior **/
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height: 12px ;
overflow : hidden }

/** Estilo de los enlaces.
Se distinguen cuatro estados posibles para los enlaces, que son los siguientes:
- link: Es el estado normal que tiene un enlace cuando no está en ninguno de los otros tres estados.
- Visited: Es el estado del enlace cuando éste ya ha sido visitado por el usuario anteriormente.
- Hover: Es el estado del enlace cuando el cursor del ratón está justo encima de él, pero sin apretar el botón aún.
- Active: Y este es el estado de un enlace o vínculo cuando está siendo presionado por el ratón y mientras no se suelta el dedo.
IMPORTANTE: Si se pone el estilo para un estado hay que ponerlo para todos aunque este vacio {}
**/
/**a {color: blue; font-size:1.3em ; text-decoration: none} /** Si no se quiere que cambie se haga lo que se haga en el enlace **/
a {color: brown ; text-decoration:none ; display: block } /** 'display' hace que el estado se acctive auqnue se ponga el cursor lejos del texto **/
a:link {}
a:visited {}
a:hover {color: red ; text-decoration: underline ; background-color: silver}
a:active {}

/**
/** Estilos de enlaces
a.enlaceuno {}
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}
**/

/** Estilos de los enlaces que pertenecen a la capa de pie **/
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}

/** Estilos de los enlaces que pertenecen a la capa de logotipo **/
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

RogexdarK · 21 Ago 2009, 10:04 · Solicitar retirada

yo lo veo todo ok =/ cual es el problema ?

tecojoesto · 21 Ago 2009, 10:49 · Solicitar retirada

mira la página donde lo he publicado:

http://jcn.atwebpages.com/

Verás que donde pone "Bienvenidos a mi Web que esta aqui" aparece una "i" debajo de ese texto.

He probado a cambiar el texto pero siempre se me repite la última letra debajo del texto "Bienvenidos a mi Web que esta aqui"

No es que sea un problema y espero que no me pase en otra web que voy a hacer pero es que ya es por saber que puede estar pasando, poque no siempre me ha salido. El problema me apareció a partir de alguna lección pero no puedo saber desde cual y no se si hice algo mal. Ya es por quedarme tranquilo.

Gracias