Kann ich ausrichten reveal.js Folien an der Spitze der Seite?

Ich bin mit reveal.js und damit, herauszufinden, wie zu zwingen, meine Dias zu der oberen linken Ecke der Seite. Das scheint, wie es sollte einfach sein, aber wenn ich den Element-inspector es so radikal verändert die Seite, die ich kann nicht einmal anfangen zu null auf, wie verschieben Sie die Folien nach oben.

Hinzufügen dieser zu meinem Thema:

.reveal .slides>section,
.reveal .slides>section>section {
    padding: 0;}

Stieß es eine smidge (offenbaren.css hat die Polsterung setzen zu 20px 0), aber es ist noch Leerraum am oberen Rand jeder Folie.

InformationsquelleAutor Amanda | 2014-03-17

css reveal.js

19

Bewegen Sie Ihre Folien an die Spitze ist nur ein configuration option von reveal.js.
```
Reveal.initialize({
    center: false
}
```
~~ich habe noch nicht herausgefunden, wie um Sie zu bewegen zu der linken, obwohl.~~

Horizontale Ausrichtung von CSS:
```
.reveal .slides { margin: 0; }
```
- +1 — Für die horizontale Ausrichtung, all die üblichen verdächtigen gelten: text-align, margin: 0 auto, position: absolute; left: 50%; margin-left: -[halfWidth]px...
- Ich es geschafft, verschieben Sie den Inhalt auf der linken Seite durch hinzufügen .reveal .slides { margin: 0; } auf die Vorlage.
- Ich hatte zu tun, die 0 margin auch, aber das scheint es zu tun.
InformationsquelleAutor riezebosch
2

Ein wenig schwierig herauszufinden, ohne code zu arbeiten, aber dies kommt in den Sinn. Hoffe, es hilft. Ans korrigieren Sie mich, wenn ich mich den falschen Weg gehen
```
var d = document.getElementById('slides');
   d.style.position = "absolute";
   d.style.left = "230px";
   d.style.top = "207px";
```
BEARBEITET FIDDLE

Diese legt es auf die top-Links, aber, nachdem der Bildschirm nimmt eine bestimmte Größe, es wechselt. Aber es scheint, wie es ist betroffen von der JSFiddle Reaktionsfähigkeit. Sie können in der Lage sein dies zu kontrollieren, die mit @media (min-width: ###px), Aber es ändert sich nicht, wenn der Bildschirm vergrößert.

Hoffe, es half

p.s. die Koordinaten sind absolute aufgestellt, um jsfiddle Fenster, diese möglicherweise angepasst werden, wenn in der realen Anwendung
- Das scheint nicht, es zu tun, leider.
- ok, ich warf einen Stein in die Dunkelheit, ohne zu sehen, einen code. Können Sie uns ein Turnschuh?
- jsfiddle.net/x2neT/1 zeigt das problem; jsfiddle.net/x2neT/3 zeigt, wie es bricht mit CSS (oder mit tywalkers, leider.)
- Ich aktualisiere meine Antwort
InformationsquelleAutor LOTUSMS
2

So viele Menschen mit reveal.js ich wollte Verringerung der vertikalen Leerzeichen an der Spitze der einzelnen Folien.

Dem problem, einen css-Stil gespritzt von reveal.js Skript, so dass die Verwendung direkt css um dieses Problem zu lösen, wird ein fehlschlagen des Skripts werden diese default Werte.

In der Tat für jeden section tag das Skript berechnen und Spritzen Sie das css-Attribut top. Dies geschieht in Zeile Ein tausend sieben hundert eins und sechzig version 3.4.1 .
```
slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
```
So ändern Sie die Rechnung für Ihre erwarteten Ergebnisse.
An der Spitze die meisten:
```
slide.style.top = 0;
```
Zu reduzieren, die Erhöhung der Größe der divisor mit dem Wert (standardmäßig 2), hier verwende ich 3:
```
slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 3, 0 ) + 'px';
```
Glück

InformationsquelleAutor bioinfornatics
2

Können Sie verwendet Feste Positionierung, wenn Sie möchten, dass die Folien bleiben in der gleichen Stelle, wie Sie Blättern. Aber wenn Sie wollen, dass Sie bleiben an der Spitze, die Sie verwenden müssen, um die absolute Positionierung.
```
.slides {
    position: absolute;
    top: 0;
    left: 0;
}
```
Damit wird der div-Element an der 0. pixel von oben und die 0. pixel von Links. Natürlich, wenn Sie möchten, einige Trennung ändern können Sie diese zahlen.
- Das scheint nicht, es zu tun, leider. Nichts zeigt sich. Einfache demo an jsfiddle.net/x2neT/1
- Reveal.js betroffen ist der Abschnitt von code... nicht sicher, wo. Ich würde Lesen müssen, um in den Quellcode. Ich kann nicht einstellen, die Höhe, Breite, oder etwas für die Abschnitte. Nur die Farben. Dies ist der Grund, warum hand-Codierung, die diese Art von Animationen kann nützlicher sein. Am Ende des Tages, Sie wissen, was geschrieben ist und was das zu beeinflussen, was. Wenn Sie tot-set auf mit reveal.js github.com/hakimel/reveal.js/blob/master/css/reveal.css Sie müssen die Formatvorlagen ändern, die.
InformationsquelleAutor tywalker
1

Ich denke, dass kann man die Folie so weit von der Seite wie Sie wollen mit der CSS unter. -5% ist nicht den ganzen Weg an die Spitze, aber Sie können eine größere Zahl, wenn Sie es wünschen näher.
```
.reveal p:first-child { margin-top: 0px; }
.reveal .slides > section { padding: 0px; }
.reveal div.slides { position: absolute; top: -5%; }
```
InformationsquelleAutor Terry Brown

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.