Hola, les cuento, estoy diseñando una web con CSS y html, ya la tenia casi casi terminada, solo faltaba poner un background y de pronto me aparece este error, al abrirla en el navegador puedo observar que el ancho de la web es extremadamente grande, el contenido esta centrado pero aparece la barrita de scroll horizontal y se hace demasiado grande, les pongo los codigos para que me puedan corregir si no os importa (posiblemente el codigo este un poco desordenador,quizas sobren cosas) muchas gracias.
CSS
Código:
body{
background-color:#CCCCCC;
}
#centrador{width: 100%;
text-align: center;
margin-top: 10px;
}
#contenedor{
width: 747px;
margin-left:auto;
margin-right:auto;
}
/*cabecera o header*/
#cabecera{
width: 100%;
background-color:#FFFFFF;
height: 500px;
margin-bottom: 10px;
background-image: url(imagenes/cabecera.png);
text-align: right;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 40px;
padding-top: 0px;
line-height: 0;
}
#contenido{
width: 100%;
background-color:white;
height: 1300px;
}
/*Propiedades del menu horizontal*/
#menuhorizontal {
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
font-size: 13px;
}
#menuhorizontal ul li {
list-style-type: none;
}
#menuhorizontal ul {
margin: 0;
padding: 0;
}
#menuhorizontal li {
float: left;
}
#menuhorizontal a {
text-decoration: none;
color: #000066;
display: block;
text-align: center;
padding-top: 10px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 9px;
border-width: 1px 1px 1px 0;
background-color: #CCCCCC;
border-top-color: #CCCCCC;
background-image: url(imagenes/menuhbtn.png);
}
#menuhorizontal a:hover {
background-color: #333333;
color: #000000;
border-color: #333333;
background-image: url(imagenes/menuhbtnhover.png);
}
#primero a {
background-color: #FFFFFF;
color: #000000;
border-color: #FFFFFF;
background-image: url(imagenes/menuhprimero.png);
}
#primero a:hover {
background-color: #FFFFFF;
color: #FF66CC;
border-color: #FFFFFF;
background-image: url(imagenes/menuhprimero.png);
}
/*Noticias*/
#contenedor_noticias {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
width: 615px;
float: left;
color: #333333;
padding-top: 50px;
padding-left: 10px;
}
#noticia1 {
text-align: left;
font-size: 14px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
padding-top: 15px;
width: 590px;
}
#noticia2 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 5px;
line-height: 1;
width: 5900px;
}
#noticia5 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
width: 590px;
}
#noticia3 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
line-height: 1;
width: 590px;
}
#noticia4 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
line-height: 1;
width: 590px;
}
#noticia6 {
text-align: left;
font-size: 14px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
width: 590px;
line-height: 1;
}
#noticia7 {
text-align: left;
font-size: 14px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
line-height: 0;
width: 590px;
}
#noticia8 {
text-align: left;
font-size: 14px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
line-height: 0;
padding-top: 10px;
width: 590px;
}
#noticia9 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
width: 590px;
line-height: 1;
}
#noticia10 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 3px;
width: 590px;
}
/*feeds twitter-facebook y cambiar color*/
#feeds {
background-color: #6DC2C7;
float: right;
width: 122px;
height: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-image: url(imagenes/feeds.png);
}
#seguirfeeds {
padding-top: 7px;
padding-bottom: 10px;
}
/*menu vertical*/
#menuv {
left: 751px;
font-family: Arial, Helvetica, sans-serif;
float: left;
width: 122px;
border: border;
}
#menuv ul, li {
list-style-type: none;
}
#menuv ul {
margin: 0;
padding: 0;
}
#menuv li {
font-size: 13px;
text-align: justify;
background-color: #a3a6a7;
}
#menuv a {
text-decoration: none;
color: #FFFFFF;
background: #a3a6a7;
display: block;
padding: 3px;
width: 116px;
}
#menuv a:hover {
background: #88989d;
color: #000000;
width: 116px;
}
/*pie de pagina*/
#piepagina{
width: 100%;
background-color:#FFFFFF;
height: 36px;
margin-bottom: 10px;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 0;
padding-top: 6px;
background-image: url(imagenes/pie.png);
}
/*detalles menu vertical*/
#rellenomenu {
background-color: #8fc3cb;
float: right;
width: 122px;
height: 775px;
}
#degradadomenuv {
width: 122px;
height: 165px;
background-color: #8fc3cb;
background-image: url(imagenes/degradado2.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-top: 35px;
}
h2 {
color: #000000;
}
y el html
[CODE
<body>
<div id="centrador">
<div id="contenedor">
<div class="Estilo2" id="cabecera">
<p class="Estilo5"><u>Mujer y cancer</u></p><p class="Estilo6">tu espacio de informacion y apoyo en internet</p>
</div>
<div id="contenido">
<div id="menuhorizontal">
<ul>
<li id="primero"><a href="#">home</a></li>
<li><a href="#">noticias</a></li>
<li><a href="#">preguntas y respuestas</a></li>
<li><a href="#">tu historia</a></li>
<li><a href="#">otras asociaciones</a></li>
<li><a href="#">libros</a></li>
<li><a href="#">enlaces</a></li>
<li><a href="#">glosario</a></li>
<li><a href="#">email</a></li>
</ul>
</div>
<div id="contenedor_noticias">
<div id="noticia1"><strong><h2>¡Jo! ¿Qué le pasa a mama?</h2>
</strong>
Una enferma y su hijo plasman la lucha contra un tumor desde la perspectiva de un niño de siete años. <span class="Estilo1">leer</span>
</div>
<div id="noticia2"><strong><h2>Teresa Perales</h2></strong>
</div>
<div id="noticia3"><strong><h2>El 'google maps' de las células madre</h2>
</strong>
</div>
<div id="noticia4"><strong><h2>La OMC alerta:</h2>
</strong>
la crisis de personal afecta a los pacientes
</div>
<div id="noticia5"><h2><strong>Variaciones en el cromosoma 5 aumentan el riesgo en mama. </strong></h2>Investigadores del Hospital Lozano Blesa y del Instituto de Nanotecnología de Aragón.
<p class="Estilo1">leer noticia</p>
</div>
<div id="noticia6"><strong><h2>AMAC GEMA os presenta el contenido del taller de linfedema</h2></strong> <span class="Estilo1">Ver presentación Leer info Leer consejos prácticos</span></div>
<div id="noticia7"><strong><h2>Presentación Dilo caminando 2007</h2>
</strong> <span class="Estilo1">leer internet
leer noticias en la red</span> edición 2006 </div>
<div id="noticia8"><strong><h2>Sin miedo-Rosana</h2>
</strong>
<p>una canción para expresar una actitud frente a la vida... ¿te animas? </p>
<p class="Estilo1">http://open.spotify.com/track/2viHESB7jFCn4fJZN5VRRt </p>
</div>
<div id="noticia9"><strong><h2>Los paliativos deben llegar a todos los europeos.</h2></strong> </div>
<div id="noticia10"><strong><h2>QUÉ TE OCURRE MAMÁ</h2>
</strong>
<p>SEOM y FECMA <span class="Estilo1">leer ficha ver más libros</span></p>
</div>
</div>
<div id="feeds">
<div id="seguirfeeds">siguenos en</div>
<a href="#"><img src="webtoolkit-icon-set-vol1/webtoolkit-icon-set-vol1/24x24/facebook.png" alt="facebook" width="24" height="24" border="none"/></a>
<a href="#"><img src="webtoolkit-icon-set-vol1/webtoolkit-icon-set-vol1/24x24/twitter.png" alt="twitter" width="24" height="24" border="none"/></a></div>
<div id="menuv">
<ul>
<li><img src="imagenes/thumb.gif" width="20" height="20" /><strong style="font-size:12px;">INFO CLINICA</strong></li>
<li><a> cancer de mama</a></li>
<li><a> prevencion</a></li>
<li><a> diagnostico</a></li>
<li><a>tratamiento</a></li>
<li><a>cancer genital</a></li>
<li><a>linfedema</a></li>
<li>
<div align="left"><img src="imagenes/thumb.gif" width="20" height="20" /><strong style="font-size:12px">INFO PSICOLOGICA</strong></div>
</li>
<li><a>el diagnostico</a></li>
<li><a>identidad femenina</a></li>
<li><img src="imagenes/thumb.gif" width="20" height="20" /><strong style="font-size:12px">INFO HUMANA</strong></li>
<li><a>curacion y accion</a></li>
<li><a>calidad de vida</a></li>
<li><img src="imagenes/thumb.gif" width="20" height="20" /><strong style="font-size:12px">AMAC GEMA</strong></li>
<li><a>conoce amac</a></li>
<li><a>recursos amac</a></li>
<li><a>mundo amac</a></li>
</ul>
</div>
<div id="rellenomenu">
<div id="degradadomenuv">
<p>con el patrocinio de </p>
<p><img src="imagenes/cai.gif" width="61" height="61" />
</p>
</p>
</div>
</div>
</div>
<div id="piepagina">
<p>Diseño y realizacion por: Gorka muñoz</p>
<p>
[email protected]</p>
</div>
</div>
</div>
</body>
</html>
[/CODE]