Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
(Erster Prototyp)
Zeile 40: Zeile 40:
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
−
         <td>Diverses:</td>
+
         <td>Verschiedene Formatierungen:</td>
 
         <td>
 
         <td>
 
           <input type="checkbox" name="font-weight" value="bold" id="pStyleGenerator-font-weight" />
 
           <input type="checkbox" name="font-weight" value="bold" id="pStyleGenerator-font-weight" />
Zeile 273: Zeile 273:
 
       </tr>
 
       </tr>
 
       <!--
 
       <!--
−
         Abstände und Absatzkontrolle
+
         Größe und Abstände
 
       -->
 
       -->
 
       <tr>
 
       <tr>
−
         <th colspan="2">Abstände und Absatzkontrolle</th>
+
         <th colspan="2">Größe und Abstände</th>
 +
      </tr>
 +
      <tr>
 +
        <td>Breite:</td>
 +
        <td>
 +
          <input type="text" name="width" />
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Höhe:</td>
 +
        <td>
 +
          <input type="text" name="height" />
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Verhalten bei Übergröße des Inhalts:</td>
 +
        <td>
 +
          <select name="overflow">
 +
            <option value="">(Automatisch)</option>
 +
            <option value="visible">Anzeigen</option>
 +
            <option value="hidden">Verstecken</option>
 +
            <option value="scroll">Scrollbalken anzeigen</option>
 +
          </select>
 +
        </td>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
Zeile 347: Zeile 370:
 
           </div>
 
           </div>
 
         </td>
 
         </td>
 +
      </tr>
 +
      <!--
 +
        Position und Elementausrichtung
 +
      -->
 +
      <tr>
 +
        <th colspan="2">Position und Elementausrichtung</th>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
Zeile 367: Zeile 396:
 
             <option value="both">Beides</option>
 
             <option value="both">Beides</option>
 
           </select>
 
           </select>
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Positionierung:</td>
 +
        <td>
 +
          <select name="position">
 +
            <option value="">(Keine)</option>
 +
            <option value="relative">Relativ</option>
 +
            <option value="absolute">Absolut</option>
 +
            <option value="fixed">Fixiert</option>
 +
          </select>
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Links:</td>
 +
        <td>
 +
          <input type="text" name="left" />
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Rechts:</td>
 +
        <td>
 +
          <input type="text" name="right" />
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Oben:</td>
 +
        <td>
 +
          <input type="text" name="top" />
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Unten:</td>
 +
        <td>
 +
          <input type="text" name="bottom" />
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Ebenenposition:</td>
 +
        <td>
 +
          <input type="text" name="z-index" />
 
         </td>
 
         </td>
 
       </tr>
 
       </tr>
Zeile 374: Zeile 444:
 
       <tr>
 
       <tr>
 
         <th colspan="2">Generatorspezifisches</th>
 
         <th colspan="2">Generatorspezifisches</th>
−
      </tr>
 
−
      <tr>
 
−
        <td>Vorschau:</td>
 
−
        <td>
 
−
          <input type="radio" name="generator-display" value="block" checked="checked" id="pStyleGenerator-generator-display-block" />
 
−
          <label for="pStyleGenerator-generator-display-block">Kasten</label>
 
−
          <br />
 
−
          <input type="radio" name="generator-display" value="inline" id="pStyleGenerator-generator-display-inline" />
 
−
          <label for="pStyleGenerator-generator-display-inline">Text innerhalb einer Zeile</label>
 
−
        </td>
 
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
Zeile 399: Zeile 459:
 
           <input type="radio" name="generator-output" value="file" id="pStyleGenerator-generator-output-file" />
 
           <input type="radio" name="generator-output" value="file" id="pStyleGenerator-generator-output-file" />
 
           <label for="pStyleGenerator-generator-output-file">CSS-Seite</label>
 
           <label for="pStyleGenerator-generator-output-file">CSS-Seite</label>
 +
        </td>
 +
      </tr>
 +
      <tr>
 +
        <td>Vorschau:</td>
 +
        <td>
 +
          <input type="radio" name="generator-display" value="block" checked="checked" id="pStyleGenerator-generator-display-block" />
 +
          <label for="pStyleGenerator-generator-display-block">Kasten</label>
 +
          <br />
 +
          <input type="radio" name="generator-display" value="inline" id="pStyleGenerator-generator-display-inline" />
 +
          <label for="pStyleGenerator-generator-display-inline">Text innerhalb einer Zeile</label>
 
         </td>
 
         </td>
 
       </tr>
 
       </tr>
