Linuchs: Linker Rand beim Drucken

SELF-Forum

Linker Rand beim Drucken

Linuchs
– Informationen zu den Bewertungsregeln

Hallo,

weil ich beim Drucken einen Heftrand brauche, habe ich auf dieser Seite dieses:

 @media print {  
  a, body, p {font-size:10pt; font-family:serif}  
  #body {margin:0 0 0 10mm; max-width:160mm; border:1px solid #f00}  
 }

und doch wird der linke Rand beim Drucken von #body nicht gewährt. Getestet mit Firefox und Opera.

In der zuvor eingebundenen CSS-Datei gilt eine andere Regel, aber die müsste doch überschrieben werden?

Gruß Linuchs

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Linker Rand beim Drucken

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hi,

    @media print {

    a, body, p {font-size:10pt; font-family:serif}
      #body {margin:0 0 0 10mm; max-width:160mm; border:1px solid #f00}
    }

    
>   
> und doch wird der linke Rand beim Drucken von #body nicht gewährt. Getestet mit Firefox und Opera.  
  
bei der Unterstützung von print-Styles hinken fast alle Browser etwas hinterher. Aber ...  
  

> In der zuvor eingebundenen [CSS-Datei](http://shanthi-guesthouse.de/css/basis.css) gilt eine andere Regel, aber die müsste doch überschrieben werden?  
  
... in diesem Fall liegt das Problem bei dir: Im allgemeinen Teil des Stylesheets legst du Eigenschaften für div#body fest, das ist spezifischer als #body und "gewinnt" deshalb.  
  
Abgesehen davon: Wozu überhaupt div#body? Warum weist du die gewünschten Eigenschaften nicht direkt dem body-Element zu? Das div-Element ist hier überflüssig.  
  
Ciao,  
 Martin  

-- 
Der Stress von heute ist die gute alte Zeit von morgen.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Danke

      Linuchs
      – Informationen zu den Bewertungsregeln

      Hi,

      In der zuvor eingebundenen CSS-Datei gilt eine andere Regel, aber die müsste doch überschrieben werden?

      ... in diesem Fall liegt das Problem bei dir: Im allgemeinen Teil des Stylesheets legst du Eigenschaften für div#body fest, das ist spezifischer als #body und "gewinnt" deshalb.

      Danke, das ist die Lösung.

      Abgesehen davon: Wozu überhaupt div#body? Warum weist du die gewünschten Eigenschaften nicht direkt dem body-Element zu? Das div-Element ist hier überflüssig.

      Nein. Auf breiten Viewports möchte ich die Anzeigebreite (div#body) begrenzen und dennoch links und rechts davon eine andere Hintergrund-Farbe haben (grau).

      Linuchs

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Danke

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hallo,

        Abgesehen davon: Wozu überhaupt div#body? Warum weist du die gewünschten Eigenschaften nicht direkt dem body-Element zu? Das div-Element ist hier überflüssig.
        Nein. Auf breiten Viewports möchte ich die Anzeigebreite (div#body) begrenzen und dennoch links und rechts davon eine andere Hintergrund-Farbe haben (grau).

        also body in der Breite begrenzen, und für html eine Hintergrundfarbe setzen? :-)
        Warum haben eigentlich so viele Webautoren Hemmungen, diese zwei Pflichtelemente ins Styling einzubeziehen ...?

        Ciao,
         Martin

        --
        Lehrer:  Wieviel ist die Hälfte von 8?
        Schüler: Kommt drauf an. Waagrecht 0 und senkrecht 3.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. body != div#body

          Linuchs
          – Informationen zu den Bewertungsregeln

          Hallo,

          also body in der Breite begrenzen, und für html eine Hintergrundfarbe setzen? :-)
          Warum haben eigentlich so viele Webautoren Hemmungen, diese zwei Pflichtelemente ins Styling einzubeziehen ...?

          Weil es nicht klappt. Habe deine Empfehlung ausprobiert:

          body {  
  position:       relative;  
  margin-left:    auto;  
  width:          100%;  
  max-width:      250mm;  
  margin-right:   auto;  
}

          Für body klappt margin-xx:auto offenbar nicht (Firefox, Opera), klebt am linken Rand des Viewports.

          Linuchs

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. body != div#body

            Der Martin
            – Informationen zu den Bewertungsregeln

            Hi,

            Habe deine Empfehlung ausprobiert:

            ich auch, und ich komme zu einer anderen Erkenntnis als du.

            Für body klappt margin-xx:auto offenbar nicht (Firefox, Opera), klebt am linken Rand des Viewports.

            Seltsam. Ich habe das Minimalbeispiel um unterschiedliche background-colors für html und body ergänzt, damit man die Bereiche auch erkennt:

            <html>  
<head>  
<title>Demo</title>  
<style type="text/css">

            html  
 { background-color: #555;  
 }  
body  
 { width: 100%;  
   max-width: 250mm;  
   margin: 24px auto;  
   position: relative;  
   background-color: #AAA;  
 }

            </style>  
</head>  
  
<body>  
<p>Lorem ipsum ...<br>  
und wie das ganze Zeugs noch so heißt ...<br>  
Viel Text ...<br>  
bla blah ...</p>  
</body>  
</html>

            Liefert bei mir sowohl in Opera 12.15 als auch im Firefox 20.0 das erwartete Ergebnis: Ein in der Breite begrenzter, horizontal zentrierter body.
            Wenn das bei dir anders ist, müssen da noch andere Dinge mit hineinspielen, die wir im Moment nicht betrachtet haben.

            So long,
             Martin

            --
            Die späteren Ehen sind oft glücklicher als die erste, weil das natürliche Ende bereits absehbar ist.
              (George Bernhard Shaw)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln