Ayuda con colores, el color de fondo tambien toma las celdas

Shakarder · August 4, 2011

Hola, gente, les vengo a pedir humildemente su experiencia con un problema que me aqueja, lo que pasa es que el color del fondo del body, se aprovecha y también me pinta las celdas. Aquí dejo la captura para explicarme mejor. (soy nuevito en esto).

Imagen IPB

Si se fijan, el menú tiene un estilo así con puntas redondeadas, que se lo di con CSS, y coloree la celda rosado, pero el background color del body, esta pintando lo que debería estar de color blanco, y se ve muy feo.

A todo esto estoy usando solo tablas, ya que me dio problemas el iframe en el explorador de mocosoft...

Eso, de antemano muchas gracias!

Este es el codigo de la pagina, solo es la portada, porque como soy nuevo, avanzo muy poco.


<link href="css/estilo.css" rel="stylesheet" type="text/css" /></head>

<body>
<table width="70%" border="0" align="center" cellpadding="2" cellspacing="0">
  <tr>
    <td class="margen_sup_izq"><a href="index.html" target="_self"><img src="imagenes/banner.jpg" width="225" height="80" /></a></td>
    <td colspan="5" class="margen_sup_der" valign="bottom"><table width="100%" border="0">
      <tr>
        <td align="right" class="contacto">CONTACTO 216 30 83</td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td class="bronceado_sueños">El bronceado de tus sueños</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td class="dehesa">La Dehesa</td>
    <td class="menu_superior"><span class="menu_superior">Inicio</span></td>
    <td class="menu_superior">Nosotros</td>
    <td class="menu_superior">Productos</td>
    <td class="menu_superior">Promociones</td>
    <td class="borde_inf_der">Ubicación</td>
  </tr>
  <tr>
    <td width="30%" height="500" valign="top">
    
    <table width="100%" border="0">
      <tr>
        <td><img src="imagenes/modelos/5.JPG" width="237" height="127"  class="imagen"/></td>
      </tr>
      <tr>
        <td class="menu_izq">Solarium</td>
      </tr>
      <tr>
        <td class="menu_izq">Tecnología</td>
      </tr>
      <tr>
        <td class="menu_izq">Tratamiento</td>
      </tr>
      <tr>
        <td class="menu_izq">Preguntas Frecuentes</td>
      </tr>
      <tr>
        <td><img src="imagenes/modelos/7.JPG" width="237" height="292" /></td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
    </table></td>
    
    <td width="70%" height="1000" colspan="5" valign="top" class="mainframe"> </td>
  </tr>
</table>
<p> </p>
<p> </p>
</body>
</html>

el codigo CSS


.dehesa {
    background-color: #FFF;
    text-align: center;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-top-color: #DC557D;
    border-right-color: #DC557D;
    border-bottom-color: #DC557D;
    border-left-color: #DC557D;
    font-family:Speedline;
    font-size: 18px;
    color: #DC557D;
    font-style: italic;
}
.menu_superior {
    color: #FFF;
    background-color: #DC557D;
    font-family: Verdana, Geneva, sans-serif;
    
    /* Firefox */
-moz-border-radius-topleft: 20px;


/* Google Chrome y Safari */
-webkit-border-top-left-radius: 20px;


/* CSS3 (Opera 10.5 e Internet Explorer 9) */
border-top-left-radius: 20px;


    
}
.margen_sup_izq {
    border-top-style: dashed;
    border-right-style:solid;
    border-bottom-style: solid;
    border-left-style: dashed;
    border-top-color: #DC557D;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #DC557D;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    background-color: #FFF;
    text-align: center;
}

