css og print ikke

[Is]

Hej

jeg har forsøgt mig lidt med at lave sider printervenlige, dvs kun
printe det væsentlige.

men jeg kan ikke få det til at virke - er der en side hvor der er en god
forklaring på hvordan det gøres - de steder jeg har fundet, forklare det
ikke godt nok til at jeg forstår det :-(

mvh Erik

[Philip Nunnegaard]

Post by Is
jeg har forsøgt mig lidt med at lave sider printervenlige, dvs kun
printe det væsentlige.
men jeg kan ikke få det til at virke - er der en side hvor der er en god
forklaring på hvordan det gøres - de steder jeg har fundet, forklare det
ikke godt nok til at jeg forstår det :-(

For mig lyder det mere som et spørgsmål om html/css end om javascript.

Nu ved jeg jo ikke hvad du har prøvet, og hvilke sider du har fundet om
det, men her er der i hvert fald en side der forklarer det kort:

http://www.hjemmesideskolen.dk/css/css.php?id=css7

[Is]

Post by Philip Nunnegaard

Post by Is
jeg har forsøgt mig lidt med at lave sider printervenlige, dvs kun
printe det væsentlige.
men jeg kan ikke få det til at virke - er der en side hvor der er en god
forklaring på hvordan det gøres - de steder jeg har fundet, forklare det
ikke godt nok til at jeg forstår det :-(

For mig lyder det mere som et spørgsmål om html/css end om javascript.
Nu ved jeg jo ikke hvad du har prøvet, og hvilke sider du har fundet om
http://www.hjemmesideskolen.dk/css/css.php?id=css7

der har jeg været - jeg forstår bare ikke hvordan man får den til at
vælge en anden css når man beder om få printet siden ???

jeg smutter til HTML siden i stedet.

Tak for svar
mvh Erik

[Bertel Lund Hansen]

Post by Is
der har jeg været - jeg forstår bare ikke hvordan man får den til at
vælge en anden css når man beder om få printet siden ???

Sådan her:

@media print {
.menu, .roundtop, .roundbottom, img.corner, .logo,
.search, .sidstrettet, .grammatikopslag, .printhide
{ display: none; }
}

Alle de klasser der står i listen, får slukket for display når
der printes.

[Is]

Post by Bertel Lund Hansen

Post by Is
der har jeg været - jeg forstår bare ikke hvordan man får den til at
vælge en anden css når man beder om få printet siden ???

@media print {
.menu, .roundtop, .roundbottom, img.corner, .logo,
.search, .sidstrettet, .grammatikopslag, .printhide
{ display: none; }
}
Alle de klasser der står i listen, får slukket for display når
der printes.

Hvorfor dette @ ???

nå men jeg har fået det til at virke, det var fordi jeg sidst i linket
til CSS'en manglede media="print"

tak for svar

mvh Erik

[Karl Erik Christensen]

Post by Is
nå men jeg har fået det til at virke, det var fordi jeg sidst i linket
til CSS'en manglede media="print"
tak for svar
mvh Erik

Fordi du så kan nøjes med een css-fil:

@media screen {
din styling på skærmen;
}
@media print {
din styling ved udskrift;
}

Du kan endda style efter browservinduets størrelse, f.eks.:
@media only screen and (min-width: 480px) {
styling ved vinduer fra 480px - 799px;
}
@media only screen and (min-width: 800px) {
styling ved vinduer fra 800px - ??;
}
osv.
Det kaldes "Responsive Design".
Du kan læse mere på:

http://dmwebdesign.dk/karlerik/test/responsive/

Karl Erik.

[Is]

Post by Karl Erik Christensen

Post by Is
nå men jeg har fået det til at virke, det var fordi jeg sidst i linket
til CSS'en manglede media="print"
tak for svar
mvh Erik

@media screen {
din styling på skærmen;
}
@media print {
din styling ved udskrift;
}
@media only screen and (min-width: 480px) {
styling ved vinduer fra 480px - 799px;
}
@media only screen and (min-width: 800px) {
styling ved vinduer fra 800px - ??;
}
osv.
Det kaldes "Responsive Design".
http://dmwebdesign.dk/karlerik/test/responsive/
Karl Erik.

Hmm - det ser spændende ud

Det må jeg prøve,

virker det så ved alle browsere ??

mvh Erik

[Karl Erik Christensen]

Post by Is
virker det så ved alle browsere ??

Ja - bare ikke versioner af IE mindre end 9.

Responsive Design er en af de største nyheder indenfor webdesign, de
sidste 5-10 år.
Metoden henvender sig især til Smartphones og Tabletter - og disse var
jo ikke kendte da IE8 blev født.

Men fra IE9 og opad fungerer det.
FF, Chrome og Opera er selvflg. "med på vognen".

Har du prøvet at trække i dir browservindue?
Du vil se, at designet hele tiden tilpasser sig vinduets bredde.

Karl Erik.

[Karl Erik Christensen]

Post by Karl Erik Christensen
Ja - bare ikke versioner af IE mindre end 9.

Jeg laver altid et stylesheet til IE mindre end 9. Det kan bare være det
samme som bruges til 800px:

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8-and-down.css" />
<![endif]-->

Karl Erik.

[Is]

Post by Karl Erik Christensen

Post by Is
virker det så ved alle browsere ??

Ja - bare ikke versioner af IE mindre end 9.
Responsive Design er en af de største nyheder indenfor webdesign, de
sidste 5-10 år.
Metoden henvender sig især til Smartphones og Tabletter - og disse var
jo ikke kendte da IE8 blev født.
Men fra IE9 og opad fungerer det.
FF, Chrome og Opera er selvflg. "med på vognen".
Har du prøvet at trække i dir browservindue?
Du vil se, at designet hele tiden tilpasser sig vinduets bredde.
Karl Erik.

hvordan trækker man en "dir" ??

Hvad med {} Hvordan skal de placeres ??

@media print
{
.main
{
position: absolute;
left : 0%;
osv...

}
.left
{
display:none;

}
}

mvh Erik

[Karl Erik Christensen]

Post by Is

Post by Karl Erik Christensen

Post by Is
virker det så ved alle browsere ??

Ja - bare ikke versioner af IE mindre end 9.
Responsive Design er en af de største nyheder indenfor webdesign, de
sidste 5-10 år.
Metoden henvender sig især til Smartphones og Tabletter - og disse var
jo ikke kendte da IE8 blev født.
Men fra IE9 og opad fungerer det.
FF, Chrome og Opera er selvflg. "med på vognen".
Har du prøvet at trække i dir browservindue?
Du vil se, at designet hele tiden tilpasser sig vinduets bredde.
Karl Erik.

hvordan trækker man en "dir" ??
Hvad med {} Hvordan skal de placeres ??
@media print
{
.main
{
position: absolute;
left : 0%;
osv...
}
.left
{
display:none;
}
}
mvh Erik

Man trækker i en "dir", men du trækker i "dit" browservindue - det var
en slåfejl. Træk browservinduet større, skub det mindre :-)

Man vil typisk skjule menuen ved udskrift - den har man jo ikke brug for
på papir:

@media print {
#menu {
display: none;
}
}

Men ellers er det korrekt som du skriver.

Karl Erik.

[Bertel Lund Hansen]

Post by Is
Hvad med {} Hvordan skal de placeres ??

Her er min stil. Jeg lægger vægt på at der skal stå så meget
information som muligt ad gangen:

@media print {
.main {
position: absolute;
left : 0%;
}
.left { display: none; }
}

[scootergrisen]

Post by Is
Hvad med {} Hvordan skal de placeres ??

Det bestemmer du selv.

Du kan kiggge i kildekoden til andres hjemmesider og se hvad du bedst
kan lide.

I starten hvor jeg skrev PHP der ville jeg gerne have det til at stå så
tæt så muligt for at spare plads, hvis der ikke behøver være mellemrum
så behøver man jo ikke spilde plads...

Men det kan så gøre det hele meget kompakt og måske svært at læse.

Derfor kan det anbefales at bruge mellemrum alligevel så det er let at læse.

Jeg skriver nu min CSS kode sådan her ud fra hvad jeg kan se hvad andre
gør på nettet.


@media print {

.main {
position: absolute;
left: 0;
}

.left {
display: none;
}

}

Ét mellemrum før {
Ét mellemrum efter :

[Is]

Post by Is

Post by Karl Erik Christensen

Post by Is
virker det så ved alle browsere ??

Ja - bare ikke versioner af IE mindre end 9.
Responsive Design er en af de største nyheder indenfor webdesign, de
sidste 5-10 år.
Metoden henvender sig især til Smartphones og Tabletter - og disse var
jo ikke kendte da IE8 blev født.
Men fra IE9 og opad fungerer det.
FF, Chrome og Opera er selvflg. "med på vognen".
Har du prøvet at trække i dir browservindue?
Du vil se, at designet hele tiden tilpasser sig vinduets bredde.
Karl Erik.

hvordan trækker man en "dir" ??
Hvad med {} Hvordan skal de placeres ??
@media print
{
.main
{
position: absolute;
left : 0%;
osv...
}
.left
{
display:none;
}
}
mvh Erik

tak for svar, men mit sp er vist ikke forstået ret ?

når jeg spørger til {}

så vil jeg gerne vide om et eller to er rigtigt placeret af }

et...
@media print
{ ???

.main
{
position: absolute;
left : 0%;
}

.left
{
display:none;

}

.right
{display:none;
}
}

eller to ..
@media print
{ }

.main
{
position: absolute;
left : 0%;
}

.left
{
display:none;

}

.right
{display:none;
}
???

------------

selv mener jeg et er rigtig, men hvis jeg bruger "TopStyle 4" til at
lave CSS ser det ud som om den opfatter to som rigtig

??? erstatter det der er forskellen.

mvh Erik

[Karl Erik Christensen]

Post by Is
eller to ..
@media print
{ }
.main
{
position: absolute;
left : 0%;
}
.left
{
display:none;
}
.right
{display:none;
}

Nej, det er forkert.
1 er rigtigt:

@media print {
.main {
position: absolute;
left: 0%;
}
.left {
display: none;
}
.right {
display: none;
}
}

Den første "begynd tuborgklamme" indikerer at her kommer style ved media
print.
Stylingen af media print afsluttes med "slut tuborgklamme".

Capisce?

Karl Erik.

[Is]

Post by Karl Erik Christensen
Den første "begynd tuborgklamme" indikerer at her kommer style ved media
print.
Stylingen af media print afsluttes med "slut tuborgklamme".
Capisce?
Karl Erik.

Jeg siger mange tak

mvh Erik