← HTML + CSS

[CSS][Ajuda] CSS

Lida 13842 vezes

Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

Citação de: "icaro"
isto tá muito bonito mas reparei agora que não consigo configurar a coisa para que imprima só a coluna do meio.

alguém pode ajudar?


ok descobri:

Um dos problemas do Esparsos é que quando se imprime aparece o logo, o menu, e o texto que interessa deslocado.

solução:

basta criar uma outra style sheet ao nosso gosto, neste exemplo aproveitando a já anteriormente criada esparsos.css

fazer-lhe as seguintes alterações:

Código: [Seleccione]

.esparsos1 {
position: absolute;
left: 50mm;
top: 0mm;
margin: 3mm;
padding: 1mm;
height: 1cm;
width: 10cm;
visibility: hidden;

}
.exemplo4 {
position: relative;
top: auto;
width: 16cm;
left: auto;
border: none;
background-color: #FFFFFF;
right: auto;
bottom: auto;

}
.esparsos3 {
position: absolute;
left: 0mm;
top: 15mm;
width:3cm;
margin: 3mm;
padding: 1mm;
border: thin solid #000099;
background-color: #FFFFFF;
visibility: hidden;
}
a:link {
text-decoration: none;
color: #BBBBBB;
}
a:visited {
text-decoration: none;
color: #BBBBBB;
}
a:hover {
text-decoration: none;
color: #000077 ;
}
a:active {
text-decoration: none;
}
a {
font-weight: bold;
}
body {
background-color: #FFFFFF;
}
o que fizémos foi ocultar o logo e a barra de menu e formatar o texto para que ocupe toda a página teve de se mudar este estilo para relative caso contrário o texto sai fora das margens de impressão . Mudou-se também o fundo para branco para que não aparecça na impressão.

grava-se este ficheiro com o nome print.css ou outro qualquer.

Temos então duas css uma para ser vista através do browser e outra para o utilizador imprimir o texto útil.

agora na nossa página onde já foi inserido o código para associar o esparsos.css
Código: [Seleccione]
<link href="esparsos.css" rel="stylesheet" type="text/css">


ntroduzimosoutro código em que dizemos que se o utilizador quiser imprimir a página deverá ser utilizado estilo print.css e não esparsos.css:


Código: [Seleccione]
<link  rel="stylesheet" type="text/css" href="print.css" media="print"> e já está o problema resolvido!
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

é exactamente isso! :D
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

O IE aparenta ter problemas com a selecção de texto formatado em CSS

para resolver esse problema colocar

Código: [Seleccione]
<!--  -->

antes de tudo mesmo de
Código: [Seleccione]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


há de haver uma forma mais ortodoxa de resolver este problema, mas não consegui encontrar e de qualquer maneira este truque resolve o problema.
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

Bela dica icaro!
Offline

pjssms 
Membro
Mensagens 486 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2 Level 1

O HTML-Kit têm uma funcionalidade que permite identificar os estilos existentes num documento, criá-los e substituir as referências às fontes no meio dos documentos por referências aos estilos.