Foros del Web » Creando para Internet » CSS »

Poner imágenes como borde de una caja de comentario

Estas en el tema de Poner imágenes como borde de una caja de comentario en el foro de CSS en Foros del Web. Hola!, estoy tratando de ponerle bordes redondeados a las cajas de los comentarios (en wordpress). Pensé que sería fácil, incluso creo que estoy bastante cerca ...
  #1 (permalink)  
Antiguo 21/11/2005, 14:42
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Poner imágenes como borde de una caja de comentario

Hola!, estoy tratando de ponerle bordes redondeados a las cajas de los comentarios (en wordpress). Pensé que sería fácil, incluso creo que estoy bastante cerca de lograrlo pero tengo un pequeño problema. Podéis verlo en vivo AQUI

Como se observa, me sale una línea entre medio.. y no se como sacarla! probé 1001 maneras, que si padding-top, que si padding, que si margin, con diferentes valores (negativos también), quitandolos, etc... y es que yo creo que algo me lo está "jodiendo" pero no tengo ni idea que pueda ser. Os pego la parte del php y el css

Archivo comments.php:
Código PHP:
<div class="comenarriba" style="min-height: 50px;" ></div>

<div class="comenbody" style="min-height: 2px; background-color: #f4fbff; padding: 0px;">

<img src="<?php gravatar("R"60"http://www.blueblog.org/wp-content/nogravatar.png"); ?>" alt="" align="left" border-width="0"/>

<p style="margin-left: 15px; text-align: left;">  Autor: <b><?php comment_author_link() ?></b> el <?php comment_date('d.m.y'?> @ <?php comment_time() ?> <?php edit_comment_link(__("e"), ''); ?><?php comment_text() ?></p>

<p class="post-footer" style="margin-bottom: 0px; padding-left:0px;"></p>

<div class="comenabajo" style="min-height: 60px;"></div>
Archivo style.css (El completo podéis verlo aquí)
Código:
.comenarriba {
	background: url(comentop.png) no-repeat top center;
	padding-bottom: 1px;
}
.comenbody {
	background: url(comenbody.gif) repeat-y;
	padding-top: 0px;

	margin-top: 0px;
}
.comenabajo {
	background: url(comenbot.png) no-repeat bottom;
	padding: 1px 1px 0 0;
	text-align: right;
	font: .65em Verdana, sans-serif;
}
  #2 (permalink)  
Antiguo 22/11/2005, 10:05
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
Asi funca en los 2:

HTML:

Código:
<div id="contenedor">

    <div id="post">
        <div id="encabezado">
        </div>
        <div id="cuerpo">
            Contenido
        </div>
        <div id="pie">
        </div>
    </div>

    <div id="post">
        <div id="encabezado">
        </div>
        <div id="cuerpo">
            Contenido mas grande
            <ul>
                <li>Tema uno</li>
                <li>Tema dos</li>
                <li>Tema tres</li>
                <li>Tema cuatro</li>
            </ul>
        </div>
        <div id="pie">
        </div>
    </div>

</div>
CSS:

Código:
#contenedor{
position:relative;
text-align:center;
margin-top:100px;
margin-left:0px;
}


#post{
position:relative;
width:470px;
height:auto;
margin-bottom:150px;
margin-left:auto;
margin-right:auto;
}


#encabezado{
position:absolute;
top:-50px;
left:0px;
background-image: url(imag/comentop.png);
background-repeat:no-repeat;
width:470px;
height:50px;
}
#cuerpo{
position:relative;
text-align:left;
background-image: url(imag/comenbody.gif);
background-repeat:repeat-y;
width:470px;
height:auto;
}
#pie{
position:absolute;
left:0px;
background-image: url(imag/comenbot.png);
background-repeat:no-repeat;
width:470px;
height:80px;
}
Estan centrados a modo de ejemplo, acordate que para que funcionen la posicion del elemento que los contiene a todos (en mi caso hice un div "contenedor") debe tener la posicion seteada, ya sea relativa o absoluta, ya que si no esta seteada se comportara de diferente manera en los diferentes exploradores.

Espero te sirva, saludos!
  #3 (permalink)  
Antiguo 22/11/2005, 16:35
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuchi iiiiiiiiiiiiiiiiiiiiiiiiisimas gracias!!!!!!!!!!!!!! me ha funcionado perfecto!, ahora solo tengo que pulirle algunos detalles como margin, etc para que quede bien lindo!

GRACIAS NUEVAMENTE!!
  #4 (permalink)  
Antiguo 14/05/2009, 18:05
 
Fecha de Ingreso: mayo-2009
Mensajes: 9
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Poner imágenes como borde de una caja de comentario

oye dime este es un sistema de comentarios para tu web ??
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:56.