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 19,359 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.788



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:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines