Elektro.- Hard.- und Software- Vertrieb

Wir leisten:

  • Vor-Ort-Wartung, Fernwartung
  • Netzwerkpflege und Wartung
  • Hardware und Software-Wartung
  • Software-Installation
  • Dokumentation / Inventur
  • Telefonsupport

box3 - Latest News

DATE

07

NOV

2012

Ich bin eine zweite Inhaltsbox. Hier werde ich als News-Box genutzt. Übrigens: Die Kalenderblätter sind ohne jede Grafik erstellt. Sie können diese daher bei Bedarf leicht farblich ändern sowie auch die Abmessungen anders einstellen.
Weiter


DATE

10

OKT

2012

Der Text legt sich um das jeweilige Kalenderblatt herum, die Abstände vom Kalenderblatt zum Text hin nach rechts und nach unten lassen sich auch beliebig einstellen. Weiter

Die Links in der News-Box sind schon verlinkt. Klicken Sie mal.

* * * * *

Partner - Links:


Homepage-Vorlagen Mouseover-Effekte
Partner 1 Sponsor
Partner 2 Anwalt Fa. Paragraphenschmiede
Partner 3 Enzyklopädie

 



 



Herzlich Willkommen bei uns ...

Tipps und Hilfe für die eigene Homepage

Die Boxen

Die Höhe jeder einzelnen Box können Sie mit einer Höhenangabe (height) in Pixeln festlegen, falls Sie sehr wenig Inhalt in einer Box haben oder optisch einfach alle Boxen in der selben Größe haben wollen. Der Quelltext von Box 2 sieht z. B. aus wie folgt:

* * * * *
#box2 {
height:300px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:20px;
font-size: 13px;
line-height: 16px;
text-align:left;
color:#EFEFEF;
background-color:#305e78;
background-image:url(images/fv6.jpg);
background-repeat:no-repeat;
background-position:  100% 0%;
border-bottom: solid 1px #fff;
}
* * * * *

Die wesentlichen Anpassungen bezgl. der Box sind also: Schriftfarbe (color), Schriftgrösse (font-size), Zeilenhöhe (line-height), Schriftart (font-family), Abstände zum Rand hin (padding), Hintergrundfarbe (background-color) bwz. Hintergrundgrafik (background-image), evt. Rahmen (border) sowie Höhe (height).

Fortgeschrittene könnten auch weitere Boxen hinzufügen bzw entfernen.


Sprung-Links in der News-Box

Mit Sprung-Links sind hier sogenannte Anker-Links gemeint. Denn diese verlinken nicht nur wie üblich auf eine Seite, sondern springen dort auch eine vorher festgelegte Position innerhalb dieser Seite an. Man ist dann sozusagen thematisch genau an der richtigen Stelle. Die Weiter-Links in der News-Box (sie führen auf die Seite "news.html" anbei) haben wir ja bereits für Sie verlinkt. Wenn Sie diese klicken, erkennen Sie, das jeweils eine Sprungmarke gesetzt ist.

Das geht wie folgt:
An den Linkverweis wird einfach das Raute-Zeichen (#) angehängt sowie ein beliebiges Wort oder Textzeichen (hier bei uns: #07nov).
<a href="news.html#07nov">Weiter...</a>
Sie können einen Anker innerhalb der selben Seite setzen oder auch in einer anderen Seite so wie wir es hier bei den Weiter-Links in der News-Box getan haben. Innerhalb der anzuspringenden Seite (news.html) wird dann wie folgt der Anker gesetzt:
<a name="07nov"></a>
Und zwar genau dort im Quellext, wo das Sprungziel sein soll.


Die Hintergrund-Grafik

Sie können hier die Hintergrundfarbe (background-color) oder die Hintergrundgrafik (background-image) ändern, der Schatten beim Rahmen bleibt trotzdem erhalten bzw. passt sich Ihrer gewählten Hintergrundgrafik oder Ihrer gewählten Hintergrundfarbe an. Wie geht das? ...Nun, so haben wir es angelegt: Der weiße Rahmen besteht aus mehreren PNG-Grafiken, welche transparent gesetzt wurden.


Zu ändern in der Datei format.css bei:
#body
{margin-top: 20px; margin-left: 0px;
margin-right: 0px;margin-bottom: 20px;
background-color:#fff;
background-image:url(images/back.jpg);
background-repeat:no-repeat;
background-position:  50% 0%;
font-family:verdana,trebuchet ms,
arial, helvetica, georgia,
"times new roman", sans-serif;
}

Wir haben als weiteres Bespiel die Grafik "back2.jpg" anbei, welche den Hintergrund kachelt. So ändern Sie o.g. Quelltext dafür:
#body
{margin-top: 20px; margin-left: 0px;
margin-right: 0px;margin-bottom: 20px;
background-color:#fff;
background-image:url(images/back2.jpg);
background-repeat:repeat;
background-position:  50% 0%;
font-family:verdana,trebuchet ms,
arial, helvetica, georgia,
"times new roman", sans-serif;
}

Die Kalenderblätter

Die Kalenderblätter finden Sie in der News-Box sowie auf der Seite "news.html". Wir haben hier für Sie eine Version ganz ohne Grafiken ausgearbeitet, damit diese leicht änderbar sind.

Zu ändern in der Datei format.css bei:
/* kalenderblatt*/
div.kalender {float:left;
border:1px solid #852D3B;
width:50px;
height:65px;
margin:0 auto;
margin:0px 10px 0px 0px;;
text-align:center;
}
usw. bis ....

/* ende kalenderblatt*/


Die Unterseiten

Sie können beliebig viele Seiten anlegen. Ein Tipp: Varieren Sie die jeweiligen Seiten ein wenig, damit es spannend und informativ wirkt. Schauen Sie mal : Hier haben wir auf der linken Seite in der Box 2 für unsere Beispielseiten (index.html, tipps.html und news.html) jeweils unterschiedliche Einträge.


Breite der Gesamt-Konstruktion

Zu ändern in der Datei format.css bei:
/* breite der gesamtkonstruktion*/
#breite {width:980px}
Für eine Prozentkonstruktion (Breite der Seite in Prozent bezgl. der eingestellten Monitor-Breite) schreiben Sie dort anstelle der Pixelwerte (px) alternativ auch beliebige Prozentwerte, z.B:
/*breite der gesamtkonstruktion*/
#breite {width:84%}
Egal ob Sie die Breite in Pixel oder Prozent ändern, das Layout ist flexibel angelegt, d.h. der Rahmen mit Schatten-Effekt passt sich immer Ihrer Änderung an und wandert mit.


Höhe des Inhaltsfeldes

Zu ändern in der Datei format.css bei:
#inhalt {height:1400px;}
Hinweis: Bei mehr Inhalt verlängert sich das Inhaltsfeld sowieso automatisch. Die Höhe läßt sich aber auch verstellen, wie oben gezeigt, für den Fall, daß Sie sehr wenig Inhalt haben.


Verbreitern der linken Spalte

Zu ändern in der Datei format.css bei:

/* breite der linken spalte
 - hier beliebig andere px-werte */
.breite_hauptspalte_li {width:280px;}
Hinweis: Wenn Sie die Breite der linken Spalte verändern, sollten Sie auch in der Datei menue.css bei den linken Menüs die Breite (width) anpassen, damit die Unterstriche der Buttons dort über die ganze Breite gehen.

Inhaltsfeld-Formatierung

Die wesentlichen Anpassungen bezgl. des Textes/Inhaltsfeldes, wie Schriftgrösse (font-size), Zeilenhöhe (line-height), Schriftart (font-family), Abstände zum Rand hin (padding), Buchstabenabstand (letter-spacing), Hintergrundfarbe (background-color) bwz. Hintergrundgrafik (background-image) sowie Höhe (height) des Feldes finden Sie in der Datei "format.css" bei
#inhalt {height:1400px;
background-color:#fff;
background-image:url(images/xfv2.jpg);
background-repeat:repeat-x;
background-position:  0% 100%;
text-align:justify;
padding-top: 0px; padding-bottom: 0px;
padding-left: 26px;padding-right:20px;
width:100%;
font-size: 15px;line-height: 24px;
letter-spacing:1px;
color:#7f7f7f;
border-left: solid 1px #fff;
}

Der Blocksatz

Der Text ist hier als Blocksatz gestaltet, d. h. gleiche Ausrichtung der Buchstaben an linker und rechter Kante des Textes. Wer das nicht mag, ersetzt in der Datei "format.css" bei #inhalt den Wert text-align:justify durch text-align:left.


Die Grafiken - so eingebaut ...

In den meisten unserer Vorlagen bauen wir die Grafiken als Hintergrund-Grafiken (background-image) ein. Das hat den großen Vorteil, daß man über diese Hintergrund-Grafik dann nicht nur Text legen kann, wie z.B. den Homepagenamen oder die Adresse sondern ggflls. noch weitere Grafiken.

Das kann z.B. so ähnlich aussehen, hier als "id-Befehl" mit dem Zeichen # im CSS-Bereich und der Angabe "id="beispielname" im HTML-Bereich.
#beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
oder aber so ähnlich, nämlich
als "class-Befehl" mit dem Punkt-Zeichen im CSS-Bereich und dem Befehl "class="beispielname" im HTML-Bereich.
.beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
Die "class-Angabe" lässt sich gleichzeitig für mehrere Objekte verwenden, die "id-Angabe" nur für ein bestimmtes Objekt innerhalb der Webseite. Das ist eigentlich der wesentliche Unterschied. Ansonsten ist der Quelltext ja nahezu identisch.

Wichtiger für Sie zum Verständnis sind vielmehr die folgenden Parameter:

1. background-image:url (images/beispielgrafik.jpg)
= Name der Grafik, ggflls. vorangestellt der Ordner-Name, hier bei uns "images".

2. background-position:100% 0%
= Ausrichtung der Hintergrund-Grafik in horizontaler Richtung (von links nach rechts) sowie in vertikaler Richtung (von oben nach unten).
Die erste Angabe steht für horizontal, die zweite Angabe für vertikal. Je nachdem an welcher Stelle der Wert steht, gilt: Die Angabe 0% bedeutet links oder oben. Die Angabe 100% bedeutet rechts oder unten. Die Angabe 50% 50% zentriert genau mittig in beiden Richtungen.

In dem vorstehenden Beispiel (100% 0%) ist die Grafik rechts (horizontal) und oben (vertikal) ausgerichtet.

3. background-repeat:repeat
Dies ist der Befehl für die Wiederholung (Kachelung) der Grafik.
Andere Parameter sind:
"no-repeat" = keine Wiederholung der Grafik.
"repeat-x" = Wiederholung der Grafik auf der horizontalen Ebene.
"repeat-y" = Wiederholung der Grafik auf der vertikalen Ebene.

4. background-color:#fff
Generell fügen wir eine Angabe der Hintergrund-Farbe (background-color) immer hinzu, obwohl in vielen Fällen die Angabe der Hintergrund-Grafik (background-image) ausreicht.
Denn immer dann, wenn der Inhalt eines Objektes (z.B. einer Tabellenzelle oder eines div-Bereiches) grösser ist als die Grafik, greift die Hintergrundfarbe zusätzlich.

 

Copyright © 2013 Elektro.- Hard.- und Software - Vertrieb

Zuletzt geändert am: 23. August 2015

Tel: 08443 91123 Konrad Rannertshauser  Am Schlagacker 11,  86579 Waidhofen / Rachelsbach
www.Rannertshauser.com
Best quality products. Please enjoy.