21 Replies Latest reply on Oct 12, 2014 1:09 PM by Nancy OShea

    why aren't objects in my header in my header?

    kesposito16

      I have objects with in my header? Some are in my header, some are not. what am i doing wrong?

       

       

      http://www.mamacinis.com/

        • 1. Re: why aren't objects in my header in my header?
          osgood_ Level 8

          kesposito16 wrote:

           

          I have objects with in my header? Some are in my header, some are not. what am i doing wrong?

           

           

          http://www.mamacinis.com/

           

          What objects in your 'header' are you talking about? Maybe you are talking about the 'Mama Cini's text - if that is the case then it's partly hidden as a result of  your 'header' being fixed - position:fixed; - which means it's taken out of the html natural flow so  <section></section> will sit behind the 'header'.

           

          I don't think its good practice to have something 'fixed' if it will obsure other content on the page. Normally you would use 'fixed' as a narrow strip along the top of the webpage to contain a naviagtion - maybe make your strip a bit less tall.

           

          You could also add some padding-top or margin-top to the 'section' container  to push it clear of the 'header'

           

          Also what is this? vh and vw? - where did you get that from?

           

          height:10vh;

          width:50vw;

          1 person found this helpful
          • 2. Re: why aren't objects in my header in my header?
            kesposito16 Level 1

            css sizing units.

             

            my header is no longer fixed but the objects in my header are still not in my header

            • 3. Re: why aren't objects in my header in my header?
              kesposito16 Level 1

              Header

               

              <header>

              <div class="logo"><a href="../index.html"><img src="../images/mclogo_pop.png" height="45px" width="114px" alt="logo"/></a></div>

              <div id="nav"> (in header but not in header)

              <ul>

              <li><a href="../cookies.htm">Cookies</a></li><li>|</li><li>About</li><li>|</li><li>Contact</li>

              </ul>

              </div>

              <div id="sitename"> (in header but not in header)

              <span style="font-size:14px">fresh baked cookies right to your door</span>

              mama cini's

              </div>

              </header>

              • 4. Re: why aren't objects in my header in my header?
                osgood_ Level 8

                kesposito16 wrote:

                 

                css sizing units.

                 

                 

                Css sizing units are - px, em, %

                 

                kesposito16 wrote:


                my header is no longer fixed but the objects in my header are still not in my header

                 

                I don't know what objects you are referring to?

                • 6. Re: why aren't objects in my header in my header?
                  osgood_ Level 8

                  Below is your css, cleaned up:

                   

                   

                  wrapper{

                  width:100%;

                  height:100%;

                  }

                  body{

                  margin:0;

                  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

                  }

                  header{

                  font-size:9px;

                  background-image:url(http://www.mamacinis.com/images/mcheader.png);

                  width: 100%;

                  }

                  .logo {

                      padding-top:.8%;

                      padding-left:1.5%;

                      z-index: 99;

                  }

                  #nav {

                  list-style-type:none;

                  padding-left:8%;

                  color:#FFF;

                  font-size:14px;

                  }

                  #nav li {

                      display: inline;

                      padding-left: 60px;

                  }

                  #sitename{

                      padding-right:3%;

                      padding-top:.4%;

                      color:#FFF;

                      font-size:24px;

                  }

                  section{

                  width:100%;

                  background-image:url(http://www.mamacinis.com/images/board.png);

                  background-position:center center;

                  background-size:cover;

                  }

                  .textlogo{

                  margin:0 auto;;

                  padding-top:5%;

                  }

                   

                  p1{

                  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

                  font-size:14px;

                  color:#FFF;

                  padding-left:20%;

                  padding-top:1.5%;

                  }

                  #display_screen{

                  float:left;

                  padding-top:8%;

                  padding-left:16%;

                     

                  }

                  #cookie_menu{

                  float:right;

                  vertical-align: middle;

                  padding-right:10%;

                  padding-top:10%;

                  margin:0;

                  }

                  .footer {

                  background-image:url(http://www.mamacinis.com/images/mcheader.png);

                  width:100%;

                  bottom:0;

                  position:fixed;

                  }

                   

                  #footer_info{

                  font-size:10px;

                  padding-left:10%;

                  padding-bottom:.5%;

                  }

                  #footer_info li {

                      display:inline;

                      padding-left:2%;

                  }

                  1 person found this helpful
                  • 7. Re: why aren't objects in my header in my header?
                    osgood_ Level 8

                    kesposito16 wrote:

                     

                    http://css-tricks.com/viewport-sized-typography/

                     

                    Much of the CSS3 spec is NOT yet supported in the current browsers so its not one of the specs I would consider using at the moment - probably why I've never come across it as yet and believe me I look at dozens of websites code on a daily basis.

                    • 8. Re: why aren't objects in my header in my header?
                      kesposito16 Level 1

                      now my header is an unwieldy beast. it's 3 times the height i need it to be and my text is still not where i want it to be

                      • 9. Re: why aren't objects in my header in my header?
                        osgood_ Level 8

                        kesposito16 wrote:

                         

                        now my header is an unwieldy beast. it's 3 times the height i need it to be and my text is still not where i want it to be

                         

                        Well try positioning the elements where you want them, not in 3 containers following one another, that's why your header is 3 times the height you want it to be - it always was, even before I cleaned up the css.

                         

                         

                         

                        header{

                        font-size:9px;

                        background-image:url(http://www.mamacinis.com/images/mcheader.png);

                        width: 100%;

                        overflow: hidden;

                        }

                         

                         

                        .logo {

                            padding-top:.8%;

                            padding-left:1.5%;

                        float: left;

                        width: 30%;

                        }

                         

                        #nav {

                            float: left;

                            width: 60%;

                        list-style-type:none;

                        padding-left:8%;

                        color:#FFF;

                        font-size:14px;

                        }

                        1 person found this helpful
                        • 10. Re: why aren't objects in my header in my header?
                          kesposito16 Level 1

                          still bigger than i need it to be.

                          • 11. Re: why aren't objects in my header in my header?
                            osgood_ Level 8

                            kesposito16 wrote:

                             

                            still bigger than i need it to be.

                             

                            Then you wil either have to reduce the depth of the logo or move the following text line - 'fresh baked cookies right to your door mama cini's' - somewhere else.

                             

                            Do you have a visual of what you want it to look like?

                            • 12. Re: why aren't objects in my header in my header?
                              kesposito16 Level 1

                              Basically, I want the header to extended not too far below the logo with the navigation sitting next to the logo a little bit above the bottom of the border and the site name and tagline sitting on the same line as the navigation links except on the right. it was like that before i was told to remove absolute positioning

                              • 13. Re: why aren't objects in my header in my header?
                                Nancy OShea Adobe Community Professional & MVP

                                Use three floats instead of position:absolute.

                                 

                                CSS:

                                 

                                .floatLt {float:left: width: 33%}

                                .floatRt {float:right: width:33%; text-align:right}

                                 

                                /**clear floats after header**/

                                header:after {

                                clear:both;

                                display:block;

                                content: ' ';

                                }

                                 

                                HTML:

                                 

                                <header>

                                <div class="floatLt">

                                Logo

                                </div>

                                 

                                <div class="floatLt">

                                <nav></nav>

                                </div>

                                 

                                <div class="floatRt">

                                <h3>Pithy slogan</h3>

                                </div>

                                 

                                </header>

                                 

                                 

                                Nancy O.

                                1 person found this helpful
                                • 14. Re: why aren't objects in my header in my header?
                                  kesposito16 Level 1

                                  I did all that. How do i get my text to back to white from black?

                                  • 15. Re: why aren't objects in my header in my header?
                                    kesposito16 Level 1

                                    i still can't get anything to line up vertically the way i want it to

                                    • 16. Re: why aren't objects in my header in my header?
                                      Nancy OShea Adobe Community Professional & MVP

                                      Before we tackle further CSS problems, let's get your HTML in order.

                                       

                                      <header>

                                      <div class="floatLt"><a href="index.html"><img src="images/mclogo_pop.png" alt="logo" height="45" width="114"></a></div>

                                      <div class="floatLt">

                                      <nav>

                                      <ul>

                                      <li><a href="cookies.htm">Cookies</a> | </li>

                                      <li><a href="#">About</a> | </li>

                                      <li><a href="#">Contact</a> | </li>

                                      </ul>

                                      </nav>

                                      </div>

                                      <div class="floatRt">

                                      <h3>fresh baked cookies right to your door mama cini's</h3>

                                      </div>

                                      </header>

                                       

                                      When you make those corrections, I'll take another look at your CSS.

                                       

                                       

                                      Nancy O.

                                      1 person found this helpful
                                      • 17. Re: why aren't objects in my header in my header?
                                        kesposito16 Level 1

                                        changed. now hwdo i make it look the way i want it to look?

                                        • 18. Re: why aren't objects in my header in my header?
                                          Nancy OShea Adobe Community Professional & MVP

                                          I don't see any changes to your HTML.  It looks exactly like what you had before.  So what's the URL where we can see those changes?

                                           

                                           

                                          Nancy O.

                                          • 20. Re: why aren't objects in my header in my header?
                                            Nancy OShea Adobe Community Professional & MVP

                                            I'm not seeing it. Open your Template.dwt.

                                            Replace everything you have now in your <header> with this code.  Save and populate changes to child pages.  Then upload your index.html page to server.

                                             

                                            <header>

                                            <div class="floatLt"><a href="index.html"><img src="images/mclogo_pop.png" alt="logo" height="45" width="114"></a></div>

                                            <div class="floatLt">

                                            <nav>

                                            <ul>

                                            <li><a href="cookies.htm">Cookies</a> | </li>

                                            <li><a href="#">About</a> | </li>

                                            <li><a href="#">Contact</a> | </li>

                                            </ul>

                                            </nav>

                                            </div>

                                            <div class="floatRt">

                                            <h3>fresh baked cookies right to your door mama cini's</h3>

                                            </div>

                                            </header>

                                             

                                             

                                            Nancy O.

                                            • 21. Re: why aren't objects in my header in my header?
                                              Nancy OShea Adobe Community Professional & MVP

                                              Here's the entire code.

                                               

                                              <!doctype html>

                                              <html>

                                              <head>

                                              <meta charset="utf-8">

                                              <title>Untitled Document</title>

                                              <style>

                                              * {

                                                  margin: 0;

                                                  padding: 0;

                                                  -moz-box-sizing: border-box;

                                                  -webkit-box-sizing: border-box;

                                                  box-sizing: border-box;

                                              }

                                              body {

                                                  font-size: 100%;

                                                  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

                                                  background: #00C6FF;

                                              }

                                              header {

                                                  padding: 0 1%;

                                                  overflow: hidden; /*float containment*/

                                              }

                                              /**clear floats**/

                                              header:after {

                                                  display: block;

                                                  clear: both;

                                                  content: '';

                                              }

                                              .floatLt {

                                                  width: 33%;

                                                  float: left;

                                              }

                                              /**LOGO**/

                                              /**adjust margin as req'd**/

                                              .floatLt img { margin-top: 10px }

                                               

                                              .floatRt {

                                                  width: 33%;

                                                  float: right;

                                              }

                                              /**slogan**/

                                              header h3 {

                                                  text-align: right;

                                                  color: #FFF;

                                                  font-style: oblique;

                                              }

                                              em {font-size: 175%; font-weight:bold}

                                               

                                              /**menu**/

                                              nav { overflow: hidden }

                                              nav ul li {

                                                  list-style: none;

                                                  float: left;

                                              }

                                              nav li a {

                                                  text-decoration: none;

                                                  font-weight: bold;

                                                  width: auto;

                                                  color: #FFF;

                                                  margin: 0px 10px;

                                                  line-height: 3em;

                                              }

                                              nav li a:hover, nav li a:active, nav li a:focus {

                                                  text-decoration: underline;

                                                  color: orange

                                              }

                                               

                                              /**main content**/

                                              section {

                                                  background: #FFAA55  url(http://www.mamacinis.com/images/board.png) center center fixed;

                                                  background-size:cover;

                                                  padding: 2%;

                                                  min-height: 350px;

                                              }

                                               

                                              footer {

                                                  padding:1%;

                                                  overflow:hidden;

                                                  text-align:center;

                                                  }

                                               

                                              /**typography**/

                                              h1 {

                                                  font-size: 400%;

                                                  padding-top: 5%;

                                                  color: #0099FF;

                                                  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

                                                  font-style: oblique;

                                                  text-align: center;

                                              h2 {

                                              font-size: 150%;

                                              }

                                              h3 { font-size: 125% }

                                              p { font-size: 100% }

                                               

                                              </style>

                                              </head>

                                               

                                              <body>

                                              <header>

                                              <div class="floatLt"><a href="index.html"><img src="http://www.mamacinis.com/images/mclogo_pop.png" alt="logo" height="45" width="114"></a></div>

                                               

                                              <div class="floatLt">

                                              <nav>

                                              <ul>

                                              <li><a href="cookies.htm">Cookies</a> | </li>

                                              <li><a href="#">About</a> | </li>

                                              <li><a href="#">Contact</a> | </li>

                                              </ul>

                                              </nav>

                                              </div>

                                               

                                              <div class="floatRt right">

                                              <h3>fresh baked cookies right to your door <em>mama cini's</em></h3>

                                              </div>

                                              </header>

                                               

                                              <section>

                                              <h1>mama cini's</h1>

                                              <h2>Heading 2</h2>

                                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                                              </section>

                                               

                                              <footer>

                                              <div class="floatLt"><p>left side footer</p> </div>

                                              <div class="floatLt"><p>middle footer</p> </div>

                                              <div class="floatRt"><p>right side footer</p> </div>

                                              </footer>

                                              </body>

                                              </html>

                                               

                                              This is what it looks like in browsers.

                                              mamacinis.jpg

                                               

                                              I don't think there's anything more I can offer to this discussion.

                                              Good luck!

                                               

                                              Nancy O.

                                              1 person found this helpful