Foros del Web » Creando para Internet » CSS »

problemas con el ancho de una web

 Estas en el tema de problemas con el ancho de una web en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/02/2010, 09:42
 
Fecha de Ingreso: febrero-2010
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 0
problemas con el ancho de una web
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]
  #2 (permalink)  
Antiguo 01/02/2010, 09:55
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 17 años, 2 meses
Puntos: 20
Respuesta: problemas con el ancho de una web
Prueba reduciendo el 100% de centrador.

#centrador{width: 100%;
text-align: center;
margin-top: 10px;
}

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 01/02/2010, 10:05
 
Fecha de Ingreso: febrero-2010
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: problemas con el ancho de una web
buuf nada, lo he reducido a un numero especifico de pixeles y nada, tambien lo he puesto en auto y menos aun....ya no se que hacer : (
  #4 (permalink)  
Antiguo 01/02/2010, 10:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 17 años, 2 meses
Puntos: 20
Respuesta: problemas con el ancho de una web
Mira esto

#noticia2 {
text-align: left;
font-size: 14px;
padding-top: 0px;
padding-left: 10px;
padding-right: 3px;
padding-bottom: 5px;
line-height: 1;
width: 5900px;
}

Cámbialo por 590 y listo.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #5 (permalink)  
Antiguo 01/02/2010, 12:31
 
Fecha de Ingreso: febrero-2010
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: problemas con el ancho de una web
Ole muchas gracias ;)

Etiquetas: ancho
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:06.