Beispiel -->Überschrift 1 (Ü1)

leistungen Almaufschliessung 390Absatz: Sie können mit ein paar einfachen HTML Elementen Ihren Inhalt sehr schön gestalten.
Gerne passen wir die Formatierungen - soweit möglich und stylisch sinnvoll - Ihren Wünschen an.
Beachten Sie aber bitte, dass "wenig oft mehr" ist!

 

Typography - Überschrift 2 (Ü2)

Generell gilt: (Ü3)

  • Schriftart ist Arial, als Ausweichschriften folgen der Reihe nach:  Helvetica,sans-serif
  • Zeilenhöhe, wenn nicht anders definiert: 25px
  • Schriftgröße, wenn nicht anders definiert: 17px
  • Zeilenabstand nach unten, wenn nicht anders definiert: 2px
  • Schriftfarbe, wenn nicht anders definiert: #2a2726
  • Hintergrundfarbe, wenn nicht anders definiert: #f6f6f6

Die Überschriften im Textteil haben unter anderem folgende Formatierungen: (Ü3)

  • Ü1:
    h1 {color: #000; font-size: 2em; font-weight: 500; text-transform: none; line-height: 2em; margin-top: 13px; margin-bottom: 13px; padding: 5px; background: rgba(88,89,91, 0.15);margin-left: -30px;}

  • Ü2:
    h2 {font-size: 1.8em; line-height: 36px; font-weight: normal; text-transform: none; margin-top: 10px; margin-bottom: 10px; padding: 10px; background: rgba(88,89,91, 0.15);}

  • Ü3:
    h3 {color: #000; font-size: 1.5em;  text-transform: none; font-weight: 300; line-height: 50px; margin-top: 7px; margin-bottom: 7px; padding: 5px; background: rgba(88,89,91, 0.05);}

  • Ü4:
    h4 {color: #1b1b1b; font-size: 1.4em; font-weight: normal; line-height: 31px; text-transform: uppercase; padding: 5px; margin-top: 7px; margin-bottom: 7px; background: rgba(88,89,91, 0.05);}

  • Ü5:
    h5  {font: inherit;font-size: 1.3em; -weight: 300; color: #1b1b1b; padding: 5px; background: rgba(88,89,91, 0.1); margin-top: 5px; margin-bottom: 5px;}

  • Ü6:
    h6 {text-transform: uppercase; font-weight: 400;  margin-top: 5px; margin-bottom: 5px; color: #1b1b1b; padding: 5px; background: rgba(88,89,91, 0.15);}

 

Als Farben immer nur diese einsetzen, sonst wird die Seite ein buntes Malblatt: (Ü3)

  • Rot vom Logo: #e2001a !important; /* rot */
  • Grau von Vorgabe: #d9dadb; /* grau */
  • Grün von Vorgabe: #009036; /* grün */

 

Normaler Absatz: Hier ein paar Beispiele für textbasierende Formatierungen. Das <p> Tag erzeugt einen neuen Absatz. es macht davor und danach einen kleinen Abstand. Wenn Sie einen Text verlinken wollen, müssen Sie das <a> Tag einsetzen.

Nummerierungsbeispiel:- Überschrift 3 (Ü3)

  1.     Punkt 1
  2.     Punkt 2
  3.     Punkt 3
  4.     Punkt 4

Beispiele verschiedener Sonderformatierungen:- Überschrift 4 (Ü4)

Mit dem <blockquote> Tag definiert einen eingesetzten Absatz, so wie hier - klicken Sie dafür einfach auf den "Zitat"-Button..

Mit dem <code> Tag definiert man einen Computercodeeffekt.

Riesige Steine werden mit dem Brecher zerkleinert - Alternativtexte für Fotos von alter Website mit "Codebeispiel" formatiert!

Fotos und deren Einsatzgrößen - Überschrift 5 (Ü5)

Fotobeispiel 1 (maximale Breite in den einzelnen Seiten: 900px):

leistungen Rekultivierungen 900
900px Breite für Normalformat ist als Bildgröße für die Großaufnahmen kein Problem !!
In den einzelnen Seiten sieht es aber wuchtig aus!!!!

Die Fotos haben verschiedene Größen: (Ü6)

Bei der Übersichtsseite für die Firmenauswahl: 350px × 263px, Abstände: oben/unten 10px, rechts/links auto, Border 1px solid #000000

Bei der Übersichtsseite Leistungen: 385px × 250px

Bei den einzelnen Seiten der diversen Leistungen: 390px Breite im Textteil und im unteren Fototeil  240px Breite, 160px oder 180px Höhe - Achtung: wäre gut, wenn für eine einheitliche Linie die Fotos gleich groß wären!!!

 

Fotobeispiel 2 - Fotoleiste unten bei Rekultivierung

  • 5 Fotos nebeneinander: max. 240px breit, 180px hoch, Abstände: oben 0px, rechts 2 px unten 4px links 0px, Border 1px solid #000000
  • Beispiel dafür siehe hier drunter:
Baufeldentsteinungen Unwetterschädenbeseitigung Exakte Einsaat   etc.

 

Linkbeispiele - Überschrift 6 (Ü6)

Ein Link in einem normalen Text hat derzeit das Rot vom Logo.

Phocagallery - wichtige Formatierungen (Ü4)

Die Fotos sollten unbedingt in einer webgerechten Größe vorbereitet werden, sonst braucht das System viel zu viel unnötigen Speicher!!!

Die Fotos sollten auf eine Breite von 800 px vorbereitet werden - AUF KEINEN FALL kleiner, sonst wird die Großaufnahme hochgerechnet, also "aufgeblasen"

Vom System werden Fotos in folgenden Größen beim Upload erzeugt:

  • large - 800px breit
  • middle - 260px breit
  • small - 150px  breit

 Die Höhe wird entsprechend der Originalvorgabe skaliert.

 

Headline 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.