Foros del Web » Creando para Internet » CSS »

Problema borde con css

 Estas en el tema de Problema borde con css en el foro de CSS en Foros del Web. Hola gente de Foros del Web,paso a hacerles mi consulta: Estoy haciendo una Página Web y quiero colocarle un Borde. Ya he colocado las propiedades ...
  #1 (permalink)  
Antiguo 17/12/2010, 15:50
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Problema borde con css
Hola gente de Foros del Web,paso a hacerles mi consulta: Estoy haciendo una Página Web y quiero colocarle un Borde. Ya he colocado las propiedades border,border-top,border-bottom,border-left,border-right, con sus respectivos valores... Pero mi problema es el siguiente:La parte derecha e inferior del borde que cubre mi Página esta bien, pero la parte superior del borde esta muy ancha con respecto a la página;casi algo parecido sucede con la parte izquierda del borde,quiero ancharla un poco para que no este muy junta a la pagina pero no puedo.

Podrian ayudarme a dar solución a ambos problemas?? Se los agradeceria bastante.

A continuación paso a colocarles el div que contiene toda mi pagina web..

Código HTML:
<div id="container">

<div id="bv_Image17" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:0" align="left">
<img src="images/blank.JPG" id="Image17" alt="" align="top" border="0" style="width:858px;height:615px;"></div>
<!--<div id="bv_Image15" style="overflow:hidden;position:absolute;left:331px;top:8px;z-index:1" align="left">
<img src="images/bv_img2.jpg" id="Image15" alt="" align="top" border="0" style="width:428px;height:60px;"></div>-->
<div id="bv_Image14" style="overflow:hidden;position:absolute;left:331px;top:67px;z-index:2" align="left">
<img src="images/La%20Mejor%20Nutricion%202.JPG" id="Image14" alt="" align="top" border="0" style="width:428px;height:421px;"></div>
<div id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:8px;z-index:3" align="left">
<img src="images/Leo%20Messi%20Testimonio.JPG" id="Image2" alt="" align="top" border="0" style="width:331px;height:263px;"></div>
<div id="bv_Image1" style="overflow:hidden;position:absolute;left:0px;top:212px;z-index:4" align="left">
<img src="images/Leo%20Messi.JPG" id="Image1" alt="" align="top" border="0" style="width:331px;height:400px;"></div>
<div id="bv_Image3" style="overflow:hidden;position:absolute;left:0px;top:147px;z-index:5" align="left">
<img src="images/Leo%20Messi%20Testimonio%202.JPG" id="Image3" alt="" align="top" border="0" style="width:331px;height:79px;"></div>
<div id="bv_Text1" style="position:absolute;left:68px;top:237px;width:97px;height:36px;z-index:6;" align="left">
<font style="font-size:16px" color="#FFFFFF" face="Arial"><b><i>Lionel Messi</i></b></font></div>
<div id="bv_Image5" style="overflow:hidden;position:absolute;left:759px;top:8px;z-index:7" align="left">
<img src="images/Escudo%20FC%20Barcelona.JPG" id="Image5" alt="" align="top" border="0" style="width:99px;height:115px;"></div>
<div id="bv_Image6" style="overflow:hidden;position:absolute;left:759px;top:123px;z-index:8" align="left">
<img src="images/Escudo%20Inter%20de%20Milan.JPG" id="Image6" alt="" align="top" border="0" style="width:99px;height:124px;"></div>
<div id="bv_Image7" style="overflow:hidden;position:absolute;left:759px;top:247px;z-index:9" align="left">
<img src="images/Escudo%20Schalke%2004.JPG" id="Image7" alt="" align="top" border="0" style="width:99px;height:116px;"></div>
<div id="bv_Image8" style="overflow:hidden;position:absolute;left:759px;top:363px;z-index:10" align="left">
<img src="images/Escudo%20LA%20Galaxy.JPG" id="Image8" alt="" align="top" border="0" style="width:99px;height:126px;"></div>
<div id="bv_Image9" style="overflow:hidden;position:absolute;left:759px;top:488px;z-index:11" align="left">
<img src="images/Escudo%20Valencia.JPG" id="Image9" alt="" align="top" border="0" style="width:99px;height:125px;"></div>
<div id="bv_Image10" style="overflow:hidden;position:absolute;left:434px;top:488px;z-index:12" align="left">
<img src="images/Escudo%20Pumas.JPG" id="Image10" alt="" align="top" border="0" style="width:116px;height:125px;"></div>
<div id="bv_Image11" style="overflow:hidden;position:absolute;left:550px;top:488px;z-index:13" align="left">
<img src="images/Escudo%20Universidad%20San%20Martin%20de%20Porres.JPG" id="Image11" alt="" align="top" border="0" style="width:99px;height:126px;"></div>
<div id="bv_Image12" style="overflow:hidden;position:absolute;left:649px;top:488px;z-index:14" align="left">
<img src="images/Escudo%20Santos%20FC.JPG" id="Image12" alt="" align="top" border="0" style="width:110px;height:125px;"></div>
<div id="bv_Image4" style="overflow:hidden;position:absolute;left:331px;top:488px;z-index:15" align="left">
<img src="images/Escudo%20Independiente%20del%20Valle.JPG" id="Image4" alt="" align="top" border="0" style="width:103px;height:125px;"></div>
<div id="bv_Image13" style="overflow:hidden;position:absolute;left:335px;top:8px;z-index:16" align="left">
<img src="images/logo.gif" id="Image13" alt="" align="top" border="0" style="width:229px;height:49px;"></div>

