Foros del Web » Creando para Internet » CSS »

Borde rodeando a otro borde

Estas en el tema de Borde rodeando a otro borde en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/12/2010, 10:52
 
Fecha de Ingreso: diciembre-2010
Ubicación: Santander
Mensajes: 7
Antigüedad: 7 años
Puntos: 0
Borde rodeando a otro borde

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

</body>
</html>



Cualquier otra sugerencia para realizar lo mismo que he hecho de manera más fácil será muy de agradecer.
  #2 (permalink)  
Antiguo 13/12/2010, 11:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Borde rodeando a otro borde

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?
  #3 (permalink)  
Antiguo 13/12/2010, 12:22
 
Fecha de Ingreso: diciembre-2010
Ubicación: Santander
Mensajes: 7
Antigüedad: 7 años
Puntos: 0
Información Respuesta: Borde rodeando a otro borde

Cita:
Iniciado por kseso? Ver Mensaje
¿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

Última edición por sinosuke11; 13/12/2010 a las 12:29 Razón: No se veía la imagen
  #4 (permalink)  
Antiguo 13/12/2010, 13:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Borde rodeando a otro borde

Una forma de enfocarlo sería:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. #contenedor {
  8. width: 20em;
  9. margin: 0 auto;
  10. padding: 2em 3em 5em;
  11. border: 4px solid #000000;
  12. background: #99D9EA;
  13. }
  14. .Textoprincipal {
  15. padding: 20px;
  16. border: 2px solid #9D9D9D;
  17. background: #D6D6D6;
  18. }
  19. p {
  20. font-size: 1em;
  21. text-align: center;
  22. margin-bottom: 1em;
  23. }
  24. p span {font-weight:900;}
  25. </head>
  26.   <div id="contenedor">
  27.     <div class="Textoprincipal">
  28.     <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>
  29. <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,
  30. actualizar conocimientos y profundizar en el aprendizaje.</p>
  31. <p>En definitiva, aquí encontrará todo lo que necesita saber. Lo esencial de la informática al alcance de todos.</p>
  32.     </div>
  33.       </div>
  34. </body>
  35. </html>

EL código anterior, sólo como base o inicio.
Por cierto, etiquetas como <center>, <b> y parecidas no se recomienda su uso. Y según qué doctype utilice pueden hasta marcarse como error su inclusión en el html.
  #5 (permalink)  
Antiguo 13/12/2010, 14:06
 
Fecha de Ingreso: diciembre-2010
Ubicación: Santander
Mensajes: 7
Antigüedad: 7 años
Puntos: 0
Sonrisa Respuesta: Borde rodeando a otro borde

Cita:
Iniciado por kseso? Ver Mensaje
Una forma de enfocarlo sería:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. #contenedor {
  8. width: 20em;
  9. margin: 0 auto;
  10. padding: 2em 3em 5em;
  11. border: 4px solid #000000;
  12. background: #99D9EA;
  13. }
  14. .Textoprincipal {
  15. padding: 20px;
  16. border: 2px solid #9D9D9D;
  17. background: #D6D6D6;
  18. }
  19. p {
  20. font-size: 1em;
  21. text-align: center;
  22. margin-bottom: 1em;
  23. }
  24. p span {font-weight:900;}
  25. </head>
  26.   <div id="contenedor">
  27.     <div class="Textoprincipal">
  28.     <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>
  29. <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,
  30. actualizar conocimientos y profundizar en el aprendizaje.</p>
  31. <p>En definitiva, aquí encontrará todo lo que necesita saber. Lo esencial de la informática al alcance de todos.</p>
  32.     </div>
  33.       </div>
  34. </body>
  35. </html>

EL código anterior, sólo como base o inicio.
Por cierto, etiquetas como <center>, <b> 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

Etiquetas: border
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 19:40.