Tom: Wo darf CSS definiert werden?

Hello,

ich schreibe eine Funktion (eigentlich schleife ich nur noch dran herum), die eine Bildergalerie aus einem Bilderverzeichnis und einer Infodatei erzeugt.

Die Bilder sollen entweder vertikal oder horizontal angezeigt werden können. Die vertikale Anzeige ist soweit fertig. Wenn eine gewisse Gesamthöhe in px erreicht ist, hört die Funktion auf, <img>-links zu erzeugen.

Dafür wird das CSS bisher ganz normal im Head der HTML-Seite definiert

<style type="text/css">
  <!--

.pics
    {
      margin:0;
      padding-bottom:<?php echo $pic_padding; ?>px;
    }

.linkpic
    {
      border:none;
    }

-->
  </style>

Ausgabezeile:

$pics .= "<p class="pics">$link_1<img class="linkpic" {$_piclist['imgsrc'][$dirkey]} />$link_2</p>\n";

Wie man teilweise auch alleine erkennen kann, funktioniert das so nur vertikal, weil
a) die height-Attribute der Bilder addiert werden (kann man nicht sehen, erzähle ich dehalb)
b) Das padding für das <p class="pics"> unten dran hängt.

Wenn ich jetzt die Ausgaberichtung auf horizontal umstellen will, muss ich
a) die width-Attribute der Bilder addieren (das kann die Funktion locker)
b) das padding rechts ans <p> anbinden

Ich will aber nicht unbedingt für jedes Bild ein 'style="padding-right:..."' einbauen, sondern da möglichst zentral regeln.

Nun endlich meine Frage:

Darf ich mitten in der HTML-Datei, die ja von der Funktion teilweise generiert wird, eine weitere CSS-Section einrichten, die dann die Werte erst festlegt?

