10 Replies Latest reply on Aug 18, 2011 3:47 PM by dfelic21

    Center Page in Dreamweaver with ApDivs

    dfelic21 Level 1

      Hello everyone,

       

      I'm no web designer, but I have a design background. I had to teach myself dreamweaver, so my skills are extremely limited and I've constructed my website using ApDivs. I originally used slices, but that was awful as it just made image chunks all over the place. This was the cleanest, easiest method I could figure out for myself, so forgive me if it seems amateurish.

       

      Here is the website:

       

      www.daniellefeliciano.com

       

      What I want to know is, how can I get my pages to center automatically in the window? I know there is a way to do this by dropping everything into a DIv and putting some code in, but I don't think that method works when you've constructed your website using ApDivs. I only have like 10 pages if that, and yes I used swap image  and set text of container ALL OVER the place. Forgive me, it functions. Is there some way I can center this site? Also, if it requires putting in code pleas tell me EXACTLY where in the code to paste it. My coding is super limited.

       

       

      Bonus Question:

       

      Do you know how to imbed a typeface into the website so that viewers of my website will be able to read it in the typeface I have chosen? The set text of container function has the typeface as Goudy, but I know not a lot of people will have Goudy on their computers so it will come up as something esle. I tried to get around this elsewhere by inserting the type as images because, God bless me, I couldn't figure out how to kern the type or even format it in Dreamweaver. The rest of the site is in Goudy, and it's my typical font for all my branding so I will not change it. Thank you!

       

      ~Danielle

        • 1. Re: Center Page in Dreamweaver with ApDivs
          Nancy OShea Adobe Community Professional & MVP

          Part #1  APdiv are absolutely positioned relative to the nearest positioned parent division.  if none is defined in your CSS, APDivs will align relative to the top left corner of browser windows.  APDivs as a primary layout method seldom works well. Here is why:
          http://apptools.com/examples/pagelayout101.php

           

           

          Part #2  To center your page you need 3 basic things:

               1. a valid document type declaration in the top of your HTML document.

               2. a container width in pixels, % or ems.

               3. margin-left and margin-right of auto.

               4. position:relative (only if you're still using APDivs).

           

          CSS:

          #wrapper {

          width:  900px;

          margin: 0 auto;

          position: relative;

          top: 0;

          }

           

          HTML:

          <div id="wrapper">

          your page content goes here

          </div>

           

           

          Part #3  Designing for print is nothing like designing for the web.  There is no such thing as kerning in web design, and you're pretty much limited to the standard Windows / Mac web safe font-families.

          http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

           

          If you endeavor to use @font-face replacement techniques, read your font licence carefully as not all fonts are legal to use on web sites.

          @font-face kits

          http://www.fontsquirrel.com/fontface

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists 
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: Center Page in Dreamweaver with ApDivs
            Lon Winters Level 4

            I don't know the exact sites or links offhand, but I've seen a couple of services that allow you to use different fonts in your site. These are fee based services and basically how they work is you get access to available type faces, they provide you the code that you have to enter in your page. In the browser, the code references the location of the fonts, and downloads them into the users browser. That's about all I know as I've never used the service but it may be worth at least checking into.

            • 3. Re: Center Page in Dreamweaver with ApDivs
              dfelic21 Level 1

              Thank you for your answer!

               

              However, all of this is a bit too complicated for me. I understand print design is nothing like web design and I've heard before that ApDivs are a terrible idea, but I honestly know no other way to do it. (I read the article, but some of it was beyond me)

               

              Am I just changing the features of the layers and giving them the ability to position themselves on their own? Or, am I removing all of my objects and putting them into something else with different properties and having to figure out their pixel relationship from the others?

               

              What in the world is a valid document type declaration?

               

              Honestly, If I lived in a world where having a website wasn't needed, I wouldn't bother, but for my profession I need one. I don't expect you to lay things out any clearer than you did, but do you know of another resource that maybe has a tutorial on this? Thank you for your help.

               

              ~Danielle

              • 4. Re: Center Page in Dreamweaver with ApDivs
                dfelic21 Level 1

                Can I position all of my Ap Divs absolutely within a large div and give that relative positioning? Most of my type is images, how does this affect my problem? When I zoom in while in a browser, I don't see problems with overlap the article mentions.

                • 5. Re: Center Page in Dreamweaver with ApDivs
                  Lon Winters Level 4

                  That's essentially what the code that Nancy provided does. Puts all you content in a centered wrapper. Copy the CSS snippet to your external CSS stylesheet if you have one, or somewhere in the head section of the page. The head section starts with  and ends with . You can add this to your template if you're using one, otherwise you will need to add it too all the pages.  Then, copy the div snippet just after the opening body tag in the HTML - , and place the closing div tag just before the closing body tag - .  This has to be done on every page regardless if you have an external stylesheet.

                  1 person found this helpful
                  • 6. Re: Center Page in Dreamweaver with ApDivs
                    Lon Winters Level 4

                    Ugh, using the iPad for this didnt end up displaying some of my post. I was trying to show you what the head and body tags look like in the code, but that didn't display. Look for the words head and body surrounded by greater than and less than symbols.

                    • 7. Re: Center Page in Dreamweaver with ApDivs
                      Nancy OShea Adobe Community Professional & MVP

                      all of this is a bit too complicated for me.

                      Unless you have a working knowledge of HTML and CSS code, I'm afraid you're going to struggle with the most basic concepts as well as the answers we give you.

                       

                      An HTML document type tells the browsers which coding method a web page uses.

                      http://w3schools.com/html/html_doctype.asp

                       

                      Honestly, If I lived in a world where having a website wasn't needed, I wouldn't bother, but for my profession I need one.

                      When you need an electrician, hire an electrician.  When you need a plumber, hire a plumber.  If you need a polished web site that doesn't look like an amateur built it, hire an experienced web developer to help you.    Keep in mind that your site is the very first impression many people will have of you.  And if you don't communicate your message appropriately, your site won't be worth a nickel.

                       

                      Images of text are pure poison for search engines & web accessibility.  If you don't believe me, try translating your site with Google Translator.  It won't pick up any images.

                       

                      If I can help you, feel free to contact me through my web site.

                      http://alt-web.com/contact.shtml

                       

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists 
                      http://alt-web.com/
                      http://twitter.com/altweb

                      • 8. Re: Center Page in Dreamweaver with ApDivs
                        dfelic21 Level 1

                        Nancy O.

                         

                        Thank you, and I understand your point. As a designer and artist, I'm an advocate of hiring other professionals to do what you cannot. I'm also an advocate of learning to do things for yourself; this really should be something within my skill set and that's why I'm trying. I'm a grad student, and I don't have the means to pay a web designer what the deserve, so I'm not even going to patronize someone by asking them to do this for pennies. I feel it's just as rude as when someone asks me to do a huge painting for 100 bucks or expects free work just because it's a 'talent' based profession and it doesn't 'cost' me anything to do the work.

                         

                        Also, I put the tags into the page so it will search on google. I have a friend who did that sort of thing, so hopefully I did it sort of correctly. I know images of type is lame, but I wanted properly kerned small caps, dang it, and by george I was going to have them.

                         

                        Regarding translation, that's an interesting point, but I can't really work for clients who don't have a working knowledge of english, and there isn't actually much text on the site. I'd love to make that work though! I may see what I can do in the future as I continue to work through this, and if I ever have the means would certainly hire someone with the expertise.

                         

                        Thanks again, everyone.

                        ~Danielle

                        • 9. Re: Center Page in Dreamweaver with ApDivs
                          Lon Winters Level 4

                          One good thing about the Internet is that you can design and present your site any way you choose. The a dive you'll find from most people is how to do it correctly, or at least know the consequences by not following basic guidelines of development. I've worked with print artists and designers before and ran up against similar issues. I don't mean to generalize, but it's a bit discouraging to advise someone and get a response, of "I don't care, that's how I want it." I used to concede and do what was asked, but it always came back to bite me when the site wasn't showing up in search results, or it wouldn't view properly in certain browsers or it was just basically ineffective as a website. Anyway, you have the solution to your original question, have you been able to get it working?  The only other points I can add is there is a lot more to search engine optimization than entering meta data, nut that's a whole mother discussion. Also, I commend you for wanting to add web development to your skill set. You've acknowledged your understanding if certain things, like using AP divs, so I would highly suggest going back to the drawing board and build your site using proper CSS and learn the basics. . Your site has a nice, clean and simple layout, so it shouldn't be too difficult to reproduce with CSS.

                          1 person found this helpful
                          • 10. Re: Center Page in Dreamweaver with ApDivs
                            dfelic21 Level 1

                            Thank you everyone, I was able to use the code and solve the problem! I'll be switching all the pages today. Just reading what you told me helped me understand the code better (I can do bits of code, but nothing fancy). Thank you all!

                             

                            For anyone like me who finds this page later I just dropped the bit of CSS code after

                             

                            <style type="text/css">

                             

                            Which I assume is where the code explaining the style sheet begins.

                             

                            Then I dropped the first bit of html code after the first <body onload=......>

                             

                            and the second piece right before the closing body tag </body>

                             

                             

                            it was much easier than expected.