Ergebnis 1 bis 8 von 8

Thema: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstellen

  1. #1
    HTML Newbie
    Registriert seit
    26.03.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstellen

    Hallo Leutz,

    ich habe folgende Aufgabe zu bewältigen und komme nicht klar , ich bitte dringend um Hilfe!

    Ich habe eine Grafikdatei (siehe Anlage) namens bg-sprites. In dieswer Datei sind 2 Einzelgrafiken mit einer Breite von 50 Pixeln und einer Höhe von 50 Pixeln enthalten.
    Des weiteren existiert eine html-datei, namens index.html, deren Code folgend aufgeführt ist. Der Vereinfachung halber wurde der CSS-Code mit in den Script-Bereich der HTML-Datei geschrieben.

    Aufgabe ist es nun, den DIV-Container "spielfeld" mit einer Grösse von: 950 Pixeln (Breite) und einer Höhe von 650 Pixeln wie folgt zu füllen:
    Der Hintergrund des Divs soll komplett mit den Kacheln wie folgt ausgefüllt werden: Als Muster gibt es folgende Vorgabe: Sprite mit 1 = helles Bild, Sprite mit 2 = dunkles Bild.
    Hier also erstmal das vorgegebene Muster:

    121212...
    212121...
    121212...
    .
    .
    usw.

    Also immer abwechselnd, so das gleiche Sprites nicht nebeneinander liegen
    Wie bekomm ich das nun hin? An welchem Element muss ich die Spritegrafiken nun aufhängen?

    Hier der HTML/CSS-Code, den ich bereits habe:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
            
            <title>test</title>
            
            <!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
            
            <style type="text/css">
            
            <!--
            *        {
                margin:0;
                padding:0;        
                }
        
        body        {
                    font-size:10px;
                    font-family:'Verdana' 'Arial';
                    background-color:#00ff00;    
                    }
                    
        #spielfeld  {
                         width:950px;
                         height:650px;
                        background: url(bg-sprites.png) no-repeat top left;
                        }            
                        
        .sprite-1{ background-position: 0 0; width: 50px; height: 50px; } 
        
        .sprite-2{ background-position: -100px 0; width: 50px; height: 50px; } 
    
                                
            -->        
            
            </style>
        
        </head>
        <body></body>
    </html>
    Und hier als Anlage die Grafikdatei:

    bg-sprites.png
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Joo (26.03.2012 um 10:46 Uhr) Grund: Fehler beseitigt

  2. #2
    Bandit
    Gast

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    <body></body>
    Aber hallo, da hast du dir ja schon richtig Mühe gegeben und eine prima Vorlage geschaffen, die wir korrigieren könnten.

    Was machen wir hier, deine Hausaufgaben?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    26.03.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    Hallo Bandit,

    sozusagen. Ich hab nen Kurs für Webentwicklung am laufen. Ich komme ja soweit ganz gut klar. Aber diese Aufgabe raubt mir den Verstand.
    Ich hatte schon nachgedacht, ob ich das ganze an li 's hänge oder an andere divs innerhalb des divs spielfeld und diese dann float:left setze. Aber kann ich nen div ohne id verwenden und ihr einfach die klasse .sprite-1 bzw sprite-2 zuordnen?
    das wären ja dann zig divs! Das muss doch einfacher gehen!

    Wenn du es weisst, dann gib mir zumindest nen kleinen Schubser in die richtige Richtung = Tip!

    Vielen Dank im Voraus
    Gruss Joo

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    26.03.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    Hallo Bandit
    So, ich hab weiter versucht!
    Bis jetzt hjab ich es jetzt geschafft, das ich bei Verwendung von Einzelbikdern das mit divs ohne id hinbekomme, Das heisst,
    ich lege divs innerhalb des divs spielfeld an, weise diesen abwechselnd die Klasse sprite-1 bzw. 2 zu. In CSS setze ich jetzt auf Einzelbilder.
    ich lege einen Selektor div.sprite-1 bzw div.sprite-2 an und weise diesen dann das jeweilige Hintergrundbild, eine Höhe und Breite von 50 und ein Float:Left zu.
    Dann geht das. Die Frage ist nur, ob das die Lösung sein soll? Zig divs um nen Hintergrund zu kacheln und zweitens, mit der css-Spritegrafik das bekomm ich nicht hin,
    was muss ich denn der Klasse dann für werte bei background-position und background-repeat mitgeben?

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    Ist doch kein Problem.
    Grafik erstellen und die Positionen der zwei Bilder merken(Notieren)
    Mit background-position positionieren. Fertig!

  6. #6
    Bandit
    Gast

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    Wenn Ihr PHP einsetzen dürft, wäre das deutlich kleiner als
    Code:
    html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
            
            <title>test</title>
            
            <!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
            
            <style type="text/css">
            
            <!--
            *        {
                margin:0;
                padding:0;        
                }
        
        body        {
                    font-size:10px;
                    font-family:'Verdana' 'Arial';
                    background-color:#00ff00;    
                    }
                    
        #spielfeld  {
                         width:950px;
                         height:650px;
                        background: url(bg-sprites.png) no-repeat top left;
                        }            
                        
        .sprite_1{ background: url(bg-sprites.png) no-repeat; background-position: 0 0; width: 50px; height: 50px; padding:0px; margin:0px; float:left;} 
        
        .sprite_2{ background: url(bg-sprites.png); background-position: -100px 0; width: 50px; height: 50px; padding:0px; margin:0px; float:left;} 
    
                                
            -->        
            
            </style>
        
        </head>
        <body>
        <div id='spielfeld'><div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
        <div class='sprite_1'></div>
        <div class='sprite_2'></div>
      </div>
     </body> 
     </html>
    denn dann sähe das so aus:
    PHP-Code:
    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
            
            <title>test</title>
            
            <!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
            
            <style type="text/css">
            
            <!--
            *        {
                margin:0;
                padding:0;        
                }
        
        body        {
                    font-size:10px;
                    font-family:'Verdana' 'Arial';
                    background-color:#00ff00;    
                    }
                    
        #spielfeld  {
                         width:950px;
                         height:650px;
                        background: url(bg-sprites.png) no-repeat top left;
                        }            
                        
        .sprite_1{ background: url(bg-sprites.png) no-repeat; background-position: 0 0; width: 50px; height: 50px; padding:0px; margin:0px; float:left;} 
        
        .sprite_2{ background: url(bg-sprites.png); background-position: -100px 0; width: 50px; height: 50px; padding:0px; margin:0px; float:left;} 

                                
            -->        
            
            </style>
        
        </head>
        <body>
        <div id='spielfeld'>
        <?php
           
    for ($i 0$i < (950/50)*(650/50); $i++)
           {
              if (
    $i 2)
                
    $class "sprite_1";
              else
                
    $class "sprite_2";
                
             echo 
    "       <div class='$class'></div>\n";
           }
       
    ?>
       </div>    
        </body>
    </html>
    Geändert von Bandit (26.03.2012 um 12:40 Uhr)

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    26.03.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    Hallo Bandit,

    also quasi meine Lösung mit divs ist ja scheinbar richtig! Nur eben ohne den php-teil, denn das kommt erst später, das wir php machen! Javascript wird das nächste sein was wir noch machen in diesem Zusammenhang mit der Aufgabe!
    Trotzdem Danke. Mit php wird das enorm kürzer, obwohl, wenn der Server das an den Client schickt, ja quasi das gleiche rauskommt wie ich es jetzt von Hand gebastelt hab!

    Nochmals Danke Bandit!

  8. #8
    Teeny
    Registriert seit
    08.04.2012
    Beiträge
    40
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrund eines DIV-Containers mittels einer sog. CSS-Spritegrafik zusammenstel

    ich habe mir dass nicht alles durch Gelsen und bin gerade seid ca. 10min im Forum Registriert aber ich vermute, dass du dass Hintergrundbild im div Container strecken willst?!

    viele sagen das geht nicht aber es ist mit ein wenig schummeln ganz simpel

    code:

    <style type="text/css">
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
    body {font-family:timesnewroman, papyrus;}
    #bkgrnd {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;}
    #content { position:absolute; z-index:2;}
    </style>


    </HEAD>


    <body>
    <div>
    <img src="images/background.jpg" alt="background image" id="bkgrnd">
    </div>


    <div id="content">

    ähhm ich weis noch nicht wie man so ne sprechblase einfügt

Ähnliche Themen

  1. Variable höhe eines DIV-Containers
    Von csigg im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 13.06.2011, 23:46
  2. Computer zusammenstellen
    Von Sheilong im Forum Computer - Internet Forum
    Antworten: 0
    Letzter Beitrag: 30.09.2008, 18:07
  3. Einfügen einer externen Datenbank mittels Link
    Von defe im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.05.2007, 00:01
  4. Antworten: 5
    Letzter Beitrag: 09.07.2006, 13:01
  5. Abfrage eines Optionswertes mittels JS
    Von webbie im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 25.11.2004, 23:38

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •