Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Moving text to border of screen #710

Closed
lcottereau opened this issue Nov 16, 2013 · 7 comments
Closed

Moving text to border of screen #710

lcottereau opened this issue Nov 16, 2013 · 7 comments

Comments

@lcottereau
Copy link

I am trying to devise CSS properties to move content to the border of the screen. Two use cases are :

  • a copyright notice when the background image has a license requiring it
  • the title when I have a slide with just title and image and I don't wan't the title in the middle

I have tried position:absolute but this just moves the content inside the <section> which does not fill the screen.

Is that possible with the current HTML design of the page ? If so, could anybody point me in the right direction ? If not, would you please consider doing the necessary changes ?
@criesner
Copy link

All of my slides are pretty customized, I use margins to move images around and position absolute when necessary. Not sure why yours isn't working, do you have class name specified and a height/width & top/left declared? Post a link of the problem maybe.

        <!-- PAGE 4-->
        <section>
                <img id="p4-img1"src="img/trackings-davis-p5-alicia-shovels.jpg" />
                <img id="p4-img2"src="img/trackings-davis-p5-girl-chicken.jpg" />

                <img id="p4-img3" class="draggable" src="img/trackings-davis-p5-journal-chicken.png" />

            <div class="credits">
                        <ul>
                            <li class="story">PHOTOS <span class="double-line">||</span> <a href="trackings-            alicia_greenleaf.html"> ALICIA GREENLEAF </a></li>
                            <li class="story-name">TRIP <span class="double-line">||</span> <a href="trackings-alicia_greenleaf.html"> SF-UC DAVIS 2012</a> </li>
                        </ul>
                    </div> 
        </section>

/* PAGE 4*/
#p4-img1 {
width: 65.5% !important;
height: auto;
margin-left: 0;
margin-top: 2%;
}

#p4-img2 {
width: 30.5% !important;
height: auto;
margin-left: 2.5%;
margin-top: 2%;
}

#p4-img3 {
width: 89% !important;
height: auto;

margin-top: 7px;
}


.credits ul{
    display: block;
    width: auto;
    height: auto;

    position: absolute;
    top: 34.5%;
    right: 1%;

    z-index: 9999 !important;
     }

/* ---------------------------------- */

@lcottereau
Copy link
Author

Thank you for your proposal, but I don't see how that solves my problem... I understand you can move the text around but my problem is to stick that black text background on the border of the screen (whatever the screen resolution is). All I can do right now is to move towards the bottom (how much depends on the resolution of the screen)

@criesner
Copy link

I have my Nav setup to be fixed on every page which works perfect for me. Just add a position:fixed; bottom:0; left:0; and center your text within that

<body>

 <nav>  
  <div class="articles">
  ARTICLE
  </div>
  </nav> 

  <section>
  ect..
  </section>

  </body>



nav{
display:block;
width:100%;
height:25px;

position:fixed;
bottom:0px;
left:0px;

padding-top:12px;
padding-left:20px;

z-index: 9999!important;    
}

.articles{
position: absolute;
top: 0;
left: 0;
}

@lcottereau
Copy link
Author

I think my problem is that my element is inside the section elements...

@hakimel
Copy link
Owner

hakimel commented Nov 26, 2013

Right, if you have content inside of a slide <section> it is difficult to predictably align it to the edges of the screen. The best option is to configure your presentation size (and thus the <section>'s) to fill 100% of the browser viewport: https://github.com/hakimel/reveal.js#presentation-size.

Fixed elements like a copyright notice you should be placed outside of the <div class="slides"> container.

@hakimel hakimel closed this as completed Nov 26, 2013
@zkwsk
Copy link

zkwsk commented Apr 23, 2014

I'm struggling with this issue as well. I need to place some dynamic content in the header of my slides, so I can't put the element outside the section. I tried setting width and height of the presentation to 100% as suggested above and I set my header element to position:fixed; top: 0px; but the section element is still not filling the viewport. Here's a demo: https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

@rofrol
Copy link

rofrol commented Jan 21, 2016

My solution #180 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rofrol @lcottereau @hakimel @zkwsk @criesner