Pagina con borde

agustito37 · #1 (**permalink**) 21/06/2010, 12:15

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

jomaruro · #2 (**permalink**) 21/06/2010, 15:04

Hola:

¿Has probado a poner el ancho en porcentajes?

Saludos.

Calizman · #3 (**permalink**) 22/06/2010, 00:29

Saludos!

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

Código CSS:

Ver originalbody {
border: 5px solid #000;
}

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

Hasta Luego!

agustito37 · #4 (**permalink**) 22/06/2010, 14:58

Cita:

Iniciado por Calizman

Saludos!

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

Código CSS:

Ver originalbody {
border: 5px solid #000;
}

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

agustito37 · #5 (**permalink**) 22/06/2010, 15:01

Cita:

Iniciado por jomaruro

Hola:

¿Has probado a poner el ancho en porcentajes?

Saludos.

como es una imagen va a tener q tener el ancho de esta

funkii · #6 (**permalink**) 22/06/2010, 15:12

lo podes hacer con la propiedad border-image-source, con esto le podes poner de fondo a un borde una imagen :)

masterojitos · #7 (**permalink**) 22/06/2010, 15:33

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

agustito37 · #8 (**permalink**) 23/06/2010, 10:00

Cita:

Iniciado por funkii

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?

jomaruro · #9 (**permalink**) 23/06/2010, 16:05

Hola:

Cita:

Iniciado por funkii

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.

agustito37 · #10 (**permalink**) 23/06/2010, 17:41

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.

jomaruro · #11 (**permalink**) 24/06/2010, 15:00

Hola:

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

Saludos.

agustito37 · #12 (**permalink**) 24/06/2010, 15:51

Cita:

Iniciado por jomaruro

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.

agustito37 · #13 (**permalink**) 27/06/2010, 21:28

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