Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 9 de 9

Tema: Espacio no deseado entre dos capas div

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    26 dic, 10
    Mensajes
    6
    Poder de Reputación
    0

    Question Espacio no deseado entre dos capas div

    Hola qué hay!

    Estoy intentando hacer mi primera página web con el HTML-Kit después de haber completado el curso "Paso a paso" y casi nada más empezar ya tengo una problema que no sé cómo resolver: me queda un espacio pequeño pero indeseado entre la capa del logotipo y la capa navegación.
    Estas dos capas (con fondo blanco) están "encima" de la capa cabecera (con fondo gris) y salen algo separadas de tal modo que entre ellas se ve un espacio en gris que no quiero. Me gustaría que se juntasen de manera que el logotipo parezca estar fusionado con la capa navegación.
    Os dejo una captura de la pantalla y los códigos html y css que he usado.
    Muchas gracias de antemano!

    Código 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>
    <title>Curvados Travet. Curvado de tubos y perfiles metálicos.</title>
    <link rel="stylesheet" href="estilo.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="encabezamiento"> Tel: 91 676 56 03</div>
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objetos/logo-travet.jpg" height="43" width="174" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    <div id="navegacion">
    <ul>
    <li><a href="empresa.html">La empresa</a></li><li><a href="curvados.html">Tipos de curvado</a></li><li><a href="trabajos.html">Trabajos</a></li><li><a href="noticias.html">Noticias</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="localizacion.html">Localización</a></li>
    </ul>
    </div>
    </div>
    <h1>TRAVET</h1>
    <p>Empresa dedicada al curvado de tubos y perfiles metálicos por conformación en frío.<p>
    <p>Con más de 50 años de experiencia y gracias al esfuerzo y dedicación de nuestros
    profesionales, TRAVET es una empresa líder del sector caracterizada por ofrecer la máxima
    calidad en sus trabajos y soluciones efectivas a cualquier clase de curvado.</p>
    </div>
    </body>
    </html>


    Código CSS

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {background-color: #63B8FF ;
    text-align: center ;
    font-family: arial ;
    font-size: 14 px}


    h1 {font-size: 1.2em; color:white ; font-weight: bold ; font-style: italic ; text-decoration: none ;
    text-align: center}
    h2 {font.size: 1.1em; color:white ; font-weight: bold ; text-decoration: none ;
    text-align: center}

    #global {width:800px }
    #encabezamiento {background-color: #63B8FF ; text-align: right ;
    font: italic ; font-size: 12 px}

    #cabecera {background-color: gray ; height:43px }

    #logotipo {background-color: white ; float:left }
    #navegacion { margin: 23px 0px 0px 0px ; background-color: white ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 2px 12px 0px 12px }
    #navegacion ul {margin-left: 30px}
    a {color: gray ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color: #63B8FF ; font-weight: bold }
    a:active {}
    Imágenes Adjuntadas Imágenes Adjuntadas

  2. #2
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,344
    Poder de Reputación
    74
    veamos los div

    <div id="global">
    <div id="encabezamiento"> Tel: 91 676 56 03</div>
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objetos/logo-travet.jpg" height="43" width="174" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    <div id="navegacion">
    <ul>
    <li><a href="empresa.html">La empresa</a></li><li><a href="curvados.html">Tipos de curvado</a></li><li><a href="trabajos.html">Trabajos</a></li><li><a href="noticias.html">Noticias</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="localizacion.html">Localización</a></li>
    </ul>
    </div>

    </div>
    <h1>TRAVET</h1>
    <p>Empresa dedicada al curvado de tubos y perfiles metálicos por conformación en frío.<p>
    <p>Con más de 50 años de experiencia y gracias al esfuerzo y dedicación de nuestros
    profesionales, TRAVET es una empresa líder del sector caracterizada por ofrecer la máxima
    calidad en sus trabajos y soluciones efectivas a cualquier clase de curvado.</p>
    </div>
    </body>
    </html>

    que debe estar dentro de cabecera?????
    logotipo y navegacion??????

    si es asi, cabecera debe ser suficientemente alto, para que esto entre ahi

    dentro de que div, metiste el texto??????

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    28 feb, 11
    Ubicación
    Venezuela
    Mensajes
    27
    Poder de Reputación
    17
    yo use por un buen tiempo el html-kt sin embargo asia el trabajo mas duro yo te recomiendo que uses adobe o macromedia dreamweaver hacer hay una pagina web es demaciado facil y casi no hay que tocar el codigo html recuerda descargarte un manual de dreamweaver porque si no te bolveras un ocho

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    26 dic, 10
    Mensajes
    6
    Poder de Reputación
    0
    Hola Yaneth! Lo primero gracias por tu ayuda.

    Dentro de la cabecera deben estar logotipo y barra de navegación. El problema no es la altura ya que el logotipo y el menú caben sin problema. El texto del menú de navegación lo he metido dentro de la div "navegación", que jutno a la div "logotipo" están dentro de la div"cabecera".

    El problema es que la div "logotipo" y la div "navegación" se me quedan separadas horizaontalmente por lo que se ve entre ellas un espacio en gris (colo de fondo de la capa cabecera) que no quiero.

    Gracias otra vez y un saludo!

  5. #5
    Recien Llegado! Merodeador
    Fecha de Ingreso
    26 dic, 10
    Mensajes
    6
    Poder de Reputación
    0
    Qué hay Rogovil!

    Gracias por tu interés y tu consejo. Tengo pensado usar el Dreamweaver más adelante, pero primero quería entrenar con el HTML-Kit un par de webs para ver más tarde la diferencia con el DW.

    Un saludo!

  6. #6
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,344
    Poder de Reputación
    74
    hola de nuevo

    he copiado y pegado tus codigos en mi programa

    en la cabecera, si en efecto cabe perfecto el contenido solo que a navegacion
    no le pusiste ancho fijo, y el div queda como montado debajo de logotipo, al ponerle ancho fijo, debes tomar en cuenta el ancho de logotipo, y ponerle float left
    asi lo puse yo
    #navegacion { margin: 23px 0px 0px 0px ; background-color: #00CCCC ; height:20px; width:626px; float:left}

    luego me dió otro problema, y es que, los enlaces no caben en ese espacio, tuve que reducrle un poco aqui

    #navegacion ul {margin-left: 10px}
    con eso se ajustaron perfecto solo que el problema con la imagen no se solucionó que es lo que buscamos
    le agregué esta linea que te falta

    img {text-decoration: none}

    y aun asi no se soluciona,
    le cambié la imagen por una mia, dejando las propiedades de ancho y alto, y con eso ya no se vé el margen que tanto te molesta
    mira la imágen para que compruebes que no es ella quien tiene esa sombra

    de todas formas seguiré haciendo pruebas, pero me ayudaria muchisimo tener tu imágen
    si puedes subir tu web a la red, nos das el enlace

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  7. #7
    Recien Llegado! Merodeador
    Fecha de Ingreso
    26 dic, 10
    Mensajes
    6
    Poder de Reputación
    0
    Gracias Yaneth!
    Esta tarde seguiré tus pasos y corregiré los fallos, que ahora estoy en el trabajo.
    Lo de subir la web lo lo puedo hacer en un servidor gratis no?

    Un saludo!

  8. #8
    Recien Llegado! Merodeador
    Fecha de Ingreso
    26 dic, 10
    Mensajes
    6
    Poder de Reputación
    0
    Hola Yaneth!

    Ya está solucionado! Con poner el ancho fijo a 626 y el float:left ya me sale como quiero! Muchísimas gracias!!

    Un saludo

  9. #9
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,344
    Poder de Reputación
    74
    un placer... hasta la proxima
    ______________________________________

    reparacion de rines


    _____________________________________

Temas Similares

  1. Espacio no deseado entre dos capas en google chrome
    Por Tellina en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 3
    Último Mensaje: 28/03/2012, 17:58
  2. Espacio entre los parrafos
    Por kruba en el foro Foro General
    Respuestas: 10
    Último Mensaje: 14/12/2009, 16:27
  3. Espacio entre DIVS
    Por aguila_393 en el foro Webs con Capas o DIVS
    Respuestas: 1
    Último Mensaje: 21/05/2008, 23:23

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •