3 Replies Latest reply on Apr 23, 2013 10:37 AM by Nancy OShea

    header question

    sflores2011

      I am kind of new at webdesign. I am having issues alligning my header text in center when I have a placeholder that I want in the top left (logo) tried using the properties to change it but failing miserably. any help?

        • 1. Re: header question
          jmacphot1975 Level 1

          Have you tried making a wrapper div, set the left and right margins to auto, then create a header div inside the wrapper and then use the properties to align?

           

          I am new to web design too so apologise if I have not explained very well.

           

          J

          • 2. Re: header question
            sflores2011 Level 1

            lol, i have been playing with different things. I will try that. Was working on other parts such as adding the links and video and such. thank you

            • 3. Re: header question
              Nancy OShea Adobe Community Professional & MVP

              Use CSS Floats and margins in your header. 

              Copy & paste this code into a new, blank document:

               

               

              <!doctype html>
              <html>
              <head>
              <meta charset="utf-8">
              <title>HTML5 Document</title>
              
              <style>
              * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              }
              
              body {
              font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
              font-size:100%:
              width: 1000px;
              margin: 0 auto; /**with width, this is centered**/
              padding: 0;
              }
              
              header {
              margin: 0;
              padding: 0;
              min-height: 50px;
              overflow: hidden; /**float containment**/
              border: 1px solid teal;
              }
              
              aside {
              margin: 0;
              padding: 0;
              float: left;
              border: 1px dotted silver;
              }
              
              header aside { width: 33.333% }
              
              /**clear floats after 3rd column**/
              aside-nth:child(3) {
              clear:left;
              }
              
              </style>
              
              <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
              <![endif]-->
              </head>
              <body>
              <header>
              
              <aside>Logo goes here...</aside>
              
              <aside>
              <h1>Site Name</h1>
              <h2>Some pithy slogan...</h2>
              </aside>
              
              <aside>
              <address>Company address</address>
              </aside>
              
              </header>
              </body>
              </html>
              

               

               

              Nancy O.