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

    header question


      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
          johnmackinnonphotography 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.



          • 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>
              <meta charset="utf-8">
              <title>HTML5 Document</title>
              * {
              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;
              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) {
              <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
              <aside>Logo goes here...</aside>
              <h1>Site Name</h1>
              <h2>Some pithy slogan...</h2>
              <address>Company address</address>



              Nancy O.