Maquetando con CSS

erdanblo

Pués es que tengo un problemilla, el caso es que maquetando una web, quiero lo siguiente:

BORDE | PARTE CENTRAL CONTENIDOS | BORDE

El caso, es que tengo esto en el HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="es" />
<meta name="Author" content="erdanblo :: www.erdanblo.tk" />
<title>n0-waY :: CS TEAM</title>
<style type="text/css" title="currentStyle">
@import "gfx/estilo.css";

</style>
</head>

< body>

<div id="contenedor">

<div id="borde1"></div>

<div id="central"></div>

<div id="borde2"></div>

</div>

</body>

</html>

Y en la CSS:

html {
height: 100%;
}
body {
height: 100%;
background-color: #282D3C;
margin-top: 0px;
margin-bottom 0px;
}
div#contenedor {
width: 630px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
div#borde1 {
width: 41px;
height: 100%;
background-image: url(interface/borde1.jpg);
position: relative;
top: 0xp;
left: 0px;
}
div#borde2 {
width: 41px;
height: 100%;
background-image: url(interface/borde2.jpg);
position: relative;
top: 0px;
right: 0px;
}
div#central {
width: 548px;
height: 100%;
top: 0xp;
}

El caso es que, me sale una cosa asi...

BORDE
|
PARTE CENTRAL
|
BORDE

Todo hacia abajo, en vez de montarmelo a la misma altura todo... no se si me explico ;P

O

tal vez poniendole la posicion absoluta a las capas y la vas poniendo su posicion en pixeles.

Algo asi:

div#borde1 {
width: 41px;
height: 100%;
background-image: url(interface/borde1.jpg);
position: absolute;
top: 0px;
left: 0px;
}
div#borde2 {
width: 41px;
height: 100%;
background-image: url(interface/borde2.jpg);
position: absolute;
top: 0px;
left: 591px;
}
div#central {
width: 548px;
height: 100%;
position: absolute;
left: 42px;
top: 0px;
}

Prueba con esto a ver si te funciona. De todos si usas el dreamweaver puedes colocar las capas como quieras desde la vista diseño.

Espero que te sirva.

uniCo

pero como quieres situarlas... explicate mejor o haz una screen de como lo querrias en photoshop porq yo te lo puedo solucionar pero si te entiendo xD

Crawler

pq no usas una imagen de fondo que incluya los bordes y la centras en pagina?

NE0

existen comandos de border-left , border-right.. aujn asi si quieres ponerlos como img , yo lo que haria seria situarlas mediante "%" ya que asi no se t emodificara si cambias la resolucion o si haces mas pequeña o grande la ventana del explorer

erdanblo

Tenia pensado hacer eso #4...

:@ Putas costumbres de las tablas...

http://usuarios.lycos.es/erdanbloftp/loqueyoquiero.jpg - Lo que quiero que salga.

http://usuarios.lycos.es/erdanbloftp/loquemesale.jpg - Lo que se me muestra. (Falta el otro borde, que aparece más abajo.)

LiuM

Usa solo la capa de contenido y posicionala con las propiedades del css, ya q poner un div en los bordes que no se van a aprovechar es tonteria. Ahora si quieres algun dia poner algo en los bordes entonces si

erdanblo

Tengo que colocar una cosa en el borde izquierdo, es un texto en vertical tipo http://bandaancha.st/img/mt39.gif.

aLeX

Te falta la propiedad float en los divs. Sin ella no dejará que ningun otro div ocupe su espacio. Prueba con un float: left (o right, no macuerdo :p)

erdanblo

aiii aLeX... xDDD como se nota que lo hice anoche... todo dormido... no se como se me olvido... se me fue la olla...

muchas gracias nen... no se me paso

Solucionado

NE0

aparte de los float.. usa "X%" (donde X sea un valor) para lo que te dije en el post d emas arriba... usandolo en los anchos te quedara mal.

Usuarios habituales