elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿ Como cambiar el fondo de color ?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: ¿ Como cambiar el fondo de color ?  (Leído 20,550 veces)
r34p3rb0y

Desconectado Desconectado

Mensajes: 39


Ver Perfil
¿ Como cambiar el fondo de color ?
« en: 18 Marzo 2013, 22:35 pm »
Desde una plantilla, he cambiado el diseño . Y me quedan un par de cosillas.




Me gustaria cambiar el naranja, por un naranja fuerte a gradiente un poco mas flojo.

¿ Ahora el color azul, ponerle una imagen propia, o otro color . Pero como se hace ?

El codigo es el siguiente .

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Babies</title>
<body background="C:\Users\Esku\Pictures\28.jpg">
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body> 
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="58%" align="left" valign="top"><table width="60%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f.jpg" alt="" width="455" height="186" border="0" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f2.jpg" width="455" height="166" alt="" /></td>
          </tr>
        </table></td>
        <td width="42%" align="left" valign="top" bgcolor="#FF0000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f3.jpg" width="333" height="76" alt="" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f4.jpg" alt="" width="332" height="243" border="0" usemap="#Map" /></td>
          </tr>
        </table>
          <img src="images/tres.png" width="333" height="34" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <th align="left" valign="top" bgcolor="#FF6600" style="padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="67%" align="left" valign="top" style="padding-left:21px;"><table width="498" border="0" cellspacing="0" cellpadding="0" style="background-image:url(images/index_11.gif); background-repeat:repeat-x; background-color:#FFFFFF;">
          <tr>
            <td width="247" rowspan="2" align="left" valign="top" style="border-bottom: #F5C14C 1px solid; border-left: #F5C14C 1px solid; border-top: #F5C14C 1px solid; padding-top: 10px; padding-bottom: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-style: italic; font-size: 14px; color: #000;"> <p>&nbsp;</p>
              <p>PlayPark es un parque infantil , donde los ni&ntilde;os podran disfrutar de un dia inolvidable </p>
              <p>Celebra tu cumplea&ntilde;os con nosotros.</p>
              <p>Nuestras instalaciones disponen de una zona para los pekes de 0 a 4 a&ntilde;os( y zona para ni&ntilde;os de  4 a&ntilde;os hasta 1,50 cm, con monitora en todo momento.</p>
              <p>Zona de Cafeteria.</p></td>
            <td width="251" align="left" valign="top" style="border-right:#F5C14C 1px solid; border-top:#F5C14C 1px solid;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 28px; font-weight: bold; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 18px; color: #000;"><p><var><strong><em>Telefono</em></strong></var><em><strong> :</strong></em> 680 401 800</p>
                  <p>Localizaci&oacute;n: Poligono Ind. Autopista Avenida Europa, nave 48-Jerez de la Frontera (Cadiz)</p>
                  <p>Abierto de Lunes a Domingo todo el a&ntilde;o de 16:00h a 21:00h</p>
                  <p>Excepto Julio y Agosto de 18:00h a 22:00</p></td>
              </tr>
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 16px; font-weight: bold; font-family: 'Times New Roman', Times, serif; color: #000; font-size: 14;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="140" align="left" valign="top">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align="right" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="75%" style="border-bottom:#F5C14C 1px solid;">&nbsp;</td>
                <td width="25%" align="right" valign="bottom"><img src="images/index_53.gif" width="64" height="73" alt="" /></td>
              </tr>
            </table></td>
          </tr>
          
        </table></td>
        <td width="33%" align="left" valign="top"><img src="images/Sin t&iacute;tulo-1.png" width="260" height="265" /></td>
      </tr>
    </table></th>
  </tr>
  <tr>
    <td align="left" valign="top" bgcolor="#FFF2D7" style="background-image:url(images/index_63.gif); background-repeat:repeat-x;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" valign="top"><pre class="footer"><a href="index.html">Home</a>       ::       <a href="content.html">Baby Cloths</a>       ::       <a href="content.html">Nursery</a>       ::       <a href="content.html">Toys</a>       ::       <a href="contact.html">Contacts</a></pre></td>
      </tr>
      <tr>
        <td align="center" valign="top" class="copyright">Copyright &copy; 2003-2007 Companyname.com. All Rights Reserved.</td>
      </tr>
    </table></td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="124,23,214,48" href="index.html" alt="" />
<area shape="rect" coords="122,67,230,90" href="content.html" alt="" />
<area shape="rect" coords="122,107,267,133" href="map.html" alt="" />
<area shape="rect" coords="122,149,210,173" href="fotos.html" alt="" />
<area shape="rect" coords="119,185,258,211" href="contact.html" alt="" />
</map></body>
</html>

Gracias y salu2.
En línea
Puntoinfinito


Desconectado Desconectado

Mensajes: 919


#! /win/archlinux


Ver Perfil WWW
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #1 en: 18 Marzo 2013, 22:45 pm »
Tal vez con el style.css haciamos más... pero de todos modos, sin leer mucho el código:

Citar
<th align="left" valign="top" bgcolor="#FF6600" style="padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>

Cambia lo subrayado por el color que te guste más en hexadecimal, guiandome por donde has dicho más o menos sería este color: #F58B44

Puedes escojer el tuyo en cualquier herramienta online como por ejemplo http://html-color-codes.info/codigos-de-colores-hexadecimales/ ...

Saludos!! Y prueba a ver si era eso XDD
En línea
AHORA EN SOFTONIC || CLICK HERE!!
Base64: QWNhYmFzIGRlIHBlcmRlciAxIG1pbnV0byBkZSB0dSB2aWRhLiBPbOkh



HACK AND 1337 : http://hackandleet.blogspot.com
WEBSITE: http://www.infiniterware.
r34p3rb0y

Desconectado Desconectado

Mensajes: 39


Ver Perfil
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #2 en: 18 Marzo 2013, 22:56 pm »
Me refiero a algo asi



Gracias .
En línea
Puntoinfinito


Desconectado Desconectado

Mensajes: 919


#! /win/archlinux


Ver Perfil WWW
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #3 en: 19 Marzo 2013, 15:03 pm »
Pues como te dije, modifica los registros en color hexadecimal por donde te interese...

PD: Veo que utilizas DreamWeaver, no puedes hacerlo desde allí?
En línea
AHORA EN SOFTONIC || CLICK HERE!!
Base64: QWNhYmFzIGRlIHBlcmRlciAxIG1pbnV0byBkZSB0dSB2aWRhLiBPbOkh



HACK AND 1337 : http://hackandleet.blogspot.com
WEBSITE: http://www.infiniterware.
r34p3rb0y

Desconectado Desconectado

Mensajes: 39


Ver Perfil
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #4 en: 19 Marzo 2013, 15:28 pm »
Pero asi queda como un color solo no ?

Es que no te entiendo como quieres decir .
En línea
Puntoinfinito


Desconectado Desconectado

Mensajes: 919


#! /win/archlinux


Ver Perfil WWW
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #5 en: 19 Marzo 2013, 15:55 pm »
A ver, lo que tu tienes puesto es un color plano, no tiene ningún efecto ni nada, y el que tu quieres es un efecto css de degradados que tu has de crear con CSS... No soy un experto en CSS pero creo que:

Código:
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

donde...

Código:
-webkit-gradient(tipo , punto inicio, punto final, color inicio, color final, color-stop(porcentaje, color), color-stop(porcentaje, color) ).

con esto ya puedes crear un estilo para crear ese degradado que tu quieres ;)

También podrías hacerlo de tal manera;

Código:
    div {
    background: linear-gradient(to bottom right, #a1e048, #6a942f);
    }

O para que quede de manera linear y no horizontal;

Código:
    div {
    background: #70bf32;
    background: url('linear-gradient.png') 0 0 repeat-x;
    background: -webkit-linear-gradient(#a1e048, #6a942f);
    background: -moz-linear-gradient(#a1e048, #6a942f);
    background: -ms-linear-gradient(#a1e048, #6a942f);
    background: -o-linear-gradient(#a1e048, #6a942f);
    background: linear-gradient(#a1e048, #6a942f);
    }

Puedes mirar más tipos aquí: http://learn.shayhowe.com/html-css/backgrounds-gradients

Saludos
« Última modificación: 19 Marzo 2013, 16:04 pm por Puntoinfinito » En línea
AHORA EN SOFTONIC || CLICK HERE!!
Base64: QWNhYmFzIGRlIHBlcmRlciAxIG1pbnV0byBkZSB0dSB2aWRhLiBPbOkh



HACK AND 1337 : http://hackandleet.blogspot.com
WEBSITE: http://www.infiniterware.
Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.921



Ver Perfil
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #6 en: 19 Marzo 2013, 16:02 pm »
El color naranja de tu htm es eso, un color sólido.

El gradiante no es un color, es un efecto de varios tonos de colores conjuntos, y los estilos (efectos, gradiantes) se hacen manejando CSS, si usas DreamWeaver los estilos de CSS te los hace en 1 segundo casi sin esfuerzo vaya!

Un saludo!
« Última modificación: 19 Marzo 2013, 16:04 pm por EleKtro H@cker » En línea


Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #7 en: 19 Marzo 2013, 16:27 pm »
Código
  1. http://css3maker.com/css-gradient.html
En línea

r34p3rb0y

Desconectado Desconectado

Mensajes: 39


Ver Perfil
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #8 en: 19 Marzo 2013, 16:49 pm »
El fondo azul ya lo cambie desde el css , añadiendo este codigo

body{
padding:0px;
margin:0px;
background-color:#fdffff;
background-image:url(images/1w11.jpg);
background-repeat: no-repeat;
background-attachment: scroll;

Ahora, el color naranja , para darle el efecto gradiente

¿ Que sustituyo ?

<td align="left" valign="top" bgcolor="#ff9900" style="padding-bottom:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">


Soy bastante torpe en esto de HTML. Es la primera vez que practico .
En línea
OmarHack


Desconectado Desconectado

Mensajes: 1.268


Ver Perfil
Re: ¿ Como cambiar el fondo de color ?
« Respuesta #9 en: 19 Marzo 2013, 17:42 pm »
Así?
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Babies</title>
<div style="background:url(http://llimg3.tuenti.net/MeZoXwPJXry9oCaKAA) no-repeat; background-

size:110%;"> 
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="58%" align="left" valign="top"><table width="60%" border="0" cellspacing="0" 

cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f.jpg" alt="" width="455" height="186" 

border="0" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f2.jpg" width="455" height="166" alt="" 

/></td>
          </tr>
        </table></td>
        <td width="42%" align="left" valign="top" bgcolor="#FF0000"><table width="100%" border="0" 

cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><img src="images/f3.jpg" width="333" height="76" alt="" 

/></td>
          </tr>
          <tr>
            <td align="left" valign="top"><img src="images/f4.jpg" alt="" width="332" height="243" 

border="0" usemap="#Map" /></td>
          </tr>
        </table>
          <img src="images/tres.png" width="333" height="34" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <th align="left" valign="top" bgcolor="#FF6600" style="padding-bottom:15px;"><table 

width="100%" border="0" cellspacing="0" cellpadding="0<td width="67%" align="left" valign="top" 

style="padding-left:21px;"><table width="498" border="0" cellspacing="0" cellpadding="0" 

style="background-image:url(images/index_11.gif); background-repeat:repeat-x; background-

color:#FFFFFF;">ound-attachment: fixed">
          <tr>
            <td width="247" rowspan="2" align="left" valign="top" style="border-bottom: #F5C14C 1px 

solid; border-left: #F5C14C 1px solid; border-top: #F5C14C 1px solid; padding-top: 10px; padding-

bottom: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-style: italic; 

font-size: 14px; color: #000;"> <p>&nbsp;</p>
              <p>PlayPark es un parque infantil , donde los ni&ntilde;os podran disfrutar de un dia 

inolvidable </p>
              <p>Celebra tu cumplea&ntilde;os con nosotros.</p>
              <p>Nuestras instalaciones disponen de una zona para los pekes de 0 a 4 a&ntilde;os( y 

zona para ni&ntilde;os de  4 a&ntilde;os hasta 1,50 cm, con monitora en todo momento.</p>
              <p>Zona de Cafeteria.</p></td>
            <td width="251" align="left" valign="top" style="border-right:#F5C14C 1px solid; 

border-top:#F5C14C 1px solid;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 28px; font-

weight: bold; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 18px; color: 

#000;"><p><var><strong><em>Telefono</em></strong></var><em><strong> :</strong></em> 680 401 800</p>
                  <p>Localizaci&oacute;n: Poligono Ind. Autopista Avenida Europa, nave 48-Jerez de 

la Frontera (Cadiz)</p>
                  <p>Abierto de Lunes a Domingo todo el a&ntilde;o de 16:00h a 21:00h</p>
                  <p>Excepto Julio y Agosto de 18:00h a 22:00</p></td>
              </tr>
              <tr>
                <td align="left" valign="top" style="padding-left: 20px; padding-top: 16px; font-

weight: bold; font-family: 'Times New Roman', Times, serif; color: #000; font-size: 14;"><table 

width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="140" align="left" valign="top">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align="right" valign="bottom"><table width="100%" border="0" cellspacing="0" 

cellpadding="0">
              <tr>
                <td width="75%" style="border-bottom:#F5C14C 1px solid;">&nbsp;</td>
                <td width="25%" align="right" valign="bottom"><img src="images/index_53.gif" 

width="64" height="73" alt="" /></td>
              </tr>
            </table></td>
          </tr>
          
        </table></td>
        <td width="33%" align="left" valign="top"><img src="images/Sin t&iacute;tulo-1.png" 

width="260" height="265" /></td>
      </tr>
    </table></th>
  </tr>
  <tr>
    <td align="left" valign="top" bgcolor="#FFF2D7" style="background-image:url

(images/index_63.gif); background-repeat:repeat-x;"><table width="100%" border="0" cellspacing="0" 

cellpadding="0">
      <tr>
        <td align="center" valign="top"><pre class="footer"><a href="index.html">Home</a>       ::  

     <a href="content.html">Baby Cloths</a>       ::       <a href="content.html">Nursery</a>       

::       <a href="content.html">Toys</a>       ::       <a 

href="contact.html">Contacts</a></pre></td>
      </tr>
      <tr>
        <td align="center" valign="top" class="copyright">Copyright &copy; 2003-2007 

Companyname.com. All Rights Reserved.</td>
      </tr>
    </table></td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="124,23,214,48" href="index.html" alt="" />
<area shape="rect" coords="122,67,230,90" href="content.html" alt="" />
<area shape="rect" coords="122,107,267,133" href="map.html" alt="" />
<area shape="rect" coords="122,149,210,173" href="fotos.html" alt="" />
<area shape="rect" coords="119,185,258,211" href="contact.html" alt="" />
</map></body>
</html>
No se nota el degradado mucho pero igual aprovechas el código xDDD Si vas a aumentar el tamaño de la web (Largo) o reducirlo vas a tener que hacer lo mismo con el porcentaje size.
El código que aumenté es este:
Código:
<div style="background:url(http://llimg3.tuenti.net/MeZoXwPJXry9oCaKAA) no-repeat; background-size:110%;">
La imagen la subí al server de tuenti.
Un saludo.
« Última modificación: 19 Marzo 2013, 18:35 pm por OmarHack » En línea
I like to test things.
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[PHP+CSS] Error en el formulario para cambiar de color el fondo. ¿Cual?
Desarrollo Web 		Ori-chan 3 5,060 Último mensaje 30 Enero 2013, 16:46 pm
por Ori-chan
Como cambiar el fondo de un JTable
Java 		razler 1 4,262 Último mensaje 30 Agosto 2013, 20:04 pm
por 1mpuls0
Cambiar color de Fondo a través de un checkbox/Switch y GET
PHP 		Samylmy94 1 5,329 Último mensaje 19 Febrero 2014, 18:52 pm
por #!drvy
Cambiar el color de Facebook: cómo hacerlo para evitar los virus informáticos
Noticias 		wolfbcn 0 1,908 Último mensaje 17 Agosto 2014, 03:07 am
por wolfbcn
Igualar color de figura al color de fondo progresivamente.
Programación General 		ignorantev1.1 2 2,888 Último mensaje 25 Noviembre 2016, 04:30 am
por ignorantev1.1
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines