Website Erneuern. Contet Bereich Erstellen.

MarcelE · 06.01.2009

Hallo Freunde,
ich Wünsche Euch erst einmal ein Frohes Neues Jahr.

Gestern hatte ich mal wieder Langeweile, daher Dachte ich, das Meine Homepage mal einen new-Look Vertragen könnte.
Also Schritt ich zur Tat.
Es hat sich einiges Gelegt, bin etwas Reifer geworden und möchte mich auch für meinen Früheren Beiträgen Entschuldige, falls ich jemanden Angegriffen hatte.

Nun zu meiner Frage(n) ?:

Ich möchte gerne den Header & den Content Bereich als Background,damit man darein Schreiben kann.
Jedoch habe ich dies schon mehrmals Versucht. Ohne Erfolg.

Wie bin ich Vorgegangen:

Im PS CS 3 ein Design Vorgefertigt. Gesliced und auf Datei>Speichern für Web...>Speichern & Pfad Ausgewählt>Name: index.html >>Dateityp: HTML & Bilder<<.

Nun kam unter meinem Angegebenen Pfad eine HTML-Datei und ein Ordner: Bilder.
Gut, soweit bin ich schon einmal Gekommen.
Gut, also Dreamweaver CS 3 Geöffnet und die Html-Datei Geladen.
Erst einmal alles in "Center" Gesetzt. Da ich mit einer Normalen Bildschirm-Auflösung Gedesigned habe. (800*600?).

Nur wie bekomme ich das nun hin, damit ich den Header & Content BEreich Beschreiben kann, Sprich: Die zwei Bilderchen in Background.

Hier mein Code:

Code:

<html>
<head>
<title>My Website - With New Look</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="801" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
<tr>
        <td colspan="8">
            <img src="Bilder/index_01.jpg" width="800" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="Bilder/index_02.jpg" width="800" height="179" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="179" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/index_03.jpg" width="222" height="39" alt=""></td>
        <td>
            <img src="Bilder/index_04.jpg" width="3" height="39" alt=""></td>
        <td>
            <img src="Bilder/index_05.jpg" width="25" height="39" alt=""></td>
        <td colspan="4">
            <img src="Bilder/index_06.jpg" width="550" height="39" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="39" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_07.jpg" width="201" height="14" alt=""></td>
        <td colspan="7" rowspan="2">
            <img src="Bilder/index_08.jpg" width="599" height="21" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="Bilder/index_09.jpg" width="201" height="55" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="7" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="8">
            <img src="Bilder/index_10.jpg" width="49" height="357" alt=""></td>
        <td colspan="4">
            <img src="Bilder/index_11.jpg" width="550" height="33" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="33" alt=""></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="Bilder/index_12.jpg" width="33" height="324" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/index_13.jpg" width="457" height="296" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/index_14.jpg" width="30" height="296" alt=""></td>
        <td rowspan="7">
            <img src="Bilder/index_15.jpg" width="30" height="324" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="15" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_16.jpg" width="201" height="59" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="59" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_17.jpg" width="201" height="52" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="52" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_18.jpg" width="201" height="56" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_19.jpg" width="201" height="60" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="Bilder/index_20.jpg" width="201" height="85" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="54" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/index_21.gif" width="487" height="28" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="Bilder/index_22.jpg" width="599" height="3" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="201" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="3" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="457" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="30" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="30" height="1" alt=""></td>
        <td></td>
    </tr>
</table>

</body>
</html>

Der Header ist Bild: index_02.jpg
Content Bild: index_13.jpg

Liebe Grüße
Marcel E.

P.S.: Wurdet Ihr gut Beschenkt ?

cebito · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

uaaaaahhhhhh, grauseligstes Tabellendesign, aber davon mal abgesehen:

Code:

<td colspan="8" background="Bilder/index_02.jpg" width="800" height="179">text</td>

MarcelE · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Grüß Dich Bruder ,

Dankeschön dafür. Ja leider ist das mit so einer Tabellen-Chaos.
Dies wurde jedoch von Photoshop Erstellt. Vielleicht Überkommt es mich ja mal wieder,wenn alles Fertig ist und ich es Erneut Versuche. ;-)

Freundliche Grüße

Marcel E.

Top_Gun · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

MarcelE schrieb:
Vielleicht Überkommt es mich ja mal wieder,wenn alles Fertig ist und ich es Erneut Versuche.

An deiner Stelle würde ich es gleich "richtig" machen...

cebito · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Top_Gun schrieb:
An deiner Stelle würde ich es gleich "richtig" machen...

:'(

@ MarcelE - Keine Ahnung mit was für Leuten du dich sonst umgibst oder wie auch immer aber lass das "Bruder" beim nächsten Mal lieber weg!

MarcelE · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Hallo Top-Gun.

Jedoch stellt sich bei mir dann gleich die Frage, wie ich dies alles Anstellen sollte.
Habe es eben schon einmal Versucht die Bilder so Einzufügen, manchmal Funktioniert es, und manchmal auch nicht.

Daher mal eine Konter-Frage, wie Würdest Du es tun ?
Am Simplesten Weg, ohne Umwege. Seitdenn diese Umwege sind einfacher.

Ich Sagte das eben gerade, da es ja auch im Leben die Moral ist:

Der leichte Weg, so Scheint es. Ist der Richtige.
Jedoch ist dies nicht ganz Richtig, denn kommt man auf dem Leichten Weg schneller zurück ?

Nein ! ;-)

MfG
Marcel E.

Edit: Da Du damit Angefangen hast, mit welchen Personen-Umfeld ich mich Abgebe.
Um ehrlich zu sein ist meine Sozialität ehr sehr Beschaubar. Aus Privaten Gründen her.
Gelöscht (!).

Top_Gun · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Ich würde meine Slices selber machen und dann die Seite mit div-Containern aufbauen...

Zeig doch mal dein Design und paar erklärende Worte dazu, dann könnte man dir Vorschläge machen wie du es ohne Tabelle hinbekommst...

cebito · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

MarcelE schrieb:
Edit: Da Du damit Angefangen hast, mit welchen Personen-Umfeld ich mich Abgebe.
Um ehrlich zu sein ist meine Sozialität ehr sehr Beschaubar. Aus Privaten Gründen her.
(Angstzustände & Depressionen....)

So genau wollte ich es nicht wissen, wollte damit nur zum Ausdruck bringen, daß ich nicht so angesprochen werden möchte.

Damit zurück zum Thema

MarcelE schrieb:
Daher mal eine Konter-Frage, wie Würdest Du es tun ?
Am Simplesten Weg, ohne Umwege. Seitdenn diese Umwege sind einfacher.

Mit XHTML und CSS sicherlich, aber das erste würde wohl sein mal das Gesamtdesign als Bild hier reinzustellen, dann könnte man dir schonmal sagen, wieviele Slices du eigentlich garnicht brauchst.

MarcelE · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Kein Thema, Entschuldige. Jedoch ist mein Charakter so Erschaffen worden, sodass ich alles Erklären möchte.
Werde es mir Merken.

Hier einmal ein Bildchen:

Hier das Design zum Download:
- Auf meinem Webserver.

Erklärung bzw. Bedeutung des Design:
Da ich Liberal bin, Dachte ich mir eine Reggae Fahne als Hintergrund.
Daher auch die Farben: Grün,Gelb und Rot.

Top_Gun · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Mit Erklärung meinte ich eigentlich wo was hin soll und wo Scrollbalken sein dürfen bzw welche Bereiche größer werden sollen wenn der Content das erfordert...

Spontan zähle ich 21 Slices und die Fahne als Hintergrundbild...

MarcelE · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Der Content Bereich wird sich Vergrößern.
Siehe meine Jetzige Homepage.
Die Balken bzw. der Balken sollte Nur Rechts sein, um die HP Runter-zu-Scrollen.

Hier ein Bild mit Erklärung:

Mit dem Hintergrund muss ich dich Enttäuschen, dieser ist auch im Photoshop Erstellt worden. Und somit ein Teil der ganzen Silces.

Und zum Thema größer werden, die HP sollte auch zum Schluss, wenn alles Fertig ist nach etwas Aussehen, lieber Arbeite ich ein paar Wochen daran, anstatt zwei,drei Tage und sie Sieht nach gar nichts aus.

Daher würde ich mal Schreiben, gebe mir Tipps, so wie Du es Aussehen lassen würdest.

Top_Gun · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

MarcelE schrieb:
Mit dem Hintergrund muss ich dich Enttäuschen, dieser ist auch im Photoshop Erstellt worden. Und somit ein Teil der ganzen Silces.

Ähm, ja und nein...

PS ist ein Grafikprogramm und nicht dazu da um Webseiten zudesignen. Du machst also lediglich einzelne Grafiken damit.
Auf dem Bild sind insgesamt 4 Grafiken zu erkennen:
1. der Hintergrund (nur die dreifarbige Flagge)
2. die Newstickerleiste
3. der Menükasten
4. der Contentkasten

Diese einzelnen Grafiken, musst du auseinanderschneiden (slicen).
Danach wird via (X)HTML und CSS das ganze zu einer kompletten Website zusammengebaut und sieht hinterher so aus wie auf deinem Bild.

Du musst also die Kästen, die Leiste (alles mit transparentem Hintergrund) und die Flagge wohl oder über nochmal neu erstellen.

Danach schneidest du die 21 Slices zu recht:
Die Leiste - 3 Teile:
1. Linker Rand (Höhe und Breite so groß wie nötig aber nicht größer)
2. Mitte (Höhe so groß wie nötig aber nicht größer, Breite 1px)
3. Rechter Rand (Höhe und Breite so groß wie nötig aber nicht größer)

Bei den Kästen sind es jeweils 9 Teile:
4x Ecken (Höhe und Breite so groß wie nötig aber nicht größer)
4x Ränder (Höhe bzw Breite so groß wie nötig aber nicht größer, Breite bzw Höhe 1px)
1x Mitte (Höhe und Breite 1px)

Und natürlich die Flagge...

Danach zeig ich dir wie wir das zusammenbasteln.

MarcelE · 06.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

WoW.

Das Nenne ich einmal Hilfe-Leisten. Okay, ich werde es Versuchen so zu Meistern, jedoch würde ich Dir gerne Vorschlagen ob Du mir nicht Via Tool über die Schulter bzw. Auf dem Monitor Zu Schauen möchtest. Und falls ich etwas Verkehrt tuhe, mich gleich Korrigieren tust.

Ich warte nun, nur noch auf Deine Antwort.
Gleich nach dem Lesen werde ich mit der Arbeit Beginnen.

Ganz liebe Grüße
Marcel E.

Top_Gun · 07.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Nun beim Grafiken erstellen, werde ich keine große Hilfe sein... Das was du uns hier gezeigt hast, passt doch (wenn du damit zu frieden bist). Ich nehme an du hast es selbst erstellt (?) also wirst du das selbe (die Flagge ohne die Kästen und die Kästen auf transparentem Hintergrund) doch nochmal hinbekommen.

Beim Slicen zugucken... ähm das wäre schon was anderes... aber solange du die originalen Grafiken im Stück als Backup behälst ist das auch nicht nötig. Du siehst wenn du die Slices zu klein machst und ich kann dir sagen wann sie zu groß sind.
Grundsätzlich gilt halt:
Du hast beim Rand zB einen Farbverlauf von Schwarz (Rand) zu Weiß (Contentbereich). Dein Slice reicht also von dem Schwarz bis einschließlich des ersten weißen Pixels des Contentbreiches.

Wie gesagt du siehst es wenn es zu wenig sind und wenn es zu viel ist, kann man noch mehr abschneiden.

Ich werd jetzt erstmal ins Bett gehen und wünsche dir, wenn du heute noch weiter machst erstmal gutes gelingen

tiroler · 07.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Hi Marcel-
schau dir mal den Inhalt meines Links GENAUESTENS an-
mit dieser Hilfestellung kannst du deinen Erfolg fast schon sehen-!
Ist simpel aufgebaut- und genau die Basis, welche du bzw. manch andere auch noch benötigen.
schön durchlesen und mitmachen

MarcelE · 07.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Hallo Ihr Beiden (!).

Dankeschön, ich bekomme es schon irgendwie Hin. Die Nacht ist Jung & Probieren geht über Studieren. Sicherlich Schaue ich mir Deinen Link an, Tiroler.

Bis Dahin, Bedanke ich mich hier schon einmal.
Wünsche ich Dir auch Top_Gun.

MfG
Marcel E.

Edit: Habe nun einen Weg Via Google Gefunden, wie ich mir das Erleichtern konnte. Bin gleich Fertig. ;-) - Google ist mein bester Freund. Für die Jenigen die Faul sind zu Suchen. Hier eine klasse Website, Unmengen an selben Fragen, man braucht nicht zu Suchen. Gib Dein Problem Oben ein und all die Lieben Menschen werden sich nur um Dich Kümmern:

2. Edit: @ Top_Gun: Habe alles Fertiggestellt, nur die Flagge ist noch nicht Gesliced. Warte auf Deine Antwort.

Top_Gun · 07.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

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<br />
         Menu<br />
         und<br />
         mehr<br />
         Menu<br />
        </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>

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;
}

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...

MarcelE · 07.01.2009

Begeisterung.

Hallo Top_Gun,
Deine Arbeit Finde ich Klasse (!).

Hat alles Wunderbar Funktioniert, wenn ich jemals irgendwas für Dich tun kann, so Teile es mir bitte mit. Ich Stehe in Deiner Schuld.

Wenn man mal öfters solche Menschen mit Sympathie Beschenkt, Sehen würde. Wären viele Foren ein Klassiker.

Ich Melde mich noch einmal per PM.

Ganz liebe Grüße
Marcel E.

Top_Gun · 07.01.2009

AW: Website Erneuern. Contet Bereich Erstellen.

Danke für die Blumen.
Aber wenn du mal meine anderen Beiträge anschaust wirst du sehen, dass ich auch anders kann und manchmal einen ähm rabiaten Ton an den Tag lege und meine Hilfe verweigere.
Es kommt halt mit darauf an wie jemand fragt und sich selbst zeigt. Jemanden der Eigeninitiative beweißt und mitdenkt helfe ich lieber.

Ich freue mich aber wenn ich dir helfen konnte und dass du mir der Romananleitung zu deinem Ziel kommst