Cómo crear un recuadro con CSS y agregarle color de fondo

Emis · 22 Mar 2011

Buenas, estoy queriendo saber cual es la forma de cerrar un recuadro y darle color de fondo, dejo la imagen a lo que me refiero.

Así es como tengo en el sitio ahora: http://i52.tinypic.com/2h2kp37.png

Así es como quiero que quede (parecido): http://i51.tinypic.com/9lhgsl.png

Saludos

luisv1 · 22 Mar 2011

Mira puedes aplicarle una clase, y mas o menos seria asi:

.imagen {
width:100%; dependiendo del ancho del rectangulo
background:color; color del rectangulo
border: 1 px solid color; color del borde del rectangulo
font-weight:bold; fuente en negrita
font-size:12px; tamaño de fuente
font: Arial; tipo de fuente
text-align:left;
padding-left:10px; medida aprox.
padding-top:8px; medida aprox.
padding-bottom:6px; medida aprox.
}

Espero que te ayude, saludos!

Emis · 22 Mar 2011

luisv1 dijo:
Mira puedes aplicarle una clase, y mas o menos seria asi:

.imagen {
width:100%; dependiendo del ancho del rectangulo
background:color; color del rectangulo
border: 1 px solid color; color del borde del rectangulo
font-weight:bold; fuente en negrita
font-size:12px; tamaño de fuente
font: Arial; tipo de fuente
text-align:left;
padding-left:10px; medida aprox.
padding-top:8px; medida aprox.
padding-bottom:6px; medida aprox.
}

Espero que te ayude, saludos!

Seguro que es asi porque no funciona.

