Foros del Web » Creando para Internet » CSS »

como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un rango

Estas en el tema de como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un rango en el foro de CSS en Foros del Web. a ver si me explico: Tengo una pagina con un width div=global de 900px dentro del div global tengo 2 divs pegados horizontalmente, uel div ...
  #1 (permalink)  
Antiguo 14/02/2011, 22:22
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Exclamación como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un rango

a ver si me explico:

Tengo una pagina con un width div=global de 900px

dentro del div global tengo 2 divs pegados horizontalmente, uel div "A" 85% del ancho total y el o div "B" 25%..
Ahora quiero agregarle un borde a cada div. Al div "A", que esta ubicado a la izuqierda quiero agregarle un borde de 1px a la izquierda y al div B a la derecha.

El tema es que cuando le agrego el borde, como ya esta ocupado todo el 100% con los 2 divs, el borde hace que el div B se corre abajo del A porque sobrepasa el 100%.

Intenté dale el borde en % pero no funcionó (se ve que no se puede añadir borde con porcentajes).
Si disminuyo el porcentaje de los div para agregar un borde van a descuadrar con respecto al resto de los contenidos de la página.

No puedo poner la medida de los div en PX porque luego tengoproblemas con el zoom del navegador.


Finalmente les dejo el codigo Html y CSS.

Código:
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="cabecera"><img src="contenidos/logo.PNG"></div>
<div id="menu">
<table cellspacing="0px">
<tr height="">
<td><a href="">A</a></li></td>
<td><a href="">B</a></li></td>
<td><a href="">C</a></li></td>
<td><a href="">D</a></li></td>
<td><a href="">E</a></li></td>
<td><a href="">F</a></li></td>
<td><a href="">G</a></li></td>
<td><a href="">H</a></li></td>
<td><a href="">I</a></li></td>
<td><a href="">J</a></li></td>
<td><a href="">K</a></li></td>
<td><a href="">L</a></li></td>
<td><a href="">M</a></li></td>
<td><a href="">N</a></li></td>
<td><a href="">O</a></li></td>
<td><a href="">P</a></li></td>
<td><a href="">Q</a></li></td>
<td><a href="">R</a></li></td>
<td><a href="">S</a></li></td>
<td><a href="">T</a></li></td>
<td><a href="">U</a></li></td>
<td><a href="">V</a></li></td>
<td><a href="">W</a></li></td>
<td><a href="">X</a></li></td>
<td><a href="">Y</a></li></td>
<td><a href="">Z</a></li></td>
</table>
</div>
<div id="buscador"></div>
<div id="contlinks">
<div id="continfo">
<div id="info"></div>
<div id="links"></div>
</div>
</div>
</div>
</body>
</html>
Código:
* {
margin:0px;
padding:0px;
border:0px;}
body {
background-image:url(contenidos/fondo.png);
background-repeat:repeat-x;
background-color:#DFF3F4;}
#global {
background-color:;
width:900px;
margin:5px auto;}
a {
text-decoration:none;}
#cabecera {
background-color:;
text-align:center;}
#menu {
border-left:;
width:84%;
float:left;
height:35px;
background-image:url(contenidos/menu.png);
background-repeat:repeat-x;}
#menu table {
height:35px;
width:100%;
font-weight:bold;
font-family:"Courier New", Courier, mono;
line-height:200%;
float:left;
list-style:none;}
#menu td {
text-align:center;}
#menu td a {
color:white;
display:block;}
#menu td a:hover {
color:white;
background-image:url(contenidos/menu2.png);}
#buscador {
background-color:pink;
background-image:url(contenidos/menu.png);
background-repeat:repeat-x;
height:35px;
float:left;
width:16%;}
#contlinks {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#ffa7a7; /* column 2 background colour */
}
#continfo {
	float:left;
	width:100%;
	position:relative;
	right:50%;
	background:#fff689; /* column 1 background colour */
}
#info {
	float:left;
	width:46%;
	position:relative;
	left:52%;
	overflow:hidden;
}
#links{
	float:left;
	width:46%;
	position:relative;
	left:56%;
	overflow:hidden;
}
  #2 (permalink)  
Antiguo 15/02/2011, 05:47
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un

No entiendo porqué tienes problemas con esos div y no con el global que tiene ancho de 900px.
Si los bordes van a ser los dos exteriores, puedes encerrar los divs flotantes dentro de otro div al que le des el borde derecho e izquierdo de 1px. No habrá diferencia entre eso y darle el borde a los contenedores flotantes.

Código CSS:
Ver original
  1. #cont_menu{
  2.     border-left: 1px solid #000000;
  3.     border-right: 1px solid #000000;
  4.     overflow: auto;
  5. }
Código HTML:
Ver original
  1. <div id="cont_menu">
  2.     <div id="menu"></div>
  3.     <div id="buscador"></div>
  4. </div>

No sé si era lo que buscabas. Se me ocurren otras soluciones pero parecen más complicadas de explicar.
  #3 (permalink)  
Antiguo 15/02/2011, 08:21
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un

gracias! buena idea che.
  #4 (permalink)  
Antiguo 16/02/2011, 03:58
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un

Hola:

Supongo que será error de tecleo pero ...

Cita:
Iniciado por skielz Ver Mensaje
dentro del div global tengo 2 divs pegados horizontalmente, uel div "A" 85% del ancho total y el o div "B" 25%..
85% + 25% =110%

Saludos.

  #5 (permalink)  
Antiguo 16/02/2011, 08:33
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como cuadrar un div medido en porcentaje con un bode de 1 px dentro de un

es que tengo 2 monitores conectados a la pc y quiero que un pedazo de la pagina se vea en el 2do monitor xD...

si, fue error de tecleo.. o error de burro xD

Etiquetas: cuadrar, píxeles, porcentaje, px, capas
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 04:56.