Alineación de imágenes después del reseteo de CSS

[laylu]

Buenos días,

Llevo unas hores intentando alinear una imagen con un texto pero no doy con la forma de hacerlo. Intuyo que el problema está en la hoja de reseteo de CSS que "me se" lo carga todo y no sé qué debo redefinir para que los elementos tengan un comportamiento normal. Os pongo aquí el reseteo y después el código de lo que quiero.

Reseteo:

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Aquí os pongo el código de lo que estoy escribiendo:

XHTML:

Código:

<h1>Revista</h1>

<div id="revista">
	
    <p>
        <img src="./content/revista/20090621.jpg" alt="20090621" align="top"/>
        <strong>Fecha: </strong>21 de junio del 2009 <br />
        <ul>
            <li>Descripción 1</li>
            <li>Descripción 2</li>
            <li>Descripción 3</li>
            <li>Descripción 4</li>
        </ul>
    </p>
     
</div>

Y aquí el CSS que he definido para todo lo que aparece en éste div "Revista":

CSS:

Código:

#revista {
	float: left;
	margin-top: 10px;
	padding-bottom: 10px;
	border-bottom: solid 2px #9acc00;
	display: block;
	margin-bottom: 10px;
}

#revista img{
	/*float: left;*/
	margin-right: 10px;
	width: 225px;
	margin-left: 110px;
	vertical-align: top;
}

Pretendo que la imagen quede a la izquierda (que lo hace) y el texto a la derecha (que lo hace parcialmente). En la parte que pone "fecha", ésta aparece alineada con la cabeza de la imagen, pero cuando escribo el ul, éste salta directamente y aparece debajo de la imagen, cuando yo quiero que aparezca a continuación del texto.

Cabe decir que si uso <p> para dejar la imagen fuera y que tenga que ver sólo con el texto, "fecha" queda debajo de la imagen directamente (y eso que no hay ningún "display: block;" para la imagen ...

SI alguien puede explicarme por qué el "ul" salta y cómo puedo subirlo, se lo agradeceré.

Atentamente, laylu.

[Mikmoro]

Justamente es que has comentado el código que necesitas:

#revista img{
/*float: left;*/
margin-right: 10px;
width: 225px;
margin-left: 110px;
vertical-align: top;
}

Lo que debe estar flotado a la izquierda es la imagen. Descomenta ese float: left y asunto arreglado

[laylu]

Gracias por la ayuda Mikmoro, pero es que si lo descomento, se me come el flow y el texto de la que sería la "siguiente" revista, sube también.

[Mikmoro]

Pero ese es otro problema: si quieres que el UL esté al lado de la imagen, es obligatorio que pongas float: left a la imagen. ¿Cómo afecta esto a los siguientes elementos? eso ya es otro asunto.

(posiblemente con añadir clear: both a #revista te bastará, pero habría que ver todo el código).

[laylu]

El link a la sección es éste:
http://www.saludydeporteconsciente.e...a&revista=null
Y el CSS es éste:
http://www.saludydeporteconsciente.es/css/css.css

En la parte baja del CSS, encima del footer, está #revista.

Atentamente, laylu.

P.D.: Pongo overflow: hidden; en #info1 ? Uhmmm.

[kseso?]

Hola Laylu
Añade a

#info1 p {
clear:both;
font-size:1em;
line-height:1.6em;
margin-bottom:7px;
margin-top:7px;
text-indent:1.5em;
}

¡Qué fácil cuando el trabajo gordo ya está hecho!

Por cierto, al usar un | charset=utf-8" | los acentos debes colocarlos con su correspondiente "entidad" html: "descripci&oacute;n 1"
Un saludo

[laylu]

Gracias !

Lo de los acentos sí, lo se, pero tengo la manía de ponerlos en la vista de Cógido del DW y SIEMPRE tengo que volver a Diseño para escribirlos.

Atentamente y eternamente agradecido, laylu.