Foros del Web » Creando para Internet » CSS »

Esconder bordes a resoluciones superiores

Estas en el tema de Esconder bordes a resoluciones superiores en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/03/2011, 17:14
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 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!
  #2 (permalink)  
Antiguo 29/03/2011, 17:16
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Esconder bordes a resoluciones superiores

¿Y si cambias los border por outline?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 29/03/2011, 17:25
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Esconder bordes a resoluciones superiores

Outline hace lo mismo que los boder, también hace que aparezca la barra de desplazamiento de abajo :\
  #4 (permalink)  
Antiguo 29/03/2011, 17:36
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Esconder bordes a resoluciones superiores

Extraño, yo estaba seguro que eso resolvía el problema... Podrías ocultar las barras con overflow:hidden, pero podría resultar contraproducente, no se como esté el contenido de tu web...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 29/03/2011, 18:30
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Esconder bordes a resoluciones superiores

El contenedor "global" está con la etiqueta overflow:hidden puesta, y las barras se siguen mostrando, no encuentro ninguna manera..
  #6 (permalink)  
Antiguo 29/03/2011, 19:03
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Esconder bordes a resoluciones superiores

Prueba poniendo la propiedad en Body en lugar del contenedor global.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 29/03/2011, 19:36
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Esconder bordes a resoluciones superiores

Sigue viéndose y la barra de abajo sigue apareciendo, no veo solución posible :\
  #8 (permalink)  
Antiguo 29/03/2011, 20:09
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Esconder bordes a resoluciones superiores

¿Tienes la página en algún enlace?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 30/03/2011, 14:12
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Esconder bordes a resoluciones superiores

No la tengo, y he pensado en añadirle los bordes al fondo pero este se vería mal a resoluciones aún más superiores :\
  #10 (permalink)  
Antiguo 30/03/2011, 18:57
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Esconder bordes a resoluciones superiores

¿Y si restas dos pixeles de ancho a tu contenedor?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: bordes, esconder
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




La zona horaria es GMT -6. Ahora son las 09:32.