Frage zu HTML

[Krissi]

Ich habe die erste und zweite weisse Fläche noch unterteilt in oben mitte und unten, weil ich dachte das wär nötig wenn man da was reinschreibt. Wenn ich jetzt da irgendwie was einfüge was ich da haben will, kann ich das so machen das sich das beim scrollen vor dem pic verschiebt, also das sich das bild selber nicht verändert sondern nur der text davor hoch und runter gescrollt wird?.

[acid]

Unterteilen muss man das nicht zwangsweise nochmal

Das geht beispielsweise, indem man einfach einen div-Container definiert und diesen per CSS dazu bringt, 300 Pixel hoch zu bleiben und Scrollbalken anzuzeigen

Code: Alles auswählen

.inhalt_fenster_weiss {
  width: 400px;
  height: 300px;
  overflow: overflow-y: visible;
}


Im gewünschten Element:
Text mit scrollable area

[Krissi]

Ich hab das jetzt mal so übernommen und meine sachen angepasst... jetzt hab ich aber nur nen weißen Hintergrund mit den Unterteilungen... Ich weiß glaub ich woran es liegt... er hat ja die Bilder da unten nicht in der Tabelle... aber für mich sah das ja mal so aus als würde er sich das selber nehmen wegen id="...

Ich muss da unten wo z.B. Inhalt Links aussen steht auch die Bilder reinhauen oder? Weil wenn ich das mache dann erkennt er irgendwie nicht den Befehl "background"... er fügt das bild als bild ein und oben über dem bild steht background, da muss irgendwas nicht ganz koscher sein mit dem text oooder ich mach was falsch, was ich eher glaube .

Bei "Inhalt links aussen" z.B.:

Code: Alles auswählen

 
   
     
      Inhalt links aussen 
     
     
      Inhalt Textfeld links 
     
     
      Inhalt Feld Mitte 
     
     
      Inhalt Textfeld rechts
     
     
      Inhalt rechts aussen
     
   
 
 

[acid]

Hast du das Zeug in den Kopfbereich deiner Datei eingefügt und deine Bildpfade angepasst?

[Krissi]

Also die Bildpfade hab ich oben z.B. bei #Inhalt links aussen eingefügt/angepasst.

das style zeug? öhm... was muss da genau rein?

so sieht das bei mir oben aus

Code: Alles auswählen

 
INHALT Kopf 
 
#links_aussen { background-image: url:(); } 
#links_textfeld { background-image: url:(); } 
#mitte { background-image: url:(); } 
#rechts_textfeld { background-image: url:(); } 
#rechts_aussen { background-image: url:); } 
 
 

nur das in den (...) punkten hinter file:/// die pfade meiner pics stehen. klammern mein bildpfad drin is.

[acid]

Nein! Du musste es einfach GENAUSO kopieren wie ichs am Anfang geschrieben hab. Ohne

Du brauchst nurnoch deine Bildteile so zu benennen wie ich es gemacht hab und den Quellcode eins zu eins zu kopieren.

Das oben im Head ist kein HTML sondern CSS. Das geht anders als HTML... Darum geht es nicht

[Krissi]

Ich muss also ein neues CSS dokument machen... Da kann ich aber garnich checken wie es später im iexplorer aussieht.

[acid]

Nee warum denn? Pass auf:
Kopier den Quellcode von Seite eins doch einfach Stück für Stück in deinen Browser.

Die Zeilen zwischen style und /style kopierst du zwischen head und /head.

Den Tabellenbereich kopierst du zwischen body und /body.

Ist doch ganz einfach!

[acid]

Hier ein einfaches Beispiel. Basier auf einem echten Projekt (Meiner eigenen Webseite). Da ist die Ordnerstruktur folgendermassen:

/ = Wurzelverzeichnis
/img = Bildverzeichnis

Soo... Mehr Pfade brauchen wir nicht. Wir brauchen nur /, weil da die HTML-Dateien liegen und /img weil in diesem Ordner die Bilder liegen. So, jetzt sehen wir uns mal einen Auszug von Weblogixx Design an:

Teil des Dateikörpers von Weblogixx Design

Code: Alles auswählen

... .... ... 


  Inhalte

... ... ...

Teil der CSS-Definitionen für Weblogixx Design

Code: Alles auswählen

#picture { height: 190px; background-image: url(../img/picture_image.jpg); background-repeat: no-repeat; }
#contents { background-image: url(../img/contents_image.jpg); }

Wie man an der CSS-Datei sieht werden hier 2 div-Elemente mit den IDs #picture und #contents definiert.

Da #picture nichts weiter macht als ein Bild darstellen erhält es genau die Bildhöhe als Argument (height: 190px;) sowie den Pfad des Bildes als Hintergrundbild (background-image: url(../img/picture_image.jpg); ) Da es sein kann, das eventuell andere alte Browser das Div grösser machen wird noch das Attribut background-repeat: no-repeat; gesetzt. Damit wird verhindert, dass sich das Hintergrundbild wiederholt.

So, gehen wir weiter zu #contents. Hier definieren wir ein div-Element unbekannter Höhe. Ist ja auch klar, die Texte der Seite ändern sich ja. Darum kann man auch keine 800 Pixel grosse Grafik einbauen und damit happy sein. Denn wenn der Text grösser wird als 800 Pixel hätten wir nurnoch einen grauen Hintergrund. Darum wird der Hintergrund (der übrigens 10 Pixel hoch ist) einfach bis zum Ende des divs wiederholt.

Du musst es nur ähnlich machen, also deine IDs mit background-image definieren und die Bilder genauso reinladen. Dann wird das schon

[Krissi]

Was genau meinst du jetzt genau mit "browser"?
Bei Dreamweaver in das Code-Fenster?

Ich erstell doch einfach nen ordner... z.B. "bla" als Wurzelverzeichnis wo die html dateien drin sind und da erstell ich dann den image ordner /img.

Du hast doch in deinem beispiel auf seite 1 beides stehen... umfasst die bilder pfade und nochmal den .

sorry, ich stehe gerade aufm schlauch.

[acid]

Browser... Naja, da hab ich mich verschrieben. Sorry... Genau, ich meine bei Dreamweaver das Codefenster...

Genau, so machst du das. Es geht ja nur darum das du den Bildpfad mit HTML machen wolltest. In HTML geht das ja mit

Code: Alles auswählen

Wenn du das als Hintergrundbild willst machst du das nicht per HTML sondern per CSS. CSS ist eine ergänzende Sprache zu HTML, mit der du HTML-Tags (also sozusagen Befehle) direkt ändern kannst. Definieren tust du das Hintergrundbild nicht wie bei HTML sondern so:

Code: Alles auswählen

/* 
  Das ist ein CSS Kommentar. 
  Der Kann über mehrere Zeilen gehen, bis man 
  den Kommentar wieder schliesst.
*/

/*
  Das ist eine CSS Definition. Sie fängt an mit einem Namen.
  Die einzelnen Attribute stehen innerhalb geschweifter
  Klammern ( { } ). Diese bilden Anfang und Schluss eines
  CSS-Statements. 
*/
#dasisteinhintergrundbild {
  background-image: url(/img/bild.jpg);
}

/*
  Ende der CSS-Statements
  Die CSS-Anweisungen (alles zwischen 
  und  stehen im Kopfbereich des HTML-Dokuments
*/

Im HTML-Code weisst du dann nurnoch ein Element zu, dass wie gewünscht formatiert werden soll. Also schreibst du an der Stelle, an der du als Hintergrundbild die Datei bild.jpg benutzen möchtest beispielsweise

Code: Alles auswählen

  Da kannst du lustigen Text reinschreiben.
  Und du hast sogar ein Hintergrundbild!
  Ist HTML und CSS nicht einfach Klasse!

Verstehst du das Prinzip?

[Krissi]

ja, ich verstehe das prinzip und ich glaube ich bin ihm sogar nun auf die schliche gekommen... das Problem waren die doppelpunkte hinter url:

hast du vielleicht icq oder msn?
irc mag ich irgendwie nich so.

Code: Alles auswählen

  
 
#links_aussen { background-image: url(images/1.jpg); } 
#links_textfeld { background-image: url(images/2.jpg); } 
#mitte { background-image: url(images/3.jpg); } 
#rechts_textfeld { background-image: url(images/4.jpg); } 
#rechts_aussen { background-image: url(images/5.jpg); } 
 
Funk-Graphics: Krissi