theme/css for introduction slides on GitHub
D.C. Ernst
Caleb Troughton
deck-container. So within your page you can make a <div class="deck-
container"> and put your slides in there. By default the width of
that deck should be set to auto, just like any other element. But you
WILL need to specify a height for it in CSS:
.deck-container {
height: 480px; // Or whatever height fits your slides
}
> ../css/common.css <http://imakewebthings.github.com/deck.js/css/common.css>">.
> Thanks.
>
> Dana
D.C. Ernst
Sure. The slides just need to be inside an element with a class of
deck-container. So within your page you can make a <div class="deck-
container"> and put your slides in there. By default the width of
that deck should be set to auto, just like any other element. But you
WILL need to specify a height for it in CSS:.deck-container {
height: 480px; // Or whatever height fits your slides
}
Caleb Troughton
What closing div? As for the slide backgrounds: none of the .slide
elements have a background. Only the .deck-container element.
The introduction deck in the /introduction folder of the download uses
the <body> element as the deck container (by giving it a class of deck-
container). Again back to the original question in this thread, you
can use a whole other element as the deck container if you wish, and
thats what I do on my project page version of the introduction. It's
just a <div> with class of deck container. In both cases you put your
slides and any extension html inside the container.
<!-- Full window deck (the download intro) -->
<body class="deck-container">
<section class="slide">...</section>
<section class="slide">...</section>
<section class="slide">...</section>
<!-- extension snippets -->
</body>
<!-- Deck inside some other element (the project page intro) -->
<body>
<div class="deck-container">
<section class="slide">...</section>
<section class="slide">...</section>
<section class="slide">...</section>
<!-- extension snippets -->
</div>
</body>
From there you can give the body a background (my noise speckle thing)
and the deck container another background:
body {
background: ...;
// You'll also want to have html and body height set to 100% in the
case of my example
}
.deck-container {
width: ...;
height: ...;
background: ...;
Dana Ernst
> Sorry, I don't understand what you mean by the closing div question.
> What closing div?
I meant: where do you put </div>? You answered my question in your response.
> As for the slide backgrounds: none of the .slide
> elements have a background. Only the .deck-container element.
>
> The introduction deck in the /introduction folder of the download uses
> the <body> element as the deck container (by giving it a class of deck-
> container). Again back to the original question in this thread, you
> can use a whole other element as the deck container if you wish, and
> thats what I do on my project page version of the introduction. It's
> just a <div> with class of deck container. In both cases you put your
> slides and any extension html inside the container.
This makes perfect sense. Thanks.
> From there you can give the body a background (my noise speckle thing)
> and the deck container another background:
>
> body {
> background: ...;
> // You'll also want to have html and body height set to 100% in the
> case of my example
> }
Can you explain your comment?
As usual, thanks for your assistance. (I feel slightly bad about monopolizing the Google Group.)
Dana
Caleb Troughton
already contains a rule:
html { height:100% }
It also has a rule that gives 100% height to the deck container, but
only if it is the body element:
body.deck-container { height: 100%; }
If people use an element that is not the body as the deck container I
can't make the assumption that they want it to be 100% of the height
of the parent, hence why I say you need to set the height in your
CSS. If somebody is embedding the deck in a page, they probably don't
need to do anything else.
But in the case of my contrived example, and your specific question of
getting a background on the body and a background on the container,
all you have inside the body tag is the deck-container div. The body
will naturally end where the deck container ends, and with it the
body's background. But you want the background to take up the whole
screen, even if the content is too short, so we would force the height
of the body to be 100%.
tl;dr:
You can disregard that comment, but if you find your body background
doesn't reach the bottom, try adding body { height:100% }