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á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"> </p>
<p align="justify"><span class="PAZUL">BASICO</span></p>
<p align="justify">Para ser un ganador del poker
Primero debes saber lo básico.</p>
<p align="justify"> </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"> </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> </p>
</div>
</div>
<div id="pie"><p>Copyright © 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
