HTML and CSS - how do I create buttons and transition pages

Question

I asked a question earlier on somewhere I was stuck and it was solved. Now because I'm a beginner and don't have the money to buy tutorials and all I will be teaching myself and asking frequent questions here. Now my question is on my page is how do I make buttons on the right hand side of my page only where the white section is and how do I modify those buttons? Note that the black on the header and the footer are my basic borders and the white space is where I'm going to put all my website information (this is for my IT coursework so it's basic). Now when I press a button how do I make the information only on the white space transition to the next part of the website? E.g. Say I click a button called "Info" - I want the page I'm currently on to transit to that say the page slides or what not and I only want this to happen on the white section of the page. Here is my code:

I will be so grateful for anyone who goes out their way to help me in this process. and also I'm confused to as why the footer won't appear exactly the same as the top banner.

html {
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

.top-section {
    padding: 30px 0;
    margin-bottom: 0;
    color: #000000;
    background-color: #000000;
    background-size: cover;
}

.top-section {
    padding-top: 100px;
    padding-bottom: 100px;
}  

.bottom-banner {
  padding: 30px 0;
  margin-bottom: 0;
  color: #000000
  background-color: #000000;
  background-size: cover;
 }

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<title>Upload Festival</title>  
    <head> 
    <!--css-->
    <link href="css/customization.css" rel="custom" style="text/css">
  </head>
<body class="index">
<header class="top-section" role="banner"></header>
<div class="bottom-banner">
</div>
</body>
</html>

This question kind of mixes a lot of different queries. a) Ways of letting the user navigate to another page. b) How to style an HTML element to appear to the right / left of others. The best way to use Stack Overflow is once you have a localized, specific issue that you can't figure out by basic searches - most of us learn web programming by various head-scratching moments that we have to search the web for tutorials and resources for. Most of those tutorials we find are free. When you're asking for individual attention, it should *usually* be because nothing else anywhere solves your issue. — Katana314, Mar 01 '15 at 23:09
Please don't use snippet feature unless there is actually something to demonstrate. In this case, there was nothing but a blank band. Removed. Thanks. — Sparky, Mar 01 '15 at 23:30

score 0 · Accepted Answer · answered Mar 01 '15 at 23:15

To make buttons appear on the very right side, use the following css:

button {
    float:right;
    /*Other Modifications Go Here*/
}

This will make the button align itself with the right side of the window instead of the usual left. To modify all buttons, use the css above. If you want to do only one button give it an class called info in the HTML:

<button class="buttonName">Click Me</button>

Then in your CSS type:

.buttonName {
    float:right;
}

If you want your button below your header, simply put the button tag after your header and before your footer.

If you want to make the header and footer disappear on the click of a button you will need to add JavaScript to your page. Simply add (in the head tags)

<script>
    function hideBlack() {
        document.getElementByTagName("header").display="none";
    }
</script>

Then in your body tags of your HTML, change your buttons code so that it has an 'onclick' attribute. Here's what it looks like:

<button id="buttonName" onclick="hideBlack()">Click Me</button>

With that attribute, your button will tell the browser to run the JavaScript function called "hideBlack()".

As for your footer not working out, check your example against mine.

Your footer didn't work because in your CSS, you forgot to add a semi-colon at the end of one of your styles which screwed up the background-color, leaving it white.

Thanks you for this mate. I didn't want to remove the footer and header when I click a button I just wanted the white space with all the information in to slide over to a next set of information. Is that possible? — Xanmashi, Mar 02 '15 at 07:25
Are you looking for a sliding motion where you can see that white space sliding to reveal another white slide (with the header and footer still intact)? — Thomas Gerot, Mar 07 '15 at 21:57
Could you post a JSfiddle of your current code? It might be a bit easier for me to work on. — Thomas Gerot, Mar 16 '15 at 02:28

HTML and CSS - how do I create buttons and transition pages

1 Answers1