0

I'm new to programming and was hoping someone could help me with this one.

I have multiple pages and would like them all to be different colors. I wrapped all of my code in a class and then styled them like this:

.tech_page{   
    background-color: #F4C0CC;
}

And the body looks like this:

 <body>

    <div class="tech_page">

       <div class="nav-bar"> 
           <nav> <a href="/"><p class="nav-home"> Home </a> </nav>
           <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
           <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
           <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
           <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
        </div>

    </div>

</body>

But only the nav bar is getting the background color! Everything else remains white. The entire span of the page gets the background color if I put a class on the body but I don't think that's clean code. Does anyone have any ideas?

erin belot
  • 1
  • 1
  • where you have added the class tech_page to your html code ?? in your code there is not an element witn this class – ScaisEdge Sep 08 '18 at 06:26
  • Sorry! That must have been confusing, it was just an error when I was writing the question. Fixed it! – erin belot Sep 08 '18 at 06:34

3 Answers3

0

if you want all the body use the class tech_page you should add the class 

<body class='tech_page'>

    <div class="projects_page">

       <div class="nav-bar"> 
           <nav> <a href="/"><p class="nav-home"> Home </a> </nav>
           <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
           <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
           <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
           <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
        </div>

    </div>

</body>

or you could used 

body {
    width: 100%;
    height: 100%;
}
.tech_page{   
    background-color: #F4C0CC;
    width: 100%;
    height: 100%;
}

and for html 

<body>

    <div class="tech_page">

       <div class="nav-bar"> 
           <nav> <a href="/"><p class="nav-home"> Home </a> </nav>
           <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
           <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
           <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
           <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
        </div>

    </div>

</body>
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
  • Hey! Thanks for getting back to me, I tried this and it definitely works but I was told it wasn't clean code. Do you know of another way? I've tried using percentages to expand the height and width but it wasn't working too well. Do you think grid would fix this problem? – erin belot Sep 08 '18 at 06:30
  • your comment is not clear .. your question is about a background color related to a class that don't appear in page .. .. my answer suggest you of adding the class to the right element ..if you need others css attribue for the class eg: `height:100vh;` (for a full height )..then add also this value to the class .. .. hope is clear .. – ScaisEdge Sep 08 '18 at 06:34
  • anyway ... what do you mean with "I was told it wasn't clean code." ? .. the class (or ID) is tipically for manage css attribute to html tag .. – ScaisEdge Sep 08 '18 at 06:39
  • That's true, it is typically used for that. I was told by my teacher not to attach a class to the body tag though as it's not good practice. I was hoping there was a way with grid or width/height to solve the problem. Thanks for your help but I couldn't quite get height:100vh; working. Not sure if me or the code – erin belot Sep 08 '18 at 06:41
  • I canìt see all your code so i can't answer for the height problem .. but if you don't want assit to body the class .. the you could set body height and width:100% and the add a nested div with class you need with heigh and width 100% and the background color .. but if you code have error ..,this suggestion can't work .. – ScaisEdge Sep 08 '18 at 06:46
  • Hey thanks for your help, that's not working either. Ahh well, I'll keep trying – erin belot Sep 08 '18 at 06:48
  • anyway i have update the answer with a suggestion hope is useful .. – ScaisEdge Sep 08 '18 at 06:49
0

By adding height:100vh in your tech_page class should solve your issue.

Shubham Yerawar
  • 660
  • 5
  • 9
0

Either write the css in any css file or write the same in style tag as given below.You can write similar css for newly created page.Note:Best practice is to create a css file and write css.Here only tech_page class background is changed ,if you want o change the whole page background you can write css for element css of top level div class.Try it.

<html>
    <head>
    <title></title>
     <style type="text/css">
     .tech_page{   
        background-color: #F4C0CC;
    }
     </style>
    </head>
    <body>

        <div class="tech_page">

           <div class="nav-bar"> 
               <nav> <a href="/tech"><p class="nav-home"> Home </a> </nav>
               <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
               <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
               <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
               <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
            </div>

        </div>

    </body>
    </html>
  • Hey! Thanks for helping out, the css is in a css folder. Sorry! I should have been more clear. Do you have any thoughts on how to get the entire background one color? – erin belot Sep 08 '18 at 06:44
  • Yes . just set height and width of your top level div to 100%.eg: .tech_page{ background-color: #F4C0CC; width:100%; height:100%; } –  Sep 08 '18 at 07:54
  • Just try it. :) –  Oct 12 '18 at 09:23