Borde rodeando a otro borde

sinosuke11 · #1 (**permalink**) 13/12/2010, 10:52

Hola a todos. Soy muy nuevo en esto y necesito que me echeis una mano.
Quiero poner un nuevo borde a esto de manera que no sea paralelo al que construye mi código, diferentes distancias al borde y diferente color de fondo al ya hecho pero no sé como hacerlo.
Seguro que para vosotros está fácil.
Os pongo el código.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>

<style type="text/css">

#Textoprincipal {
padding: 1px;
height: 12.1cm;
width: 9.8cm;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #9D9D9D;
border-right-color: #9D9D9D;
border-bottom-color: #9D9D9D;
border-left-color: #9D9D9D;
position: relative;
background-color: #D6D6D6;
top: 100px;
}
</style>
</head>

<body>
<center><div id="Textoprincipal">
Las Guías Prácticas de Anaya Multimedia son los libros más apreciados por los usuarios que se inician en el estudio de un tema informático. Ofrecen una visión rápida y rigurosa de todo lo relacionado con ordenadores personales,lenguajes 
de programación, Internet y nuevas 
tecnologías en general.
El objetivo es que todos los interesados encuentren aquí una forma práctica y solvente de resolver sus dudas. El lenguaje es claro e incluye ejemplos y ejercicios. Además, las capturas de pantalla e ilustraciones permiten fijar las ideas de mosdo eficaz, 
actualizar conocimientos y profundizar en el aprendizaje.
En definitiva, aquí encontrará todo lo que necesita saber. Lo esencial de la informática al alcance de todos.
</div></center>

</body>
</html>

Cualquier otra sugerencia para realizar lo mismo que he hecho de manera más fácil será muy de agradecer.

kseso? · #2 (**permalink**) 13/12/2010, 11:01

Cita:

Quiero poner un nuevo borde a esto de manera que no sea paralelo al que construye mi código, diferentes distancias al borde y diferente color de fondo al ya hecho pero no sé como hacerlo.

¿Puede ejemplificar con una imagen qué quiere lograr?

sinosuke11 · #3 (**permalink**) 13/12/2010, 12:22

Cita:

Iniciado por kseso?

¿Puede ejemplificar con una imagen qué quiere lograr?

De esta manera. Como ves tengo el borde interior de color gris hecho pero ni idea de como hacer el exterior

kseso? · #4 (**permalink**) 13/12/2010, 13:19

Una forma de enfocarlo sería:

Código HTML:

Ver original<!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" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
#contenedor {
width: 20em;
margin: 0 auto;
padding: 2em 3em 5em;
border: 4px solid #000000;
background: #99D9EA;
}
.Textoprincipal {
padding: 20px;
border: 2px solid #9D9D9D;
background: #D6D6D6;
}
p {
font-size: 1em;
text-align: center;
margin-bottom: 1em;
}
p span {font-weight:900;}
</style>
</head>
<body>
  <div id="contenedor">
    <div class="Textoprincipal">
    <p>Las <span>Guías Prácticas</span> de Anaya Multimedia son los libros más apreciados por los usuarios que se inician en el estudio de un tema informático. Ofrecen una visión rápida y rigurosa de todo lo relacionado con ordenadores personales,lenguajes de programación, Internet y nuevas tecnologías en general.</p>
<p>El objetivo es que todos los interesados encuentren aquí una forma práctica y solvente de resolver sus dudas. El lenguaje es claro e incluye ejemplos y ejercicios. Además, las capturas de pantalla e ilustraciones permiten fijar las ideas de mosdo eficaz, 
actualizar conocimientos y profundizar en el aprendizaje.</p>
<p>En definitiva, aquí encontrará todo lo que necesita saber. Lo esencial de la informática al alcance de todos.</p>
    </div>
      </div>
</body>
</html>

EL código anterior, sólo como base o inicio.
Por cierto, etiquetas como <center>, y parecidas no se recomienda su uso. Y según qué doctype utilice pueden hasta marcarse como error su inclusión en el html.

sinosuke11 · #5 (**permalink**) 13/12/2010, 14:06

Cita:

Iniciado por kseso?

Una forma de enfocarlo sería:

Código HTML:

Ver original<!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" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
#contenedor {
width: 20em;
margin: 0 auto;
padding: 2em 3em 5em;
border: 4px solid #000000;
background: #99D9EA;
}
.Textoprincipal {
padding: 20px;
border: 2px solid #9D9D9D;
background: #D6D6D6;
}
p {
font-size: 1em;
text-align: center;
margin-bottom: 1em;
}
p span {font-weight:900;}
</style>
</head>
<body>
  <div id="contenedor">
    <div class="Textoprincipal">
    <p>Las <span>Guías Prácticas</span> de Anaya Multimedia son los libros más apreciados por los usuarios que se inician en el estudio de un tema informático. Ofrecen una visión rápida y rigurosa de todo lo relacionado con ordenadores personales,lenguajes de programación, Internet y nuevas tecnologías en general.</p>
<p>El objetivo es que todos los interesados encuentren aquí una forma práctica y solvente de resolver sus dudas. El lenguaje es claro e incluye ejemplos y ejercicios. Además, las capturas de pantalla e ilustraciones permiten fijar las ideas de mosdo eficaz, 
actualizar conocimientos y profundizar en el aprendizaje.</p>
<p>En definitiva, aquí encontrará todo lo que necesita saber. Lo esencial de la informática al alcance de todos.</p>
    </div>
      </div>
</body>
</html>

EL código anterior, sólo como base o inicio.
Por cierto, etiquetas como <center>, y parecidas no se recomienda su uso. Y según qué doctype utilice pueden hasta marcarse como error su inclusión en el html.

Muchisimas gracias kseso?. Esta perfectísimo