Ergebnis 1 bis 3 von 3

Thema: Printlayout erstellen

  1. #1
    HTML Newbie
    Registriert seit
    22.02.2015
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Printlayout erstellen

    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-Code:
    <!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>
    und mein CSS Code dieser:
    Code:
    /* 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;
        }
    Ich wäre über jede Hilfe dankbar. Schon einmal im Voraus vielen Dank !

    Schöne Grüße
    Andre
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Printlayout erstellen

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

  3. Folgende User finden die Antwort von threadi gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.02.2015
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Printlayout erstellen

    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.

    Code:
    @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;
      }
    }
    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

Ähnliche Themen

  1. erstellen von uez oder upf ?
    Von egal im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 9
    Letzter Beitrag: 02.11.2009, 08:04
  2. Ordner erstellen und Datei erstellen
    Von Daniela im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 20
    Letzter Beitrag: 26.02.2007, 20:41
  3. pop up erstellen
    Von kathi6729 im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 19.11.2006, 22:08
  4. POP UP erstellen. wie?
    Von HundeHaar im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 08.02.2005, 13:50
  5. Gif erstellen
    Von Romi im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 8
    Letzter Beitrag: 06.05.2003, 20:28

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •