Foros del Web » Creando para Internet » CSS »

Problema con etiqueta p

Estas en el tema de Problema con etiqueta p en el foro de CSS en Foros del Web. Hola que tal tengo un gran problema estoy desarrollando un sitio intento alinear un párrafo con respecto a una imagen, vamos a decir al centro. ...
  #1 (permalink)  
Antiguo 25/04/2011, 22:23
 
Fecha de Ingreso: enero-2011
Mensajes: 7
Antigüedad: 6 años, 10 meses
Puntos: 1
Pregunta Problema con etiqueta p

Hola que tal tengo un gran problema estoy desarrollando un sitio intento alinear un párrafo con respecto a una imagen, vamos a decir al centro. bueno la imagen se encuentra al como background de un div y los párrafos están dentro de ese div lo que quisiera saber es por que los párrafos al ponerles el margin alinean al div que los contiene esto solo para el primer párrafo por que he agregado otros y estos si se mueven con respecto a su div contenedor y no mueven al div que los contiene. voy a poner el código. para aclarar mas esto

<div id="fecha">
<p class="mes">1</p>
<p class="mes">2</p>
<p class="mes">3</p>
</div> // este es el codigo de html

#fecha{
width:243px;
height:197px;
background:url(img/calendario.png) no-repeat;
}

#fecha .mes{
margin:0;
padding:0;
margin-top:10px;
} //estos dos son el codigo css

entonces alcarando bien la clase mes que se deveria de mover con respecto de el div fecha lo hace pero solo despues del segundo parrafo ya que el primero no se mueve con repecto de su div moviendolo de su posicion

Última edición por R762; 25/04/2011 a las 22:30
  #2 (permalink)  
Antiguo 26/04/2011, 20:17
 
Fecha de Ingreso: febrero-2010
Ubicación: Republica Dominicana
Mensajes: 53
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: Problema con etiqueta p

Amigo pon mas de tu codigo, porque lo visto en tu mensaje dice estar bien...

Saludos,,
  #3 (permalink)  
Antiguo 27/04/2011, 00:22
 
Fecha de Ingreso: diciembre-2008
Ubicación: Merida
Mensajes: 12
Antigüedad: 9 años
Puntos: 1
Respuesta: Problema con etiqueta p

por las medidas del div #fecha supongo que es una imagen de un calendario (con los cuadros) y lo que tu quieres hacer es colocar los numeros en los cuadros correspondientes al mes, en otras palabras en el primer cuadro (enero) ponerle el numero 1, en el segundo cuadro (febrero) ponerle el numero 2 y así sucesivamente no? leyendo tu codigo tus parrafos unicamente tienen un margen superior de 10px en otras palabras, tus parrafos unicamente se iran hacia abajo uno de otro, a menos de que tu calendario tenga 12 cuadros hacia abajo estaria bien, lo que puedes hacer es modificar tus parrafos para que dejen de mostrarse como elementos en linea (el tag <p> se muestra en linea) y mostrarlos en bloque:

por cierto... tienes un error de código no puedes ponerle a una clase DOS VECES la misma propiedad!
Código CSS:
Ver original
  1. #fecha .mes{
  2.   margin:0; /* le dices que los margenes sean de CERO */
  3.   padding:0;
  4.   margin-top:10px; /* y despues les dices que ponga un margen de 10px arriba */
  5. } //estos dos son el codigo css

el margin y padding igual a cero es un reseter general que debe usarse:

Código CSS:
Ver original
  1. * {
  2.   margin:0;
  3.   padding:0;
  4. }

para que todos los elementos de la pagina tengan un margen y relleno igual a cero, aunque te recomiendo mas usar el reset de erick meyer (puedes buscarlo en google, porque no sé si consideran spam poner links a otras paginas)

de todos modos te lo dejo:

Código CSS:
Ver original
  1. /* Eric Meyer CSS Reset */
  2.  
  3. *{ margin:0; padding: 0; border: 0; }
  4. 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, trike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
  5. body {line-height: 1;}
  6. ol, ul {list-style: none;}
  7. blockquote, q {quotes: none;}
  8. blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
  9. /* remember to define focus styles! */
  10. :focus {outline: 0;}
  11. /* remember to highlight inserts somehow! */
  12. ins {text-decoration: none;}
  13. del {text-decoration: line-through;}
  14. /* tables still need 'cellspacing="0"' in the markup */
  15. table {border-collapse: collapse;border-spacing: 0;}

lo que puedes hacer (dependiendo que quieres hacer):

Código CSS:
Ver original
  1. #fecha {
  2.   width:243px;
  3.   height:197px;
  4.   background:url(img/calendario.png) no-repeat;
  5. }
  6.  
  7. #fecha p {
  8.   display:block; /* mostramos en bloque el elemento */
  9.   height:15px; /* forzamos un alto fijo */
  10.   margin:10px; /* margen 10px en todos lados */
  11.   width:15px; /* forzamos un largo fijo */
  12. }

seria mas facil que compartieras esa imagen de background del div #fecha para tener una idea mas clara de que es lo que quieres hacer :)

Etiquetas: etiqueta
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 07:34.