Foros del Web » Creando para Internet » CSS »

problemas con menu y contenido

Estas en el tema de problemas con menu y contenido en el foro de CSS en Foros del Web. tengo una pagina y la he visto bien todo el tiempo hasta que la vi en un monitor mas ancho de lo normal y veo ...
  #1 (permalink)  
Antiguo 26/09/2010, 22:56
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
problemas con menu y contenido

tengo una pagina y la he visto bien todo el tiempo hasta que la vi en un monitor mas ancho de lo normal y veo que el menu y el contenido se van hacia la derecha dejando un espacio a la izquierda y no me gusta.

aca los codigos a ver si alguine me puede ayudar porque ando en pañales en eso del css.

Código:
<body> 
 
 
 
 
 
 
<div id="contenedor"> 
<div id="cabecera"><div id="imgcabecera"> 
  <div align="center"><img src="images/cabecera.gif" width="526" height="180" /></div> 
</div> 
<ul style="list-style-type:none;"> 
   <li style="float:left;"><a href="index.html">Home</a></li> 
   <li style="float:left;"><a href="basico.html">Básico</a></li> 
   <li style="float:left;"><a href="variantes.html">Variantes</a></li> 
   <li style="float:left;"><a href="estrategia.html">Estrategia</a></li> 
   <li style="float:left;"> <a href="glosario.html">Glosario</a>   </li> 
</ul> 
</div> 
 
 
 
 
</div> 
<div id="menu"> 
<div id="imaglogo"><img src="images/logo-nuevo.gif" width="250" height="188" /></div> 
 
<h1>BASICO</h1> 
<h3><a href="combinaciones.html">COMBINACIONES</a></h3> 
<h3><a href="cuando jugar.html">CUANDO JUGAR</a></h3> 
<h3><a href="practica gratis.html">PRACTICAR GRATIS </a></h3> 
<h3><a href="tipos jugadores.html">TIPOS DE JUGADORES</a> </h3> 
<h3><a href="probabilidades.html">PROBABILIDADES</a></h3> 
<h3><a href="posicion.html">POSICION</a></h3> 
<h3><a href="tilt.html">TILT</a></h3> 
 
 
<h1>ESTRATEGIA</h1> 
<h3><a href="tells.html">LENGUAJE CORPORAL</a> </h3> 
<h3><a href="bluffear.html">BLUFFEAR</a></h3> 
 
<h1>VARIANTES</h1> 
<h3><a href="texas holdem.html">TEXAS HOLD'EM</a> </h3> 
<h3><a href="omaha.html">OMAHA</a></h3> 
<h3><a href="5 cards draw.html">FIVE CARDS DRAW</a> </h3> 
<h3><a href="seven card stud.html">SEVEN CARD STUD</a> </h3> 
<h3><a href="razz.html">RAZZ</a></h3> 
<br /> 
<br /> 
<div id="menu applet"> 
<applet code="Dgclock.class" CODEBASE="http://pokersuburbano.com/java-sys" width="100" height="30"> 
      <param name="TimeFormat" value="%I"> 
   <param name="ShowDate" value="no"> 
      <param name="ShowFrame" value="no"> 
      <param name="fg" value="white"> 
      <param name="bg" value="black"> 
    </applet></div> 
<h4><br /> 
  
  <span class="Estilo1"><a href="http://www.pokersuburbano.com:2095/horde/login.php?new_lang=es_ES">Revisar Correo electrónico<br /> 
  <br /> 
  </a></span></h4> 
<h4><span class="Estilo1"><a href="privado/privado.html?new_lang=es_ES">Zona restringida</a></span><br /> 
  <br /> 
</h4> 
<h4><span class="Estilo1"><a href="contactenos.html?new_lang=es_ES">Cont&aacute;ctenos</a></span><br /> 
  <br /> 
</h4> 
<h4><span class="Estilo1"><a href="docs/Insider_Secrets_of_Online_Poker_-_Theodore_Cage.zip?new_lang=es_ES"><br /> 
</a></span></h4> 
<br /> 
 
<a href="vip/especial.html"></a></div> 
 
