Tema: wenas , me falta un div por colocar que nose como poner
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/10/2011, 10:48
omegadiaz
 
Fecha de Ingreso: octubre-2011
Mensajes: 1
Antigüedad: 13 años, 1 mes
Puntos: 1
Respuesta: wenas , me falta un div por colocar que nose como poner
Bueno, ya he resuelto tu problema, cómo todavia estás estudiando es normal que no te salgan las cosas a la primera, por éso no te preocupes

Varias cosas, tienes que saber que una etiqueta <div> puede ir dentro de otra etiqueta <div> y así hasta el infinito;
Código HTML: 
Ver original
  1. <div>
  2.         <div>
  3.           </div>
  4. </div>

pero tiene que asegurarte de cerrar todas las etiquetas interiores, por que tu <div id="capitulos"> no cerraba correctamente al tú no haber cerrado la lista desordenada <ul>

lo único que he hecho ha sido crear un <div> para contener el parrafo y la imagen y usar el css para darle un border. Cómo es una página pequeña puedes usar ids únicos para cada div pero es mejor usar class="". E aquí el código:

HTML
Código HTML: 
Ver original
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.     <head>
  6.         <link rel="stylesheet" type="text/css" href="piripi2.css">
  7.         <title>El Ingenioso Hidalgo Don Quijote de la Mancha</title>
  8.     </head>
  9.     <body>
  10.     <div id="capitulos"> 
  11.         <p>Cap&iacute;tulos</p>
  12.         <ul>
  13.       <li> <a href="#capitulo1"> Capitulo I  <a> </li>  
  14.      <li> <a href="#capitulo2"> Capitulo II  <a> </li>  
  15.      <li> <a href="#capitulo3"> Capitulo III <a> </li>  
  16.      <li> <a href="#capitulo4"> Capitulo IV  <a> </li>  
  17.      <li> <a href="#capitulo5"> Capitulo V  <a> </li>   
  18.       
  19.        </ul>
  20.     </div>
  21.     
  22.         <div id="final"> <p> El ingenioso  Hidalgo Don Quijote de la Mancha  </div>
  23.         
  24.         
  25.         <div id="contenido">
  26.             <h1>El ingenioso hidalgo Don Quijote de la Mancha</h1>
  27.             
  28.                 <h2>Cap&iacute;tulo Primero</h2>
  29.                 <p class="subtitular">Que trata de la condici&oacute;n y ejercicio del famoso hidalgo D. Quijote de la Mancha</p>
  30.                 <div id="cap1"><p><img src="dore01.jpg" />En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que viv?a un hidalgo de los de lanza en astillero, adarga antigua, roc?n flaco y galgo corredor. Una olla de algo m?s vaca que carnero, salpic?n las m?s noches, duelos y quebrantos los s?bados, lentejas los viernes, alg?n palomino de a?adidura los domingos, consum?an las tres partes de su hacienda. El resto della conclu?an sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los d?as de entre semana se honraba con su vellori de lo m?s fino. Ten?a en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que as? ensillaba el roc?n como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta a&ntilde;os, era de complexi&oacute;n recia, seco de carnes, enjuto de rostro; gran madrugador y amigo </p></div>
  31. </div>
  32. </body>
  33. </html>

CSS
Código CSS: 
Ver original
  1. body{
  2. background-image:url(imagenes/fondo.gif);
  3.  
  4. font:antiqua;
  5. }
  6. #contenido{
  7.     margin-left:200px;
  8.     margin-bottom:50px;
  9.     
  10. }
  11. #cap1 {
  12.     border:solid;
  13.     border-color:#F00;
  14.     }
  15. p.margen{
  16.     margin-left:15px;
  17. }
  18.  
  19. p.subtitular{
  20.    border:2px solid #000080;
  21.    padding-bottom:20px;
  22. }   
  23. #subtitular{
  24.     border:2px solid #000080;
  25.    padding-bottom:20px;
  26.    }
  27.  
  28. #capitulos{
  29. position:fixed;
  30. list-style-image:url(imagenes/bolaroja.png);
  31.  
  32.  
  33. }
  34. #ul li {
  35. margin:0px;
  36. padding:0px;
  37.  
  38. }
  39.  
  40. #texto{
  41. margin:150pt;
  42. margin-top:0pt;
  43. margin-right:0pt;
  44.  
  45. }
  46.  
  47. #nombrecapitulo{
  48. border:2py solid #0033CC;
  49. font-family:Arial,Helvetica;
  50. font-size:20px;
  51. padding-bottom:10px;
  52.  
  53.  
  54.  
  55. }
  56. #final{
  57. position:fixed;
  58. bottom:0pt;
  59. width:100%;
  60. text-align:center;
  61. background-color:yellow ;
  62. font-size:20px;
  63. font-family:Arial,Helvetica;
  64. border:1pt solid #0000FF;
  65. background-color:#FFFF00;
  66. }