eliminar scroll horizontal

priamo · #1 (**permalink**) 25/05/2012, 05:02

Tengo un problema que no logro resolver pese al hacer multiples variaciones, me explico. Tengo la pagina terminada y observo que aparece al final la barra espaciadora que me hace menear, un poco nada mas, hacia la derecha la pagina. Yo quiero que desaparezca la barra, es decir que quede centrada y que no se pueda mover ni a derecha ni a izquierda. Os paso el codigo:

Código HTML:

Ver original<!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>Enfoque2 Diseño Web y Diseño Grafico</title>
</head>
<style type="text/css">
.textoparamiweb {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #4F4F4F;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #C7C8CA;
}
#todo {
    width: 100%;
    position: relative;
}
#fondosuperior {
    width: 1980px;
    height: 110px;
    background-color: #003;
}
#grupo {
    position: relative;
    margin: auto;
    width: 1980px;
    height: 110px;
}
#cabecera {
    position:absolute;
    width:1024px;
    height:110px;
    z-index:1;
    margin-left: 478px;
}
#logo {
    position:absolute;
    width:382px;
    height:131px;
    z-index:1;
    top: 5px;
    left: 0px;
    background-image: url(Imagenes/Logo_con_Reflejo.png);
}
 
#fondofoto {
    width: 1980px;
    height: 250px;
    top: 110px;
    border-top-color: #0FF;
    border-top-style: solid;
    border-top-width: thin;
    background-image: url(IMAGENES/FondoFotos.png);
}
#grupofoto {
    position: relative;
    margin: auto;
    width: 1980px;
    height: 250px;
}
#cabecerafoto {
    position:absolute;
    width:1024px;
    height:250px;
    z-index:1;
    margin-left: 478px;
    top: 3px;
}
#menu {
    position:absolute;
    width:293px;
    height:195px;
    z-index:1;
    top: 30px;
    left: 31px;
    bottom: 20px;
}
#menuinicio {
    position:absolute;
    width:200px;
    height:41px;
    z-index:1;
    top: 0px;
    left: 0px;
    background-image: url(Imagenes/inicio.png);
}
 
#menuinicio:hover{
    background-image: url(Imagenes/Inicio_2.png);
}
 
#menudiseñoweb {
    position:absolute;
    width:200px;
    height:41px;
    z-index:1;
    top: 30px;
    left: 0px;
    background-image: url(Imagenes/DiseWeb.png);
}
#menudiseñoweb:hover {
    background-image: url(Imagenes/DiseWeb2.png);
}
 
#menudiseñografico {
    position:absolute;
    width:200px;
    height:41px;
    z-index:1;
    top: 60px;
    left: 0px;
    background-image: url(Imagenes/Dise_Grafico.png);
}
#menudiseñografico:hover {
    background-image: url(Imagenes/DiseGrafico2.png);
}
#menurestauracion {
    position:absolute;
    width:282px;
    height:41px;
    z-index:1;
    top: 90px;
    left: -6px;
    background-image: url(Imagenes/3Contacto.png);
}
#menurestauracion:hover {
    background-image: url(Imagenes/BotonRestauracion_2.png);
}
#menuretoquedigital {
    position:absolute;
    width:200px;
    height:41px;
    z-index:1;
    top: 120px;
    left: 0px;
    background-image: url(Imagenes/Retoque-Digital.png);
}
#menuretoquedigital:hover {
    background-image: url(Imagenes/RetoqueDigital2.png);
}
#menucontacto {
    position:absolute;
    width:200px;
    height:41px;
    z-index:1;
    top: 150px;
    left: 0px;
    background-image: url(Imagenes/Contacto.png);
}
 
#menucontacto:hover {   background-image: url(Imagenes/Contacto2.png);
}
#fotoinicio {
    position:absolute;
    width:663px;
    height:250px;
    z-index:2;
    left: 360px;
    top: -2px;
    background-image: url(Imagenes/Imagenes_%20Contenido/bigstock_Sailing_To_The_Sunrise_22433.jpg);
}
 
#contenido {
    position:absolute;
    width:1024px;
    height:1000px;
    z-index:2;
    left: 477px;
    top: 380px;
    background-image: url(Imagenes/Fondo_Contenido.png);
}
#textocabecera {
    position:absolute;
    width:263px;
    height:42px;
    z-index:2;
    left: 683px;
    top: 62px;
    background-image: url(Imagenes/Imagenes_%20Contenido/Texo_Superior.png);
}
#pie {
    position:absolute;
    width:684px;
    height:24px;
    z-index:3;
    left: 247px;
    top: 1012px;
}
 
</style>
</head>
<body>
<div id="todo">
  <div id="grupo">
       <div id="fondosuperior">
        <div id="cabecera">
        <div id="logo"></div>
                 <div id="textocabecera"></div>
            <div id="sociales">
  <a href="http://es-es.facebook.com/" title="Compartir" target="_blank"><div id="facebook"></div></a>
   <a href="http://twitter.com/" title="Compartir"target="_blank"><div id="twiter"></div></a>
   <a href="http://es.linkedin.com/" title="Compartir"target="_blank"><div id="linkedin"></div></a>
   <a href="http://technorati.com/" title="Compartir"target="_blank"><div id="technorati"></div></a>
                  </div>
      </div>
    </div>
  </div>
<div id="todofoto">
    <div id="grupofoto">
       <div id="fondofoto">
         <div id="cabecerafoto">
              <div id="menu">
                 <a href="index.html" target="_blank" ><div id="menuinicio"></div></a>    
                 <a href="Diseñoweb.html" target="_blank"><div id="menudiseñoweb"></div></a>
                 <a href="DG_Flyers.html" target="_blank">
<div id="menudiseñografico"></div></a>
                 <a href="fotosantiguas.html" target="_blank">
<div id="menurestauracion"></div></a> 
                 <a href="retoquedigital.html" target="_blank">
<div id="menuretoquedigital"></div></a> 
                <a href="contacto.html" target="_blank"><div id="menucontacto"></div></a>          
           </div>
        <div id="fotoinicio"></div>
      </div>
     </div>
  </div>
</div>
<div id="contenido">
    <div class="apDiv1" id="minombre"><br /></div>
    <div id="bienvenidos"> <span class="textos">Binvenidos a <strong class="texto_azul">Enfoque2</strong> nos especializamos en Diseño  web/multimedia y en Diseño gráfico publicitario.<br />
    <br />
    Nuestros proyectos procuramos realizarlos a medida y  entorno a las necesidades y presupuesto del cliente.<br />
    </span><br /></div>
<div class="textoweb" id="textoindex1"> <span class="texto_azul">El diseño es una necesidad</span> actual para dar a conocer los productos y servicios de las empresas ya que más del <span class="texto_azul">80% </span>de lo que percibimos viene de <span class="texto_azul">nuestra vista</span>.</div>
<div id="fotoindexchica"></div>
<div id="fotoindexmundo"></div>
<div class="textos" id="textomundo">Nuestros servicios</div>
<div class="textos" id="textochica">Nuestro compromiso</div>
<div class="textochica2" id="textomundo2">Diseño Web<br />Diseño Gráfico<br />Restauración Fotográfica<br />Retoque Digital</div>
<div class="textochica2" id="textochica2"> Diseño = Calidad = Precio<br />Creatividad = Exclusividad  Disponibilidad = Seriedad </div>
<div id="logomundo"></div>
<div id="logochica"></div>
<div id="linea"></div>
<div id="linea2"></div>
<div class="Pie_texto" id="pie">© 2012 - Diseño Enfoque2 | <a href="Politica_aviso.html" class="Pie_texto">Politica de privacidad y  Aviso Legal</a> |<a href="contacto.html" class="Pie_texto"> Contacto</a> | móvil 606526451</div>
</div>
</div>
</body>
</html>

Espero me podais ayudar porque ya he terminado toda la web y me toca las narices esto.
Un saludo y gracias

kseso? · #2 (**permalink**) 25/05/2012, 05:58

¿Pasó su página por el validador?
Creo que no.
Se le han colado algunas cosillas como:

Cita:

</head>
<style type="text/css">

y más tarde:

Cita:

</style>
</head>

Sobre la ¿barra espaciadora? ¿se refiere al scroll?
Depende de la resolución con la que vea su página "me hace menear, un poco nada mas" o un poco mucho.

Sólo llegué a esta línea de su css:

Código CSS:

Ver original#fondosuperior {
width: 1980px;

priamo · #3 (**permalink**) 25/05/2012, 06:23

Vamos que no puede elimarse.
Lo de que solo llega a ver esa linea , no le entiendo que quiere decir porque arriba tiene todo el codigo.
saludos

kseso? · #4 (**permalink**) 25/05/2012, 06:29

Quería decirle que sólo miré su código hasta esa línea del css.

Si tiene una caja con 1980px sin haberla sacado del flujo hará que sus ancestros crezcan hasta por lo menos esa medida --> en las pantallas más pequeñas saldrá el scroll, en las más anchas no.

¿Conoce www.librosweb.es ?
Creo que le será de ayuda