<script>utmx_section("Llamar")</script>
<input type="button" id="Button1" onclick="popupwnd('http://www.midesayunoideal.com/dclick','no','no','no','yes','yes','no','','','600','500');return false;" name="Button1" value="Desayuno Ideal" style="position:absolute;left:634px;top:15px;width:117px;height:26px;background-color:transparent;font-family:Arial;font-weight:bold;font-size:13px;z-index:17">
</noscript>

<script>utmx_section("Escribir")</script>
<input type="button" id="Button2" onclick="popupwnd('formulario.html','no','no','no','no','no','no','','','800','535');return false;" name="Button1" value="Escríbenos" style="position:absolute;left:634px;top:48px;width:117px;height:26px;background-color:transparent;font-family:Arial;font-weight:bold;font-size:13px;z-index:18">
</noscript>

<script>utmx_section("Atletas")</script>
<div id="bv_Text2" style="position:absolute;left:344px;top:63px;width:259px;height:16px;z-index:19;" align="right">
<font style="font-size:12px" color="#000000" face="Arial">Herbalife y los atletas de Clase Mundial... </font><font style="font-size:13px" color="#000000" face="Arial"><b><i><a href="javascript:popupwnd('http://www.herbalifesports.com/ES/lionel_messi.asp','no','no','no','yes','yes','no','','','600','500')" target="_self">Más</a></i></b></font></div>
</noscript>

<script>utmx_section("Productos")</script>
<div id="bv_Text3" style="position:absolute;left:357px;top:88px;width:246px;height:16px;z-index:20;" align="right">
<font style="font-size:12px" color="#000000" face="Arial">La mejor nutrición natural del mundo...</font><font style="font-size:13px" color="#000000" face="Arial"> <b><i><a href="javascript:popupwnd('http://www.herbalife.com.pe/','no','no','no','yes','yes','no','','','600','500')" target="_self">Más</a></i></b></font></div>
</noscript>

<script>utmx_section("Conocer")</script>
<input type="button" id="Button3" onclick="popupwnd('http://compania.herbalife.com.pe/Content/es-PE/flash/sobre_HL/message-ffrom-ceo-ok-es.swf','no','no','no','yes','yes','no','','','400','300');return false;" name="Button1" value="Conócenos" style="position:absolute;left:634px;top:82px;width:117px;height:26px;background-color:transparent;font-family:Arial;font-weight:bold;font-size:13px;z-index:21">
</noscript>

<div id="bv_Image16" style="overflow:hidden;position:absolute;left:650px;top:178px;z-index:22" align="left">
<img src="images/visamaster.jpg" id="Image16" alt="" align="top" border="0" style="width:54px;height:70px;"></div>

<script>utmx_section("Negocio")</script>
<div id="bv_Text4" style="position:absolute;left:334px;top:113px;width:270px;height:16px;z-index:23;" align="right">
<font style="font-size:12px" color="#000000" face="Arial">El mejor negocio para personas como tú...</font><font style="font-size:13px" color="#000000" face="Arial"> <b><i><a href="javascript:popupwnd('negocio.html','no','no','no','no','no','no','','','750','400')" target="_self">Más</a></i></b></font></div>
</noscript>
</div>
Y además adjunto la parte del Estilo, donde he colocado las propiedades Border que he mencionado al inicio:

Código HTML:
<style type="text/css">
div#container
{
   position: absolute;
   left: 50%;
   top: 47%;
   width: 859px;
   height: 614px;
   margin-top: -305px;
   margin-left: -432px;
     
   border: #000 2px solid;
   border-top: #000 2px solid;
   border-bottom: #000 2px solid;
   border-left: #000 2px solid;
   border-right: #000 2px solid;
}
</style>

Ademas adjunto la url donde he subido una captura de imagen de mi Pagina Web,antes mencionada,para que vean cuales son mis problemas.
Código: 
http://img28.imageshack.us/i/webpz.jpg/
  #2 (permalink)  
Antiguo 17/12/2010, 16:00
 
Fecha de Ingreso: diciembre-2010
Ubicación: San Luis Potosí
Mensajes: 3
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problema borde con css
No sé si esté en lo correcto, pero no será porque defines un borde general de 2px y luego vuelves a definir los bordes específicos (arriba, abajo, izq y derecha) de 2px nuevamente, aunque te llevaría más líneas de código creo que sería más conveniente que definieras cada borde

border-bottom-color:#000000;
border-bottom-style:solid;
border-bottom-width:2px;
border-top-color:#000000;
border-top-style:solid;
border-top-width:2px;
border-left-color:#000000;
border-left-style:solid;
border-left-width:2px;
border-rigth-color:#000000;
border-rigth-style:solid;
border-rigth-width:2px;
  #3 (permalink)  
Antiguo 17/12/2010, 16:13
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Problema borde con css
zagatho4ever gracias por la respuesta, pero, sigo teniendo el mismo problema con lo que me has dicho... Me sigue saliendo igual que antes mi pagina.. porque será?

Te vuelvo a adjuntar la captura de imagen de mi Página. Por favor,revisala.

Código: 
http://img28.imageshack.us/i/webpz.jpg/
Gracias.
  #4 (permalink)  
Antiguo 17/12/2010, 16:41
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Problema borde con css
Cita:
Iniciado por zagatho4ever Ver Mensaje
No sé si esté en lo correcto, pero no será porque defines un borde general de 2px y luego vuelves a definir los bordes específicos (arriba, abajo, izq y derecha) de 2px nuevamente, aunque te llevaría más líneas de código creo que sería más conveniente que definieras cada borde

border-bottom-color:#000000;
border-bottom-style:solid;
border-bottom-width:2px;
border-top-color:#000000;
border-top-style:solid;
border-top-width:2px;
border-left-color:#000000;
border-left-style:solid;
border-left-width:2px;
border-rigth-color:#000000;
border-rigth-style:solid;
border-rigth-width:2px;
compañero el especificar por duplicado el css no afecta en su problema, cuando especificas algo general y lo repites unas lineas abajo el primero deja de tener validez, ahora bien lo que usted a echo resulta útil cuando se desea dar diferentes valores a cada borde para este caso es el mismo para los 4 lados

por lo que basta con

Código HTML: 
Ver original
  1. border:2px #000 solid;

y por ultimo según puedo apreciar en la imagen el top, left y right son del mismo grosor el único afectado es el bottom que se ve mas delgado... aunque el compañero miguelangel23 ha mencionado que el top se ve mas grueso de lo que el desea

así que le sugiero este css
Código CSS: 
Ver original
  1. div#container
  2. {
  3.    position: absolute;
  4.    left: 50%;
  5.    top: 47%;
  6.    width: 859px;
  7.    height: 614px;
  8. margin:-305px 0 0 432px;
  9. padding:3px;
  10. border:1px #000 solid
  11. }
  #5 (permalink)  
Antiguo 17/12/2010, 17:38
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Problema borde con css
Ag666 probé el CSS que pusiste pero mi página sale de la siguiente manera(Te adjunto la captura de imagen)

Código: 
http://img510.imageshack.us/i/web2u.jpg/
La pagina sale al costado izquierdo y el borde sale mas abajo abuu.

Ahora, como dije al inicio de este post, la parte izquierda,derecha y abajo del borde se ve bien, mi problema es el espacio(ancho) que hay entre la pagina y el borde superior.. yo quiero que se vea como la parte derecha del borde....

Te vuelvo a adjuntar la primera url de la captura de imagen de mi pagina... como estaba al inicio.

Código: 
http://img28.imageshack.us/i/webpz.jpg/
El codigo del estilo y el de la pagina esta al inicio de mi Post.
Espero que me puedas ayudar.. Por favor
  #6 (permalink)  
Antiguo 17/12/2010, 18:30
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problema borde con css
Hola

No es un problema de borders, los border están correctos, lo que pasa es que el código que pones llama a unas imágenes que no encuentra y el navegador te pinta las imágenes "not found" que tienen un borde y tapa 1 de los 2 px del borde inferior

A partir del código del primer mensaje, he substituido todas las imágenes por una que sí existe (un gif transparente) y solamente se ve el border de 2px de #container

Código HTML:
<div id="container">

<div id="bv_Image17" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:0" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image17" alt="" align="top" border="0" style="width:858px;height:615px;"></div>
<!--<div id="bv_Image15" style="overflow:hidden;position:absolute;left:331px;top:8px;z-index:1" align="left">
<img src="images/bv_img2.jpg" id="Image15" alt="" align="top" border="0" style="width:428px;height:60px;"></div>-->
<div id="bv_Image14" style="overflow:hidden;position:absolute;left:331px;top:67px;z-index:2" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image14" alt="" align="top" border="0" style="width:428px;height:421px;"></div>
<div id="bv_Image2" style="overflow:hidden;position:absolute;left:0px;top:8px;z-index:3" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image2" alt="" align="top" border="0" style="width:331px;height:263px;"></div>
<div id="bv_Image1" style="overflow:hidden;position:absolute;left:0px;top:212px;z-index:4" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image1" alt="" align="top" border="0" style="width:331px;height:400px;"></div>
<div id="bv_Image3" style="overflow:hidden;position:absolute;left:0px;top:147px;z-index:5" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image3" alt="" align="top" border="0" style="width:331px;height:79px;"></div>
<div id="bv_Text1" style="position:absolute;left:68px;top:237px;width:97px;height:36px;z-index:6;" align="left">
<font style="font-size:16px" color="#FFFFFF" face="Arial"><b><i>Lionel Messi</i></b></font></div>
<div id="bv_Image5" style="overflow:hidden;position:absolute;left:759px;top:8px;z-index:7" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image5" alt="" align="top" border="0" style="width:99px;height:115px;"></div>
<div id="bv_Image6" style="overflow:hidden;position:absolute;left:759px;top:123px;z-index:8" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image6" alt="" align="top" border="0" style="width:99px;height:124px;"></div>
<div id="bv_Image7" style="overflow:hidden;position:absolute;left:759px;top:247px;z-index:9" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image7" alt="" align="top" border="0" style="width:99px;height:116px;"></div>
<div id="bv_Image8" style="overflow:hidden;position:absolute;left:759px;top:363px;z-index:10" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image8" alt="" align="top" border="0" style="width:99px;height:126px;"></div>
<div id="bv_Image9" style="overflow:hidden;position:absolute;left:759px;top:488px;z-index:11" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image9" alt="" align="top" border="0" style="width:99px;height:125px;"></div>
<div id="bv_Image10" style="overflow:hidden;position:absolute;left:434px;top:488px;z-index:12" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image10" alt="" align="top" border="0" style="width:116px;height:125px;"></div>
<div id="bv_Image11" style="overflow:hidden;position:absolute;left:550px;top:488px;z-index:13" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image11" alt="" align="top" border="0" style="width:99px;height:126px;"></div>
<div id="bv_Image12" style="overflow:hidden;position:absolute;left:649px;top:488px;z-index:14" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image12" alt="" align="top" border="0" style="width:110px;height:125px;"></div>
<div id="bv_Image4" style="overflow:hidden;position:absolute;left:331px;top:488px;z-index:15" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image4" alt="" align="top" border="0" style="width:103px;height:125px;"></div>
<div id="bv_Image13" style="overflow:hidden;position:absolute;left:335px;top:8px;z-index:16" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image13" alt="" align="top" border="0" style="width:229px;height:49px;"></div>

<script>utmx_section("Llamar")</script>
<input type="button" id="Button1" onclick="popupwnd('http://www.midesayunoideal.com/dclick','no','no','no','yes','yes','no','','','600','500');return false;" name="Button1" value="Desayuno Ideal" style="position:absolute;left:634px;top:15px;width:117px;height:26px;background-color:transparent;font-family:Arial;font-weight:bold;font-size:13px;z-index:17">
</noscript>

<script>utmx_section("Escribir")</script>
<input type="button" id="Button2" onclick="popupwnd('formulario.html','no','no','no','no','no','no','','','800','535');return false;" name="Button1" value="Escríbenos" style="position:absolute;left:634px;top:48px;width:117px;height:26px;background-color:transparent;font-family:Arial;font-weight:bold;font-size:13px;z-index:18">
</noscript>

<script>utmx_section("Atletas")</script>
<div id="bv_Text2" style="position:absolute;left:344px;top:63px;width:259px;height:16px;z-index:19;" align="right">
<font style="font-size:12px" color="#000000" face="Arial">Herbalife y los atletas de Clase Mundial... </font><font style="font-size:13px" color="#000000" face="Arial"><b><i><a href="javascript:popupwnd('http://www.herbalifesports.com/ES/lionel_messi.asp','no','no','no','yes','yes','no','','','600','500')" target="_self">Más</a></i></b></font></div>
</noscript>

<script>utmx_section("Productos")</script>
<div id="bv_Text3" style="position:absolute;left:357px;top:88px;width:246px;height:16px;z-index:20;" align="right">
<font style="font-size:12px" color="#000000" face="Arial">La mejor nutrición natural del mundo...</font><font style="font-size:13px" color="#000000" face="Arial"> <b><i><a href="javascript:popupwnd('http://www.herbalife.com.pe/','no','no','no','yes','yes','no','','','600','500')" target="_self">Más</a></i></b></font></div>
</noscript>

<script>utmx_section("Conocer")</script>
<input type="button" id="Button3" onclick="popupwnd('http://compania.herbalife.com.pe/Content/es-PE/flash/sobre_HL/message-ffrom-ceo-ok-es.swf','no','no','no','yes','yes','no','','','400','300');return false;" name="Button1" value="Conócenos" style="position:absolute;left:634px;top:82px;width:117px;height:26px;background-color:transparent;font-family:Arial;font-weight:bold;font-size:13px;z-index:21">
</noscript>

<div id="bv_Image16" style="overflow:hidden;position:absolute;left:650px;top:178px;z-index:22" align="left">
<img src="http://img826.imageshack.us/img826/281/blankd.gif" id="Image16" alt="" align="top" border="0" style="width:54px;height:70px;"></div>

<script>utmx_section("Negocio")</script>
<div id="bv_Text4" style="position:absolute;left:334px;top:113px;width:270px;height:16px;z-index:23;" align="right">
<font style="font-size:12px" color="#000000" face="Arial">El mejor negocio para personas como tú...</font><font style="font-size:13px" color="#000000" face="Arial"> <b><i><a href="javascript:popupwnd('negocio.html','no','no','no','no','no','no','','','750','400')" target="_self">Más</a></i></b></font></div>
</noscript>
</div>
Si aún así no ves bien todos los borders cambia esto en el CSS:

Código CSS: 
Ver original
  1. div#container
  2. {
  3.    position: relative;
  4.    width: 859px;
  5.    height: 614px;
  6.    margin: 20px auto;
  7.    border: 2px solid #000;
  8. }

Saludos

Etiquetas: bordes
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 11:40.