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
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Code aufbaueN?

  • st0ffy
  • 28. Januar 2008 um 12:46
  • st0ffy
    Schüler
    Beiträge
    81
    • 28. Januar 2008 um 12:46
    • #1

    Wie kann ich es mit Hilfe von CSS so programmieren, dass diese Grafiken von oben nach unten angezeigt werden?

    Siehe Grafiken:

    http://st0ffy.st.funpic.de/gfx/1/

    - header
    - page line (immer autümaisch erweitern bei längerem text)
    -footer

    Datein sind normalerweise transparent!

    Kann mir einer helfen?

    Gruß Jens

    [Blockierte Grafik: http://st0ffy.de/version2/website/gfx/banner/banner_1.jpg]

  • sejuma
    Kaiser(in)
    Reaktionen
    5
    Beiträge
    2.720
    • 28. Januar 2008 um 13:31
    • #2

    ich würde drei divs nehmen: header, page, footer, jedem die entsprechende Hintergrundgrafik zuweisen und dann nacheinander einbauen:

    Code
    <div id="header>Headerinhalt</div>
    <div id="page>Pageinhalt</div>
    <div id="footer>Footerinhalt</div>

    CSS:

    Code
    #header {background-image: url(header.png);}

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

  • st0ffy
    Schüler
    Beiträge
    81
    • 28. Januar 2008 um 13:46
    • #3

    Da sieht das so aus:

    http://st0ffy.st.funpic.de/

    Gruß Jens

    [Blockierte Grafik: http://st0ffy.de/version2/website/gfx/banner/banner_1.jpg]

  • yeti66
    König(in)
    Beiträge
    1.152
    • 28. Januar 2008 um 14:33
    • #4

    st0ffy,

    schau Dir das mal an, da findest du sicher was für Dich.
    http://blog.html.it/layoutgala/

    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

  • st0ffy
    Schüler
    Beiträge
    81
    • 28. Januar 2008 um 14:37
    • #5

    Danke! Aber mir gehts ja daran das ich das Layout von mir nehmen kann. Klar, dass sind Beispiele, aber ich weiß nicht was ich damit anfangen kann. Ich will ja die Grafiken so untereinander anordnen.

    Gruß Jens

    [Blockierte Grafik: http://st0ffy.de/version2/website/gfx/banner/banner_1.jpg]

  • Dikra
    Samurai
    Beiträge
    229
    • 28. Januar 2008 um 15:19
    • #6
    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="shortcut icon" href="http://st0ffy.st.funpic.de/favicon.ico" type="image/x-icon"><title>st0ffy Online v1</title>
    
    
    
    
        <style media="screen" type="text/css">
    
    
    body {
    background-image:url(hintergrund.png);
    }
    #header {
    background-image: url(header.png);
    Width:530px;
    height:200px;
    }
    #page {background-image: url(page_line.png);
    Width:530px;
    }
    #footer {
    background-image: url(footer.png);
    Width:530px;
    height:30px;
    }
    
    
    
    
    </style>
    
    
    </head><body>
    
    
    
    
    <div id="header">
    </div>
    
    
    <div id="page">
    Danke! Aber mir gehts ja daran das ich das Layout von mir nehmen kann. Klar, dass sind Beispiele, aber ich weiß nicht was ich 
    
    
    damit anfangen kann. Ich will ja die Grafiken so untereinander anordnen.
    
    
    
    
    Danke! Aber mir gehts ja daran das ich das Layout von mir nehmen kann. Klar, dass sind Beispiele, aber ich weiß nicht was ich 
    
    
    damit anfangen kann. Ich will ja die Grafiken so untereinander anordnen.
    
    
    
    
    Danke! Aber mir gehts ja daran das ich das Layout von mir nehmen kann. Klar, dass sind Beispiele, aber ich weiß nicht was ich 
    
    
    damit anfangen kann. Ich will ja die Grafiken so untereinander anordnen.
    
    
    
    
    Danke! Aber mir gehts ja daran das ich das Layout von mir nehmen kann. Klar, dass sind Beispiele, aber ich weiß nicht was ich 
    
    
    damit anfangen kann. Ich will ja die Grafiken so untereinander anordnen.
    
    
    
    
    </div>
    
    
    
    
    <div id="footer"></div>
    
    
    
    
    </body></html>
    Alles anzeigen

    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  • yeti66
    König(in)
    Beiträge
    1.152
    • 28. Januar 2008 um 15:40
    • #7

    st0ffy,

    https://www.forum-hilfe.de/viewtopic.php?p=260620#260620

    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

  • Dikra
    Samurai
    Beiträge
    229
    • 28. Januar 2008 um 15:44
    • #8

    @yeti

    ich geb zu, deine Version ist etwas ausführlicher, dafür war ich etwas schneller ;)

    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  • st0ffy
    Schüler
    Beiträge
    81
    • 28. Januar 2008 um 15:52
    • #9

    Danke!

    Gruß Jens

    [Blockierte Grafik: http://st0ffy.de/version2/website/gfx/banner/banner_1.jpg]

  • yeti66
    König(in)
    Beiträge
    1.152
    • 28. Januar 2008 um 16:00
    • #10
    Zitat von Dikra

    @yeti

    ich geb zu, deine Version ist etwas ausführlicher, dafür war ich etwas schneller ;)

    :lol: ..musste erst mal die Zigarre aus der Hand legen.

    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

Tags

  • forum
  • hilfe
  • www
  • html
  • link
  • http
  • style
  • background
  • layout
  • version
  • code
  • php
  • page
  • div
  • hand
  • png
  • xml
  • css
  • image
  • header
  • blog
  • hintergrundgrafik
  • view
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern