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

Tema: Problema con el menu del ejemplo con Divs

  1. #1
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    04 may, 12
    Ubicación
    Guayana, Venezuela
    Mensajes
    1
    Poder de Reputación
    0

    Problema con el menu del ejemplo con Divs

    Estoy haciendo el ejemplo de Divs de CCTW, por cierto quiero felicitar a su(s) creador(es) ya que han echo un trabajo genial.

    Bueno el problema es que al agregar texto a la capa de contenido mi menu se va al final de la capa, de la siguiente manera:

    imagen.jpg

    Mi codigo HTML es:

    Código HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento de plantilla</title>
    <link href="ePlantilla.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body id="global">
    	<div id="cabecera">Bienvenidos a mi Web</div>
        <div id="navegacion">Barra de Navegación</div>
        <div id="contenido">
    		<p>Esta será la zona principal de la web</p>
    		<p>Ya sabemos que gracias a la Hoja de Estilos podemos cambiar el tamaño de la letra de toda la web, podemos variar los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?</p>
    		<p>Ups, los párrafos se ven centrados y eso parece una poesia más que una web, je je je. Eso es por que le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado para todos los párrafos de la web. Si más tarde nos interesa alguno con otra alineación, lo crearemos en su momento.</p>
    		<div id="menu">
    			<ul> 
    				<li><a href="#">Enlace1</a></li>
    				<li><a href="#">Enlace2</a></li>
    				<li><a href="#">Enlace3</a></li>
    			</ul>
    		</div>
    	</div>
        <div id="pie">Este es el pié de página</div>
    </body>
    </html>

    Y mi codigo CSS es:

    Código:
    * {
    	margin:0px;
    	padding:0px;
    	border:0px;
    }
    body {
    	text-align:center
    }
    #global {
    	width: 800px;
    	margin: 4px auto;
    }
    #cabecera {
    	background-color: #FF33FF;
    }
    #navegacion {
    	background-color:gray;
    }
    #contenido {
    	background-color:orange;
    	width:800px;
    	float:left;
    }
    p{
    	text-align:justify;
    }
    #contenido p {
    	padding-top:5px;
    	padding-right:10px;
    	padding-bottom:5px;
    	padding-left:10px;
    	text-indent:15px;
    }
    #menu {
    	background-color:#FFFF00;
    	width: 150px;
    	float:left;
    	text-align:left;
    	margin-right:10px;
    }
    #menu li {
    	list-style:none;
    	margin-left: 6px;
    	margin-bottom:4px;
    	margin-top:4px;
    	margin-right: 0px;
    }
    #menu a {
    	display:block;
    	color:blue;
    	text-decoration:none;
    }
    #menu a:visited {
    	color:blue;
    	text-decoration:none;
    }
    #menu a:hover {
    	background-color:silver;
    }
    #pie {
    	background-color: brown;
    }
    Gracias por su ayuda.!

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Básicamente es porque tienes que escribir después y NO antes de:

    Código HTML:
    <div id="menu">
        <ul> 
            <li><a href="#">Enlace1</a></li>
            <li><a href="#">Enlace2</a></li>
            <li><a href="#">Enlace3</a></li>
        </ul>
    </div>
    Pruébalo y estará solucionado ;-)

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

  3. #3
    Me va gustando esto... Habitante Avatar de danny
    Fecha de Ingreso
    16 sep, 11
    Mensajes
    125
    Poder de Reputación
    13
    Lo de Web-Freelance esta bien, ademas creo que debes quitarle el float:left de #contenido y con eso quedaria perfecto. Saludos
    Última edición por danny; 05/05/2012 a las 00:38
    Es mejor que te odien por quien eres, a que te amen por quien no eres.
    Chat Gratis con Amigos ó Conocer y ligar con gente

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Cita Iniciado por danny Ver Mensaje
    Lo de Web-Freelance esta bien, ademas creo que debes quitarle el float:left de #contenido y con eso quedaria perfecto. Saludos
    No lo quites, no interfiere y puede dar problemas en IE ;-)

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

Temas Similares

  1. ¿Ejemplo con Divs o Ejemplo con Tablas?
    Por karril en el foro Foro General
    Respuestas: 2
    Último Mensaje: 12/04/2012, 13:53
  2. Tengo problema con el menu divs
    Por dsds88 en el foro Foro General
    Respuestas: 0
    Último Mensaje: 18/11/2011, 12:42
  3. Respuestas: 3
    Último Mensaje: 31/10/2011, 15:07
  4. Terminando Ejemplo con Divs
    Por virtualcomo en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 0
    Último Mensaje: 03/10/2011, 01:25
  5. Problema con la leccion 2 del tutorial Ejemplo con Divs
    Por 7th Hunter en el foro Webs con Capas o DIVS
    Respuestas: 0
    Último Mensaje: 04/08/2011, 17:37

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
  •