zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Erzeugen eines steuerbaren "Pixelfelds" mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.02.2009, 12:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2009
Beiträge: 5
gaias befindet sich auf einem aufstrebenden Ast
Frage Erzeugen eines steuerbaren "Pixelfelds" mit CSS

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.02.2009, 23:22
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Nimm float oder position:absolute.
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.02.2009, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2009
Beiträge: 5
gaias befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.02.2009, 11:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2009
Beiträge: 5
gaias befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 08.02.2009, 15:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2009
Beiträge: 5
gaias befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2009, 16:13
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Du legst die gesamte »Pixelmasse« in einen Container, und den zentrierst du. Wirf mal einen Blick in unsere FAQ.
__________________
toscho.de
Mit Zitat antworten
  #7 (permalink)  
Alt 08.02.2009, 19:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2009
Beiträge: 5
gaias befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:22 Uhr.