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

  • Autor Autor Emis
  • Fecha de inicio Fecha de inicio
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!
 
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!
Hacer clic para expandir...

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;"
 
"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.
 
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.
Hacer clic para expandir...

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.
 
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.
Hacer clic para expandir...

El parámetro correcto es: background-color

PD: No olvides quitar los comentarios que él ha añadido
 
KnxDT dijo:
El parámetro correcto es: background-color

PD: No olvides quitar los comentarios que él ha añadido
Hacer clic para expandir...

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;
}
Hacer clic para expandir...
 
Te puede funcionar incluso si solo usas background: #CCCCCC;

salu2
 
Emis dijo:
Aver podes decirme si esta bien asi el codigo porfavor.
Hacer clic para expandir...

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;
}
Hacer clic para expandir...

No olvides que a tu imagen debes añadirle el atributo de clase, así:
<img class="imagen" src="url_de_la_imagen" alt="" />
Hacer clic para expandir...

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
Hacer clic para expandir...

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.
 
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;}
Hacer clic para expandir...
 
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.
 
El theme es este Enlace eliminado y para descargarlo Enlace eliminado
 
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?
 
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?
Hacer clic para expandir...

Si, como explique en la primera parte puse las imagenes, es encerrar los titulos de los sidebars, y darle un color de fondo.
 
Confírmame si es esto lo que quieres:

29wil1.png
 
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;}
Hacer clic para expandir...
 
¿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;
}
 
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;
}
Hacer clic para expandir...

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.
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

L
Cómo crear un recuadro de color con texto en HTML
Respuestas
7
Visitas
19K
cesarmonster
C
dreknoun
¿Cómo hacer que el color de fondo del menú cubra toda la página en HTML y CSS?
Respuestas
11
Visitas
2K
dreknoun
dreknoun
spamer01
Cómo crear un logo elegante para tu sitio web/blog con Photoshop
3 4 5
Respuestas
87
Visitas
10K
Rigovillegas
R
Atrás
Arriba