(Bin gleich bis Nachmittag unterwegs und würde mich freuen, wenn sich trotzdem ein paar "Wissende" dazu durchringen könnten, mir einige grundlegende Hinweise dazulassen)

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
  1. Hi,

    padding-bottom:<?php echo $pic_padding; ?>px;

    bei clientseitigen Fragen bitte serverseitigen Code eliminieren, danke.

    Ich will aber nicht unbedingt für jedes Bild ein 'style="padding-right:..."' einbauen, sondern da möglichst zentral regeln.

    Das ist sehr vernünftig.

    Darf ich mitten in der HTML-Datei, die ja von der Funktion teilweise generiert wird, eine weitere CSS-Section einrichten, die dann die Werte erst festlegt?

    Nein. <style> ist nur im <head> erlaubt.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hello Cheatah,

      toll, dass Du so schnell antwortest.

      Darf ich mitten in der HTML-Datei, die ja von der Funktion teilweise generiert wird, eine weitere CSS-Section einrichten, die dann die Werte erst festlegt?

      Nein. <style> ist nur im <head> erlaubt.

      Also wieder die alte Methode, und in jedem <p>-Tag ein eigenes style="..." .
      Komme ich nicht drum herum?

      Harzliche Grüße aus http://www.annerschbarrich.de

      Tom

      --
      Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
      Nur selber lernen macht schlau
      1. Hallo Tom!

        Wäre es denn eine Option, die Funktion vor der Ausgabe des <head>-Teils laufen zu lassen, aber dabei die Ausgabe mittels Output Buffering abzufangen und in eine Variable zu schreiben, in Abhängikeit von der Ausrichtung der Bilder die Style-Anweisungen zu generieren, und dann im <body> die Variable mit der Ausgabe des Buffers zu schreiben?

        Gruß

        Matthias

        --
        ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
        http://www.makaio.de/quotations
        1. Hello Matthias,

          Wäre es denn eine Option, die Funktion vor der Ausgabe des <head>-Teils laufen zu lassen, aber dabei die Ausgabe mittels Output Buffering abzufangen und in eine Variable zu schreiben, in Abhängikeit von der Ausrichtung der Bilder die Style-Anweisungen zu generieren, und dann im <body> die Variable mit der Ausgabe des Buffers zu schreiben?

          *uff* gerade noch gesehen, vor dem Abrauschen. Da habe ich jetzt ein wenig Zeit, drüber nachzudenken... Ist zumindest überlegenswert.

          Allerdings bekomme ich ja noch ein Problem.
          Das Picture-Modul wird als PHP-Klasse natürlich in mehreren Scripten eingesetzt. Dann muss ich mir sowieso etwas ausdenken, um Namenskonflikte zu vermeiden, wenn ich eine scriptweite CSS-Klasse benutze.

          Und man muss, wenn man OB_start() einsetzt, dies ja im Script (oder zumindest harmonisert zwiwchen allen Klassen) tun, und nicht ausschließlich in der PHP-Picture-Klasse. Andere Classes könnte das ja auch beanspruchen. Das ist mir noch nicht ganz klar, wie ich das regeln soll.

          Die meisten meiner Scripte geben zwar immer erst etwas aus, wenn alles berechnet ist. Mit Ausnahme der Datenklötze, die Logfiles auslesen. Die kann ich nicht buffern.

          Harzliche Grüße aus http://www.annerschbarrich.de

          Tom

          --
          Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
          Nur selber lernen macht schlau
      2. Hi,

        Also wieder die alte Methode, und in jedem <p>-Tag ein eigenes style="..." .
        Komme ich nicht drum herum?

        zu Matthias' Vorschlag fiele mir noch ein, die CSS-Daten per <link> zu referenzieren und mit einem ähnlichen Mechanismus wie die Seite selbst zu bauen.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  2. Hi,

    <style type="text/css">
      <!--

    .pics
        {
          margin:0;
          padding-bottom:<?php echo $pic_padding; ?>px;
        }

    .linkpic
        {
          border:none;
        }

    Mach daraus durch Ausnutzung des descendant selectors

    .vertical .pics    { /*...*/ }
    .vertical .linkpic { /*...*/ }
    .horizontal .pics  { /*...*/ }
    .horizontal .pics  { /*...*/ }

    und generiere in das div-Element, das die ganzen Bilder zusammenhält, ein class-Attribut mit dem zur gewünschten Ausrichtung passenden Wert.
    Im Grunde genommen kannst Du dann auf die Klassen .pics/.linkpic verzichten und diese durch ihre Elementnamen ersetzen:

    .vertical p     { /*...*/ }
    .vertical img   { /*...*/ }
    .horizontal p   { /*...*/ }
    .horizontal img { /*...*/ }

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hello,

      Hi,

      <style type="text/css">
        <!--

      .pics
          {
            margin:0;
            padding-bottom:<?php echo $pic_padding; ?>px;
          }

      .linkpic
          {
            border:none;
          }

      Mach daraus durch Ausnutzung des descendant selectors

      .vertical .pics    { /*...*/ }
      .vertical .linkpic { /*...*/ }
      .horizontal .pics  { /*...*/ }
      .horizontal .pics  { /*...*/ }

      und generiere in das div-Element, das die ganzen Bilder zusammenhält, ein class-Attribut mit dem zur gewünschten Ausrichtung passenden Wert.
      Im Grunde genommen kannst Du dann auf die Klassen .pics/.linkpic verzichten und diese durch ihre Elementnamen ersetzen:

      .vertical p     { /*...*/ }
      .vertical img   { /*...*/ }
      .horizontal p   { /*...*/ }
      .horizontal img { /*...*/ }

      Danke. Kalsse Idee. Werde ich verfolgen. Bin gerade den Berg wieder rauf. 340m Höhenunterschied mit dem Rad auf 19km. Leider nicht kontinuierlich. Muss wohl doch noch noch viel über, so ohne Auto im Harz. Aber ich will das Jahr schaffen  ;-))

      Bis später. Das heiße Bad ruft.

      Harzliche Grüße aus http://www.annerschbarrich.de

      Tom

      --
      Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
      Nur selber lernen macht schlau
  3. Hello,

    wollte hier der Vollständigkeit halber noch das Resultat meiner Überlegungen hinterlassen.

    Ich definiere nun jeweils die Klassen für waagerechte und für senkrechte Anzeige separat.

    Wenn die PHP-Funktion genutzt wird, ist ja schon bekannt, welche Ausgaberichtung gewünscht ist und welche CSS-Klassen dafür zur Verfügung stehen.

    Ich übergebe der Funktion nun ein Array mit den Klassennamen
      $_classes = array('a'=>'klasseFürA', 'p'=>'KlasseFürP', 'img'=>'KlasseFürImg');

    in der Funktion werden die Klassen dann in die Tags eingebaut, wenn ich sie unter den Indizes
      'a' 'A' 'p' 'P' 'img' 'Img' 'IMG' ... übergeben habe. Wenn einer fehlt, kann der Klassenanme
      eben nicht eingebunden werden. Wenn einer zuviel ist, oder falsch geschreiben wurde, ebenfalls
      Pech gehabt.

    Aber ich denke, so ist das für den Verweender der Funktion am verständlichsten und es gibt vor allem keine Namenskonflikte, da die Klassennamen vom Programmierer frei vergeben werden können.

    Danke nochmal für die Tipps. Sie haben mir geholfen, die verschiedensten Möglichkeiten zu finden.

    Harzliche Grüße aus http://www.annerschbarrich.de

    Tom

    --
    Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
    Nur selber lernen macht schlau