Ubicar bien el texto en el div

[x_aleprincess]

Hola de nuevo chicos!

Ya estoy terminando mi primera pagina web. Ahora me estoy dedicando a colocarle el formato al texto.

Tengo un div superior en donde coloque un mini menu. Al colocar al menu el texto que le corresponde no tuve problema.

Tuve problema despues de colocarle el tag de <p> en cada sección. Las letras se me salieron de lugar y no se como corregirlo esto.

Es lo que esta en el circulo rojo, las flechas rojas indican en donde deben de estar posicionadas esas letras.




Les dejo la web:

http://www.mediafire.com/?tuwj178ednuir1l

O si lo prefieren les dejo los estilos:

Código PHP:

  @charset "utf-8"; 
#contenedor { 
    width: 998px; 
    margin-right: auto; 
    margin-left: auto; 
    overflow: hidden; 
    background-image: url(../img/bg2.jpg); 
    background-repeat: repeat; 
    border-left: 1px solid #ffffff; 
    border-right: 1px solid #ffffff; 
} 
body { 
    margin: 0px; 
    background-color: #99bcd5; 
} 
#contenedor #cabecera #contenedor_izquierdo { 
    width: 178px; 
    margin-left: 4px; 
    float: left; 
    margin-top: 210px; 
} 
#contenedor #cabecera #contenedor_central { 
    width: 625px; 
    margin-left: 4px; 
    float: left; 
    margin-top: 200px; 
} 
#contenedor #cabecera #contenedor_derecho { 
    width: 178px; 
    margin-left: 4px; 
    float: left; 
    margin-top: 210px; 
} 
 
 
#contenedor #cabecera { 
    background-image: url(../img/header.jpg); 
    background-repeat: no-repeat; 
    overflow: hidden; 
    background-position: center top; 
    width: 998px; 
    background-attachment: scroll; 
} 
#contenedor #cabecera #contenedor_central #con_top { 
    background-image: url(../img/cont_top.gif); 
    background-repeat: no-repeat; 
    height: 37px; 
    width: 623px; 
    float: left; 
    background-attachment: scroll; 
    background-position: center bottom; 
    margin-right: 1px; 
    margin-left: 1px; 
} 
#contenedor #cabecera #contenedor_central #con_bottom { 
    background-attachment: scroll; 
    background-image: url(../img/cont_bottom.gif); 
    background-repeat: no-repeat; 
    float: left; 
    height: 10px; 
    width: 623px; 
    background-position: center top; 
    margin-right: 1px; 
    margin-left: 1px; 
    margin-top: 0px; 
    padding-top: 0px; 
} 
#contenedor #cabecera #contenedor_izquierdo #nav_menu { 
    background-attachment: scroll; 
    background-image: url(../img/nav_menu.gif); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    float: left; 
    height: 59px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
} 
#contenedor #cabecera #contenedor_izquierdo #nav_top { 
    background-attachment: scroll; 
    background-image: url(../img/nav_top.gif); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    float: left; 
    height: 59px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
    margin-top: 20px; 
} 
#contenedor #cabecera #contenedor_derecho #nav_face { 
    background-attachment: scroll; 
    background-image: url(../img/nav_face.gif); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    float: left; 
    height: 64px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
} 
#contenedor #cabecera #contenedor_derecho #nav_others { 
    background-attachment: scroll; 
    background-image: url(../img/nav_others.gif); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    float: left; 
    height: 64px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
    margin-top: 20px; 
} 
#contenedor #cabecera #contenedor_derecho #nav_friends { 
    background-attachment: scroll; 
    background-image: url(../img/nav_friends.gif); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    float: left; 
    height: 64px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
    margin-top: 20px; 
} 
#contenedor #cabecera #contenedor_izquierdo #nav_links { 
    background-attachment: scroll; 
    background-image: url(../img/nav_links.gif); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    float: left; 
    height: 59px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
    margin-top: 20px; 
} 
.nav_bottom { 
    background-attachment: scroll; 
    background-image: url(../img/nav_bottom.gif); 
    background-repeat: no-repeat; 
    background-position: center top; 
    float: left; 
    height: 10px; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
} 
.nav_bg { 
    background-attachment: scroll; 
    background-image: url(../img/nav_bg.gif); 
    background-repeat: repeat-y; 
    background-position: center center; 
    float: left; 
    width: 176px; 
    margin-right: 1px; 
    margin-left: 1px; 
} 
#contenedor #cabecera #contenedor_central #con_mid { 
    background-image: url(../img/cont_mid.gif); 
    background-repeat: repeat-y; 
    width: 623px; 
    float: left; 
    background-attachment: scroll; 
    background-position: center center; 
    margin-right: 1px; 
    margin-left: 1px; 
} 
 
#contenedor #footer  { 
    background-image: url(../img/footer.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
    height: 175px; 
    width: 998px; 
} 
 
#contenedor #cabecera #top_nav { 
    height: 37px; 
    width: 506px; 
    margin-left: 485px; 
    margin-right: 7px; 
    float: left; 
    margin-top: 0px; 
} 
#contenedor #cabecera #top_nav #top_nav_home { 
    float: left; 
    width: 106px; 
    height: 24px; 
    margin-left: 5px; 
} 
#contenedor #cabecera #top_nav #top_nav_forums { 
    float: left; 
    width: 106px; 
    height: 24px; 
    margin-left: 5px; 
} 
#contenedor #cabecera #top_nav #top_nav_cp { 
    float: left; 
    width: 106px; 
    height: 24px; 
    margin-left: 5px; 
} 
#contenedor #cabecera #top_nav #top_nav_client { 
    float: left; 
    width: 106px; 
    height: 24px; 
    margin-left: 5px; 
}  
   

Código PHP:

  @charset "utf-8"; 
#top_nav_home p { 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: normal; 
    text-align: center; 
    padding-top: 0px; 
} 
#top_nav_forums p { 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: normal; 
    text-align: center; 
    padding-top: 0px; 
} 
#top_nav_cp p { 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: normal; 
    text-align: center; 
    padding-top: 0px; 
} 
#top_nav_client p { 
    font-size: 16px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-weight: normal; 
    text-align: center; 
    padding-top: 0px; 
}  
   

Cualquier ayuda como siempre sera apreciada. Gracias!

[navegantes]

Hola.

Bueno para empezar no veo la estructura del HTML, pero ya te puedo adelantar que para un menú mejor usa una lista en vez de parrafo

Código HTML:

<ul>
<li>home</li>
<li>forums</li>
<li>control panel</li>
<li>client</li>
</ul>
 

En segundo lugar estas juntando selectores, pero no se si para aplicarles las misma regla (entonces les faltaría una coma entre cada selector) o porque son selectores descendientes, lo cual no se si es necesario del todo...

Ayudaría que pusiera el código HTML para ver sobre que aplicas esas reglas.

[x_aleprincess]

Hola Navegante. Hice lo que me pediste y no me funciono. Te lo dejare el codigo para que lo veas.

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=utf-8" />
<title>Documento sin título</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/texto.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenedor">
  <div id="cabecera">
    <div id="top_nav">
      <div id="top_nav_home">
        <p>Home</p>
      </div>
      <div id="top_nav_forums">
        <p>forums</p>
      </div>
      <div id="top_nav_cp">
        <p>Control Panel</p>
      </div>
      <div id="top_nav_client">
        <p>Client</p>
      </div>
    </div>
    <div id="contenedor_izquierdo">
      <div id="nav_menu"></div>
      <div class="nav_bg">Colocar aquí el contenido para  class "nav_bg"</div>
      <div class="nav_bottom"></div>
      <div id="nav_top"></div>
      <div class="nav_bg">Colocar aquí el contenido para  class "nav_bg"</div>
      <div class="nav_bottom"></div>      
      <div id="nav_links"></div>
      <div class="nav_bg">Colocar aquí el contenido para  class "nav_bg"</div>
      <div class="nav_bottom"></div>
    </div>
    <div id="contenedor_central">
      <div id="con_top">Titulo de con_top"</div>
      <div id="con_mid">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor sapien lorem. Etiam porttitor, risus vitae mollis malesuada, urna erat sagittis nulla, vehicula commodo purus dolor vitae urna. Maecenas lobortis nunc dapibus mi consectetur molestie. Nulla mattis velit quis erat euismod pretium. In vel libero odio. Etiam pretium eleifend euismod. Vivamus ultrices, magna ac ornare placerat, sapien sem tempor magna, non pretium diam arcu id mauris. Nullam facilisis nunc vel justo feugiat scelerisque. Fusce metus ligula, condimentum ut venenatis vitae, tristique ut dui. Etiam adipiscing cursus diam nec lacinia.

Aliquam condimentum nunc non arcu lacinia convallis. Nam laoreet tortor vel ipsum sagittis placerat. Nulla nisi nulla, cursus eget vehicula sagittis, fringilla in est. Nam et turpis lectus. Donec eget mattis erat. Morbi fermentum augue et orci rutrum pulvinar. Proin id ipsum lacus. Ut tellus leo, facilisis facilisis scelerisque eget, consectetur ut nisi. Curabitur iaculis tempor sollicitudin. Sed mollis sodales sem ut dictum. Sed laoreet auctor ultricies. Suspendisse tempus felis vel velit fermentum sed porta massa pulvinar. Duis pharetra justo sed lorem elementum vestibulum feugiat tortor aliquam.

Integer sed mi augue, in volutpat tortor. Integer ligula elit, pulvinar dapibus vestibulum suscipit, hendrerit at est. Pellentesque ultrices leo risus. Aenean ipsum magna, fermentum id malesuada nec, lacinia semper neque. Integer commodo nunc vel justo dictum eget luctus ante consectetur. Integer vitae pharetra lorem. Proin lectus orci, cursus ut gravida at, sagittis commodo metus. Morbi suscipit convallis fermentum. Praesent eu velit id eros varius rutrum. Morbi eleifend libero vitae orci semper cursus. Nullam ac tincidunt enim. Pellentesque id odio risus. Pellentesque ullamcorper ante a elit volutpat aliquam. Praesent suscipit, ipsum eu pulvinar eleifend, tortor dolor facilisis elit, eu ullamcorper ipsum elit varius erat.</p>
      </div>
      <div id="con_bottom"></div>
    </div>
    <div id="contenedor_derecho">
      <div id="nav_face"></div>
      <div class="nav_bg">Colocar aquí el contenido para  class "nav_bg"</div>
      <div class="nav_bottom"></div>
      <div id="nav_others"></div>
      <div class="nav_bg">Colocar aquí el contenido para  class "nav_bg"</div>
      <div class="nav_bottom"></div>
      <div id="nav_friends"></div>
      <div class="nav_bg">Colocar aquí el contenido para  class "nav_bg"</div>
      <div class="nav_bottom"></div>
    </div>
  </div>
  <div id="footer">Colocar aquí el contenido para  id "footer"</div>
</div>
</body>
</html> 

[navegantes]

No, no hiciste lo que te dije

No cambiaste los <div> de tu menu por una lista jeje

El <div id="top_nav"> tiene que desaparecer y sustituirlo por esto

Código HTML:

<ul id="top_nav">  
      <li id="top_nav_home">Home</li>
      <li id="top_nav_forums">forums</li>
      <li id="top_nav_cp">Control Panel</li>
      <li id="top_nav_client">Client</li>
</ul>
 

Para que no te salga el punto de la lista usa esta regla

Código CSS:

#top_nav{ list-style:none;}
 

Sería cuestión de ajustar un poco las cosas, pero creo que esto es lo que pedías.

El problema radica en el <p> que ponías delante de cada menú. Solo quitando eso se arreglaba, pero ya que estamos cambiando cosas, te cambio un poco más.

Piensa que el navegador tiene su propia hoja de estilos interna, así que todo aquello que no controles manualmente con tus propias reglas el navegador se encarga de gestionarlo. En este caso <p> tiene margenes a sus lados y por eso se desplaza. Piensa también que las etiquetas tienen su función. Una <p> se pensó para marcar párrafos no listas. Y un menú es una lista de cosas.

Tienes muchos <div> anidado y eso puede ser una locura, cuidado porque al final te puedes volver loco.
Y otra cosa más he visto que llamas a dos hojas de estilo por separado.Por los nombres diría que es para centrarte en lo que hay en cada una. Me parece bien, pero cuando la web esté lista mejor junta todo en una sola hoja.
El navegador no tendrá que revisar dos ficheros y a la larga es más cómodo gestionarlo. A no ser que sean miles de reglas entonces vale, pero por lo que he visto por el momento mejor todo en uno.

Espero que todo esto te sirva un poco de ayuda.

Ya que estamos... edito esto un poco.

Lo anterior estaba bien, pero usas demasiadas reglas para hacer una cosa. De la siguiente manera se simplifica todo mucho más:

Código HTML:

<ul id="top_nav">  
      <li>Home</li>
      <li>forums</li>
      <li>Control Panel</li>
      <li>Client</li>
    </ul>
 

Y mediante selectores descendientes:

Código CSS:

#top_nav li{
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    text-align: center;
    padding-top: 0px;
    float:left;
    margin-right:40px;
}
 

Todo el resto de reglas que tenias asignadas con tantos id puedes quitarlas. En este caso como es una lista todo se posiciona uno debajo del otro. Con float:left hace que todo se monte a la izquierda y margin-right le da un margen a la derecha sino todo saldría seguido.

Así la cosa queda más limpia todavía.

;)