Printlayout erstellen

Andre1441

Hallo,
ich bin noch Anfänger auf dem HTML Gebiet und bräuchte eure Hilfe. Undzwar würde ich gerne in CSS ein Drucklayout einfügen, welches das Layout für die Druckversion bestimmt.
Ich habe schon bei Google und hier im Forum gesucht, doch leider werde ich daraus nicht ganz schlau. Ich habe schon versucht etwas mit @media print{ xy{display:none;}} versucht, jedoch brachte dieses keinen Erfolg.
Mein HTML Code wäre folgender:

HTML

<!DOCTYPE  html>
<html>
    <head>
        <title>Projektarbeit</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.menubutton').click(function() {
                    $('.nav').slideToggle('slow');
                });
            });
        </script>


    </head>
    <body>
        <section id="menubar">
            <ul>
                <li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
            </ul>
        </section>
        <header>
            <h1>Projektarbeit</h1>
        </header>
        <nav class="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="a.html">Planungskonzept ruhender Verkehr</a></li>
                <li><a href="b.html"class="active">&Ouml;PNV</a></li>
                <li><a href="c.html">Impressum</a></li>
                <li><a href="d.html">About</a></li>
            </ul>
        </nav>
        <section id="main">
            <article>
                <h2>&Ouml;ffentlicher Personennahverkehr</h2>
                <div id="container">
                            <div class="responsive-iframe">
                            <iframe src="http://regiohelden.de/google-maps/map.php?width=600&amp;height=300&amp;hl=de&amp;q=Kreyenbr%C3%BCck%20Nord%2C%20Oldenburg+(Einzugsgebiet)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=A&amp;output=embed" width="500" height="313" frameborder="0" SCROLLING="NO"></iframe>
                            </div>
                            </div>
                <p>Das Angebot des &Ouml;PNV in Kreyenbr&uuml;ck-Nord wird insgesamt als gut bewertet. Hinsichtlich Bedienungsqualit&auml;t und Fl&auml;chenerschlie&szlig;ung sind daher keine Handlungsempfehlungen zu geben. Auch wird die Infrastruktur ganz &uuml;berwiegend als nicht verbesserungsw&uuml;rdig eingesch&auml;tzt. Lediglich die veralteten, wenig ansprechenden Haltestellenstelen, wie  sie beispielsweise an der Haltestelle "An den Vo&szlig;bergen" oder "Buschhagenweg" zu finden sind, sollten erneuert werden. Um auf das Angebot des &Ouml;PNV aufmerksam zu machen, d.h. Pr&auml;senz im Stra&szlig;enraum zu zeigen, sollten die Stelen auff&auml;llig und ansprechend gestaltet sein. Abbildung 17 zeigt ein Beispiel f&uuml;r die Gestaltung einer Haltestellenstele, die als Blickfang im Straßenraum zu sehen ist.</p>
                <p>Als Ma&szlig;nahme zur Beschleunigung des &Ouml;PNV sollte in der Brandenburger Stra&szlig;e auf das Parken auf der Fahrbahn verzichtet werden. Die Reduzierung des Stellplatzangebotes (11 bewirtschaftete Stellpl&auml;tze) sollte durch weitere Parkm&ouml;glichkeiten am Klinikum (s. Kapitel 3.2) ausgeglichen werden.</p> 

                <img src="images/abb1.png"/>
                                        <p>Wenig ansprechende Haltestelle</p>
                        <img src="images/abb2.png"/>
                                        <p>Haltestelle als Blickfang</p>
                </article>
            <aside>
                <section>
                    <ul>
                    <p></p>
                    <div class="box">
                    <a href="http://www.facebook.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" width="20" height="20" alt="Facebook" /></a>
                    </div>
                    <div class ="box">
                    <a href="http://twitter.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" width="20" height="20" alt="Twitter" /></a>
                    </div>
                    <div class="box">
                    <a href="https://plus.google.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/google.png" width="20" height="20" alt="Google" /></a>
                    </div>
                    <div style="clear: left;"></div>
                    </ul>
                </section>
                <section>
                    <ul>    
                        <div id="werbung1">
                            <div class="responsive-image">
                                <iframe src="images/werbung2.jpg" width="500" height="600" frameborder="0" SCROLLING="NO"></iframe>
                            </div>
                        </div>
                    </ul>
                </section>
                <section>
                    <ul>    
                        <div id="werbung2">
                            <div class="responsive-image">
                                <iframe src="images/werbung1.png" width="500" height="600" frameborder="0" SCROLLING="NO"></iframe>
                            </div>
                        </div>
                    </ul>                    
                </section>
                <section id="drucken">
                    <h2>Drucken</h2>
                    <ul>
                        <li>Hier k&ouml;nnen Sie diese Seite drucken</li>
                        <form>
                            <input type="button" value=" drucken " onClick="javascript:window.print()">
                        </form>
                    </ul>
                </section>
            </aside>
        </section>
        <footer>
            <ul>
                <li>&copy; 2014 </li>
                <li><a href="index.html">Kontakt</a></li>
                <li><a href="index.html">Datenschutz</a></li>
                <li><a href="index.html">Impressum</a></li>
            </ul>
        </footer>
    </body>
</html>

Alles anzeigen

und mein CSS Code dieser:

CSS