<div id="contenido"> 
  <div id="flashp"> 
    <p> 
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="100"> 
        <param name="movie" value="images/principal 2.swf" /> 
        <param name="quality" value="high" /> 
        <embed src="images/principal 2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="100"></embed> 
      </object> 
    </p> 
    <p>Bienvenidos a Poker Suburbano, 
      el sitio para conocer y aprender acerca de este gran juego.</p> 
    <p align="justify">&nbsp;</p> 
    <p align="justify"><span class="PAZUL">BASICO</span></p> 
    <p align="justify">Para ser un ganador del poker
      Primero debes saber lo b&aacute;sico.</p> 
    <p align="justify">&nbsp;</p> 
    <p align="justify"><span class="PAZUL">ESTRATEGIA</span></p> 
    <p align="justify">Phil Hellmuth no gano sus 11 brazaletes por ser el mas suertudo del mundo. Poker es un juego de estrategia</p> 
    <p align="justify">&nbsp;</p> 
    <p align="justify"><span class="PAZUL">VARIANTES</span></p> 
    <p align="justify">Aprende las diferentes variantes de poker<br /> 
      y seras como los mejores del mundo.</p> 
      
    <p>&nbsp;</p> 
  </div> 
</div> 
<div id="pie"><p>Copyright &copy; 2010 pokersuburbano.com</p> 
</div> 
</div> 
 
</body> 
</html>

Código:
#contenedor {
	width: 980px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	
}
#imgcabecera {
}
ul {
	list-style-type: none;
	margin-top: 5px;
	margin-right: 1px;
	margin-bottom: 0px;
	margin-left: 5px;
	color: #FFFFFF;
	text-decoration: none;
}
li {
	margin-left: 60px;
	color: #999999;
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-right: 20px;
	margin-top: 0px;
	font-size: 20px;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
	list-style-position: inside;
}
a {
	color: #FFFFFF;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	font-size: 26px;
	padding-right: 0px;
	background-color: #24211C;
}




#cabecera {
	background-color: 005AA6;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center center;
	list-style-type: none;
	margin: auto;
}

body {
	background-color: #24211C;
	background-image: url(images/fondo-ciudad.gif);
	background-repeat: repeat-x;
	min-width: 980px;
}
#flashp {
	margin-top: 180px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#imaglogo {
	margin-top: 180px;
	margin-right: 0px;
	margin-left: 30px;
}
#pie p {
	color: #FFFFFF;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

h1 {
	color: #0000CC;
	margin-top: 30px;
}



#menu {
	float: right;
	width: 280px;
	margin-right: 50px;
}
.PAZUL {
	color: #FFFFFF;
	background-color: #052A70;
	margin-top: 30px;
}
#menu a {
	font-size: 18px;
}


#contenido {
float: right;
width: 600px;
}
#pie {
	clear: both;
	background-image: url(images/img06.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
	background-attachment: scroll;
}
#menu  h1 {
	color: #FFFFFF;
	border: 0;
}
#menu h2 {
	list-style-image: none;
	list-style-type: none;
	background-color: #005AA6;
}
#menu li {
	left: 0px;
	right: 0px;
	margin-right: 10px;
	color: #FFFFFF;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 5px;
}
#menu ul {
	margin-right: 10px;
	margin-top: 0px;
}
#menu  h1 {
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	background-color: #052A70;
	font-size: 24px;
	list-style-image: none;
	list-style-type: none;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-right: 0px;
	margin-right: 30px;
	margin-left: 23px;
	margin-top: 40px;
	background-position: center;
}
#menu h3 {
	color: #FFFFFF;
	margin-left: 23px;
	margin-top: 10px;
	margin-bottom: 0px;
}
img {
	margin-left: 0px;
}
#contenido #flashp img {
	margin-right: 0px;
	padding-left: 100px;
}



#contenido #flashp h1 {
	color: #FFFFFF;
	margin-left: 100px;
	background-color: #052A70;
	margin-right: 159px;
}
p {
	margin-right: 100px;
	margin-left: 100px;
	color: #FFFFFF;
	font-size: 24px;
	margin-top: 30px;
}


marc {
	color: #009999;
}
#menu applet {
	padding-left: 20px;
}
#menu input {
	padding-left: 0px;
	margin-left: 20px;
}
#menu .Estilo1 a {
	margin-left: 20px;
}
menuh {
	width: 980px;
}


* {
padding:0;
margin:0 auto;


y aca un ejemplo de como se ve
  #2 (permalink)  
Antiguo 27/09/2010, 06:27
Avatar de igualacero  
Fecha de Ingreso: septiembre-2010
Mensajes: 296
Antigüedad: 7 años, 2 meses
Puntos: 16
Respuesta: problemas con menu y contenido

Hola buenas, a mi me sucedió algo parecido y me funcionó el colocar en la capa contenedora solo
Cita:
margin: 0 auto;
  #3 (permalink)  
Antiguo 27/09/2010, 08:14
Avatar de Rubenqlc  
Fecha de Ingreso: agosto-2009
Ubicación: Las Palmas (Islas Canarias-España)
Mensajes: 191
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: problemas con menu y contenido

Buenas.

Amigo, tienes en "menu" y en "contenidos", float: right, es normal que se te vaya a la derecha.

Prueba a poner en el contenido a float: left, y juega con los márgenes.

Saludos,
__________________
Diseño Web

Desarrollos en Joomla, en Webs con Posicionamiento Web
  #4 (permalink)  
Antiguo 28/09/2010, 08:22
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: problemas con menu y contenido

Cita:
Iniciado por Rubenqlc Ver Mensaje
Buenas.

Amigo, tienes en "menu" y en "contenidos", float: right, es normal que se te vaya a la derecha.

Prueba a poner en el contenido a float: left, y juega con los márgenes.

Saludos,

gracias por revisar los codigos!

el ejemplo que puse en la imagen es vista de un monitor de mas de 1078 de ancho

yo ya habia intentado eso y cuando lo veo en un monitor mas pequeño o normal se decuadra todo! como se puede hacer para que se vea igual en todas?
  #5 (permalink)  
Antiguo 28/09/2010, 08:26
Avatar de Rubenqlc  
Fecha de Ingreso: agosto-2009
Ubicación: Las Palmas (Islas Canarias-España)
Mensajes: 191
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: problemas con menu y contenido

Buenas de nuevo amigo.

Lo normal es que le des al body margin:0px auto; como te dice igualacero.

Luego ya dentro del body te creas los demás DIV.

Si tienes más dudas pregunta.

Saludos,
__________________
Diseño Web

Desarrollos en Joomla, en Webs con Posicionamiento Web
  #6 (permalink)  
Antiguo 28/09/2010, 09:00
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: problemas con menu y contenido

se le pone eso al body o la capa contenedora? o a los 2?
  #7 (permalink)  
Antiguo 28/09/2010, 09:05
Avatar de Rubenqlc  
Fecha de Ingreso: agosto-2009
Ubicación: Las Palmas (Islas Canarias-España)
Mensajes: 191
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: problemas con menu y contenido

Al body, así la capa contenedor de más de afuera está siempre centrada. Y le pondría un ancho de 1002 píxeles, para la resolución de 1024, ya que la mayoría de los monitores de los usuarios tienen esta resolución.

Saludos,
__________________
Diseño Web

Desarrollos en Joomla, en Webs con Posicionamiento Web
  #8 (permalink)  
Antiguo 28/09/2010, 21:50
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: problemas con menu y contenido

funciono perfecto! gracias masivas!
  #9 (permalink)  
Antiguo 29/09/2010, 08:25
Avatar de Rubenqlc  
Fecha de Ingreso: agosto-2009
Ubicación: Las Palmas (Islas Canarias-España)
Mensajes: 191
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: problemas con menu y contenido

Buenas amigo.

No hay de qué, para eso estamos.

Suerte con el proyecto.

Saludos,
__________________
Diseño Web

Desarrollos en Joomla, en Webs con Posicionamiento Web

Etiquetas: contenido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:35.