Step 05 - "Endless" Design
Wenn du dich jetzt fragst, was ich mit Endless Design meine, werde ich es hier kurz erklären:
Bis jetzt habt ihr ja nur ein Design, mit einem Kasten als Navi- und Contentfenster. Beide haben auch einen Scrollbalken rechts.
Aber man kann es auch so coden, dass man es endlos hat. Dann hat man nur einen Scrollbalken rechts. das Design wird dann immer nach unten verlängert, wie lang halt der Content/die Navi ist.
Der Endless-Design Grundcode
Diesen "Grundcode" könnt ihr genauso benutzen, wie den "normalen" Grundcode. Also, wenn ihr ein Endless Design coden wollt, verwendet dieses Code und codet es ganz normal. Lies dir dazu die Anleitung bei Designs coden --> "Grundeinstellungen" durch.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>%titel%</title>
<style type="text/css">
<!--
body {
background-color: #ffffff;
margin: 0;
font-family: Arial;
font-size: 12px;
color :#000000;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {
color: #0000ff;
text-decoration:none;
}
a:active {
color: #ffffff;
text-decoration:none;
}
a:hover {
color: #000000;
text-decoration:none;
}
div.content
overflow: visible;
position: absolute;
width: 630px;
height: 220px;
left: 330px;
top: 260px;
}
div.navigation {
overflow: visible;
position: absolute;
width: 185px;
height: 220px;
left: 40px;
top: 260px;
}
-->
</style>
</head>
<body>
<!-- Start Design -->
<img border="0" src="Design_Adresse.jpg" scroll="no" bgproperties="fixed"
align ="left" style ="position: absolute; top: 0; left: 0">
<!-- End Design -->
<!-- Start Content -->
<div class="content">
%content%
</div>
<!-- End Content -->
<!-- Start Navigation -->
<div class="navigation">
%navigation_v%
</div>
<!-- End Navigation -->
</body>
<!--
Dies ist der Grundcode von http://www.oylahomepagehilfe.de.
Dieser Hinweis darf ohne Genehmigung von einem Betreiber des Internetabgebotes nicht entfernt werden.
-->
</html>
Erklärung freiwillig zum Verständnis
Jetzt versuche ich euch nochmal zu erklären, warum und wieso der Code jetzt so aussieht. Notwendig fürs Coden ist es nicht. Aber wenn ihr lernen wollt, solltet ihr ihn verstehen ;)
Also für alle nochmal: Der folgende Teil dient nur zur Verständnis.
1) overflow: visible
Wir nehmen mal an, ihr baut euch euren eigenen Endless Grundcode zusammen. Dazu fügt ihr den "normalen" Grundcode von der Oylahomepagehilfe in den Editor ein. (Start --> Programme --> Zubehör --> Editor).
Ihr seht im CSS Teil (ganz oben, er fängt bei <style> an) die zwei Namen "div.content" und "div.navigation".
Dort steht direkt unter den beiden Namen jeweils "overflow: auto"
Das Wort " auto" müsst ihr löschen, und stattdessen "visible" hinschreiben. Das macht ihr bei beiden Namen (bei "div.content" und "div.navigation").
Wenn ihr "auto" eingestellt lasst, ensteht ja immer ein automatischer Scrollbalken, wenn euer Text länger wird. Und da "visible" Englisch ist und übersetzt "sichtbar" heißt, wird der Div so lange erweitert, bis der gesamte Text zu sehen ist - ohne Scrollbalken im Div.
Es entseht dann nur EIN Scrollbalken, der am äußersten rechten Rand des Browser-Fensters ist.
2) Der letzte Streifen des Designs als Hintergrund
Da ihr ja wollt, dass euer Design bis ins unendliche weiter nach unten geht, braucht ihr so etwas wie ein Verlängerungs-Stück. Ihr braucht jetzt dazu erst einmal ein passendes Design. Es darf kein Kasten drauf zu sehen sein.
NICHT so wie hier:
Es muss auch so aufgebaut sein, dass es weiter nach unten gehen kann, wie zB hier:
Wenn ihr so ein Design habrt, müsst ihr den letzten Streifen des Designs abschneiden. Dieser Streifen wiederholt sich dann ständig.
Bei dem Beispiel würde der letzte Streifen so aussehen:
Die Höhe ist egal. Aber ihr dürft and er Breite nichts ändern! Nur das letzte Stück abschneiden.
Nun müsst ihr diesen Streifen irgendwo hochladen. zB bei euch in Oyla.
Nachdem ihr den letzten Streifen hochgeladen habt, kümmern wir uns erst einmal um den Code für den Streifen: Jetzt betrachten wir diesen CSS Teil:
body {
background-color: #ffffff;
margin: 0;
font-family: Arial;
font-size: 12px;
color :#000000;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
}
Jetzt fügt ihr folgende Teile hinzu:
background-image: url(http://adresse.de/LetzterStreifen.jpg);
background-repeat: repeat-y;
Das würde so aussehen:
body {
background-color: #ffffff;
margin: 0;
font-family: Arial;
font-size: 12px;
color :#000000;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;
background-image: url(http://adresse.de/LetzterStreifen.jpg);
background-repeat: repeat-y;
}
Vergesst nicht, die richtige Adresse eures letzten Streifens anzugeben! Ersetzt einfach "http://adresse.de/LetzterStreifen.jpg".
Ganz wichtig ist hierbei, dass die Größen des Designs und des letzten Streifens nicht verschieden sind, sonst könnte das alles nicht passen, und verrutscht!
Also.. wenn ihr zB ein Design erstellt habt, mit der Größe 1024 x 768 Pixel, dann müsstet ihr den Streifen auch in der selben Größe haben! Am besten, ihr schneidet ein kleines Stück von ganz unten einfach ab, dann kann nichts schief gehen.
Sonst könnte alles verrutschen, wie hier zB:
Na ja, wenn ihr das beachtet habt, und meinen Schritten auch gefolgt seid, dann müsstet ihr jetzt euer Endless Design haben :)
