selfmade01: div style background-color, width feste Breite und ausgefüllt

Hallo,
ich baue gerade eine Tabelle mit <div> auf und möchte einen spacer einbauen mit 3px.
dieser Bereich bleibt jedoch leer, soll aber eine Hintergrundfarbe erhalten.

ich habe das probiert

  
<div style="background-color:#FC730A; padding: 0px; width:3px"></div>  

da bleibt die Zelle transparent ohne diese mit der Hintergrundfarbe zu füllen

weiss jemand eine Lösung?

Grüße Jürgen

  1. Aloha ;)

    Eine Lösung habe ich nicht. Nur ein weiteres Problem

    ich baue gerade eine Tabelle mit <div> auf

    Ich sagte schon mal: Semantisch musst du das selbst beurteilen. Dein Zitat lasst aber eher auf ein Fehlurteil schließen.

    dieser Bereich bleibt jedoch leer, soll aber eine Hintergrundfarbe erhalten.

    ich habe das probiert

    <div style="background-color:#FC730A; padding: 0px; width:3px"></div>

      
    Und noch ein Problem. Ein rein-präsentationsbezogenes Element ohne Sinn und Inhalt mitten im Code.  
      
    
    > da bleibt die Zelle transparent ohne diese mit der Hintergrundfarbe zu füllen  
    >   
    > weiss jemand eine Lösung?  
      
    Nur die, die ich dir schonmal gegeben hatte. Frag die Entwicklertools. Dann wird sicher schnell alles klar. Die Entwicklertools sprechen aber nicht mit jedem. Da muss man sich schon ein bisschen mit ihnen befassen ;)  
      
    Grüße,  
      
    RIDER  
      
    
    -- 
    Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
      
    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  
    
    
    1. Hallo,

      oben wurde mir empfohlen das ich mit <table> statt <div> arbeiten soll.

      das geht jedoch nicht da ich ja Zeilen eines Formulars nachladen muss und bestehende Zeilen dürfen nicht verändert werden.
      Die im anderen thread empfohlene Lösung das ich die id im <tbody> ansprechen soll hat zwar funktioniert, jedoch hat es mir den ganzen <tbody> neu geladen und alle bereits gemachten Eingaben in den Eingabefelder waren weg.

      So wie ich es verstanden habe kann ich das nur erledigen wenn ich mit Elementen arbeite die wieder Kindelemente zulassen so habe ich mich für <div> entscheiden.

      Der Aufbau solch einer Tabelle ist zwar recht kompliziert aber was will ich anderes machen.

      Grüße Jürgen

      1. Aloha ;)

        Der Aufbau solch einer Tabelle ist zwar recht kompliziert aber was will ich anderes machen.

        Das, was dir von Anfang an vorgeschlagen wurde. Richtige JavaScript-Methoden nutzen, um Elemente einzufügen - ich hatte von Anfang an gesagt, dass deine Lösung mit innerHTML eine sehr unflexible Lösung ist. Ich hab sogar ein Codebeispiel entworfen, wo du die technisch richtige Lösung nachvollziehen kannst.

        Was soll ICH anderes machen?

        Ach ja - hättest du früher deutlich gesagt, dass du Eingabe-Elemente in deiner Tabelle hast, hätte ich dir auch sagen können, dass das Überschreiben von innerHTML natürlich dazu führt, dass diese Elemente neu instanziert werden. Was soll der Browser auch sonst tun? Nur Änderungen tracken und umsetzen, oder wie? Unrealistische Vorstellung.

        Wie sollen wir dir helfen, wenn du selbst nicht so recht sagst was Sache ist, offenbar aber auch nicht so recht weißt was du tust?

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hallo Rider und alle anderen,

          ihr habt mir sehr sehr geholfen und auch wenn ich mich nicht richtig ausdrücken kann oder was falsch beschreibe, es hat alles funktioniert so wie es ihr mir beschrieben hattet.

          Das mit dem innerhtml
          ist erledigt!

          auch das geht nun

          Er überschreibt nun nix mehr und lässt alle Felder die bereits Werte enthalten in Ruhe da ich nun alles über <div> mache

          das funktioniert einwandfrei.. er hängt Zeile für Zeile bei onclick dran und lässt alles zuvor schon geladene in Ruhe

          ich habe nun einfach ein
          <div id="dasolleshin-"'$woche'>
          <button addnewrow>
          </div>
          da wo nun die id="dasolleshin-"'$woche' ist wird mir die neue zeile reingeladen und auch der neue Button

          das funzt super

          Nur habe ich nun eben einen Schönheitsfehler ich kann eben mit <div> nicht so gut eine Tabelle aufbauen wie mit der herkömmlichen Methode in <table> und <tr><td></td></tr>

          Wie sollen wir dir helfen, wenn du selbst nicht so recht sagst was Sache ist, offenbar aber auch nicht so recht weißt was du tust?

          na ja wenn ich nicht wüsste was ich tue dann würde hier bei mir gar nix funktionieren...

          der eine kann es halt super einfach beschreiben und ich gehöre halt zu den Chaoten :(

          Grüße Jürgen

          ps. Trotzdem ohne Eure Hilfe.. ohweia... also nochmals Danke!!!

          wenn mir jetzt noch einer sagt wie ich das mit dem Zwischenraum machen soll
          ich möchte also nichts anderes als zwischen zwei <div></div hier soll ein Feld in 3px breite und voller höhe farbig ausgefüllt werden<div></div>

          ungefähr so "|" nur eben 3px breit

          also vor Jahren habe ich sowas mit 1px.gif erledigt aber da hatte ich mit <td> grumgepfuscht.

          Mit css und border Anweisungen habe ich es nicht geschafft...
          der füllt mir einfach keine leer Zelle vollständig aus

      2. @@selfmade01:

        nuqneH

        oben wurde mir empfohlen das ich mit <table> statt <div> arbeiten soll.

        Ich weiß nicht, was genau du mit „oben“ meinst, aber solltest du dieses Posting meinen: Nein, genau das wurde dir NICHT empfohlen. Sondern dir die einzig relevante Frage zu stellen: Handelt es sich um _tabellarische_ Daten?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@selfmade01:

          Hallo,

          sorry diese Frage  "Handelt es sich um _tabellarische_ Daten" habe ich nicht richtig verstanden.

          Da die Daten aus einer DB kommen oder in eine DB geschrieben werden und es sich um mehrere Felder handelt müssten es aus meiner Sicht "tabellarische Daten " sein.

          Wenn dem so ist, müsste ich das Formular als Tabelle aufbauen mit <table> .

          Da ich jedoch dann in diese aufgebaute Tabelle weitere Felder (also eine Zeile mit Feldern) hinzufügen muss ohne dabei die anderen bereits ausgegebenen Felder zu verändern (die werte die dort eingegeben wurden müssen in der Ansicht bestehen bleiben) kann ich das nicht mit einer <table> machen.
          Da ich nur in <div> weitere Kindelemente einbinden kann die ich dann via id ansprechen kann komme ich also um den Aufbau dieses Formulars nur mit <div> nicht herum.

          Oder habe ich da nun wieder was falsch verstanden ?

          Ich hatte das doch schon anhand code-beispiele erklärt oder?

          hier nochmal wie es sein sollte was aber nicht geht

            
          <table>  
          <tbody id"vontbody">  
          <tr><td><input blabla bla > das ist der erste Wert der eingebene wurde und immer sichtbar sein muss</td></tr>  
          <tr><td><button "hole neue Zeile die aber nur hier eingesetzt werden soll ohne das die bereits bestehenden zeilen geändert werden dürfen"></td></tr>  
          </tbody>  
          </table>  
          
          

          das obigen Beispiel geht nicht, da ab <tbody> die gesamte Tabelle bzw. alle ausgegebene Felder neu aufgebaut werden und ans Ende des <tbody> eine Zeile hinzugefügt wird

          im folgenden Beispiel geht es jedoch, aber da ist die Formatierung also die Ausgabe nicht einfach da ich nur mit <div> arbeiten kann oder?

          Ausgabeseite

            
          <div style="width:100%">  
          <div><input type="text" name="wert1"></div><div><input type="text" name="wert2"></div>  
          <div id="hiersolldieneuezeilehin">  
          <div><button "holeneuezeile></div>  
          </div>  
          </div>  
          
          

          Aufbau der Zeilen

            
          <div><input type="text" name="wert3"></div><div><input type="text" name="wert4"></div>  
          <div id="hiersolldieneuezeilehin">  
          <div><button "holeneuezeile></div>  
          </div>  
          
          

          Nur mit dem <div> funktioniert es jetzt einwandfrei, da ich früher (ist leider schon ewig her) ohne css gearbeitet habe und Tabellen nur mit den üblichen <table><tr><td></td></tr></table> aufgebaut habe, hatte ich auch keine Probleme dort einen Zwischenraum <td></td>mit einer Farbe zu füllen da ich einfach ein 1px.gif geladen hatte und es auf die gewünschte Breite und Höhe ausgegeben habe.

          wie ich das mit einem leeren <div></div> mache weiss ich nicht

          ich dachte eigentlich ich könnte den <div> Bereich einen feste Breite und Höhe zuweisen und diesen dann mit einer Hintergrundfarbe füllen
          wahrscheinlich muss ich da doch irgend ein Element einbauen

          Grüße Jürgen

          1. Aloha ;)

            Da die Daten aus einer DB kommen oder in eine DB geschrieben werden und es sich um mehrere Felder handelt müssten es aus meiner Sicht "tabellarische Daten " sein.

            In einer Datenbank können auch nicht-tabellarische Inhalte stehen. Ob tabellarisch oder nicht ist Frage des Inhalts, nicht der Speicherform. Genauso wie auch in einer Datei tabellarische Daten gespeichert sein könnten.

            Da ich jedoch dann in diese aufgebaute Tabelle weitere Felder (also eine Zeile mit Feldern) hinzufügen muss ohne dabei die anderen bereits ausgegebenen Felder zu verändern (die werte die dort eingegeben wurden müssen in der Ansicht bestehen bleiben) kann ich das nicht mit einer <table> machen.

            Oh, man. Meine Lebenszeit... Wie oft noch? Bullshit!

            Da ich nur in <div> weitere Kindelemente einbinden kann die ich dann via id ansprechen kann komme ich also um den Aufbau dieses Formulars nur mit <div> nicht herum.

            Auch das ist Quatsch, id ist ein Universalattribut. Hab ich dir schonmal ein Grundlagenstudium empfohlen?

            Oder habe ich da nun wieder was falsch verstanden ?

            Wie - verstanden?

            hering

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  2. @@selfmade01:

    nuqneH

    ich baue gerade eine Tabelle mit <div> auf

    Das wäre unsinnig; für Tabellen ist table da. Aber vielleicht willst du ja keine Tabelle, sondern ein Grid?

    und möchte einen spacer einbauen mit 3px.

    Das sollte kein Element im HTML sein. Warum ist es kein border eines anderen Elements?

    dieser Bereich bleibt jedoch leer, soll aber eine Hintergrundfarbe erhalten.

    ich habe das probiert

    <div style="background-color:#FC730A; padding: 0px; width:3px"></div>

    
    > da bleibt die Zelle transparent ohne diese mit der Hintergrundfarbe zu füllen  
      
    Ein leeres div hat keine Höhe. Was also willst du sehen?  
      
    Außerdem sollten alle Darstellungsangaben im Stylesheet stehen, nicht inline in style-Atrributen.  
      
    
    > weiss jemand eine Lösung?  
      
    border, s.o.  
      
    Qapla'
    
    -- 
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    
    1. Hallo,

      @@selfmade01:

      Das wäre unsinnig; für Tabellen ist table da. Aber vielleicht willst du ja keine Tabelle, sondern ein Grid?

      ja , da ich die htmlkickstarter-css verwende, arbeite ich hier mit grid.
      in dieser Grid baue ich dann mit <div> die Pseudo-Tabelle auf.

      ich muss das leider so machen da ich auf einzelene Elemente dieser "Pseudo-Tabelle zugreifen muss.
      ohne das dabei die anderen erändert werden (mit Javascript und Ajax werden Zeilen nachgeladen, wobei die bereits ausgegebenen Zeilen nicht verändert werden dürfen)

      Das sollte kein Element im HTML sein. Warum ist es kein border eines anderen Elements?

      Wie meinst Du das? ich habe doch keine Tabelle bzw. <td>'s

      mein Aufbau sieht ungefähr so aus

        
      <div class="grid"> <!-- grid ist hier nichts anderes als das die Breite der Pseudo-Tabelle  via css bestimmt wird  
      <div class="col_2">Woche</div>  
      <div class"col_5">Überschrift-links</div>  
      <div>hier soll ein kleiner Zwischenraum sein damit Überschrift-links und Überschrift-Rechts optisch einen Senkrechten Trennstrich haben von ca 3px breite und voller Höhe der Zelle</div>  
      <div class"col_5">Überschrift-Rechts</div>  
        
      </div>  
      
      

      Ein leeres div hat keine Höhe. Was also willst du sehen?

      siehe oben im Code beschrieben
      wenn ich das mit einer <table> und <td>'s machen würde so würde ich hier ein 1px image laden und auf volle Höhe und 3px Breite ziehen.

      Außerdem sollten alle Darstellungsangaben im Stylesheet stehen, nicht inline in style-Atrributen.

      ja, ich wollte nur in dem css-framework von htmlkickstarter nicht zuviel rumpfuschen

      border, s.o.

      Border? da muss ich mal suchen und ausprobieren wie ich das in <div> und css darstellen kann

      Grüße Jürgen

      1. Aloha ;)

        ich muss das leider so machen da ich auf einzelene Elemente dieser "Pseudo-Tabelle zugreifen muss.
        ohne das dabei die anderen erändert werden

        Quark. Du wurdest des Öfteren darauf hingewiesen, dass es noch mehr Möglichkeiten gibt. Du entscheidest dich aber für die mit-dem-Kopf-durch-die-Wand-Methode ohne jemals begriffen zu haben, was genau du da tust. Ich hatte dir schon mal ein Grundlagenstudium ans Herz gelegt.

        Das sollte kein Element im HTML sein. Warum ist es kein border eines anderen Elements?

        Wie meinst Du das? ich habe doch keine Tabelle bzw. <td>'s

        Seit wann können nur td's eine border besitzen?

        mein Aufbau sieht ungefähr so aus

        <div class="grid"> <!-- grid ist hier nichts anderes als das die Breite der Pseudo-Tabelle  via css bestimmt wird
        <div class="col_2">Woche</div>
        <div class"col_5">Überschrift-links</div>
        <div>hier soll ein kleiner Zwischenraum sein damit Überschrift-links und Überschrift-Rechts optisch einen Senkrechten Trennstrich haben von ca 3px breite und voller Höhe der Zelle</div>
        <div class"col_5">Überschrift-Rechts</div>

        </div>

          
        Auch Text innerhalb divs ist semantischer Unfug. Es gibt genügend Elemente, die explizit Text beinhalten sollen - p z.B. um nur eines zu nennen.  
          
        
        > > Ein leeres div hat keine Höhe. Was also willst du sehen?  
        > >   
        >   
        > siehe oben im Code beschrieben  
        > wenn ich das mit einer <table> und <td>'s machen würde so würde ich hier ein 1px image laden und auf volle Höhe und 3px Breite ziehen.  
          
        What the hack? Du würdest tds benutzen als Abstandshalter? Oder ein extra eingefügtes Bild? Reden wir eigentlich gegen eine Wand?  
          
        
        > > Außerdem sollten alle Darstellungsangaben im Stylesheet stehen, nicht inline in style-Atrributen.  
        >   
        > ja, ich wollte nur in dem css-framework von htmlkickstarter nicht zuviel rumpfuschen  
          
        Niemand hat gesagt, du solltest im framework rumpfuschen. Du solltest in der Lage sein, ein zweites, eigenes Stylesheet zusätzlich einzubinden. Ansonsten solltest du dich eher mit der Doku (wiki) befassen als mit dem Forum.  
          
        
        > > border, s.o.  
        > >   
        >   
        > Border? da muss ich mal suchen und ausprobieren wie ich das in <div> und css darstellen kann  
          
        Du hast noch nie was von border gehört und möchtest mit JavaScript herumpfuschen? Ich bin beeindruckt. Ohne jegliches Grundlagenwissen hier Fragen zu stellen ist schon... äähhh... dreist. Verschwendung unserer Lebenszeit. Wir helfen gerne. Wir sind aber keine Privatlehrer, die dir nicht vorhandenes Grundlagenwissen vermitteln wollen, welches du dir selbst problemlos aneignen könntest.  
          
        Grüße,  
          
        RIDER  
          
        
        -- 
        Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
          
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  
        
        
        1. Hallo,

          What the hack?

          das hat mich in einem anderen Posting von dir heute schon mal irritiert. Aber da dachte ich noch, es wäre ein bewusst eingesetzter sprachlicher Witz. Jetzt bin ich mir da nicht mehr so sicher.

          Meintest du etwa "what the heck"?

          So long,
           Martin

          --
          Success should be measured not so much by the position that one has reached in life,
          but by the obstacles one has overcome while trying to succeed.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. Aloha ;)

            What the hack?

            das hat mich in einem anderen Posting von dir heute schon mal irritiert. Aber da dachte ich noch, es wäre ein bewusst eingesetzter sprachlicher Witz. Jetzt bin ich mir da nicht mehr so sicher.

            Meintest du etwa "what the heck"?

            Jein. Eher ne eigenwillige Anspielung auf "Hackts bei dir?" :D

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
            1. @@Camping_RIDER:

              nuqneH

              Meintest du etwa "what the heck"?

              Jein. Eher ne eigenwillige Anspielung auf "Hackts bei dir?" :D

              Und „what the heck“ wäre ’ne Anspielung auf die Hecke?

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. @@Camping_RIDER:

          nuqneH

          Reden wir eigentlich gegen eine Wand?

          Gegen die Zeit.

          Wir schaffen das scheinbar Unmögliche, mit jemandem zu kommunizieren, der vor 20 Jahren lebt.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@selfmade01:

        nuqneH

        Border? da muss ich mal suchen und ausprobieren wie ich das in <div> und css darstellen kann

        Protip: Schau dir mal die Box „Formuliere höflich und wertschätzend. Vermeide Vollzitate. Dein Beitrag wird dauerhaft archiviert.“ weiter unten an. Oder die Boxen „Dieses Forum versteht sich als Ergänzung der neuen SELFHTML-Dokumentation.“ und „SELFHTML freut sich über jede Form der Unterstützung, insbesondere jedoch über eine Mitarbeit an der Dokumentation.“ auf der Forum-Startseite.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)