Serenity: Bilder in CSS das nicht das tut, was es soll

Hallo,

ich habe hier irgendwie den Wurm drin und weiß nicht warum. Alles was ich möchte sind mehere Bilder nebeneinander in einem DIV zu haben. Dazu habe ich mir einen DIV in der Form von

<div>  
<img id="bild01"/>  
<img id="bild02"/>  
<img id="bild03"/>  
<img id="bild04"/>  
<img id="bild05"/>  
<img id="bild06"/>  
<img id="bild07"/>  
</div>

geschrieben und dazu eine CSS die die Bilder wie folgt ausstattet

#bild01 {  
	background:url(../images/Raum_01.jpg);  
	width:30px;  
	height:26px;  
	margin:0px;  
	padding:0px;  
	float: left;  
	border: 0px none #00F;  
}

jetzt habe ich zum einen das Problem, daß um jedes Bild ein dünner grauer Rahmen ist, wobei ich ja border, padding und margin schon auf 0 stehen habe zum anderen klappt das mit dem float auch nur im Firefox, der IE macht hingegen Abstände zwischen den Bildern und was dann beide machen, ist mir ein Symbol das ich nicht einordnen kann über jedes Bild zu legen.
Darf ich Bilder vielleicht erst gar nicht so zuweisen, wie ich das mache oder fehlt noch irgendwas wichtiges? Ja Stylesheet ist eingebunden um die Frage vorweg zu nehmen. Im Prinzip steht da momentan gar nicht außer dem Body, mit dem Div drin und dennoch will das überhaupt nicht klappen.