Y en la parte de los colores no tendria que ser asi {color: #00000;} o esta bien como colocaste y cambiarle la frase "color" por el nº del color, "background:#000000;"

Mario · 22 Mar 2011

"color" es para el color de texto, "background-color" es para el color de fondo, puedes poner el nombre del color o el código #ff0000 por ejemplo.

Emis · 23 Mar 2011

Mario dijo:
"color" es para el color de texto, "background-color" es para el color de fondo, puedes poner el nombre del color o el código #ff0000 por ejemplo.

Ya se, pero me refiero si en esta parte background:color; reemplazo la palabra color por el numero del color ejemplo #CCCCCC, porque yo hice asi y no me funciona.

KnxDT · 23 Mar 2011

Emis dijo:
Ya se, pero me refiero si en esta parte background:color; reemplazo la palabra color por el numero del color ejemplo #CCCCCC, porque yo hice asi y no me funciona.

El parámetro correcto es: background-color

PD: No olvides quitar los comentarios que él ha añadido

Emis · 23 Mar 2011

KnxDT dijo:
El parámetro correcto es: background-color

PD: No olvides quitar los comentarios que él ha añadido

Aver podes decirme si esta bien asi el codigo porfavor.

.imagen {
width:100%;
background-color #CCCCCC;
border: 1 px solid color #CCCCCC;
font-weight:bold;
font-size:12px;
font: Arial;
text-align:left;
padding-left:10px;
padding-top:8px;
padding-bottom:6px;
}

Alevsk · 23 Mar 2011

Te puede funcionar incluso si solo usas background: #CCCCCC;

salu2

KnxDT · 23 Mar 2011

Emis dijo:
Aver podes decirme si esta bien asi el codigo porfavor.

Ten en cuenta que si no te sale puede ser porque el width:100% solo te funcionará si se encuentra dentro de un div contenedor de un width definido. Yo te recomendaría el sgte. código, en base al que ya tienes:

.imagen {
width:200px;
height: 100px;
background-color #CCCCCC;
border: 1px solid color #CCCCCC;
font-weight:bold;
font-size:12px;
font-family: Arial;
text-align:left;
padding:8px 0 6px 10px;
}

No olvides que a tu imagen debes añadirle el atributo de clase, así:

<img class="imagen" src="url_de_la_imagen" alt="" />

He dejado en negrita los cambios o puntos a tener en cuenta

Saludos.

Alevsk dijo:
Te puede funcionar incluso si solo usas background: #CCCCCC;

salu2

Lo correcto es background-color. El background cuando se usa solo se usa para tramas o complementado con otros parámetros de background, como background-position, etc.

Emis · 23 Mar 2011

No me funciona, me estoy volviendo locoo!!!.. Dejo el codigo del style.css aver quien lo puede agregar en donde sea correcto y que funcione!

/**************** Body *********************/
*{margin:0;padding:0;}
body{background: url(images/bg.gif) repeat-x top;color:#333;font:14px Verdana, Helvetica, Verdana, sans-serif;margin-bottom:20px; line-height:20px;}
#wrapper{margin:2px auto;width:920px;}
#wrapper ul{list-style-type:none;}
#wrapper ul li{list-style-type:none;}

/**************** Header *********************/
#logo {float:left; margin:15px;}
#logo h1 {text-indent:-10000px;margin:0;padding:0;}
#logo h1 a {display:block;background:url(images/logo.png) no-repeat left;width:507px;height:112px; }

/**************** Header *********************/
#welcome {padding-top:80px; font-size:14px; color: #666666;}
#welcome h1 {font-size:25px; font-weight:normal; letter-spacing:-1px; margin-bottom:15px; color:#000000;}
#welcome span a{font-weight:bold; color: #006699; float:left; padding:10px 0px 0px 2px;}

/**************** Text *********************/
h2 a:link,h2 a:visited{ font-size:22px; color: #2970a6; text-decoration:none;}
h2 a:hover{color: #2970a6;}
h2.search {font-weight:lighter; font-size:12px; padding-left:20px; font-style:italic; background-color:#EFE7CB; width:540px; margin:auto; padding:2px 0px 2px 10px;}

/**************** Entry *********************/
.post { border:1px solid #ddd;background:#F5FBEF;}
.entry{ float:left;margin-bottom:10px;width:500px;}
.entry h2{color: #2970a6; padding-bottom:2px; line-height: 26px;}
.entry p{padding:0 0 10px 0;}
.post{padding:20px;text-align:justify; margin-bottom:2px;}
.entry ul{list-style-type:none;}
.entry ul li{list-style-type:none;}
.entry ol { padding: 0 0 0 35px; margin: 0; }
.entry ol li { margin: 0; padding: 0; }
.lightgray { color: #006699; font-size:15px; padding-top:5px; padding-bottom:15px;}
.meta {background-color: #3f6a91; padding:5px; margin-top: 10px; border:1px dashed #cccccc;}
.meta p{color: #4f4f4f;text-decoration:none; font-size:12px;}
.entry p.datex{color:#CC0000;font-size:11px;margin-bottom:4px;}
.entry p.datex a:link {color:#CC0000;}
.entry p.datex a:hover {color:#CC0000;text-decoration:underline;}
.entry p.datex a:visited{color:#CC0000;text-decoration:none;}
.infobottom {margin-bottom: 40px; color: #4f4f4f;text-decoration:none; font-size:12px; }
.entry-tags{float:left;background-position:0 -40px;}
.both {clear:both;}

/**************** Links *********************/
a:link, a:visited{color: #003366;text-decoration:none;}
a:hover{color: #990000;}

/**************** Navigation *********************/
#navigation{clear:both; width:950px; position:absolute; top:85px; margin:0px auto; padding:2px;}
#menu {height: 30px; list-style:none;}
.descripcion {text-align:left; margin-top: 15px; margin-left: 15px;}

/**************** Sidebars *********************/

#sidebar1{ width:140px; float:left; margin-top:16px;}
#sidebar1 h2{background: url(images/bullet.png) left no-repeat; font-weight:normal; font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar1 .blogs{background: url(images/icoblogs.png) left no-repeat; font-weight:normal; font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar1 .links{background: url(images/icolinks.png) left no-repeat; font-weight:normal; font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}

#sidebar1 ul{list-style-type:none;}
#sidebar1 ul li{list-style-type:none;}
#sidebar1 li{list-style-type:none;}
.postform {font:13px Trebuchet MS; width:150px; color:#003366; }
.archivedropdown {font:13px Trebuchet MS; width:150px; color:#003366;}

#sidebar2{ width:280px; float:left; margin-top:16px;}
#sidebar2 h2{background: url(images/bullet.png) left no-repeat; font-weight:normal;font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar2 .buscar{background: url(images/icosearch.png) left no-repeat; font-weight:normal;font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar2 .categorias{background: url(images/icocategory.png) left no-repeat; font-weight:normal;font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar2 .rss{background: url(images/icorss.png) left no-repeat; font-weight:normal;font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar2 .recientes{background: url(images/icorecent.png) left no-repeat; font-weight:normal;font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}
#sidebar2 .etiquetas{background: url(images/icotags.png) left no-repeat; font-weight:normal;font-size:12px; border-bottom:1px double #CCCCCC; padding:0px 5px 0px 20px; text-transform:uppercase;}

#sidebar2 ul{list-style-type:none;}
#sidebar2 ul li{list-style-type:none;}
#sidebar2 li{list-style-type:none;}
.sidebarcontent {margin-bottom: 20px;}
.right {float:left;width:50%;}
.left {float:left;width:50%;}

/**************** Search *********************/
#topsocial{float:right;margin:20px; margin-right:40px;}

/**************** Comments *********************/
.comlabel { background:url(images/comment.gif) left no-repeat; font-weight:lighter; font-size:14px; padding:10px 0px 10px 20px;margin-top:10px;}
.postlabel {background:url(images/comment_new.gif) left no-repeat;font-weight:lighter; font-size:14px; padding:10px 0px 10px 20px; margin:10px 0px 10px 0px;}
.commentlist{list-style:none;}
.tip {height:15px; width:500px; display:block;margin:10px 0px 0px 0px;}
.authorcomment {padding:3px; margin:10px 0px 0px 0px;}
.odd{color: #006699; font-size:12px; padding:2px 10px 2px 0px; border-bottom:1px solid #CCCCCC; }
.odd a:link{color:#006699;}
.commenttext {color: #000000; padding:5px 10px 0px 0px; margin:0px; font-size:12px;}
#author, #email, #url {width:35%;border:1px solid #cbcbcb; font:12px Trebuchet MS; margin-bottom:0.6em;margin-top:5px;padding:1px 15px 1px 1px;}
#author {background:url(images/user.png) no-repeat right;}
#email {background:url(images/email.png) no-repeat right;}
#url {background:url(images/link.png) no-repeat right;}
#comment{width:98%;border:1px solid #cbcbcb;margin-bottom:0.6em;margin-top:5px;padding:3px;}
#submit {background:#FFFFFF; padding:1px; font:12px Trebuchet MS; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; border-left:1px solid #E4E4E4; border-top:1px solid #E4E4E4;}

/**************** Footer *********************/

#footer{ font-size: 12px; border-top:1px solid #CCCCCC;margin:20px auto; padding-top:10px; text-align:left;}

/**************** Misc *********************/
acronym, abbr, span.caps { cursor: help; }
acronym, abbr { border-bottom: 1px dashed #999; }
blockquote { margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #ddd; }
blockquote cite { margin: 5px 0 0; display: block; }
.center { text-align: center; }
hr { display: none; }
a img { border: none; }
.alignright{float:right;padding-right:5px;font-size:14px; font-weight:bold;}
.alignleft{float:left;padding-left:5px; font-size:14px; font-weight:bold;}
img.centered{display:block;margin-left:auto;margin-right:auto;}
img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
code {font-size:1.0em;color: #000}

/**************** Adsense *********************/

.adsensecode {text-align:center; margin-top:25px;margin-bottom:55px;}
.adsensecode2 {text-align:center; margin-bottom:25px;}
.adsensecode3 {text-align:center;margin-top: 20px;margin-left: 15px; margin-bottom: 8px;}
.adsensecode4 {text-align:center; margin-bottom:55px;margin-left:20px;}

/**************** Buttons *********************/

.awesome, .awesome:visited {
background: #222 url(images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;}

.awesome:link { color: #fff; text-decoration:none;}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }
.super2.awesome, .super.awesome:visited { font-size: 12px; padding: 8px 14px 9px; width: 270px; margin-bottom:8px;}
.blue.awesome,.blue.awesome:visited { background-color: #2970a6; }
.blue.awesome:hover { background-color: #2970a6; }

/**************** forms *********************/

#searchformx{margin-left:2px;}
#gmailfeed{margin-bottom:5px;padding:5px;}
#gmailfeed input#email {background:#fafafa 4px 4px no-repeat;border:1px solid #ccc;padding:5px 5px 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;width:165px;}
#gmailfeed input#buttonsus{margin-top:1px;}

#respond #submit,#gmailfeed input#buttonsus{background-color: #2970a6;border:0;padding:5px; color: #fff; text-shadow:1px 1px 1px #333;-moz-border-radius:5px;-webkit-border-radius:5px;width:80px;}
#respondw #submit2:hover,#gmailfeed input#buttonsus:hover{background-color: #;cursor😛ointer;}
element{ }

/**************** iconscategorylinks *********************/

p.rpost{margin-left: 10px; padding-left: 23px; padding-bottom: 0px; padding-right: 0px; padding-top: 8px; background:url(images/posts.png) no-repeat left 10px;margin-bottom: 0px;}
p.rpost a{color: #4f4f4f;text-decoration:none; font-size:12px;}
p.rpost a{color: #4f4f4f;text-decoration:none; font-size:12px;}
p.rpost a:link{ color: #4f4f4f; text-decoration:none;}
p.rpost a:hover{color: #4f4f4f; text-decoration:underline;}
p.rpost a:visited {color: #4f4f4f; text-decoration:none;}

p.gcat{margin-left: 10px; padding-left: 23px; padding-bottom: 0px; padding-right: 0px; padding-top: 8px; background:url(images/categorias.png) no-repeat left 10px;margin-bottom: 0px;}
p.gcat a{color: #4f4f4f;text-decoration:none; font-size:12px;}
p.gcat a:link{ color: #4f4f4f; text-decoration:none;}
p.gcat a:hover{color: #4f4f4f; text-decoration:underline;}
p.gcat a:visited {color: #4f4f4f; text-decoration:none;}

p.glink{margin-left: 10px; padding-left: 23px; padding-bottom: 0px; padding-right: 0px; padding-top: 8px; background:url(images/links.png) no-repeat left 10px;margin-bottom: 0px;}
p.glink a{color: #4f4f4f;text-decoration:none; font-size:12px;}
p.glink a:link{ color: #4f4f4f; text-decoration:none;}
p.glink a:hover{color: #4f4f4f; text-decoration:underline;}
p.glink a:visited {color: #4f4f4f; text-decoration:none;}

p.gtags{margin-left: 10px; padding-left: 3px; padding-bottom: 0px; padding-right: 0px; padding-top: 8px😉 no-repeat left 10px;margin-bottom: 0px;}
p.gtags a{color: #4f4f4f;text-decoration:none; font-size:12px;}
p.gtags a:link{ color: #4f4f4f; text-decoration:none;}
p.gtags a:hover{color: #4f4f4f; text-decoration:underline;}
p.gtags a:visited {color: #4f4f4f; text-decoration:none;}

p.gblogs{margin-left: 10px; padding-left: 23px; padding-bottom: 0px; padding-right: 0px; padding-top: 8px; background:url(images/blogs.png) no-repeat left 10px;margin-bottom: 0px;}
p.gblogs a{color: #4f4f4f;text-decoration:none; font-size:12px;}
p.gblogs a:link{ color: #4f4f4f; text-decoration:none;}
p.gblogs a:hover{color: #4f4f4f; text-decoration:underline;}
p.gblogs a:visited {color: #4f4f4f; text-decoration:none;}

p.gfeeds{margin-left: 10px; padding-left: 3px; padding-bottom: 0px; padding-right: 0px; padding-top: 8px😉 no-repeat left 10px;margin-bottom: 0px;}
p.gfeeds a{color: #4f4f4f;text-decoration:none; font-size:11px;}

KnxDT · 23 Mar 2011

El style sin el HTML no sirve. Si no quieres que vean tu sitio, sube un html y el css al que llama para revisarlo en conjunto con el Firebug.

Emis · 23 Mar 2011

El theme es este Enlace eliminado y para descargarlo Enlace eliminado

KnxDT · 23 Mar 2011

Aps... bueno, me cuentas si lo instalas en algún lugar, no estoy para instalar themes :S

Sin embargo en el demo que das lo puedo revisar. ¿Qué quieres modificar? ¿título de los widgets?

Emis · 23 Mar 2011

KnxDT dijo:
Aps... bueno, me cuentas si lo instalas en algún lugar, no estoy para instalar themes :S

Sin embargo en el demo que das lo puedo revisar. ¿Qué quieres modificar? ¿título de los widgets?

Si, como explique en la primera parte puse las imagenes, es encerrar los titulos de los sidebars, y darle un color de fondo.

KnxDT · 23 Mar 2011

Confírmame si es esto lo que quieres:

Emis · 23 Mar 2011

KnxDT dijo:
Confírmame si es esto lo que quieres:

Si exacto es lo que quiero.

KnxDT · 23 Mar 2011

Tengo lo siguiente:

#sidebar2 .buscar {
background-color:#EEE1AD;
border:1px double #CCCCCC;
font-size:12px;
font-weight:normal;
line-height:20px;
padding:5px 5px 5px 8px;
text-transform:uppercase;}

Emis · 23 Mar 2011

KnxDT dijo:
Tengo lo siguiente:

Funciona perfecto, pero el color del fondo no cambia, sigue el mismo.

Mario · 23 Mar 2011

¿Lo estas implementando en el demo que pusiste? ese código no se ve :S

Prueba con esto:

Insertar CODE, HTML o PHP:

#sidebar2 .buscar {
    background: #EEE1AD url("images/icosearch.png") no-repeat scroll left center;
    border: 1px double #CCCCCC;
    font-size: 12px;
    font-weight: normal;
    padding: 0 5px 0 20px;
    text-transform: uppercase;
}

Emis · 23 Mar 2011

Mario dijo:
¿Lo estas implementando en el demo que pusiste? ese código no se ve :S

Prueba con esto:

Insertar CODE, HTML o PHP:

#sidebar2 .buscar { background: #EEE1AD url("http://forobeta.com/images/icosearch.png") no-repeat scroll left center; border: 1px double #CCCCCC; font-size: 12px; font-weight: normal; padding: 0 5px 0 20px; text-transform: uppercase; }

Es exactamente lo mismo, el color de fondo no se visualiza, te dejo una screen.

http://i56.tinypic.com/xmikrc.png

Y el mismo codigo, lo implemento para el footer y si se visualiza el color de fondo.

Cómo crear un recuadro con CSS y agregarle color de fondo

Emis

luisv1

Emis

Mario

Emis

KnxDT

Emis

Alevsk

KnxDT

Emis

KnxDT

Emis

KnxDT

Emis

KnxDT

Emis

KnxDT

Emis

Mario

Emis

Temas similares

Privacidad y transparencia

Privacidad y transparencia