Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Top_Gun" data-source="post: 818534" data-attributes="member: 215889">AW: Website Erneuern. Contet Bereich Erstellen.Na, wartest du schon sehnsüchtig auf den nächsten Schritt? Dann will ich dich mal erlösen <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />Vorweg: Mir ist noch was eingefallen um Traffic zu sparen: Die Flagge, wenn sie lediglich 3 Farben hat und nur 2D ist, machst du nicht in den Maßen X*Y sondern 1px*Y. Also nimm deine fertige Flagge und schneide einen 1px breiten Streifen heraus.Zu aller erst möchte ich an dieser Stelle erwähnen, dass die folgendene Methode vielleicht ein wenig kompliziert, aufwendig oder unschön ist. Aber sie funktioniert, ist valide und bietet die größt mögliche Skalierbarkeit.Allerdings bin ich für Kritik und Verbesserungsvorschläge immer zu haben.So wir haben an dieser Stelle unsere Slices und wissen wie die Seite am Ende aussehen soll. Wie geht es weiter?Der Grundaufbau unserer Seite, abgeleitet von unserem Design, wird mit div-Containern erstellt. Im Grunde gilt: für jeden Textbereich brauchen wir ein div-Container.Wir brauchen also erstmal 4 div-Container für:- header- newsticker- menu- contentZur späteren Unterscheidung bekommen diese div-Container (wie auch alle anderen später) eine individuelle ID.Da wir ja aber wollen, dass zB unser Content-Bereich mit unseren Grafiken ein skalierbares Rechteck darstellen. Über CSS können wir unserem div-Container 1 Hintergrundbild geben und dieses innerhalb des Containers auch positionieren.Jetzt haben wir ja aber mehrere Teile und es soll ja auch skalierbar sein.Stellen wir uns vor ein div-Container wäre ein transparenter Umschlag. Auf die Rückseite kann man eine Farbe malen oder ein Bild kleben. In den Umschlag kann man weitere Dinge hineinstecken.Wir nehmen also unseren Umschlag und kleben das mittlere Slice auf die Rückseite. Da dieses Slice aber nur 1x1px groß ist und unser Kasten viel größer müssen wir das Slice mehrmals auf die Rückseite kleben, zum Glück geht das in CSS automatisch.In unseren Umschlag stecken wir einen weitern Umschlag und auf dessen Rückseite kleben wir an den linken Rand von oben bis unten das Slice mit dem linken Rand. Dieser Rand liegt nun über dem ersten Hintergrund und wird mit Vergrößerung des Kastens automatisch mit größer.Diesen Schritt wiederholen wir für alle Ränder und zum Schluss für die Ecken, schließlich müssen die Ecken ja über den Rändern liegen.In den Umschlag mit der letzten Ecke tun wir nun noch unseren Text, damit dieser aber nicht direkt an unserem Rand anstößt, definieren wir im CSS dafür einen kleinen Abstand.Nun haben wir unsere 9 Umschläge (div-Container) ineinander und unser Contentbereich ist damit fertig, das selbe Prinzip wiederholen wir nun für den Menu-Bereich (auch hier 9 Umschläge) und für den Newsticker (3 Umschläge).Beim Newsticker vergeben wir noch eine feste Höhe und sorgen mit der selben Linienhöhe dafür, dass unser Text immer zentriert bleibt. Damit er links und rechts nicht an den Rahmen anstößt wird auch hier ein Abstand gesetzt, allerdings nur für links und rechts.Wenn man sich die Website jetzt anschauen würde, sähe man, dass sich unsere div-Container alle untereinander anordnen. Dies ist natürlich nicht gewollt und so müssen wir ebenfalls über CSS unseren Container bestimmte Angaben mitgeben um das ganze dorthin zu bekommen wo es hin soll.Wir floaten also unseren Menubereich und lassen ihn links an die Seite fließen. Zu dem müssen wir eine feste Breite definieren (zB 300px). Da wir so viele Umschläge ineinandergesteckt haben ist das float an dieser stelle ein wenig verbuggt und so müssen wir unserem 1. Content-div (dem mit de mittleren Slice) einen äußeren Abstand nach links geben, der genauso breit ist wie unser Menu.Da wir mit float gearbeitet haben, müssen wir noch ein div-Container einfügen um das ganze sauber zu beenden. Dies könnte man direkt in dem div machen, allerdings arbeiten wir auch hier mit CSS.Achja beinahe vergessen: Unserem Header-div geben wir noch eine entsprechende feste Höhe (in meinem Beispiel 200px).Und für den Body definieren wir noch über den Hexwert der untersten Farbe unserer Flagge eine Hintergrundfarbe (bei mir Orange) damit wir auf allen Auflösungen ein schönes Hintergrundbild ohne Löcher haben.HTML-Datei:[code]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;&lt;head&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; /&gt;&lt;title&gt;Seitentitel&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;header&quot;&gt;&nbsp;Header&lt;/div&gt;&lt;div id=&quot;leiste_1&quot;&gt;&nbsp;&lt;div id=&quot;leiste_2&quot;&gt;&nbsp; &lt;div id=&quot;leiste_3&quot;&gt;&nbsp;&nbsp; Newsticker&nbsp; &lt;/div&gt;&nbsp;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;menu_1&quot;&gt;&nbsp;&lt;div id=&quot;menu_2&quot;&gt;&nbsp; &lt;div id=&quot;menu_3&quot;&gt;&nbsp;&nbsp; &lt;div id=&quot;menu_4&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;menu_5&quot;&gt;&nbsp; &nbsp;&nbsp; &lt;div id=&quot;menu_6&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;menu_7&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;menu_8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;menu_9&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Menu&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Menu&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; und&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; mehr&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Menu&lt;br /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&nbsp;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;content_1&quot;&gt;&nbsp;&lt;div id=&quot;content_2&quot;&gt;&nbsp; &lt;div id=&quot;content_3&quot;&gt;&nbsp;&nbsp; &lt;div id=&quot;content_4&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;content_5&quot;&gt;&nbsp; &nbsp;&nbsp; &lt;div id=&quot;content_6&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;content_7&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;content_8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;content_9&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Content&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt;&nbsp;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;clear&quot;&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/code]style.css[code]* {&nbsp; &nbsp; padding:0;&nbsp; &nbsp; margin:0;}body {&nbsp; &nbsp; font-family:Verdana;&nbsp; &nbsp; font-size:0.75em;&nbsp; &nbsp; color:#000000;&nbsp; &nbsp; background-color:orange;&nbsp; &nbsp; background-image: url(hintergrund.png);&nbsp; &nbsp; background-position:top left;&nbsp; &nbsp; background-repeat:repeat-x;}#header {&nbsp; &nbsp; height:200px;}#leiste_1 {&nbsp; &nbsp; background-image: url(leiste_mitte.png);&nbsp; &nbsp; background-position:left;&nbsp; &nbsp; background-repeat:repeat-x;}#leiste_2 {&nbsp; &nbsp; background-image: url(leiste_links.png);&nbsp; &nbsp; background-position:left;&nbsp; &nbsp; background-repeat:no-repeat;}#leiste_3 {&nbsp; &nbsp; background-image: url(leiste_rechts.png);&nbsp; &nbsp; background-position:right;&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; height:70px;&nbsp; &nbsp; line-height:70px;&nbsp; &nbsp; padding:0px 15px;}#menu_1 {&nbsp; &nbsp; background-image: url(menu_mitte.png);&nbsp; &nbsp; width:300px;&nbsp; &nbsp; float:left;}#menu_2 {&nbsp; &nbsp; background-image: url(menu_oben.png);&nbsp; &nbsp; background-position:top;&nbsp; &nbsp; background-repeat:repeat-x;}#menu_3 {&nbsp; &nbsp; background-image: url(menu_rechts.png);&nbsp; &nbsp; background-position:right;&nbsp; &nbsp; background-repeat:repeat-y;}#menu_4 {&nbsp; &nbsp; background-image: url(menu_unten.png);&nbsp; &nbsp; background-position:bottom;&nbsp; &nbsp; background-repeat:repeat-x;}#menu_5 {&nbsp; &nbsp; background-image: url(menu_links.png);&nbsp; &nbsp; background-position:left;&nbsp; &nbsp; background-repeat:repeat-y;}#menu_6 {&nbsp; &nbsp; background-image: url(menu_ecke_links_oben.png);&nbsp; &nbsp; background-position:top left;&nbsp; &nbsp; background-repeat:no-repeat;}#menu_7 {&nbsp; &nbsp; background-image: url(menu_ecke_rechts_oben.png);&nbsp; &nbsp; background-position:top right;&nbsp; &nbsp; background-repeat:no-repeat;}#menu_8 {&nbsp; &nbsp; background-image: url(menu_ecke_rechts_unten.png);&nbsp; &nbsp; background-position:bottom right;&nbsp; &nbsp; background-repeat:no-repeat;}#menu_9 {&nbsp; &nbsp; background-image: url(menu_ecke_links_unten.png);&nbsp; &nbsp; background-position:bottom left;&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; padding:15px;}#content_1 {&nbsp; &nbsp; background-image: url(content_mitte.png);&nbsp; &nbsp; margin-left:300px;}#content_2 {&nbsp; &nbsp; background-image: url(content_oben.png);&nbsp; &nbsp; background-position:top;&nbsp; &nbsp; background-repeat:repeat-x;}#content_3 {&nbsp; &nbsp; background-image: url(content_rechts.png);&nbsp; &nbsp; background-position:right;&nbsp; &nbsp; background-repeat:repeat-y;}#content_4 {&nbsp; &nbsp; background-image: url(content_unten.png);&nbsp; &nbsp; background-position:bottom;&nbsp; &nbsp; background-repeat:repeat-x;}#content_5 {&nbsp; &nbsp; background-image: url(content_links.png);&nbsp; &nbsp; background-position:left;&nbsp; &nbsp; background-repeat:repeat-y;}#content_6 {&nbsp; &nbsp; background-image: url(content_ecke_links_oben.png);&nbsp; &nbsp; background-position:top left;&nbsp; &nbsp; background-repeat:no-repeat;}#content_7 {&nbsp; &nbsp; background-image: url(content_ecke_rechts_oben.png);&nbsp; &nbsp; background-position:top right;&nbsp; &nbsp; background-repeat:no-repeat;}#content_8 {&nbsp; &nbsp; background-image: url(content_ecke_rechts_unten.png);&nbsp; &nbsp; background-position:bottom right;&nbsp; &nbsp; background-repeat:no-repeat;}#content_9 {&nbsp; &nbsp; background-image: url(content_ecke_links_unten.png);&nbsp; &nbsp; background-position:bottom left;&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; padding:15px;}#clear {&nbsp; &nbsp; clear:both;}[/code]Und schauen wir uns das Ergebnis doch mal an:Oh man, das ist ja schon fast ein ganzes Tutorial... ich wollte die Stellen im Code eigentlich noch farblich markieren, aber ich glaube jetzt das verwirrt nur... ich hoffe die Eeklärungen alleine reichen aus... Solltest du Fragen haben oder etwas nicht verstehen, frag...</blockquote>

[QUOTE="Top_Gun, post: 818534, member: 215889"] [b]AW: Website Erneuern. Contet Bereich Erstellen.[/b] Na, wartest du schon sehnsüchtig auf den nächsten Schritt? Dann will ich dich mal erlösen ;) Vorweg: Mir ist noch was eingefallen um Traffic zu sparen: Die Flagge, wenn sie lediglich 3 Farben hat und nur 2D ist, machst du nicht in den Maßen X*Y sondern 1px*Y. Also nimm deine fertige Flagge und schneide einen 1px breiten Streifen heraus. Zu aller erst möchte ich an dieser Stelle erwähnen, dass die folgendene Methode vielleicht ein wenig kompliziert, aufwendig oder unschön ist. Aber sie funktioniert, ist valide und bietet die größt mögliche Skalierbarkeit. Allerdings bin ich für Kritik und Verbesserungsvorschläge immer zu haben. So wir haben an dieser Stelle unsere Slices und wissen wie die Seite am Ende aussehen soll. Wie geht es weiter? Der Grundaufbau unserer Seite, abgeleitet von unserem Design, wird mit div-Containern erstellt. Im Grunde gilt: für jeden Textbereich brauchen wir ein div-Container. Wir brauchen also erstmal 4 div-Container für: - header - newsticker - menu - content Zur späteren Unterscheidung bekommen diese div-Container (wie auch alle anderen später) eine individuelle ID. Da wir ja aber wollen, dass zB unser Content-Bereich mit unseren Grafiken ein skalierbares Rechteck darstellen. Über CSS können wir unserem div-Container 1 Hintergrundbild geben und dieses innerhalb des Containers auch positionieren. Jetzt haben wir ja aber mehrere Teile und es soll ja auch skalierbar sein. Stellen wir uns vor ein div-Container wäre ein transparenter Umschlag. Auf die Rückseite kann man eine Farbe malen oder ein Bild kleben. In den Umschlag kann man weitere Dinge hineinstecken. Wir nehmen also unseren Umschlag und kleben das mittlere Slice auf die Rückseite. Da dieses Slice aber nur 1x1px groß ist und unser Kasten viel größer müssen wir das Slice mehrmals auf die Rückseite kleben, zum Glück geht das in CSS automatisch. In unseren Umschlag stecken wir einen weitern Umschlag und auf dessen Rückseite kleben wir an den linken Rand von oben bis unten das Slice mit dem linken Rand. Dieser Rand liegt nun über dem ersten Hintergrund und wird mit Vergrößerung des Kastens automatisch mit größer. Diesen Schritt wiederholen wir für alle Ränder und zum Schluss für die Ecken, schließlich müssen die Ecken ja über den Rändern liegen. In den Umschlag mit der letzten Ecke tun wir nun noch unseren Text, damit dieser aber nicht direkt an unserem Rand anstößt, definieren wir im CSS dafür einen kleinen Abstand. Nun haben wir unsere 9 Umschläge (div-Container) ineinander und unser Contentbereich ist damit fertig, das selbe Prinzip wiederholen wir nun für den Menu-Bereich (auch hier 9 Umschläge) und für den Newsticker (3 Umschläge). Beim Newsticker vergeben wir noch eine feste Höhe und sorgen mit der selben Linienhöhe dafür, dass unser Text immer zentriert bleibt. Damit er links und rechts nicht an den Rahmen anstößt wird auch hier ein Abstand gesetzt, allerdings nur für links und rechts. Wenn man sich die Website jetzt anschauen würde, sähe man, dass sich unsere div-Container alle untereinander anordnen. Dies ist natürlich nicht gewollt und so müssen wir ebenfalls über CSS unseren Container bestimmte Angaben mitgeben um das ganze dorthin zu bekommen wo es hin soll. Wir floaten also unseren Menubereich und lassen ihn links an die Seite fließen. Zu dem müssen wir eine feste Breite definieren (zB 300px). Da wir so viele Umschläge ineinandergesteckt haben ist das float an dieser stelle ein wenig verbuggt und so müssen wir unserem 1. Content-div (dem mit de mittleren Slice) einen äußeren Abstand nach links geben, der genauso breit ist wie unser Menu. Da wir mit float gearbeitet haben, müssen wir noch ein div-Container einfügen um das ganze sauber zu beenden. Dies könnte man direkt in dem div machen, allerdings arbeiten wir auch hier mit CSS. Achja beinahe vergessen: Unserem Header-div geben wir noch eine entsprechende feste Höhe (in meinem Beispiel 200px). Und für den Body definieren wir noch über den Hexwert der untersten Farbe unserer Flagge eine Hintergrundfarbe (bei mir Orange) damit wir auf allen Auflösungen ein schönes Hintergrundbild ohne Löcher haben. HTML-Datei:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Seitentitel</title> </head> <body> <div id="header"> Header </div> <div id="leiste_1"> <div id="leiste_2"> <div id="leiste_3"> Newsticker </div> </div> </div> <div id="menu_1"> <div id="menu_2"> <div id="menu_3"> <div id="menu_4"> <div id="menu_5"> <div id="menu_6"> <div id="menu_7"> <div id="menu_8"> <div id="menu_9"> Menu Menu und mehr Menu </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="content_1"> <div id="content_2"> <div id="content_3"> <div id="content_4"> <div id="content_5"> <div id="content_6"> <div id="content_7"> <div id="content_8"> <div id="content_9"> Content </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="clear"> </div> </body> </html>[/code]style.css[code]* { padding:0; margin:0; } body { font-family:Verdana; font-size:0.75em; color:#000000; background-color:orange; background-image: url(hintergrund.png); background-position:top left; background-repeat:repeat-x; } #header { height:200px; } #leiste_1 { background-image: url(leiste_mitte.png); background-position:left; background-repeat:repeat-x; } #leiste_2 { background-image: url(leiste_links.png); background-position:left; background-repeat:no-repeat; } #leiste_3 { background-image: url(leiste_rechts.png); background-position:right; background-repeat:no-repeat; height:70px; line-height:70px; padding:0px 15px; } #menu_1 { background-image: url(menu_mitte.png); width:300px; float:left; } #menu_2 { background-image: url(menu_oben.png); background-position:top; background-repeat:repeat-x; } #menu_3 { background-image: url(menu_rechts.png); background-position:right; background-repeat:repeat-y; } #menu_4 { background-image: url(menu_unten.png); background-position:bottom; background-repeat:repeat-x; } #menu_5 { background-image: url(menu_links.png); background-position:left; background-repeat:repeat-y; } #menu_6 { background-image: url(menu_ecke_links_oben.png); background-position:top left; background-repeat:no-repeat; } #menu_7 { background-image: url(menu_ecke_rechts_oben.png); background-position:top right; background-repeat:no-repeat; } #menu_8 { background-image: url(menu_ecke_rechts_unten.png); background-position:bottom right; background-repeat:no-repeat; } #menu_9 { background-image: url(menu_ecke_links_unten.png); background-position:bottom left; background-repeat:no-repeat; padding:15px; } #content_1 { background-image: url(content_mitte.png); margin-left:300px; } #content_2 { background-image: url(content_oben.png); background-position:top; background-repeat:repeat-x; } #content_3 { background-image: url(content_rechts.png); background-position:right; background-repeat:repeat-y; } #content_4 { background-image: url(content_unten.png); background-position:bottom; background-repeat:repeat-x; } #content_5 { background-image: url(content_links.png); background-position:left; background-repeat:repeat-y; } #content_6 { background-image: url(content_ecke_links_oben.png); background-position:top left; background-repeat:no-repeat; } #content_7 { background-image: url(content_ecke_rechts_oben.png); background-position:top right; background-repeat:no-repeat; } #content_8 { background-image: url(content_ecke_rechts_unten.png); background-position:bottom right; background-repeat:no-repeat; } #content_9 { background-image: url(content_ecke_links_unten.png); background-position:bottom left; background-repeat:no-repeat; padding:15px; } #clear { clear:both; }[/code]Und schauen wir uns das Ergebnis doch mal an: Oh man, das ist ja schon fast ein ganzes Tutorial... ich wollte die Stellen im Code eigentlich noch farblich markieren, aber ich glaube jetzt das verwirrt nur... ich hoffe die Eeklärungen alleine reichen aus... Solltest du Fragen haben oder etwas nicht verstehen, frag... [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?