Seite 1 von 1
Bandenmuster in HTML&CSS
Verfasst: Sa Mai 19, 2012 5:22 pm
von fat-lobyte
Hallo!
Ich habe eine Sequenz, in der sich ausgezeichnete Teilsequenzen befinden.
Ich würde diese Sequenz gerne visualisieren, am besten in einer Art "Bandenmuster".
Beispiel in ASCII:
Gesamtlänge: 80
Gebiet A (+): 10-25
Gebiet B (#): 45-70
Das hätte ich allerdings gerne in HTML und CSS. Die Gebiete sollen dabei eine jeweils andere Farbe haben.
Kann man so etwas mit <div />- und/oder <span />-Elementen und Styles zusammenbauen?
Re: Bandenmuster in HTML&CSS
Verfasst: Sa Mai 19, 2012 5:27 pm
von cloidnerux
Ja.
einfach die Elemente in spans packen, ne entsprechende ID zuweisen und dann mit nem css-Dokument der ID nen Style zuweisen, bzw du kannst den spans auch einen style zuweisen.
Re: Bandenmuster in HTML&CSS
Verfasst: Sa Mai 19, 2012 5:29 pm
von fat-lobyte
cloidnerux hat geschrieben:Ja.
einfach die Elemente in spans packen, ne entsprechende ID zuweisen und dann mit nem css-Dokument der ID nen Style zuweisen, bzw du kannst den spans auch einen style zuweisen.
Sollen die <span>'s etwas enthalten? Funktioniert das dann auch mit der Breite?
Re: Bandenmuster in HTML&CSS
Verfasst: Sa Mai 19, 2012 5:34 pm
von cloidnerux
Die Frage ist, wie es am Ende aussehen soll.
Du kannst die Spans als Farbflächen verwenden, wenn du ihnen per Width und height ne größe aufzwingst.
Du kannst aber auch einfach iwas reinschreiben, wie eben deine Rauten, Plus und Minuse.
Je nach dem was du machst, musst du entweder die font-color oder die background-color ändern.
Re: Bandenmuster in HTML&CSS
Verfasst: Sa Mai 19, 2012 11:13 pm
von Dominik
Wozu brauchst du sowas ?
Re: Bandenmuster in HTML&CSS
Verfasst: So Mai 20, 2012 10:47 am
von fat-lobyte
cloidnerux hat geschrieben:Die Frage ist, wie es am Ende aussehen soll.
Sie soll als Färbfläche dienen, Symbole wollte ich eigentlich keine drinnen haben. Danke für den Tip.
Dominik hat geschrieben:Wozu brauchst du sowas ?
Ich schreib an so einem Dings, das Proteinsequenzen analysiert. Das funktioniert schon einigermaßen, aber es stellt sich jetzt die Frage wie man die Ergebnisse darstellt.
Re: Bandenmuster in HTML&CSS
Verfasst: So Mai 20, 2012 12:13 pm
von Xin
fat-lobyte hat geschrieben:Hallo!
Ich habe eine Sequenz, in der sich ausgezeichnete Teilsequenzen befinden.
Ich würde diese Sequenz gerne visualisieren, am besten in einer Art "Bandenmuster".
Beispiel in ASCII:
Gesamtlänge: 80
Gebiet A (+): 10-25
Gebiet B (#): 45-70
Das hätte ich allerdings gerne in HTML und CSS. Die Gebiete sollen dabei eine jeweils andere Farbe haben.
Kann man so etwas mit <div />- und/oder <span />-Elementen und Styles zusammenbauen?
So?
Code: Alles auswählen
<html>
<head>
<style type="text/css">
div { width:30px; height:30px; float: left; border: 1 solid black;border-left: 0;}
div:first { border-left: 1 solid black;}
div.clear { clear:both; }
.minus { background-color:blue;}
.plus { background-color:green; }
.hash { background-color:yellow; }
</style>
</head>
<body>
<div class="minus"></div>
<div class="minus"></div>
<div class="plus"></div>
<div class="plus"></div>
<div class="minus"></div>
<div class="minus"></div>
<div class="hash"></div>
<div class="hash"></div>
<div class="hash"></div>
<div class="hash"></div>
<div class="hash"></div>
<div class="minus"></div>
<div class="minus"></div>
<div class="clear"></div>
</body>
</html>
Re: Bandenmuster in HTML&CSS
Verfasst: So Mai 20, 2012 2:24 pm
von Dominik
Hm wie genau will man den sowas darstellen ?
Sicher das du nicht mit einem Statistik Tool besser bedient bist ?
Sowas macht halt was her:
http://people.iola.dk/olau/flot/examples/
http://code.google.com/p/flot/
Re: Bandenmuster in HTML&CSS
Verfasst: So Mai 20, 2012 4:10 pm
von fat-lobyte
Dominik hat geschrieben:Hm wie genau will man den sowas darstellen ?
Ja, ganz genau so! Dankeschön, ziemlich genau das brauche ich.
Wenn ich das Fenster verkleinere, dann "brechen" die <div>'s um. Das würde ich gerne vermeiden, stattdessen soll einfach das Fenster (oder das umgebende Element) scrollbar werden. Ich habs schon mit einem umgebenden <div> mit overflow-x:scroll; versucht, aber da kommt zwar ein Scrollbalken, aber wenn ich das Fenster verkleinere brechen sie trotzdem um. Ich glaube, ich habe da etwas missverstanden.
Die <div>'s sollen quasi "zusammenkleben".
Dominik hat geschrieben:Sicher das du nicht mit einem Statistik Tool besser bedient bist ?
Ziemlich sicher. Die statistik wird von verschiedenen Programmen berechnet, und hier gehts nur mehr um eine Darstellung. Konkret gehts hier um das auffinden von "Wiederholungen" in einer Aminsoäuresequenz eines Proteins. Wenn tatsächlich Wiederholungen gefunden werden sollten, dann würde ich das gerne in genau so einem Bandenmuster darstellen.
Re: Bandenmuster in HTML&CSS
Verfasst: Mo Nov 05, 2012 7:02 pm
von Xin
Google meint, dass Du mal
in das Div schreiben sollst, dass die nicht zu wrappenden Divs enthält.