Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Alineación de imágenes después del reseteo de CSS en el foro de CSS en Foros del Web. 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á ...
  #1 (permalink)  
Antiguo 30/06/2009, 04:52
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Pregunta Alineación de imágenes después del reseteo de CSS

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.
  #2 (permalink)  
Antiguo 30/06/2009, 05:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineación de imágenes después del reseteo de CSS

Justamente es que has comentado el código que necesitas:
Cita:
#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
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 30/06/2009, 05:41
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alineación de imágenes después del reseteo de CSS

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.
  #4 (permalink)  
Antiguo 30/06/2009, 05:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineación de imágenes después del reseteo de CSS

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).
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 30/06/2009, 06:02
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alineación de imágenes después del reseteo de CSS

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.
  #6 (permalink)  
Antiguo 30/06/2009, 07:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alineación de imágenes después del reseteo de CSS

Hola Laylu
Añade a
Cita:
#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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 30/06/2009 a las 07:17
  #7 (permalink)  
Antiguo 30/06/2009, 08:56
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Alineación de imágenes después del reseteo de CSS

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.
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 21:14.