4 Replies Latest reply on Nov 6, 2008 1:47 PM by vpr155

    positioning inline text within div

    blueman2

      I'm trying to position an unordered list (#bot-nav li) "inline" within a div (#bot-nav). The text seems to sit inline along the top of the div. I thought because I have the display set to "inline" I could use "line height" to lower the text but it only does so within the design window of my program (Dreamweaver). When I preview the page inside a browser, the text still remains against the top of the div. I tried adding top padding to push it down but that added height to the block size and screwed up my background. Any help would be appreciated. Thanks

        • 1. Re: positioning inline text within div
          Level 7
          Reduce the height by the amount of the padding.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "blueman2" <webforumsuser@macromedia.com> wrote in message
          news:geusiq$fun$1@forums.macromedia.com...
          > I'm trying to position an unordered list (#bot-nav li) "inline" within a
          > div
          > (#bot-nav). The text seems to sit inline along the top of the div. I
          > thought
          > because I have the display set to "inline" I could use "line height" to
          > lower
          > the text but it only does so within the design window of my program
          > (Dreamweaver). When I preview the page inside a browser, the text still
          > remains
          > against the top of the div. I tried adding top padding to push it down but
          > that
          > added height to the block size and screwed up my background. Any help
          > would be
          > appreciated. Thanks
          >
          >
          >
          > @charset "utf-8";
          > body {
          > margin: 0;
          > padding: 0;
          > background: #000000;
          > text-align: center;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > }
          > #wrapper {
          > background: #E1CC95;
          > height: 708px;
          > width: 900px;
          > position: relative;
          > margin: 20px auto;
          > }
          > #maincontent {
          > }
          > #header {
          > background: url(images/slices/header-bk.jpg) no-repeat;
          > height: 123px;
          > width: 900px;
          > }
          > #maincontent {
          >
          > }
          > #feature {
          > height: 361px;
          > width: 707px;
          > background: url(images/slices/rack-feature.jpg) no-repeat;
          > text-align: left;
          > }
          > #rck_feature {
          > color: #F6CE6E;
          > text-decoration: none;
          > height: 265px;
          > width: 215px;
          > margin-top: 80px;
          > margin-left: 30px;
          > font: normal 11px Verdana, Arial, Helvetica, sans-serif;
          > padding-top: 13px;
          > }
          > #buttons3 {
          > height: 361px;
          > width: 193px;
          > background: url(images/slices/buttons3.gif) no-repeat;
          > position: relative;
          > }
          > .link_bullet {
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > background: #FFFFFF;
          > }
          > #copy-3 {
          > background: url(images/slices/3-copy.jpg) no-repeat;
          > height: 161px;
          > width: 900px;
          > }
          > #bot-nav {
          > background: url(images/slices/bot-nav.gif) no-repeat;
          > height: 41px;
          > width: 900px;
          > margin: 0px;
          > padding: 0px;
          > float: left;
          > text-align: left;
          > }
          > #bot-nav li {
          > display: inline;
          > margin: 0px;
          > padding: 0px;
          > list-style: none;
          > }
          > #bot-nav li a {
          > float: left;
          > font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
          > color: #F5D564;
          > text-decoration: none;
          > border-right: 3px solid #868765;
          > margin: 0px;
          > padding: 0px 20px 0px 10px;
          > }
          > #bot-nav li a:link,
          > #bot-nav li a:visited {
          > text-decoration: none;
          > float: left;
          > }
          > #bot-nav li a:hover, #bot-nav li a:active {
          > color: #FFF8B9;
          > background: #2E1916;
          > display: block;
          > }
          >
          > #foot-bot {
          > background: url(images/slices/foot-bot.jpg) no-repeat;
          > height: 23px;
          > width: 900px;
          > margin: 0px;
          > color: #F6CE6E;
          > clear: none;
          > float: left;
          > font: bold 12px Verdana, Arial, Helvetica, sans-serif;
          > padding: 6px;
          > }
          > #bullet-1 {
          > height: 12px;
          > position: absolute;
          > top: 80px;
          > color: #0099CC;
          > font: bold 12px Verdana, Arial, Helvetica, sans-serif;
          > vertical-align: middle;
          > left: 36px;
          > }
          > .fltrt {
          > float: right;
          > }
          > .fltlft {
          > float: left;
          > }
          > .clrflt {
          > clear: both;
          > height: 0px;
          > font-size: 1px;
          > line-height: 1px;
          > margin: 0px;
          > }
          >
          > <!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></title>
          >
          > <link href="../Saxstorage/Copy of sax-style.css" rel="stylesheet"
          > type="text/css" />
          > </head>
          > </style>
          > <body>
          > <div class="clrflt" id="wrapper">
          > <div id="header"></div>
          > <!-- TemplateBeginEditable name="main" -->
          > <div id="maincontent"></div>
          > <!-- TemplateEndEditable --><a
          > href="file:///C:/Inetpub/wwwroot/newguitarstorage/Templates/sax2-template.dwt#">
          > </a>
          > <div id="bot-nav">
          > <ul>
          > <li><a href="#">Policies</a></li>
          > <li><a href="#">Guitarstorage</a></li>
          > <li><a href="#">Contact</a></li>
          > </ul>
          > </div>
          > <div id="foot-bot">A &amp; S Crafted Products</div>
          > </div>
          > </body>
          > </html>
          >

          • 2. Re: positioning inline text within div
            vpr155
            Thanks Murray

            I did solve it (I thought)by adding a 3px to margin to "#bot-nav li a" but I soon found that IE didn't like that. I tried adding the padding to" #bot-nav li a" and then reducing the height of "#bot-nav" by that amount and that didn't work either. I finally tried applying the padding directly to "#bot-nav" and reduced the height which worked fine in both IE and FF. I would assume this is what you had in mind as it works. If you can offer any further comments on this I'd appreciate it. Especially in terms of whether using padding vs margins adjustments is the way to go in dealing with IE in the future

            Thanks

            • 3. Re: positioning inline text within div
              Level 7
              Which IE? And does the page validate?

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "vpr155" <webforumsuser@macromedia.com> wrote in message
              news:gevlp1$j52$1@forums.macromedia.com...
              > Thanks Murray
              >
              > I did solve it (I thought)by adding a 3px to margin to "#bot-nav li a" but
              > I
              > soon found that IE didn't like that. I tried adding the padding to"
              > #bot-nav li
              > a" and then reducing the height of "#bot-nav" by that amount and that
              > didn't
              > work either. I finally tried applying the padding directly to "#bot-nav"
              > and
              > reduced the height which worked fine in both IE and FF. I would assume
              > this is
              > what you had in mind as it works. If you can offer any further comments on
              > this
              > I'd appreciate it. Especially in terms of whether using padding vs margins
              > adjustments is the way to go in dealing with IE in the future
              >
              > Thanks
              >
              >
              >

              • 4. Re: positioning inline text within div
                vpr155 Level 1
                I'm looking at IE 7

                Apparently it validates. I ran it through http://jigsaw.w3.org/css-validator