Entrar

Leccion 3- Insertar Logotipo

santoximo · · Solicitar retirada
Lo primero, muy bien el curso paso a paso, he llegado hasta aqui sin percances, muy didactico y sencillo todo lo explicado.
Pero una vez llegado al punto de insertar el logotipo de la leccion tercera el resultado no es el mismo que el que sale al final en la vista previa.
A mi el logotipo se me inserta (ocupa el espacio) de la barra de navegacion y del contenido, empuja al menu y queda muy separado del borde superior.
Han sido tanto los intentos de arreglarlo, que he tenido que volver a empezar ya que lo he liado bien. El caso que esta es la tercera vez y queda igual.
¿falta alguna instrucción, que no sale en la web?
Bueno, aquí estoy "atrancado" esperando ayuda.
Gracias de antemano.
El que la sigue la consigue.
santoximo · · Solicitar retirada
Yaneth escribió:para ayudarte

pega aqui el contenido de html y css

saludos

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</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"></div>
<div id="logotipo"><a href="index.html">
[contenido no disponible]</a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>

    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>

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

    css

    * {text-indent:0px ; 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 ; height:85px}
    #logotipo {background-color: brown ; width:280px ; float:left }
    #publicidad {background-color: pink ; width:518px ; float:right; margin-top:25px}

    #navegacion {background-color: gray; border: black 1px solid; heigt:80px }
    #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}
    #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 }


    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}
    #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 }


    Algo he hecho mal, seguro, pero no se que es.

    Un saludo
    • El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    CERRASTE cabecera antes de meterle el contenido

    <div id="cabecera"></div>
    <div id="logotipo"><a href="index.html">
    [contenido no disponible]</a></div>
    <div id="publicidad">Bienvenidos a mi Web</div>

    el cierre (rojo) debe estar desoues del cierre de publicidad

    saludos
    santoximo · · Solicitar retirada
    Yaneth escribió:CERRASTE cabecera antes de meterle el contenido

    <div id="cabecera"></div>
    <div id="logotipo"><a href="index.html">
    [contenido no disponible]</a></div>
    <div id="publicidad">Bienvenidos a mi Web</div>

    el cierre (rojo) debe estar desoues del cierre de publicidad

    saludos

    Que rapidez en la contestación, se agradece.
    He hecho el cambio que me has indicado y lo cierto es que no se ha arreglado, pero me ha dado nuevas ideas y estoy probando otras cosas, lo sigo teniendo desordenado, pero diferente, voy a seguir "experiementando" y te digo.
    Es posible que al final necesite ayuda.
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    cualquier cosa

    aqui seguimos

    te doy una pista

    fijate cuanto mide de altura tu cabecera (en css)
    y fijate cuanto mide de altura tu logotipo (en html)

    debe ser igual o menor que la altura de cabecera
    saludos
    santoximo · · Solicitar retirada
    Yaneth escribió:cualquier cosa

    aqui seguimos

    te doy una pista

    fijate cuanto mide de altura tu cabecera (en css)
    y fijate cuanto mide de altura tu logotipo (en html)

    debe ser igual o menor que la altura de cabecera
    saludos

    Bueno, por ahi iban los tiros, era cosa de las alturas y de los margenes...hay que ver, como lo has sabido sin mirar jajaja. A mi me ha costado así como una hora. Si hubiese mirado antes tu consejo..., pero el caso es que lo tengo todo cuadrado.
    Voy a seguir para adelante.
    Y te cojo la palabra para cuando me vuelva a atascar.
    Saludos
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    es cosa de logica

    cuando algo se desborda es porque no cabe :wink:

    no puedes meter 2 litros de agua, en un contenedor de un litro, porque se derramará verdad??

    lo mismo pasa con la web
    en adelante tendrás mas cuidado con respecto de los numeros

    medidas,(anchos, altos, margenes, padings, etc etc)

    saludos
    santoximo · · Solicitar retirada
    Yaneth escribió:cualquier cosa

    aqui seguimos

    te doy una pista

    fijate cuanto mide de altura tu cabecera (en css)
    y fijate cuanto mide de altura tu logotipo (en html)

    debe ser igual o menor que la altura de cabecera
    saludos

    Hola
    Tengo otro problema diferente, que no se si tengo que exponerlo en otro sitio o si aqui vale. (soy nuevo en esto de los foros)
    Te cuento, lo tengo todo ok, pero como lo estaba haciendo en el trabajo, me he copiado los ficheros y me lo he instalado tambien en casa.
    Al abrirlos en el HTML-Kit se ve todo correcto, pero cuando lo paso a la carpeta de inernet, es como si no se relacionara el html con el fichero css correspondiente y no toma ningún atributo ni lee lo que hay en la carpeta objetos solo lee el html. ¿donde me equivoco?
    Si no es aqui donde debo exponer esto me lo dices, poco a poco con ayuda todo se aprende.
    El que la sigue la consigue.
    santoximo · · Solicitar retirada
    santoximo escribió:
    Yaneth escribió:cualquier cosa

    aqui seguimos

    te doy una pista

    fijate cuanto mide de altura tu cabecera (en css)
    y fijate cuanto mide de altura tu logotipo (en html)

    debe ser igual o menor que la altura de cabecera
    saludos

    Hola
    Tengo otro problema diferente, que no se si tengo que exponerlo en otro sitio o si aqui vale. (soy nuevo en esto de los foros)
    Te cuento, lo tengo todo ok, pero como lo estaba haciendo en el trabajo, me he copiado los ficheros y me lo he instalado tambien en casa.
    Al abrirlos en el HTML-Kit se ve todo correcto, pero cuando lo paso a la carpeta de inernet, es como si no se relacionara el html con el fichero css correspondiente y no toma ningún atributo ni lee lo que hay en la carpeta objetos solo lee el html. ¿donde me equivoco?
    Si no es aqui donde debo exponer esto me lo dices, poco a poco con ayuda todo se aprende.

    Novedades

    En el HTML-Kit no se ve bien con el "preview"(en la carpeta de internet en la otra si) ni con Mozilla, pero en Explorer funciona correctamente ¿....?
    Voy a seguir como si nada mientras me das la solución.
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    la carpeta azul solo es para subir o bajar documentos de la red
    peeero no para hacer vista previa

    jeje

    no hagas vista previa de la azul, porque ahi no toma los estilos
    :wink:
    santoximo · · Solicitar retirada
    Yaneth escribió:la carpeta azul solo es para subir o bajar documentos de la red
    peeero no para hacer vista previa

    jeje

    no hagas vista previa de la azul, porque ahi no toma los estilos
    :wink:

    De verdad que te estoy cogiendo aprecio, siempre apareces cuando te necesito jajaja....
    Ahora ya se porque no lo veo en la vista previa de la capreta azul ¿pero que pasa con Mozilla? Tampoco se ve bien, sin embargo en Explorer va perfecto y eso que acabo de empezar con la leccion cuatro.
    Bueno, voy a tomar un descansito que hay que ir a hacer la compra, no solo de html y css vive el hombre jajaja
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    verás que en cuanto regreses miras el error

    si no es asi, nos das la url para verlo


    que tampoco somos adivinos jeje
    saludos
    santoximo · · Solicitar retirada
    Yaneth escribió:verás que en cuanto regreses miras el error

    si no es asi, nos das la url para verlo


    que tampoco somos adivinos jeje
    saludos

    http://cosasdeguille.mywebcommunity.org/plantilla.html

    Me he permitido la licencia de cambiar el logotipo.
    Mírala con Mozilla u otro navegados que no sea Explorer (yo no lo he comprobado con otros).
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    mmm

    no puedo ver tu pagina

    mejor pega aqui de nuevo html y css

    sorry

    saludos
    santoximo · · Solicitar retirada
    Yaneth escribió:mmm

    no puedo ver tu pagina

    mejor pega aqui de nuevo html y css

    sorry

    saludos

    Bueno, tu lo has pedido, ahí va.

    -html-

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Page title</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">

    <div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>



    <div id="contenido">
    <div id="menu"> <h1>Título de Sección 1</h1>

    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4

    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>

    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</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 id="curva-inferior"></div>
    </div>
    </body>
    </html>

    -css-

    indent:0px ; mar* {text-indent:0px ; 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 ; height:85px}
    #logotipo {background-color: white ; width:480px ; float:left }
    #publicidad {background-color: white ; width:318px ; float:right; margin-top:20px}

    #navegacion {background-color: gray; border: black 1px solid; heigt:20px;height:20px}
    #navegacion li {float:left; list-style:none ; margin: 0px 30px 0px 30px }
    #navegacion ul { margin-left: 170px }
    #contenido {background-color: orange; border-left: black 1px solid ; border-right: black 1px solid ;margin top: 0px}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom:5px}
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:15px;padding-top:12px; background-image: url(objetos/menu-curva-superior.gif)}
    #pie {border-left: black 1px solid ; border-right: black 1px solid ; border-top:black 1px solid ; height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float:left ; width:150px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px }

    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}
    #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 }

    Casi me sabe mal hacerte leer todo esto....

    Un saludo
    • El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    ahora... te falta cerrar div pie

    <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>


    saludos
    • santoximo · · Solicitar retirada
    Yaneth escribió:ahora... te falta cerrar div pie

    <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>


    saludos

    • :oops: es cierto, ese fallo lo habia buscado durante bastante tiempo, era el que me hacia que en el pie no salieran correctamente los bordes.
    Menos mal que estas ahí....
    Pero esto no soluciona el que no se vea en el Mozilla ¿que más me falta?

    un saludo
    El que la sigue la consigue.
    moimuá · · Solicitar retirada
    Hola santoximo.

    Suprime en la primera línea de código de tu hoja de estilos lo escrito de color rojo: indent:0px ; mar* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

    En la siguiente línea de código:

    #menu h1 {text-decoration:none ; font-size:15px;padding-top:12px; background-image: url(objetos/menu-curva-superior.gif)}

    cambia curva por parte.

    Yo veo tu web ejemplo a través de Mozilla Firefox.

    Saludos.
    santoximo · · Solicitar retirada
    moimuá escribió:Hola santoximo.

    Suprime en la primera línea de código de tu hoja de estilos lo escrito de color rojo: indent:0px ; mar* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

    En la siguiente línea de código:

    #menu h1 {text-decoration:none ; font-size:15px;padding-top:12px; background-image: url(objetos/menu-curva-superior.gif)}

    cambia curva por parte.

    Yo veo tu web ejemplo a través de Mozilla Firefox.

    Saludos.

    Gracias por tu respuesta moimuá.
    He probado a quitar la tabulacion(text-indent) y no he conseguido que se vea bien en Mozilla, pero se ha movido todo, con lo cual lo he vuelto a poner.
    Lo de curva y parte, es por que le cambie el nombre de la imagen y en vez de cambiarla otra vez en la carpeta de objetos lo he cambiado en la hoja de estilos, pero esto sale bien.

    ¿tu lo ves bien en Mozilla?

    Sigo adelante, ya se solucionara.
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    esto es lo unico que debes quitar

    indent:0px ; mar

    de la primera linea

    saludos
    santoximo · · Solicitar retirada
    Yaneth escribió:esto es lo unico que debes quitar

    indent:0px ; mar

    de la primera linea

    saludos

    Hola

    Veamos, he quitado lo que decis y queda tal que asi:

    * {text-gin:0px ; padding:0px ; border:0px}

    Con esto no consigo que se vea bien en Mozilla, pero consigo que el contenido se separa de la navegacion y del pie. Y que el borde se haga discontinuo, mejor mirarlo con Explorer que se ve tal cual.

    http://cosasdeguille.mywebcommunity.org/plantilla.html

    A mi esto de "text-gin" se me hace raro, pero como el que no sabe es como el que no ve, en fin decirme que esta pasando...
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    va de nuevo

    esto es lo que tu tenias en el css

    indent:0px ; mar* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

    lo unico que te sobra es lo rojo

    dond eesta eso de


    {text-gin:0
    ???, yo no lo veo
    santoximo · · Solicitar retirada
    Yaneth escribió:va de nuevo

    esto es lo que tu tenias en el css

    indent:0px ; mar* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

    lo unico que te sobra es lo rojo

    dond eesta eso de


    {text-gin:0
    ???, yo no lo veo

    Bueno, bueno, como estoy....
    Lo que ocurria es que me habia ofuscado y tenia escrito un pedazo mas de codigo, posiblemente de tanto cortar y pegar, y no os habia comprendido lo que me estabais diciendo.
    Resumen: que lo que yo estaba haciendo era una jilip......

    De todas formas ¿habeis visto la pagina? se me ha ido un poco, con paciencia le dare un repaso, haber que he hecho mal.

    Voy a por la lección cinco.
    El que la sigue la consigue.
    Yaneth · · Solicitar retirada
    para volverla a ver
    necesitas volver a pegar los codigos.....
    asi sabremos que quitaste, que pusiste y que te falta

    no temas pegarlos una y otra vez, que no los leemos asi como tal
    los paso a mi programa para ver los errores en vivo y a todo color

    jeje

    saludos