Erzeugen eines steuerbaren "Pixelfelds" mit CSS

gaias · #1 (**permalink**) 07.02.2009, 12:34

Hallo,

ich möchte per CSS ein "Pixelfeld" erstellen, sodass ich mit JavaScript die Farbe (bzw. erst mal nur schwarz/weiß) einzelner Pixel verändern kann. Die "Pixel" sollen dabei eine konstante, aber frei wählbare Größe haben, also nicht unbedingt Bildschirmpixeln entsprechen.

Versucht habe ich dies bereits mit DIV-Containern:

HTML-Code:

.ceon {
background-color: #000000;
padding: 0;
margin: 0;
width: 3px;
height: 3px;
border: none;
}
.ceoff {
background-color: #FFFFFF;
padding: 0;
margin: 0;
width: 3px;
height: 3px;
border: none;
}

<div id="coX" class="ceoff"></div>

Das Problem dabei ist jedoch, dass die DIV-Container Block Elemente sind und daher mit jedem Container eine neue Zeile beginnt. Ergänze ich display:inline;, so werden sie überhaupt nicht mehr angezeigt (wohl weil width/height ignoriert wird?).

Hat jemand eine Idee, wie man dieses Ansatz zum Funktionieren bringen könnte oder vielleicht eine ganz andere Idee?

Vielen Dank schon einmal!

Gruß
gaias

toscho · #2 (**permalink**) 07.02.2009, 23:22

Nimm float oder position:absolute.

gaias · #3 (**permalink**) 08.02.2009, 10:50

Vielen Dank toscho! Mit float:left; sind die Pixel nebeneinander; jetzt verstehe ich nur nicht, wie ich einen "Zeilenumbruch" hinbekomme, denn nun reihen sich alle Pixel des Feldes in eine Zeile. <br /> und auch jede Zeile in einen extra DIV-Container zu packen funktioniert nicht.

gaias · #4 (**permalink**) 08.02.2009, 11:10

Ok, habe es nach einer kleinen Lektüre über float doch verstanden:
Jede Zeile in einen DIV-Container folgender Klasse einbetten löst das Problem.

HTML-Code:

.pixelline {
clear:both;
height:3px;
}

gaias · #5 (**permalink**) 08.02.2009, 15:00

Jetzt ergibt sich allerdings ein Problem, auf das ich bisweilen keine Antwort finden konnte:
Ich möchte das so erstellte Pixelfeld sowohl vertikal als auch horizontal zentrieren und habe nun leider gar keine Idee wie dies trotz des "float:left;" gehen soll.

Gruß
gaias

toscho · #6 (**permalink**) 08.02.2009, 16:13

Du legst die gesamte »Pixelmasse« in einen Container, und den zentrierst du. Wirf mal einen Blick in unsere FAQ.

gaias · #7 (**permalink**) 08.02.2009, 19:40

Oh, stimmt, mit der Methode funktioniert es. Ich habe zuerst die mit position:absolute; probiert, wobei dann die gefloateten Pixel einfach am linken Bildschirmrand verblieben.
Danke noch mal!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 17:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 03:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 09:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 12:39