Quellcode Referenz

Allgemeine Diskussionen über WebYep
Post Reply
Heiho
Posts: 4
Joined: Fri Jan 13, 2012 4:50 pm

Quellcode Referenz

Post by Heiho » Fri Jan 13, 2012 5:02 pm

Hallo zusammen! Gibt es irgendwo eine Referenz für den Quellcode? Ich schreibe lieber direkt in HTML weil ich da nachvollziehen kann, was ich tue. Hab keinen Dreamweaver und bisher das WebYep auch so zum laufen gebracht. Habe aber jetzt das Problem, floatende Bilder mit margin in einem Text zu platzieren. Wenn aber keine Bilder eingegeben werden soll dann auch der margin verschwinden (geht also nicht, einfach einen div um das php-Element zu legen). Hab auf einer anderen Seite gesehen, daß dies möglich ist, nur hab ich nicht sehen können, wie das gemacht wird. Würde mich auch interessieren, ob es eine Liste der Klassen (wie in der Referenz/Bildergalerie) für alle Elemente gibt.

Kann mir jemand einen Tip geben?

marcus
Objective Development
Objective Development
Posts: 170
Joined: Tue Nov 30, 2010 1:25 pm

Re: Quellcode Referenz

Post by marcus » Fri Jan 13, 2012 5:59 pm

Heiho wrote:Kann mir jemand einen Tip geben?

Die WebYep Dokumentation enthält alles was man wissen muss. Sie ist zwar in erster Linie für Dreamweaver gedacht, enthält aber auch die Codefragmente für jene die ihre Seiten lieber manuell erstellen.

Die Referenz für den Quellcode befindet sich im Abschnitt "Referenz" beim jeweiligen Element ganz oben (Klick auf "Detail...").
Eine Liste der CSS-Klassen findet sich ebenfalls in der Referenz (rel. weit unten beim entsprechenden Element).

Die Sache mit dem Bild+margin ist kein WebYep-spezifisches Problem, sondern rein mit HTML + CSS zu lösen.
Der Trick besteht darin, den richtigen Selektor zu wählen und dort dann die gewünschten Regeln einzutragen.
Ein <div> mit einem optionalen Bild (welches nur bei Vorhandensein einen margin bekommen soll), könnte z.B. so aussehen:
HTML

Code: Select all

<div class="container">
  <?php webyep_image("meinOptionalesBild", false, "", "", "", 70, 90, true); ?>
  <?php webyep_longText("Text", false, "", false); ?>
</div>

CSS

Code: Select all

.container {
  /* hier die allgemeinen Styles für den Absatz */
}
.container img {
  float: left;
  margin: 0 10px 10px 0;
}

Wenn also ein Bild vorhanden ist, dann greift die zweite Regel und das Bild "floated" links mit je 10px Abstand rechts und unten. Wenn kein Bild angegeben wurde, dann tut die Regel entsprechend nichts.

Heiho
Posts: 4
Joined: Fri Jan 13, 2012 4:50 pm

Re: Quellcode Referenz

Post by Heiho » Fri Jan 13, 2012 7:30 pm

Ja vielen Dank! Das hat jetzt geklappt, manchmal ist man doch betriebsblind.

Allerdings kam dann die Frage auf: was ist, wenn die Bilder eine Unterschrift haben sollen? Ich müßte ja dann einen div nehmen, in dem sowohl das Bild wie auch die Unterschrift liegen, damit sie gemeinsam floaten. mit

Code: Select all

.container p { margin: 10px; }

funktionierts nicht. Wäre schön.

Eine Liste der css-Klassen habe ich allerdings nur bei der Bildergalerie gefunden.

Heiho
Posts: 4
Joined: Fri Jan 13, 2012 4:50 pm

Re: Quellcode Referenz

Post by Heiho » Fri Jan 13, 2012 7:45 pm

Hab ich vergessen: der übliche Weg mit einer Definitionsliste, den ich versucht habe, führt halt dazu, daß ich den Abstand nur vom Bild beeinflussen kann, nicht aber vom Text.

marcus
Objective Development
Objective Development
Posts: 170
Joined: Tue Nov 30, 2010 1:25 pm

Re: Quellcode Referenz

Post by marcus » Fri Jan 13, 2012 8:10 pm

Heiho wrote:... was ist, wenn die Bilder eine Unterschrift haben sollen? Ich müßte ja dann einen div nehmen, in dem sowohl das Bild wie auch die Unterschrift liegen, damit sie gemeinsam floaten.

Genau so wird's gemacht. :D

Um nochmal das vorige Beispiel zu bemühen:
HTML

Code: Select all

<div class="container">
  <div class="floatingImage">
    <?php webyep_image("meinOptionalesBild", false, "", "", "", 70, 90, true); ?>
    <div class="imageCaption">
      <?php webyep_shortText("optionaleBildunterschrift", false); ?>
    </div>
  </div>
  <?php webyep_longText("Text", false, "", false); ?>
</div>

CSS

Code: Select all

.container {
  /* hier die allgemeinen Styles für den Absatz */
}
.container .floatingImage {
  float: left;
}
.floatingImage img {
  margin: 0 10px 5px 0;
}
.floatingImage .imageCaption {
  font-size: 0.8em;
  color: #888;
  margin: 5px 0;
  max-width: 70px; /* damit die Unterschrift nicht breiter wird als das Bild, sondern umbricht */
}
Ich habe die Bildunterschrift auch noch optional gemacht (deshalb die geänderten margins) und in ein separates <div> gepackt, damit man es vernünftig addressieren kann. Falls div.imageCaption leer ist, beeinflussen die Styles nicht das Layout (da keine expliziten Größen wie z.B. width oder height gesetzt werden). Das Prinzip sollte klar sein, oder?

Heiho wrote:Eine Liste der css-Klassen habe ich allerdings nur bei der Bildergalerie gefunden.

Nicht jedes WebYep-Element wird vom System mit CSS versehen. Bei Texten wäre das z.B. eher kontraproduktiv. Wenn ein WebYep Text-Element mittels CSS gestyled werden soll, dann gilt die Webdesign-Grundregel Nr.1: pack's in einen Container und wende das CSS darauf an (siehe obiges Beispiel, imageCaption).

Heiho
Posts: 4
Joined: Fri Jan 13, 2012 4:50 pm

Re: Quellcode Referenz

Post by Heiho » Fri Jan 13, 2012 9:53 pm

Saubere Lösung, vielen Dank!!!

Post Reply