Hallo Leute,

ich hab heute mal wieder ein nettes Problem gehabt. Ich hab versucht einen Brother DCP-115C bei Ubuntu 12.04 LTS 64-Bit zu installieren. Es stellte sich als schwerer heraus als gedacht. Folgendes war dann schlussendlich die Lösung:

1. Drucker ausschalten
2. Den Befehl „sudo aptitude install brother-lpr-drivers-extra“
3. Drucker anschalten
4. Im Browser auf http://localhost:631/printers/ gehen
5. Den Drucker auswählen und beim Dropdownmenü von Administration „Standardeinstellungen festlegen“
6. Dort dann die Media Size auf A4 stellen und fertig

So hat es zumindest bei mir funktioniert. Vielleicht kann ich damit jemanden weiterhelfen.

Grüzi

Es gibt diesen Blogeintrag wahrscheinlich schon zu 100derten, aber dennoch muss man immer ewig danach suchen. Dieser Beitrag soll auch eher mir als Gedächtnisstütze dienen, aber vielleicht hilft es dem einen oder anderen weiter.

Das Ziel

Das Ziel ist ein einfaches Webseitenlayout mit

• Header oben mit 100% Breite
• Menüleiste links mit fixer Breite
• Hauptbereich rechts mit variabler Breite
• Footer unten mit 100% Breite

Das Ganze soll dann etwa so aussehen:

Der Code

Das DIV-Layout gestaltet sich dabei wie man es sich vorstellt. Header-, Navigations-, Haupbereichs- und Footer-DIV werden von einem Overall-Container umschlossen um eine Gesamtbreite im Browser festlegen zu können.

<div id="overall">
    <div id="head">
        <h1>Header</h1>
    </div>

    <div id="navbar">
        <h1>Navigation</h1>
    </div>

    <div id="main">
        <h1>Hauptbereich</h1>
    </div>

    <div style="clear: both;"></div>
    <div id="footer">
        <h1>Footer</h1>
    </div>
</div>

Das CSS dabei sieht wie folgt aus:

html {
    font-size: 81.25%;
    font-family: arial, helvetica, sans-serif;
    line-height: 1;
}

body {
    background-color: #ffffff;
    padding: 15px;
}

#overall {
    position: relative;

    width: 700px;

    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#head {
    position: relative;

    height: 120px;

    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    margin-bottom: 10px;
}

#navbar {
    float: left;
    width: 200px;

    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    margin-right: 10px;
}

#main {
    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;

    margin-left: 210px;
}

#footer {
    background-color: #f1f1f1;
    margin-top: 10px;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
}

Wie ihr sehen könnt wird die Breite des Menübereiches an zwei Stellen eingestellt. Erst einmal in der Navigationsleiste und dann noch einmal im Hauptbereich. Der Unterschied von 10px kommt vom margin-right der Navigationsleiste. Will man nun die Gesamtbreite anpassen muss man nur die Breite des Overall-DIVs anpassen und fertig.

Finale Schritte

Jetzt kann man das Ganze anpassen wie man möchte und hat ein gutes Grundgerüst. Ein weiteres, sehr verbreitetes Problem muss vorher aber noch gelöst werden: Die Höhe der Menüleiste sollte sich an die Höhe des Menübereiches anpassen und umgekehrt. Wie das funktioniert habe ich in einem neuen Beitrag zusammengefasst.

Wie ihr in meinem vergangenen Beitrag lesen könnt, habe ich ein einfaches DIV-Layout mit Header, Footer, Menü und Hauptbereich aufgebaut.

Das Problem

Navigationsbereich und Hauptbereich weisen in diesem Beispiel nicht die selbe Höhe auf, wenn sie unterschiedlichen Inhalt haben.

Die Lösung

Leider bietet CSS hier keine direkte Lösung. Das Ganze kann nur durch einen eleganten Workaround erledigt werden. Wir packen Navigation und Hauptbereich in einen neuen DIV-Container (Wrapper) und sagen dem dann, er soll alles was über ihn hinaus wächst abschneiden:

<div id="overall">
    <div id="head">
        <h1>Header</h1>
    </div>
    <div id="wrapper">
        <div id="navbar">
            <h1>Navigation</h1>
            <div id="navbar-bottomline"></div>
        </div>
        <div id="main">
            <h1>Hauptbereich</h1>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div id="footer">
        <h1>Footer</h1>
    </div>
</div>

Das CSS hierfür sieht wie folgt aus:

html {
    font-size: 81.25%;
    font-family: arial, helvetica, sans-serif;
    line-height: 1;
}

body {
    background-color: #ffffff;
    padding: 15px;
}

#overall {
    position: relative;

    width: 700px;

    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#head {
    position: relative;

    height: 120px;

    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    margin-bottom: 10px;
}

#wrapper {
    overflow: hidden;
}

#navbar {
    float: left;
    width: 200px;

    padding-bottom: 20010px;
    margin-bottom: -20000px;

    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    margin-right: 10px;
}

#main {
    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;

    padding-bottom: 20010px;
    margin-bottom: -20000px;

    margin-left: 210px;
}

#footer {
    background-color: #f1f1f1;
    margin-top: 10px;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
}

Nächstes Problem: Keine Randlinie mehr am unteren Bereich

Will man, wie in meinem Beispiel aber eine Umrandung einsetzen steht man vor einem Problem: Die Umrandung wird natürlich abgeschnitten. Die Lösung ist wieder mal ein wenig Tricky. Die Idee:
Ich erstelle zwei leere Container (navbar-bottomline und main-bottomline) die nur einen oberen Rand haben und stelle sie genau unter die eigentliche Navigationsleiste und den Hauptbereich. Dadurch entsteht der Eindruck, dass es sich um eine geschlossene Umrandung handelt. In Wirklichkeit sind es aber zwei unterschiedliche Container. Das ganze sieht wie folgt aus:

<div id="overall">
    <div id="head">
        <h1>Header</h1>
    </div>
    <div id="wrapper">
        <div id="navbar">
            <h1>Navigation</h1>
            <div id="navbar-bottomline"></div>
        </div>
        <div id="main">
            <h1>Hauptbereich</h1>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div id="bottom-navbar"></div>
    <div id="bottom-main"></div>
    <div id="footer">
        <h1>Footer</h1>
    </div>
</div>

Am HTML hat sich nicht viel geändert. Lediglich zwei neue Container am Ende des wrapper-DIVs. Das CSS ist auch lediglich um diese zwei Container erweitert worden. Dabei müssen natürlich Breite und Marginwerte des eigentlichen Containers übernommen werden, sonst ist die Position der Endlinie nicht ganz klar.

html {
    font-size: 81.25%;
    font-family: arial, helvetica, sans-serif;
    line-height: 1;
}

body {
    background-color: #ffffff;
    padding: 15px;
}

#overall {
    position: relative;

    width: 700px;

    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#head {
    position: relative;

    height: 120px;

    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    margin-bottom: 10px;
}

#wrapper {
    overflow: hidden;
}

#navbar {
    float: left;
    width: 200px;

    padding-bottom: 20010px;
    margin-bottom: -20000px;

    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    margin-right: 10px;
}

#bottom-navbar {
    float: left;
    width: 200px;
    margin-right: 10px;

    border-top: 1px;
    border-bottom: 0px;
    border-left: 1px;
    border-right: 1px;
    border-color: #e5e5e5;
    border-style: solid;
}

#main {
    background-color: #f1f1f1;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;

    padding-bottom: 20010px;
    margin-bottom: -20000px;

    margin-left: 210px;
}

#bottom-main {
    margin-left: 210px;

    border-top: 1px;
    border-bottom: 0px;
    border-left: 1px;
    border-right: 1px;
    border-color: #e5e5e5;
    border-style: solid;
}

#footer {
    background-color: #f1f1f1;
    margin-top: 10px;
    border: 1px;
    border-color: #e5e5e5;
    border-style: solid;
}

Hat man alles richtig gemacht hat man jetzt ein hübsches Grundgerüst für den Aufbau seiner Seite.

Seit kurzem arbeite ich mit Redmine und bin beim erstellen eines PDFs von einer Wikiseite auf folgenden Fehler gestoßen:

Internal error

An error occurred on the page you were trying to access.
If you continue to experience problems please contact your Redmine administrator for assistance.

If you are the Redmine administrator, check your log files for details about the error.

Ein Blick in /var/log/apache2/error.log offenbart folgendes:

Errno::EACCES (Permission denied – /usr/local/share/redmine/tmp/pdf):
lib/redmine/export/pdf.rb:39:in `initialize‘
lib/redmine/export/pdf.rb:707:in `new‘
lib/redmine/export/pdf.rb:707:in `wiki_page_to_pdf‘
app/controllers/wiki_controller.rb:76:in `show‘

Möchte man nun in das besagte „pdf“ Verzeichnis im Redmine tmp-Verzeichnis, bemerkt man, dass dieses Verzeichnis gar nicht existiert.

mkdir pdf

chmod 0666 pdf

Behebt das Problem und man kann schöne PDFs aus Wikiseiten erstellen.