Desde una plantilla, he cambiado el diseño . Y me quedan un par de cosillas.
(http://oi50.tinypic.com/2qdamvb.jpg)
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> </p>
<p>PlayPark es un parque infantil , donde los niños podran disfrutar de un dia inolvidable </p>
<p>Celebra tu cumpleaños con nosotros.</p>
<p>Nuestras instalaciones disponen de una zona para los pekes de 0 a 4 años( y zona para niños de 4 añ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ón: Poligono Ind. Autopista Avenida Europa, nave 48-Jerez de la Frontera (Cadiz)</p>
<p>Abierto de Lunes a Domingo todo el añ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"> </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;"> </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í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 © 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.
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
Me refiero a algo asi
(http://oi45.tinypic.com/9tldok.jpg)
Gracias .
Pues como te dije, modifica los registros en color hexadecimal por donde te interese...
PD: Veo que utilizas DreamWeaver, no puedes hacerlo desde allí?
Pero asi queda como un color solo no ?
Es que no te entiendo como quieres decir .
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
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!
http://css3maker.com/css-gradient.html
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 .
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> </p>
<p>PlayPark es un parque infantil , donde los niños podran disfrutar de un dia
inolvidable </p>
<p>Celebra tu cumpleaños con nosotros.</p>
<p>Nuestras instalaciones disponen de una zona para los pekes de 0 a 4 años( y
zona para niños de 4 añ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ón: Poligono Ind. Autopista Avenida Europa, nave 48-Jerez de
la Frontera (Cadiz)</p>
<p>Abierto de Lunes a Domingo todo el añ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"> </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;"> </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í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 © 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.
Gracias , pero mira como se queda tras pegar ese codigo.
(http://oi50.tinypic.com/5x68w1.jpg)
Yo lo probé y lo tenía distinto, de todas formas ponle en size 1800 o así a ver que pasa, lo más seguro es que te cubra todo pero apenas se note el degradado. Seguro que alguien del foro sabe hacerlo mucho mejor. En dreaweaver tienes que tener alguna opción para poner el fondo, descarga el fondo que pusiste y pónselo a la web con el dreamweaver a ver que tal.
Un saludo.
Cita de: OmarHack en 20 Marzo 2013, 00:45 AM
Yo lo probé y lo tenía distinto, de todas formas ponle en size 1800 o así a ver que pasa, lo más seguro es que te cubra todo pero apenas se note el degradado. Seguro que alguien del foro sabe hacerlo mucho mejor. En dreaweaver tienes que tener alguna opción para poner el fondo, descarga el fondo que pusiste y pónselo a la web con el dreamweaver a ver que tal.
Un saludo.
Gracias lo probare, ahora el fodno esta bien con ese color, lo unico que quiero cambiar es el naranja ese del medio.
Haz una captura de pantalla que no me doy cuenta de cual dices jaja
Ahora me refiero a lo de debajo de las bolas, es decir el naranja actual solido, pasarlo a un efecto gradiente .
El fondo ya esta solucionado .
¿Puedes subir la web con las imágenes a algún sitio? Si no al no tener yo las imágenes no te puedo ayudar.