1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

sliencen

  • haillo
  • 12. Juni 2008 um 14:33
  • haillo
    Samurai
    Beiträge
    172
    • 12. Juni 2008 um 14:33
    • #1

    Ich habe ein Bild/grafik gesliencet (in 3 Teile)und möchte sie nun als Hintergrund einbauen, aber nur der mitlere Teil soll so oft wiederholt werden, wie die Seite lang wird wie muss ich das machen??
    Mfg Benne

    http://www.haillo-hosting.de/index.htm

  • driver
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 12. Juni 2008 um 15:03
    • #2

    im css evlt -> background-repeat:repeat;

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 12. Juni 2008 um 15:37
    • #3

    Nimm für die drei Bildteile auch drei unterschiedliche Div's und binde die Grafiken als Hintergrundgrafik ein.

    Keine Wiederholung: background-repeat: no-repeat
    Wiederholung: siehe driver

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • haillo
    Samurai
    Beiträge
    172
    • 12. Juni 2008 um 16:07
    • #4

    Ich muss noch dazu sagen das ich das ganze mit einer ausgelagerten Css Datei gemacht habe!!
    Jetzt versteh ich nicht ganz wenn ich die drei Bildteile jetzt in drei DIVs reinpacke, wie ich sie dann als Hintergrund verwenden kann(das gesliencete Bild soll auch schon als Hintergrund eines DIVs verwendet werden!!). Weil wenn ich ein ganz normales Hintergrundbild einfügen wollte würde ich das ja über die css Datei machen!!
    Mfg Benne

    http://www.haillo-hosting.de/index.htm

  • yeti66
    König(in)
    Beiträge
    1.152
    • 12. Juni 2008 um 23:55
    • #5

    haillo,
    wenn Du schon mit Containern und Css gearbeitet hast, wirst Du wissen, das man diese als Layer übereinander anordnen kann. Das erreicht man entweder über die Reihenfolge der Layer im HTML-Dokument und der Positionierung der Layer oder mit der Verwendung des Attributes z-index.
    siehe: http://www.aboutwebdesign.de/awd/content/976715560.shtml
    oder besser: http://de.selfhtml.org/css/eigenschaften/positionierung.htm

    Gruß yeti66 :wink:
    ___________________________________________
    :info:http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de/ Freiberuflicher Musiker für individuelle Musikdienstleistungen

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 13. Juni 2008 um 07:17
    • #6

    Deine Aussagen sind etwas widersprüchlich:

    Zitat

    das gesliencete Bild soll auch schon als Hintergrund eines DIVs verwendet werden


    Wenn das so ist, dann hättest du das Bild ja nicht slicen brauchen.
    Dann fügst du es als Hintergrundgrafik in einen Div. Dieser Div kann dann wiederum drei weitere Div's enthalten, z.B. für leftbar, content und rightbar.
    Dennoch schlägt dann das einheitliche Hintergrundbild auf alle Div's durch. Du musst sie nur von ihrer Breite und Positionierung her so anordnen, dass sie sich im gleichen Bereich befinden wie der (vermeintliche) Teil der Hintergrundgrafik.

    Anfangs sagtest du:

    Zitat

    aber nur der mitlere Teil soll so oft wiederholt werden, wie die Seite lang wird


    Für Diesen Fall müsstest du die Grafik in der Tat trennen und jedem der drei Div's eine Hintergrundgrafik (bzw. einen Teil davon) zuweisen.

    Um dir eine Lösung anzubieten müsste man somit wissen, wie das Ganze im Endstadium nun aussehen soll.

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • haillo
    Samurai
    Beiträge
    172
    • 13. Juni 2008 um 14:17
    • #7

    mit divs das war nicht meine Idee sondern die von sejuma!!
    Hier hab den Hintergrund jetzt mal dazu getan!!
    Mfg Benne

    Bilder

    • back3.jpg
      • 1,68 kB
      • 400 × 300
    • back2_765.jpg
      • 795 Byte
      • 400 × 100
    • back1.jpg
      • 3,06 kB
      • 400 × 200
    • div.jpg
      • 4,65 kB
      • 400 × 600

    http://www.haillo-hosting.de/index.htm

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 13. Juni 2008 um 14:50
    • #8

    CSS:

    Code
    #wrapper {width: 400px; margin: 0 auto;}
    #oben {width: 400px; height: 200px; background-image: url(back1.jpg);}
    #mitte {width: 400px; background-image: url(back2.jpg); background-repeat: repeat-y;}
    #unten {width: 400px; height: 100px; background-image: url(back3.jpg);}

    HTML:

    Code
    <div id="wrapper">
    <div id="oben">Inhalt oben</div>
    <div id="mitte">Inhalt Mitte</div>
    <div id="unten">Inhalt unten</div>
    </div>

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

  • haillo
    Samurai
    Beiträge
    172
    • 13. Juni 2008 um 15:12
    • #9

    genau dashabe ich gesucht!!!!!!!!!!!!!
    Vielen, vielen, vielen Dank!!!!!!!!!!![/b]

    http://www.haillo-hosting.de/index.htm

  • haillo
    Samurai
    Beiträge
    172
    • 13. Juni 2008 um 15:35
    • #10

    ich habe aber noch eine Frage!Das ganze ist ja jetzt zentriert, aber nur in firefox,das ist auch mein Standardt Browser, es soll aber auch Leute geben die IE verwenden, also was muss ich jetzt noch hinzfügen, damit das ganze auch im IE zentriert dargestellt wird??
    Mfg Benne

    http://www.haillo-hosting.de/index.htm

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 13. Juni 2008 um 16:37
    • #11

    Verwende noch einen qualifizierten Standard-Doctype

    [Blockierte Grafik: http://www.ohne-css.gehts-gar.net/img/banner/banner350x20.png]
    sejuma's CSS-Einsteigerkurs

Tags

  • www
  • html
  • http
  • background
  • hintergrund
  • selfhtml
  • org
  • bild
  • div
  • index
  • driver
  • reihenfolge
  • dokument
  • css
  • eigenschaften
  • repeat
  • webdesign
  • container
  • layer
  • hintergrundbild
  • z-index

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™