Zeile 438: Zeile 508:
 
       text-align: right;
 
       text-align: right;
 
       padding-right: 10px;
 
       padding-right: 10px;
 +
      width: 250px;
 
     }
 
     }
 
      
 
      
Zeile 491: Zeile 562:
 
         'text-decoration',
 
         'text-decoration',
 
         'text-align',
 
         'text-align',
 +
        'width',
 +
        'height',
 +
        'overflow',
 
         'padding',
 
         'padding',
 
         'padding-left',
 
         'padding-left',
Zeile 552: Zeile 626:
 
       });
 
       });
 
        
 
        
 +
      // position
 +
      if (setProps['position'] !== undefined) {
 +
        $.each(['position', 'left', 'right', 'top', 'bottom', 'z-index'], function() {
 +
          var i = this.toString();
 +
          if (setProps[i] !== undefined) {
 +
            formattedProps.push(i + ': ' + setProps[i] + ';');
 +
          }
 +
        });
 +
      }
 +
     
 +
      // Attribut-String erstellen
 
       var attr = formattedProps.join(' ');
 
       var attr = formattedProps.join(' ');
 
        
 
        
−
       if (inputProps['generator-display'] === 'block') {
+
       // Quelltext vorbereiten
−
        $('#pStyleGenerator-blockPreview div').attr('style', attr);
 
−
        $('#pStyleGenerator-blockPreview').show();
 
−
        $('#pStyleGenerator-inlinePreview').hide();
 
−
      }
 
−
      else {
 
−
        $('#pStyleGenerator-inlinePreview span').attr('style', attr);
 
−
        $('#pStyleGenerator-inlinePreview').show();
 
−
        $('#pStyleGenerator-blockPreview').hide();
 
−
      }
 
−
     
 
 
       switch (inputProps['generator-output']) {
 
       switch (inputProps['generator-output']) {
 
         case 'div':
 
         case 'div':
Zeile 586: Zeile 661:
 
           var output = '';
 
           var output = '';
 
           if (formattedProps.length > 0) {
 
           if (formattedProps.length > 0) {
−
             output += '    ' + formattedProps.join('\n ');
+
             output += '    ' + formattedProps.join('\n   ');
 
           }
 
           }
 
           break;
 
           break;
 
       }
 
       }
 
       $('#pStyleGenerator-output').val(output);
 
       $('#pStyleGenerator-output').val(output);
 +
     
 +
      // Vorschau aktualisieren
 +
      if (inputProps['generator-display'] === 'block') {
 +
        $('#pStyleGenerator-blockPreview div').attr('style', attr);
 +
        $('#pStyleGenerator-blockPreview').show();
 +
        $('#pStyleGenerator-inlinePreview').hide();
 +
      }
 +
      else {
 +
        $('#pStyleGenerator-inlinePreview span').attr('style', attr);
 +
        $('#pStyleGenerator-inlinePreview').show();
 +
        $('#pStyleGenerator-blockPreview').hide();
 +
      }
 
     }
 
     }
 
      
 
      

Version vom 2. Oktober 2013, 14:36 Uhr

Formular

Inhalt
Schriftfarbe:
Schriftart:
Schriftgröße:
Ausrichtung:
Verschiedene Formatierungen:





Hintergrund
Farbe:
Rahmen
Breite: Erweitert
Links:
Rechts:
Oben:
Unten:
Art: Erweitert
Links:
Rechts:
Oben:
Unten:
Farbe: Erweitert
Links:
Rechts:
Oben:
Unten:
Krümmung: Erweitert
Oben links:
Oben rechts:
Unten rechts:
Unten links:
Größe und Abstände
Breite:
Höhe:
Verhalten bei Übergröße des Inhalts:
Innenabstand: Erweitert
Links:
Rechts:
Oben:
Unten:
Außenabstand: Erweitert
Links:
Rechts:
Oben:
Unten:
Position und Elementausrichtung
Textumfluss:
Absatz:
Positionierung:
Links:
Rechts:
Oben:
Unten:
Ebenenposition:
Generatorspezifisches
Ausgabe:


Vorschau:
Generierter Quelltext

Vorschau

Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).

Dieser Text steht in dem Kasten, den du zu formatieren versuchst. Der kann beliebig lang sein.

Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.

Mahlzeit! Dieser Text hier befindet sich vor der Zeile. Genau genommen in einem p-Element (das entspricht einem Absatz). Dies ist der Teil der Zeile, den du zu formatieren versuchst. Der kann beliebig lang sein. Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.

Abgerufen von „https://www.stupidedia.org/stupi?title=Hilfe:Stylesheets/Generator&oldid=1997636“

Linktipps: Faditiva und 3DPresso