Grüße Marc

  1. Hi there,

    Darf ich Bilder vielleicht erst gar nicht so zuweisen, wie ich das mache oder fehlt noch irgendwas wichtiges?

    Das ist von hinten durch das Auge geschossen und obendrein nicht wirklich valides HTML; ein img-Element benötigt zumindest die Angabe der Quelle. Du stellst das img-Element hingegen als leeren Container mit einem Hintergrundbild dar, den Du mit Hilfe von Stylesheetangaben formatierst. Vielleicht gibts ja einen Browser, der so eine Konstruktion halbwegs "richtig" anzeigt, gültiges HTML ist es mitnichten...

    1. Ok, gibt es irgendwas wie einen Platzhalter für solche Fälle. Ich wollte eigentlich keine Rows oder Dashes verwenden und mehr als ein Bild brauche ich da auch nicht.

      1. Hi there,

        Ok, gibt es irgendwas wie einen Platzhalter für solche Fälle. Ich wollte eigentlich keine Rows oder Dashes verwenden und mehr als ein Bild brauche ich da auch nicht.

        Es tut mir leid, ich versteh weder Dein Anliegen noch "Rows" oder "Dashes" in dem Zusammhang. Du schreibst, Du möchtest mehrere Bilder nebeneinander haben. Wenn Du die Bilder mit richtigem HTML auszeichnest, dann stellt sie der Browser ohnehin nebeneinander. Dafür benötigst Du keinen Platzhalter. Wie man ein Bild richtig einbaut, ist http://de.selfhtml.org/html/grafiken/einbinden.htm@title=da nachzulesen...

        1. Also,

          was ich gerne hätte, währe eine Seite die ohne das übliche Grüst von Tabellen auskommt. Deshalb die wahl von CSS. Jetzt wollte ich halt einfach in einem DIV definieren, daß es dort x Bilder nebeneinander gibt. Das hätte den Vorteil, dass ich Bilder über eine einzelne Änderung in der CSS Datei austauschen könnte.
          Allerdings scheint die einzige Möglichkeit Bilder zu benutzen das img tag zu sein.

          1. Hi,

            was ich gerne hätte, währe eine Seite die ohne das übliche Grüst von Tabellen auskommt.

            Gut. Tabellen sollten zur Auszeichnung tabellarischer Daten eingesetzt werden.

            Deshalb die wahl von CSS.

            Dieses "deshalb" existiert nicht.

            Die Inhalte werden mit HTML strukturell sinnvoll ausgezeichnet, und dann mit CSS formatiert.

            Jetzt wollte ich halt einfach in einem DIV definieren, daß es dort x Bilder nebeneinander gibt.

            Dann mach das doch.
            (Vielleicht lieber eine Liste statt einem Div - je nach Bedeutung der Bilder.)

            Das hätte den Vorteil, dass ich Bilder über eine einzelne Änderung in der CSS Datei austauschen könnte.
            Allerdings scheint die einzige Möglichkeit Bilder zu benutzen das img tag zu sein.

            Wenn die Bilder zum Inhalt gehören, dann bindet man sie i.a.R. per IMG-Element ein, ja.

            Lediglich dann, wenn sie nur Verzierung darstellen, dann ist CSS für sie zuständig - dann werden sie als Hintergrundbilder vorhandener Elemente eingesetzt.

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
            1. Ok, es gibt aber kein Element, daß man als "Platzhalter" nehmen könnte um darin ein Hintergrundbild einzusetzen? Ich will ja weder Link, noch Image haben, denn dieses kann ich wieder nicht per CSS mit den Daten für das Bild versorgen.

              1. Hi,

                Ok, es gibt aber kein Element, daß man als "Platzhalter" nehmen könnte um darin ein Hintergrundbild einzusetzen?

                Es gibt jede Menge Elemente, um Inhalte sinnvoll auszuzeichnen.

                Ich will ja weder Link, noch Image haben, denn dieses kann ich wieder nicht per CSS mit den Daten für das Bild versorgen.

                Die eigentliche Frage hast du unbeantwortet gelassen - sollen die Bilder Teil des Inhalts sein, also Information übermitteln, oder nur reine Verzierung sein?
                Wenn ersteres, dann gehören sie nicht per CSS eingebunden.

                *Das* entscheidet darüber, wie das korrekte Vorgehen ist - und nicht, ob du es dir per CSS möglichst einfach machen willst, irgendwas auszutauschen.

                MfG ChrisB

                --
                Light travels faster than sound - that's why most people appear bright until you hear them speak.
                1. Sollen reine Verzierung sein. Im Grunde will ich damit ein Layout aufbauen.

                  1. Hi,

                    Sollen reine Verzierung sein. Im Grunde will ich damit ein Layout aufbauen.

                    Schön - dann zeichne zuerst die Inhalte mit sinnvollem HTML aus, und formatiere das ganze anschliessend - und gebe dabei geeigneten Elementen Hintergrundbilder.

                    MfG ChrisB

                    --
                    Light travels faster than sound - that's why most people appear bright until you hear them speak.
                    1. Und was sind die geeigneten Elemente???

                      1. @@Serenity:

                        nuqneH

                        Und was sind die geeigneten Elemente???

                        <http://de.selfhtml.org/html/text/index.htm@title=Elemente zur Textstrukturierung>

                        Qapla'

                        --
                        Bildung lässt sich nicht downloaden. (Günther Jauch)
              2. Hi there,

                Ok, es gibt aber kein Element, daß man als "Platzhalter" nehmen könnte um darin ein Hintergrundbild einzusetzen? Ich will ja weder Link, noch Image haben, denn dieses kann ich wieder nicht per CSS mit den Daten für das Bild versorgen.

                Was spricht eigentlich dagegen, ein Bild als Bild darzustellen? Wenn Du das Bild dynamisch ändern willst (und nur dann benötigst Du einen Platzhalter), dann kannst Du das auch machen, wenn Du ein Bild verwendest. Dazu benötigst Du in jedem Fall Javascript, und in Javascript ist es egal, ob Du einem <img>-Element ein anderes Bild (src-Attribut) oder einem anderen Element ein mit CSS-Angaben definiertes Hintergrundbild zuweist.

                Und zur Darstellung nebeneinander verwendest Du einfach eine Liste, die mit display:inline in einer Reihe dargestellt wird. Deine Reihe von Bilder würde also so aussehen:

                  
                <ul>  
                <li><img src="bild01.jpg" id="BILD1"></li>  
                <li><img src="bild02.jpg" id="BILD2"></li>  
                <li><img src="bild03.jpg" id="BILD3"></li>  
                etc.  
                  
                </ul>  
                
                

                Eine dynamische Veränderung ersetzt den Bildsource mit:

                  
                  
                document.getElementById("BILD1").src="Neues Bild1";