Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/03/2011, 16:14
Avatar de kiM-
kiM-
 
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Esconder bordes a resoluciones superiores

Buenas, pués tengo una duda, resulta que yo tengo un diseño que en 1025 ocupa todo el ancho de la página (sin que el scroll de abajo llegue a aparecer) y resulta que le he añadido boerdes a los lados, pero al añadirselos la barra de abajo aparece ya que supera el ancho completo de la página, mi pregunta es si hay alguna manera de hacer que los bordes no se muestren, es decir, si el div supera el ancho de la página no se muestre, como una especie de anchura 100% pero sin serlo, no sé si me he explicado.. Os dejo el css:

CSS:
Cita:
/* CUERPO */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

/* CONTENEDOR GLOBAL*/
#global {
width: 1007px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dashed;
border-left-style: dashed;
border-right-color: #060;
border-left-color: #060;
}
#logo {
background-image: url(images/logo.png);
height: 217px;
width: 1007px;
background-repeat: no-repeat;
overflow: hidden;
}
#menu_bar {
width: 1007px;
background-color: #B3D16B;
border: 1px dashed #090;
text-align: center;
margin-top: 190px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height: 24px;
padding-top: 1px;
background-image: url(images/bg_menu_bar.png);
overflow: hidden;
}
#menu_bar ul {
display: inline;
}
#menu_bar ul li {
display: inline;
}
#menu_bar ul li a {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
font-weight: bold;
color: #FFF;
padding-right: 2px;
list-style-type: none;
height: 25px;
}
#menu_bar ul li a:hover {
background-image: url(images/bg_menu_bar_hover.png);
color: #999;
background-repeat: repeat;
height: 25px;
padding-left: 0px;
padding-right: 0px;
padding-top: 4px;
padding-bottom: 5px;
}
#contenido {
width: 750px;
float: left;
overflow: hidden;
margin-top: 15px;
}
.news {
background-image: url(images/news_bg.png);
width: 720px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
margin-bottom: 15px;
}
.titulo {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000;
margin: 0px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
}
.cuerpo {
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
margin: 0px;
}
#menu {
width: 242px;
float: left;
margin-top: 15px;
background-image: url(images/menu_header.png);
background-repeat: no-repeat;
height: 45px;
}
#menu_content {
float: left;
width: 242px;
background-image: url(images/menu_bg.png);
}
#menu_content ul {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin: 0px;
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
#menu_content ul li {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu_content ul li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 13px;
color: #333;
text-decoration: none;
list-style-type: none;
}
#menu_content ul li a:hover {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
color: #000;
}
#form_access {
float: left;
width: 242px;
background-image: url(images/menu_bg.png);
}
.tituloacceso {
margin: 0px;
font-size: 16px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
color: #FFF;
text-align: center;
text-shadow: 0.1em 0.0em #333;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
#menu_footer {
background-image: url(images/menu_footer.png);
height: 45px;
width: 242px;
float: left;
background-position: 0px -15px;
background-repeat: no-repeat;
}
#form1 {
text-align: center;
}
input#areatext {
width: 150px;
height: 15px;
background-color: #D6F764;
border: 0px;
margin-bottom: 5px;
}
input#areapass {
width: 150px;
height: 15px;
background-color: #D6F764;
border: 0px;
}
input#button1 {
background-image: url(images/button1_bg.png);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
border: 0px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
margin-top: 5px;
}
#footer {
width: 1007px;
float: left;
background-image: url(images/footer.png);
height: 110px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #336C36;
}
.textfooter {
margin: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #FFF;
font-weight: bold;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
}
HTML:
Cita:
<div id="global">
<div id="logo">
<div id="menu_bar">
<ul>
<li><a href="#">Noticias</a></li>
<li><a href="#">Comunidad</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Plataformas</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
<div id="contenido">
<div class="news">
<h1 class="titulo">Noticia número #1 By X</h1> <p class="cuerpo">Lorem ipsum ad his...</p>
</div>
</div>
<div id="menu"></div>
<div id="menu_content">
<ul>
<li><a href="#">Inicio / Home</a></li>
<li><a href="#">Descargas / Downloads</a></li>
<li><a href="#">Plataforma / Platforms</a></li>
<li><a href="#">Consolas / Consoles</a></li>
<li><a href="#">Videojuegoss/ Videogames</a></li>
<li><a href="#">Información/ Information</a></li>
</ul>
</div>
<div id="form_access"><h1 class="tituloacceso">Acceso al foro</h1>
<form id="form1" name="form1" method="post" action="">
<label for="areatext"></label>
<input type="text" name="areatext" id="areatext" />
<input type="password" name="areapass" id="areapass" />
<br/>
<input type="submit" name="button1" id="button1" value="Iniciar Sesión" />
<input type="checkbox" name="veryf1" id="veryf1" />
<label for="veryf1"></label>
</form>
</div>
<div id="menu_footer"></div>
<div id="footer"><p class="textfooter">» TEXTO</div>
</div>
</body>
</html>
Saludos y gracias!