¿ Como cambiar el fondo de color ?

Iniciado por r34p3rb0y, 18 Marzo 2013, 22:35 PM

0 Miembros y 1 Visitante están viendo este tema.

r34p3rb0y

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 .

<!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.

Puntoinfinito

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
AHORA EN SOFTONIC || CLICK HERE!!
Base64: QWNhYmFzIGRlIHBlcmRlciAxIG1pbnV0byBkZSB0dSB2aWRhLiBPbOkh



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

r34p3rb0y


Puntoinfinito

Pues como te dije, modifica los registros en color hexadecimal por donde te interese...

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



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

r34p3rb0y

Pero asi queda como un color solo no ?

Es que no te entiendo como quieres decir .

Puntoinfinito

#5
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:

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

donde...

-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;

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


O para que quede de manera linear y no horizontal;

   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
AHORA EN SOFTONIC || CLICK HERE!!
Base64: QWNhYmFzIGRlIHBlcmRlciAxIG1pbnV0byBkZSB0dSB2aWRhLiBPbOkh



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

Eleкtro

#6
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!








Ori-chan

Código (lenguaje) [Seleccionar]
http://css3maker.com/css-gradient.html


r34p3rb0y

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 .

OmarHack

#9
Así? <!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: <div style="background:url(http://llimg3.tuenti.net/MeZoXwPJXry9oCaKAA) no-repeat; background-size:110%;">
La imagen la subí al server de tuenti.
Un saludo.
I like to test things.