.margen_sup_der {
    border-top-style: dashed;



    border-right-style:dashed
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #DC557D;
    border-right-color: #DC557D;
    border-right-style: dashed;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    background-color: #FFF;
    border-bottom-style: none;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
}
.borde_inf_der {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: none;
    border-top-color: #DC557D;
    border-right-color: #DC557D;
    border-bottom-color: #DC557D;
    border-left-color: #DC557D;
    background-color: #DC557D;
    color: #FFF;
    font-family: Verdana, Geneva, sans-serif;
    
    
    
}
.texto_banner {
    font-size: 10px;
    color: #DC557D;
    background-color: #FFF;
}
body {
    background-color: #C99;
}

.mainframe {
    border: thin dashed #DC557D;
    background-color: #FFF;
}
.menu_izq {
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: double;
    border-left-style: double;
    border-top-color: #DC557D;
    border-right-color: #DC557D;
    border-bottom-color: #DC557D;
    border-left-color: #DC557D;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #FFF;
}

.imagen {
    
    
}

@font-face {  
font-family: 'Aspire';  
src: url(fonts/aspire/Aspire-DemiBold.eot);  
src: local('Aspire Seminegrita'), local('Aspire Seminegrita'),  
url(Aspire Seminegrita.eot) format('opentype');  
}  

@font-face {  
font-family: 'Speedline';  
src: url(fonts/speedline/SpeedlineRegular.eot);  
src: local('Speedline Mediana'), local('Speedline Mediana'),  
url(Speedline Mediana.eot) format('opentype');  
}  

.bronceado_sueños {
    font-family: Speedline;
    font-size: 18px;
    color: #DC557D;
    font-weight: normal;
    text-align: center;
}
.contacto {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #999;
}

Es lo que llevo hasta el momento.

PD: Porque para el caso de construcción de puntas redondeadas en celdas, el dreamweaver no tiene un asistente de ayuda?, asi como cuando uno establece propiedades, y dreamweaver va autocompletando... (CSS)

Edited August 4, 2011 by Shakarder

Th3_K4T · August 4, 2011

código?

cañangasñangas · August 4, 2011

y si redondeas con imagenes, y la parte transparente lo transparentas...

lo otro que puedes tratar de hacer

prueba con esto:

coloque esos 2 porque no con cual de los 2 puediera resultar...

cabe destacar que dependiendo que explorador usas, las etiquetas html tienen valores de atributos de estilos por defecto, y siempre que se desee algo debe ser ingresado para no relantizar el trabajo, como en este caso que se ha añadido background-color

Shakarder · August 4, 2011

no hay forma de que el background color del body no afecte a esas celdas?,probe con lo que me dijiste, y el problema persiste... de hecho el google chrome me muestra las puntas asi como puse en la captura, el explorer nada... iframe, css, todo se lo come... omite mucho... pero nimporta, "es solo estetica", se podra utilizar normal en el explorer, pero me gustaria que por lo menos en el chrome se vea "decente" como yo lo quiero...

en cuanto a las imagenes, tendria que usar photoshop, algo asi?? soy un 0 a la izquierda en cuanto a retoque de imagenes...

cañangasñangas · August 4, 2011

aplicale background-color:#000000; al <tr> del menu a ver como va asi...

Shakarder · August 4, 2011

no tampoco funka... buuta.... le sacare los bordes mejor, y le pondre un efecto onda, que si pase el cursor cambie de color completo la celda...

de todas formas muchas gracias a todos por ayudarme :)

cañangasñangas · August 4, 2011

no tampoco funka... buuta.... le sacare los bordes mejor, y le pondre un efecto onda, que si pase el cursor cambie de color completo la celda...
de todas formas muchas gracias a todos por ayudarme :)

lo otro es ponerle una imagen y la parte que quieres transparente o de un color determinado lo pones de ese color

Sign In

Ayuda con colores, el color de fondo tambien toma las celdas

Recommended Posts

Shakarder

Link to comment

Share on other sites

Th3_K4T

Link to comment

Share on other sites

cañangasñangas

Link to comment

Share on other sites

Shakarder

Link to comment

Share on other sites

cañangasñangas

Link to comment

Share on other sites

Shakarder

Link to comment

Share on other sites

cañangasñangas

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity