7 Replies Latest reply on Feb 3, 2010 5:25 PM by njdesigner1944

    Lining up text in a div tag

    njdesigner1944

      Hi,

       

      I am having trouble with a navigation bar that I am creating with a div tag.

      I have a line of text going across, flush right, and I would like the line of text closer to the bottom of the div tag box.

      Is padding and/or margins the setting/s to use to make this line of text closer to the bottom?

       

      Thanks,

      njdesigner1944

        • 1. Re: Lining up text in a div tag
          Nancy OShea Adobe Community Professional & MVP

          You'll need to post a URL to your test page for more meaningful answers.   Ordinarily, if you want text to appear at the bottom of a container, it should be at the bottom of your HTML markup.

           

           

           

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

          • 2. Re: Lining up text in a div tag
            njdesigner1944 Level 1

            Hi Nancy,

             

            I'm a beginner, so this is just me experimenting in my DW program. Do you want me to forward you just my DW file for you to take a look at it?

            Do I just attach it? Thanks, njdesigner1944

            • 3. Re: Lining up text in a div tag
              Nancy OShea Adobe Community Professional & MVP

              For best results on this forum, you should upload your test page and dependant files to your remote server space and post a URL so we can see what you see.

               

              If you don't have a web server space yet, copy & paste your CSS and HTML code into a reply.  Use the double blue arrows >> Syntax Highlighting > Plain.

               

              Code looks like this.
              

               

               

               

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

              • 4. Re: Lining up text in a div tag
                njdesigner1944 Level 1
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Untitled Document</title>
                <link href="layout3.css" rel="stylesheet" type="text/css" />
                </head>
                
                <body>
                <div id="wrapper">
                  <div id="header">
                    <ul class="last">
                      <li>home</li>
                      <li>sitemap</li>
                      <li>news</li>
                      <li class="last">downloads</li>
                    </ul>
                  </div>
                  <div id="photonavbar">photo</div>
                  <div id="navbar">
                    <ul>
                      <li>about us </li>
                      <li>services</li>
                      <li>products</li>
                      <li>clientele</li>
                      <li class="last">contact</li>
                    </ul>
                  </div>
                  <div id="banner"></div>
                  <div id="leftcol">Content for  id "leftcol"</div>
                  <div id="rightcol">Content for  id "rightcol"</div>
                  copyright©2005 www.YourWebBusiness.com All Rights Reserved. Powered by www.etheosweb.com
                </div>
                </body>
                </html>
                body {
                     margin: 0px;
                     padding: 0px;
                     font-family: Verdana, Geneva, sans-serif;
                     font-size: .7em;
                     background-color: #333;
                }
                #wrapper {
                     padding: 0px;
                     width: 800px;
                     margin-right: auto;
                     margin-left: auto;
                }
                #wrapper #header {
                     background-color: #000;
                     color: #FFF;
                     text-align: right;
                     padding: 5px;
                }
                #wrapper #header ul {
                     margin: 0px;
                     padding: 0px;
                     list-style-type: none;
                }
                #wrapper #header ul li {
                     display: inline;
                     padding-right: 10px;
                     padding-left: 10px;
                     border-right-width: 1px;
                     border-right-style: solid;
                     border-right-color: #FFF;
                }
                #wrapper #header ul li.last {
                     border-top-style: none;
                     border-right-style: none;
                     border-bottom-style: none;
                     border-left-style: none;
                }
                #wrapper #photonavbar {
                     padding: 15px;
                     float: left;
                     width: 140px;
                     background-color: #000;
                     color: #FFF;
                     height: 72px;
                }
                #wrapper #navbar {
                     width: 600px;
                     background-color: #000;
                     color: #ECECEC;
                     text-align: right;
                     margin-left: 170px;
                     padding: 15px;
                }
                #wrapper #navbar ul {
                     list-style-type: none;
                     height: 72px;
                     padding: 0px;
                     margin: 0px;
                }
                #wrapper #banner {
                     background-image: url(images/candles_across.jpg);
                     background-repeat: no-repeat;
                     height: 72px;
                }
                #wrapper #navbar ul li {
                     display: inline;
                     padding-right: 10px;
                     padding-left: 10px;
                     border-right-width: 1px;
                     border-right-style: solid;
                     border-right-color: #FFF;
                     width: 800px;
                }
                #wrapper #navbar ul li.last {
                     border-top-style: none;
                     border-right-style: none;
                     border-bottom-style: none;
                     border-left-style: none;
                }
                
                
                
                
                • 5. Re: Lining up text in a div tag
                  njdesigner1944 Level 1

                  The part of the div tag container that I am having the problem with is the line "about us, service products clientele contact"

                  I would like it to be lower to the bottom of the div tag container rather than very high as it currently is. Can you tell from this what the problem may be and may be what settings I could use? Thanks, NJ

                  • 6. Re: Lining up text in a div tag
                    Nancy OShea Adobe Community Professional & MVP

                    Copy & paste this into a new, blank HTML document.

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                    <title>Untitled Document</title>
                    
                    <style type="text/css">
                    /**zero out default browser settings on everything**/
                    * {margin:0; padding:0; line-height:100%; font-size: 100%}
                    
                    body {
                    font-family: Verdana, Geneva, sans-serif;
                    background-color: #333;
                    color: #fff;
                    }
                    #wrapper {
                    padding: 0px;
                    width: 800px;
                    margin-right: auto;
                    margin-left: auto;
                    }
                    
                    #header {
                    background-color: #000;
                    color: #FFF;
                    text-align: right;
                    }
                    #header ul {
                    list-style-type: none;
                    }
                    #header ul li {
                    display: inline;
                    padding-right: 10px;
                    padding-left: 10px;
                    border-right: 1px solid #FFF;
                    }
                    #header ul li.last {
                    border-top-style: none;
                    border-right-style: none;
                    border-bottom-style: none;
                    border-left-style: none;
                    }
                    #photonavbar {
                    float: left;
                    background-color: #000;
                    color: #FFF;
                    padding: 15px;
                    width: 140px;
                    height: 72px;
                    }
                    /**clear floats with a <br> <p> or <hr> tag after they are no longer needed**/
                    
                    .clearLt {
                    clear: left;
                    line-height: 1px;
                    display: none;
                    }
                    .clearRt {
                    clear: right;
                    line-height: 1px;
                    display:none;
                    }
                    .clearAll {
                    clear: both;
                    line-height: 1px;
                    display:none;
                    }
                    
                    #navbar {
                    background-color: #000;
                    color: #ECECEC;
                    text-align: right;
                    padding-top: 4.5em;
                    }
                    #navbar ul {
                    list-style-type: none;
                    padding: 0px;
                    margin: 0px;
                    }
                    #navbar ul li {
                    display: inline;
                    padding-right: 10px;
                    padding-left: 10px;
                    border-right-width: 1px;
                    border-right-style: solid;
                    border-right-color: #FFF;
                    }
                    #navbar ul li.last {
                    border-top-style: none;
                    border-right-style: none;
                    border-bottom-style: none;
                    border-left-style: none;
                    }
                    
                    #banner {
                    background-image: url(images/candles_across.jpg);
                    background-repeat: no-repeat;
                    height: 72px;
                    }
                    </style>
                    
                    </head>
                    
                    <body>
                    <div id="wrapper">
                    <div id="header">
                    <div id="photonavbar">
                    <img name="Photo" src="" width="140" height="72" alt="photo" style="background-color: #999" /> 
                    </div>  <!--end photonavbar -->
                    
                    <ul>
                    <li>home</li>
                    <li>sitemap</li>
                    <li>news</li>
                    <li class="last">downloads</li>
                    </ul>
                    
                    <div id="navbar">
                    <ul>
                    <li>about us </li>
                    <li>services</li>
                    <li>products</li>
                    <li>clientele</li>
                    <li class="last">contact</li>
                    </ul>
                    
                    </div>  <!--end navbar -->
                    
                    <!--Important! Clear floats with a <p> <br> or <hr> tag -->
                    <hr class="clearLt" />
                    
                    </div>  <!--end header -->
                    </div>  <!--end wrapper -->
                    </body>
                    
                    

                     

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

                    • 7. Re: Lining up text in a div tag
                      njdesigner1944 Level 1

                      Hi Nancy, I brought it in and compared my settings to yours, tweaked mine even further, and it worked. Thanks so much.