Bandenmuster in HTML&CSS

Fragen zum Thema HTML, JavaScript, PHP
Antworten
Benutzeravatar
fat-lobyte
Beiträge: 1398
Registriert: Sa Jul 05, 2008 12:23 pm
Wohnort: ::1
Kontaktdaten:

Bandenmuster in HTML&CSS

Beitrag von fat-lobyte » Sa Mai 19, 2012 5:22 pm

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

Code: Alles auswählen

|--++----######--|
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?
Haters gonna hate, potatoes gonna potate.

Benutzeravatar
cloidnerux
Moderator
Beiträge: 3123
Registriert: Fr Sep 26, 2008 4:37 pm
Wohnort: Ram (Gibts wirklich)

Re: Bandenmuster in HTML&CSS

Beitrag von cloidnerux » Sa Mai 19, 2012 5:27 pm

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.
Redundanz macht wiederholen unnötig.
quod erat expectandum

Benutzeravatar
fat-lobyte
Beiträge: 1398
Registriert: Sa Jul 05, 2008 12:23 pm
Wohnort: ::1
Kontaktdaten:

Re: Bandenmuster in HTML&CSS

Beitrag von fat-lobyte » Sa Mai 19, 2012 5:29 pm

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?
Haters gonna hate, potatoes gonna potate.

Benutzeravatar
cloidnerux
Moderator
Beiträge: 3123
Registriert: Fr Sep 26, 2008 4:37 pm
Wohnort: Ram (Gibts wirklich)

Re: Bandenmuster in HTML&CSS

Beitrag von cloidnerux » Sa Mai 19, 2012 5:34 pm

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.
Redundanz macht wiederholen unnötig.
quod erat expectandum

Dominik
Beiträge: 381
Registriert: Mo Jul 07, 2008 9:39 pm

Re: Bandenmuster in HTML&CSS

Beitrag von Dominik » Sa Mai 19, 2012 11:13 pm

Wozu brauchst du sowas ? ;)
Rechtschreibefehler sind gewollt und dienen der Unterhaltung

Benutzeravatar
fat-lobyte
Beiträge: 1398
Registriert: Sa Jul 05, 2008 12:23 pm
Wohnort: ::1
Kontaktdaten:

Re: Bandenmuster in HTML&CSS

Beitrag von fat-lobyte » So Mai 20, 2012 10:47 am

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.
Haters gonna hate, potatoes gonna potate.

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8859
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Bandenmuster in HTML&CSS

Beitrag von Xin » So Mai 20, 2012 12:13 pm

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

Code: Alles auswählen

|--++----######--|
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>
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Dominik
Beiträge: 381
Registriert: Mo Jul 07, 2008 9:39 pm

Re: Bandenmuster in HTML&CSS

Beitrag von Dominik » So Mai 20, 2012 2:24 pm

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/
Rechtschreibefehler sind gewollt und dienen der Unterhaltung

Benutzeravatar
fat-lobyte
Beiträge: 1398
Registriert: Sa Jul 05, 2008 12:23 pm
Wohnort: ::1
Kontaktdaten:

Re: Bandenmuster in HTML&CSS

Beitrag von fat-lobyte » So Mai 20, 2012 4:10 pm

Dominik hat geschrieben:Hm wie genau will man den sowas darstellen ?
Xin hat geschrieben:So?
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.
Haters gonna hate, potatoes gonna potate.

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8859
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Bandenmuster in HTML&CSS

Beitrag von Xin » Mo Nov 05, 2012 7:02 pm

Google meint, dass Du mal

Code: Alles auswählen

white-space: nowrap;
in das Div schreiben sollst, dass die nicht zu wrappenden Divs enthält.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Antworten