Esta publicación usa Stack Overflow para ilustrar cómo hacer un buen diseño CSS. Se parece a lo siguiente:
El enlace de descarga es http://programcreek.com/downloads/sof.rar
Categoría: CSS Design
Tengo un problema de visualización de IE cuando agrego mi logo para programcreek. El logo es una imagen transparente. Se ve bien en Firefox, Chrome, como el siguiente
pero tengo el siguiente problema en IE. El fondo transparente ahora es un fondo negro.
Aqui esta la solucion.
Antes
<img src="./images/logo.png" border="0" alt="ProgramCreek.com" height="47px" /> |
Después
<span style="height:47px; width: 200px; margin-top: -11px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/logo.png');
display: inline-block;">
<img alt="ProgramCreek.com" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="./images/logo.png" height="47px" border="0"/>
</span>
|
Aquí agregue un etiqueta para agregar estilo.
Aquí la imagen del logo inicial es muy grande, IE no puede cambiar el tamaño de la imagen. Entonces cambio el tamaño de la imagen usando esto herramienta. Es muy bueno.
¿Existe algún código CSS para que los navegadores impriman colores de fondo? No, no existe tal código CSS, las imágenes de fondo y los colores se ignoran para los navegadores. Así que no confíe en los colores de fondo para imprimir.
Para permitir que los navegadores impriman colores e imágenes de fondo, debe configurar la opción de su navegador.
Para Firefox, vaya a Archivo-> Configuración de página-> Habilitar la opción Imprimir fondo.
Para IE, vaya a Herramientas-> Opciones de Internet-> Avanzado-> Habilitar la opción Imprimir colores e imágenes de fondo.
Al imprimir una página web, a veces un elemento no debe imprimirse en dos páginas. Por ejemplo, queremos que un conjunto de preguntas esté en la misma página. En este momento, necesitamos establecer el comportamiento de salto de página.
El código CSS para esto es realmente muy fácil:
.pagebreak{ page-break-before:always; } |
Sin embargo, para usar esta función necesitamos dejar suficiente espacio para un elemento, de lo contrario, no funcionará. Esto significa que hay un desperdicio de espacio. No es difícil entender esto, porque queremos que un elemento permanezca unido, pero a la página actual no le queda suficiente, por lo que debería establecerse en la página siguiente.
Este es un problema común y aquí hay una buena tutorial sobre esto.
El problema se vería así:
pero el borde exterior debe contener todos los elementos interiores.
Aquí hay una lista del código:
<html>
<head>
<style type="text/css">
.outer{
border: 0.2em solid #aaa;
margin: 0.1em 0.3em;
width:40%;
display: inline-block;
clear: both;
}
.inner-left{
border: 0.2em solid green;
width: 49%;
float:left;
}
.inner-right{
border: 0.2em solid red;
width: 48%;
float:right;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner-left">
Here are your two boys<br> for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
</div>
<div class="inner-right">
Here are your two boys for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
</div>
</div>
</body>
</html>
|
Aquí están sus dos hijos
para hacer el trabajo: los atributos CSS page-break -antes y después de salto de página. Ambos indican a la impresora que comience a imprimir una nueva página, con la diferencia de estar antes o después del elemento al que se aplica el atributo. Los posibles valores que aceptan los dos atributos son:
para hacer el trabajo: los atributos CSS page-break -antes y después de salto de página. Ambos indican a la impresora que comience a imprimir una nueva página, con la diferencia de estar antes o después del elemento al que se aplica el atributo. Los posibles valores que aceptan los dos atributos son:
Aquí están sus dos muchachos para hacer el trabajo: los atributos CSS page-break-before y page-break-after. Ambos indican a la impresora que comience a imprimir una nueva página, con la diferencia de estar antes o después del elemento al que se aplica el atributo. Los posibles valores que aceptan los dos atributos son:
Las siguientes dos líneas resuelven el problema:
display: inline-block; clear: both; |
«clear: both» extiende el margen en la parte superior del cuadro despejado, empujándolo hacia abajo hasta que «despeja» la parte inferior del flotador. En otras palabras, el navegador aumenta el margen superior en el cuadro despejado (sin importar en qué se haya configurado), a la longitud que sea necesaria para mantener el cuadro despejado debajo del flotador.
Aquí hay una lista del valor de la propiedad de visualización.