Foros del Web - Ver Mensaje Individual

kseso? · #2 (**permalink**) 17/11/2009, 06:13

Cita:

Os explico, basicamente lo que quiero hacer es centrar las imagenes con etiqueta .titulo_imagen y por otro lado los bloques de texto de los capitulos de mi libro justificarlos.

Pues sí, lo estás haciendo un tanto enrevesadamente. No adivino con los códigos que has puesto para qué quieres el selector de adyacentes (>). Y nada semántico que el contenido de un hnº sea una imagen.
Ejecuta lo siguiente:

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" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0; position: relative;}
* html, * body { height:100%; overflow:auto;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background: #FFF;}
.capitulo {
background: #444;
width: 760px;
margin: 10px auto 0;
}
.capitulo p {
font-size: 1em;
text-align: justify;
text-indent: 50px;
color: #fff;
padding: 10px 10px 0;
}
.capitulo h4 {
font-size: 2em;
font-weight: bolder;
color: #FFCC00;
text-indent: 100px;
margin: 10px 0;
}
.titulo_img {
display: block;
margin: 0 auto;
padding: 2px;
border: 3px double #cdcdcd;
background: #777;
}
</style>
</head>
  <body>
    <div class="capitulo">
        <h4 id="capitulo_1">Capítulo 1:</h2>
        <img class="titulo_img" src="http://www.inta.es/descubreAprende/imagenes/Foto_web_inf_06.jpg" alt="imagen del capitulo" />
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>    
    </div>
    
    <div class="capitulo">
        <h4 id="capitulo_2">Capítulo 2:</h2>
        <img class="titulo_img" src="http://www.roma.viajar-italia.com/imagenes/avion-roma.jpg" alt="imagen del capitulo" />
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>    
    </div>
  </body>
</html>