7 Replies Latest reply on Jun 7, 2010 7:52 AM by three G Gregg

    Confused about centering div tags

    three G Gregg

      OK, I keep seeing somewhat the same answers here, but still don't understand ...

       

      2 things ...

       

      1) I've already got my background image worked out and want to size(crop it such that it fills the background without stretching/compressing it, and my monitor at home is a 22" wide format.

       

      2) Can resize them if need be, but already have 7 div tags (ie banner, navbar, main, etc) that I want positioned/nested inside another div tag to be centered on the page.  I don't yet understand how to nest them, how to center the parent div tag (nesting the others) or how set the css to center the parent div tag.

       

      Do I need to just start over? ... or can I work with what I've already got?

       

      Any help or thoughts would be greatly appreciated ...

       

      3G

        • 1. Re: Confused about centering div tags
          Nancy OShea Adobe Community Professional & MVP

          Basic CSS Centered Layout

          (View source in browser to see the code)

          http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html

           

           

           

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

          1 person found this helpful
          • 2. Re: Confused about centering div tags
            martcol Level 4

            three G Gregg wrote:

             

            Do I need to just start over? ... or can I work with what I've already got?

             


            If you could post your page it would help poeple to advise you about what you have.  From what you have describd, it sounds ok.

             

            three G Gregg wrote:

             

            2) Can resize them if need be, but already have 7 div tags (ie banner, navbar, main, etc) that I want positioned/nested inside another div tag to be centered on the page.  I don't yet understand how to nest them, how to center the parent div tag (nesting the others) or how set the css to center the parent div tag.

             

             

             

            Nesting is straightforward enough.  You just put one element inside another.

             

            <div id="container">

            <div id="content">

            </div> - closes the #content div.

            </div> - closes the #container div.

             

            You could of course nest an element inside the #content div and the same principle applies i.e make close the elements off properly.  After that you work on postioning using float first and creatiing space between elements with margin and padding.

             

            There are a few things to get your head around with floating elements and best you have a look at the Box Model and CSS positioning to work some of that out.

             

            Martin

            1 person found this helpful
            • 3. Re: Confused about centering div tags
              three G Gregg Level 1

              Thanks Nancy,

               

              Initially this was a bit cryptic for me, as I'm only beginning in Dreamweaver and trying to utilize the design view.  Knowing just enough html coding to tweak things (as opposed to simply writing code) ... I have to start with the trial and error approach!

               

              But I like puzzles, and by plugging the template into Dreamweaver, I'm pretty sure I can merge what I already have with the template and use it to get what I want, so not there yet but pretty sure you've given me the key to solving my puzzle!

               

              On the background question, what I have came from a photo (rendered to light background shades) that I don't want to stretch, but to fill the background even if I have to clip it for different browsers/monitors/software ... is there a size I can set it to (x, y in pixels) that will work for all or most situations?

               

              Thank you again for your help, and again, while everything was pointing me to just code, having a template to work with will get me there much faster!

               

              Gregg

              • 4. Re: Confused about centering div tags
                Nancy OShea Adobe Community Professional & MVP

                By themselves, background images are static thus they don't resize to viewport.  If they did, your image would become grossly distorted.

                 

                To fill the browser viewport with a repeating image tile or gradient slice, use the CSS background-repeat property with

                 

                repeat-x (across the screen),

                repeat-y (down the screen) or

                repeat (both directions).

                 

                Obviously, this method doesn't work well on large photos that are not repeat-friendly.

                 

                More on background images:

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

                 

                 

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

                • 5. Re: Confused about centering div tags
                  three G Gregg Level 1

                  Hi again Nancy,

                   

                  Your template has helped tremendously in understanding how to get my webpage to look/act like I want, and soon I'll add a link to it here so you can see what you helped me with. The template you sent the link to was exactly where I needed to start!

                   

                  Yes, I already knew how to tile a background image to cover the page, so for now I'm just using the one I was planning to.

                   

                  Now I have one more question, if you will ... How do I  attach a hyperlink to text without changing the text to blue and underlined? I know how to set it on the browser end, but don't know how to keep it the same on the webpage.

                   

                  Thank you again for all your help,

                  Gregg

                  • 6. Re: Confused about centering div tags
                    martcol Level 4

                    three G Gregg wrote:

                     

                    How do I  attach a hyperlink to text without changing the text to blue and underlined?

                     

                    http://www.w3schools.com/css/css_link.asp

                     

                    http://www.echoecho.com/csslinks.htm

                     

                    That should help but I'm not sure what you mean by,

                     

                    I know how to set it on the browser end

                    So I hope I haven't misunderstood.

                     

                    Martin

                    • 7. Re: Confused about centering div tags
                      three G Gregg Level 1

                      Thanks Martin,

                       

                      I knew it was there somewhere, but again, I'm not much up to speed on just coding, so trying to use the Dreamweaver design tools where I can. Anyway, I learn best by example,  where I can experiment and figure things out in a way that makes sense me.

                       

                      So thanks much for the working examples, just what I needed!

                       

                      And on the knowing how to do it on the browser end, I may be mistaken, but it seems I've run across browser settings preferences before where on the user end you can also change how hyperlinks display, but no matter, you gave me the answer.

                       

                      Thanks again,

                      Gregg