/* General Style */ 
body {
    background:#dcdcdc;
    font-size:100%;
    margin:0em;
    padding:0em;
}
h1 {
    font-size:2.5em;
    line-height:3.8em;
    font-family:Helvetica;
    font-weight:100;
    color:#e2dbdb;
    margin:0em;
}
h2 {
    font-size:1.563em;
    font-family:Helvetica;
    font-weight:100;
    line-height:1.8em;
    color:#2f2d2c;
    margin:0em;
    padding:1.25em;
    text-align:left;    
}
p {
    font-family:Helvetica;
    font-weight:100;
    line-height:1.250em;
    color:#2f2d2c;
    margin:0em;
    padding:1.250em;
    text-align:justify;
}
ul {
    margin:0em;
    padding:0em;
}
li {
    list-style:square;
    font-family:Helvetica;
    font-weight:100;
    line-height:1.250em;
    color:#2f2d2c;
    margin:0.313em 0em 0.313em 0em;
    padding:0em;
}
img {
    width:90%;
    height:auto;
    max-width:100%;
}
a {
    text-decoration:none;
}
/* On Top Bar */ 
#menubar {
    display:block;
    background:#ffffff;
}
#menubar ul {
    display:block;
    width:2em;
    padding:0.9em;
}
#menubar ul li {
    display:inline;
}
#menubar ul li a.menubutton {
    display:none;
}
/* Header */ 
header {
    display:block;
    background:#2f2c2c;
    text-align:center;
}
/* Navigation */ 
nav {
    display:block;
    height:2.500em;
    background:#ffffff;
    text-align:center;
}
nav ul {
    display:block;
    margin:0em;
    padding:0em;
}
nav ul li {
    display:inline; 
    margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
    color:#454040;
    font-size:1.125em;
    line-height:2.500em;
    padding:0.563em 0.938em 0.375em 0.938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}
nav ul li a:hover {
    background:#dbd9d8;
    border-bottom:0.188em solid #e7590b;    
}
nav ul li a.active {
    border-bottom:0.188em solid #e7590b;
}
/* Content Area */ 
#main {
    display:block;
    width:96%;
    max-width:980px;
    margin:1.250em auto;
    padding:0em;
}
#main article {
    display:inline-block;
    width:65.3%;
    background:#ffffff;
    vertical-align:top;
    margin:0em;
    padding:0em;
    text-align:center;
}
#main article img {
    max-width:560px;
    box-shadow:0px 0px 10px -5px #4c4948;
    border-radius:5px;

}
#main aside {
    display:inline-block;
    width:30.6%;
    margin-left:3%;
    padding:0em;
    vertical-align:top;
}
#main aside section {
    margin-top:1.563em;
    background:#ffffff;
    border-bottom:0.188em solid #E7590B;
}
#main aside section:first-child {
    margin-top:0em;
}
#main article h2 {
    padding:1em 1.8em 1em 1.8em;
}
#main aside section ul {
    padding:0px 1.875em 1.25em 2.5em;
}
/* Footer */ 
footer {
    display:block;
    background:#2f2c2c;
    text-align:center;
}
footer ul {
    display:block;
    width:100%;
    max-width:980px;
    text-align:left;
    margin:0px auto;
}
footer ul li {
    display:inline;
    font-size:0.8em;
    line-height:2.8em;
    color:#e2dbdb;
    padding:0px 0.625em 0px 0.625em;
}
footer ul li a {
    color:#e2dbdb;
}
/* Mobile Style */ 
@media screen and (max-width: 800px) {
    body {
            font-size:90%;
        }
}
@media screen and (max-width: 600px) {
    #main aside, #main article {
        width:100%;
        display:block;
        margin:0.625em 0em 0.625em 0em; 
    }
}
@media screen and (min-width: 550px) {
    nav.nav {
        display:block !important;
    }
}
@media screen and (max-width: 550px) {
    body {
        font-size:86%;
    }
    #menubar ul li a.menubutton {
        display:block;
    }


    nav {
        display:none;
        height:auto;
    }
    nav ul li {
        display:block;
        margin:0.3em 0em 0.3em 0em;
    }


}
@media print{
.menubar {display:none;}
.werbung1 {display:none;}
.werbung2 {display:none;}
#footer {display:none;}
}
/*Video & Googlemaps*/
.responsive-iframe {
    position: relative;
    padding-bottom: 56%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}


.responsive-iframe iframe,
.responsive-iframe object,
.responsive-iframe embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*Images*/
.responsive-image {
    position: relative;
    padding-bottom: 100%;
    padding-top: 80px;
    height: 0;
    overflow: hidden;
}


.responsive-image iframe,
.responsive-image object,
.responsive-image embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Box */


    .box {
    max-width:50px;
    box-shadow:none;
    border-radius:5px;
    float: left;
    }

Alles anzeigen

Ich wäre über jede Hilfe dankbar. Schon einmal im Voraus vielen Dank !

Schöne Grüße
Andre

threadi

Du sprichst in dem print-Abschnitt Klasse an, aber es sind eigentlich IDs ... schau mal genau hin

Andre1441

Danke für die schnelle Antwort. War echt dumm von mir
Ich habe den Code nun neu aufgestellt und er funktioniert schon recht gut, hat aber noch ein paar Macken.

CSS

@media print{
#main aside,.menubar ,.box ,.nav ,#footer,#header{
display:none;}
body {
font: 12pt Cambria, Georgia, "Times New Roman", serif;
background: #fff !important;
color: #000;
text-align: justify; /* Blocksatz */
}
body, #main article {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  }
#main:after {
  content: "\ Alle Rechte vorbehalten. (c) 2007 Name, www.domain.de";
  color: #999 !important;
  font-size: 0.85em;
  border-top: 1px solid #999;
  }
}

Alles anzeigen

So wird nun zuerst eine leere Seite gedruckt. Außerdem wird die Seite nicht komplett gedruckt sondern mit immer im Bild bricht der Druck ab.
Wenn du mir dabei noch helfen könntest, dann wär ich dir ziemlich dankbar !

Schöne Grüße
Andre

Tags