HTML CSS verschiebt das Bild um ein Paar Pixel.

IKäsebrot · 30. April 2015

Hallo zusammen,

ich wollte eine Tabelle mit einem Bild (100x100) befüllen.

Funktioniert auch ganz gut:

HTML:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .imageSquare {
            background: url(Images/microsoft.png);
            width: 100px;
            height: 100px;
        }
        table {
            border-spacing: 15px;
            border-collapse: separate;
        }

    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
<table>
    <tr><td class="imageSquare"></td><td class="imageSquare"></td><td class="imageSquare"></td></tr>
    <tr><td class="imageSquare"></td><td class="imageSquare"></td><td class="imageSquare"></td></tr>
    <tr><td class="imageSquare"></td><td class="imageSquare"></td><td class="imageSquare"></td></tr>
</table>
</body>
</html>

Doch leider wird durch die css-Klasse das Bild in jeder Zelle leicht nach links + oben verschoben.

Das erkennt man wenn man sich die jeweilgen Zellen am unteren bzw. rechten Rand anguckt. Grundsätzlich habe ich die css-Klasse benutzt damit ich einen Abstand zwischen den Zellen einfügen konnte.

Jemand eine Idee?

Gruß und schönes langes Wochenende!

max_1234 · 30. April 2015

Oh man .. sowas lernst du wo? ...

Mach eine Tabelle (oder besser mach keine, muh):
6 Zeilen 6 Spalten, Rot Grün Blau Gelb aus Hintergrundfarbe, Border auf 5px und weiß - wo ist das Problem? Hau das Bild weg! Gibt sowieso nur UrheberrechtsanspruchsMordundTotschlagsklagen.

mfg,
Max

IKäsebrot · 30. April 2015

Ähm das Bild ist ein Platzhalter. Was soll diese Antwort? Wirft noch mehr Fragen auf! Geht es dir gut, muh? Bzw wo lernt man sowas?

Cool Master · 30. April 2015

Dafür sind Tabellen nicht gemacht!

Nimm Div Container und gut ist. Dazu backgound-color und jeweils die Farbei eintragen etwa so:

HTML:

<div id="wrapper">
     <div id="farbe1"></div
     <div id="farbe2"></div
     <div id="farbe3"></div
     <div id="farbe4"></div
</div

Breite, Höhe und Background-Color nutzen und alles passt

R4sh · 30. April 2015

es kommt auch darauf an was du damit genau machen willst, wenn du dort was eintragen willst, dann wie CoolMaster schon sagt, eine neuen div bzw. 4 neue erstellen und sie dann im stylesheet.css auf deine passende größe ausrichten. oder ganz einfach

einfach das als bild machen und dieses dann einfügen.

FlixMozzer · 30. April 2015

Hallo,

Du bekommst den Rand einer solchen Tabelle mit der Startdefinition '''<table cellpadding="" cellspacing="" rules="none">''' weg. Es ist wichtig alle drei Argumente zu benutzen, weil die Browser nicht Standardisiert sind. Dies heist, dass bestimmte Befehle in der Stylesheet-Sprache eine doppelte Bedeutung haben (Synonyme), doch für bestimmte Browser gilt dieser und für den anderen der andere Code.

FlixMozzer

Suche

HTML CSS verschiebt das Bild um ein Paar Pixel.

IKäsebrot

Ensign

max_1234

Captain

IKäsebrot

Ensign

Cool Master

Fleet Admiral

R4sh

Commander

FlixMozzer

Cadet 1st Year

Ähnliche Themen