Foros del Web » Creando para Internet » CSS »

Pagina con borde

Estas en el tema de Pagina con borde en el foro de CSS en Foros del Web. hola q tal, Mi idea es hacer una pagina con un borde alrededor que se adapte al tamaño del monitor...tengo 4 divs, 1 contenedor y ...
  #1 (permalink)  
Antiguo 21/06/2010, 13:15
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Pregunta Pagina con borde

hola q tal,

Mi idea es hacer una pagina con un borde alrededor que se adapte al tamaño del monitor...tengo 4 divs, 1 contenedor y los otro 3 dentro de este.

Empece a hacerlo y me surgieron 2 dudas:

1ª duda: ¿como hago para alinearlos de forma q me qede uno contra el margen izquierdo, otro central y otro contra el margen derecho,pegados?

2ª duda: ¿como hago para q cuando el del centro se agrande (este con largo automatico) los otros 2 laterales se agranden tambien?

Algo asi qedaria:
http://www.subirimagenes.com/otros-pag-4696185.html
  #2 (permalink)  
Antiguo 21/06/2010, 16:04
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: Pagina con borde

Hola:

¿Has probado a poner el ancho en porcentajes?

Saludos.

  #3 (permalink)  
Antiguo 22/06/2010, 01:29
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Pagina con borde

Saludos!

Y si le pones borde a la etiqueta <body>?

Código CSS:
Ver original
  1. body {
  2. border: 5px solid #000;
  3. }

Con eso, podrías eliminar los div que tienes, y trabajar directamente con los bordes de todo el documento.

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 22/06/2010, 15:58
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Pagina con borde

Cita:
Iniciado por Calizman Ver Mensaje
Saludos!

Y si le pones borde a la etiqueta <body>?

Código CSS:
Ver original
  1. body {
  2. border: 5px solid #000;
  3. }

Con eso, podrías eliminar los div que tienes, y trabajar directamente con los bordes de todo el documento.

Hasta Luego!
El problema es que es un borde con imagenes
  #5 (permalink)  
Antiguo 22/06/2010, 16:01
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Pagina con borde

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

¿Has probado a poner el ancho en porcentajes?

Saludos.

como es una imagen va a tener q tener el ancho de esta
  #6 (permalink)  
Antiguo 22/06/2010, 16:12
Avatar de funkii  
Fecha de Ingreso: junio-2010
Mensajes: 64
Antigüedad: 7 años, 5 meses
Puntos: 4
Respuesta: Pagina con borde

lo podes hacer con la propiedad border-image-source, con esto le podes poner de fondo a un borde una imagen :)
  #7 (permalink)  
Antiguo 22/06/2010, 16:33
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Pagina con borde

Creo que lo que quieres es hacer los bordes redondeados de todo el body o algo asi ???

Por que de cualquier forma, es mejor tener un div contenedor....

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #8 (permalink)  
Antiguo 23/06/2010, 11:00
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Pagina con borde

Cita:
Iniciado por funkii Ver Mensaje
lo podes hacer con la propiedad border-image-source, con esto le podes poner de fondo a un borde una imagen :)
:) voy a probar, pero no se bn como lo utilizaria porq las imagenes de los bordes laterales de supèrior e inf, y de las esquinas tamb son distintas.

Sirve para IE?

Última edición por agustito37; 23/06/2010 a las 11:28
  #9 (permalink)  
Antiguo 23/06/2010, 17:05
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: Pagina con borde

Hola:

Cita:
Iniciado por funkii Ver Mensaje
lo podes hacer con la propiedad border-image-source, con esto le podes poner de fondo a un borde una imagen :)
¡OJO! que eso es CSS3 y no todos los navegadores lo admiten.

Saludos.

  #10 (permalink)  
Antiguo 23/06/2010, 18:41
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Pagina con borde

Resumiendo por si no fui claro, gran parte del problema pasa por que no se como hacer para q un div que esta adentro de un div contenedor, se adapte a la altura de este, ademas q el div q esta adentro, siempre tiene q estar pegado contra el borde derecho del body.

Osea cuando crece el div contenedor, el q esta adentro tamb crece con este.

Última edición por agustito37; 23/06/2010 a las 18:48
  #11 (permalink)  
Antiguo 24/06/2010, 16:00
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: Pagina con borde

Hola:

Ahora si que lo he pillado, léete este aporte que hay en las FAQ's de CSS.

Saludos.

  #12 (permalink)  
Antiguo 24/06/2010, 16:51
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Pagina con borde

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Ahora si que lo he pillado, léete este aporte que hay en las [URL="http://www.forosdelweb.com/f53/faqs-css-114830/index3.html#post2593702"]FAQ's de CSS[/URL].

Saludos.

Ok lo miro, parece ser la solucion...gracias por tu ayuda.
  #13 (permalink)  
Antiguo 27/06/2010, 22:28
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Pagina con borde

Bueno gracias por su ayuda, lo pude solucionar.

Dejo el código:

HTML
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

<head>

<title>NSNTP</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link href="estilos.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="borde_superior">

<div id="borde_sup_der"></div>
<div id="borde_sup_izq"></div>

</div>

<div id="contenedor">

<div id="izquierda"></div>
<div id="derecha"></div>
<div id="centro">

</div>

</div>

<div id="borde_inferior">

<div id="borde_inf_der"></div>
<div id="borde_inf_izq"></div>

</div>

</body>

</html>
CSS
Cita:
@charset "utf-8";

* {
margin: 0;
padding:0;
outline: none;
border: 0;
}

body {
font-size:99%;
font-family:sans-serif;
background:#333;
}

#borde_superior {
background:#ff0000;
height:50px
}

#izquierda {
float:left;
width:30px;
padding: 10px;
background:#ff0000;
}

#derecha {
float:right;
width:30px;
padding: 10px;
background:#ff0000;
}

#centro {
background:#e0e0e0;
overflow:hidden;
}

#contenedor {
overflow:hidden;
background:#444;
width:100%;
margin: 0 auto;
}

#izquierda, #centro, #derecha {
padding-bottom:10000px;
margin-bottom:-10000px;
}

#borde_inferior {
clear:both;
height: 50px;
background:#ff0000;
}

#borde_sup_der {
background-color: #00F;
float: right;
height: 50px;
width: 50px;
}
#borde_sup_izq {
background-color: #00F;
height: 50px;
width: 50px;
}
#borde_inf_der {
background-color: #00F;
float: right;
height: 50px;
width: 50px;
}
#borde_inf_izq {
background-color: #00F;
height: 50px;
width: 50px;
}
link donde encontre la solucion: http://css.devillasbuenas.es/3columnas.html

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




La zona horaria es GMT -6. Ahora son las 17:07.