Text padding

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Bouzy
    New Member
    • Jun 2007
    • 30
    #1

    Text padding

    I am making a layout and the content box is acting weird. The text is going outside the box even though I have the padding set. The margin is zero. Hear is what it looks like... Link

    Hear is some of my code.


    #content {

    height: 518px;
    width: 505px;
    background-image: url(images/content.jpg);
    background-repeat: no-repeat;
    line height: .8em;
    padding-left: 38px;
    padding-right: 38px;
    padding-top: 46px;
    padding-bottom: 46px;
    margin-top: 20px;
    margin-bottom: 20px;


    }


    <div id="content">
    <h2>Home</h2>
    <p id="home">
    Blallasd;ldsjf; lasjdf;laskjdf; lasjkdfla;jksdf ;lask jdf;lajsdl;fjas dlfjkasdl;kfjas ;ldjfk;lsadjfla sdjfa
    asdlkjfa;lsdkjf ;laksdjf;lajsdl kfjafds

    </p>

    </div>
    Last edited by drhowarddrfine; Jul 2 '07, 11:32 PM. Reason: Fixed link.
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      That link won't work.
      The markup seems to work fine, though.

        Comment

        • Bouzy
          New Member
          • Jun 2007
          • 30
          #3
          One minute......... ............... ............... ............... ............... .........

            Comment

            • Bouzy
              New Member
              • Jun 2007
              • 30
              #4
              Photo Storage
              http://s93.photobucket.com/albums/l75/Bouzy_Bouzy/?action=view&current=ggmf.jpg
              Store your photos and videos online with secure storage from Photobucket. Available on iOS, Android and desktop. Securely backup your memories and sign up today!


              Don't know why it worked... Hear is what its doing (I added the gray over the text because I don't want it read.

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  Which browser? I don't see that at all. You may have to give a link or the complete code because there must be something else not in the code you show so far.

                    Comment

                    • Bouzy
                      New Member
                      • Jun 2007
                      • 30
                      #6
                      It does that for me in the latest versions of Firefox and IE. Hear is the full code (CSS and XHMTL)

                      body {

                      background-color: #5f656b;
                      font-family: Tahoma, "Arial Unicode MS", Arial, "sans-serif", serif;
                      font-size: 12px;
                      color: #eea103


                      }

                      #content {

                      height: 518px;
                      width: 505px;
                      background-image: url(images/content.jpg);
                      background-repeat: no-repeat;
                      padding-left: 38px;
                      padding-right: 38px;
                      padding-top: 46px;
                      padding-bottom: 46px;
                      margin-top: 20px;
                      margin-bottom: 20px;





                      }

                      #navigation {

                      margin: 0px;
                      padding-top: 0px;
                      border-width: 0px;


                      }

                      #banner {

                      border-width: 0px;
                      margin: 0px;
                      padding: 0px;


                      }


                      #container {

                      width: 712px;
                      margin: 0px auto;
                      margin-left: auto;
                      margin-right: auto;
                      }


                      *************** *************** *************** *************** *************** *****

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

                      <head>

                      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

                      <title>Goldfi sh Graphics</title>

                      <link type="text/css" rel="stylesheet " href="Goldfish. css" />

                      </head>
                      <body>

                      <div id="container" >

                      <div id="banner">
                      <img src="images/banner.jpg" alt="Goldfish Graphics Banner Image" />
                      </div>

                      <div id="navigation" >
                      <img src="images/navigation.jpg" alt=Navigation background image" />
                      </div>

                      <div id="content">
                      <h2>Home</h2>
                      <p id="home">
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique massa in enim. Fusce laoreet velit eget diam. Mauris a mi ut augue scelerisque rhoncus. Vivamus suscipit tortor eget lacus. Nullam aliquet tortor. Proin ac dolor in felis eleifend bibendum. Donec cursus tortor id risus tempus congue. Suspendisse sit amet libero. In hac habitasse platea dictumst. Morbi gravida augue at nisl. Ut et ligula. In pharetra, lectus eu dignissim vestibulum, pede dui egestas nunc, venenatis eleifend arcu eros nec massa.

                      Nam consectetuer, mauris ac sagittis eleifend, justo nulla eleifend diam, vel pretium eros metus sed diam. Aliquam erat volutpat. Mauris et felis molestie lacus volutpat dapibus. In ipsum magna, dictum non, tincidunt in, ultricies ut, massa. Maecenas arcu. Nunc semper condimentum libero. Suspendisse et metus eget justo sagittis facilisis. Nam tristique aliquet nulla. Vestibulum metus lacus, aliquet eget, pellentesque et, consectetuer eu, ipsum. Mauris nisi metus, lacinia quis, placerat et, dictum faucibus, velit. Sed tincidunt leo id tellus.


                      </p>

                      </div>


                      <h5>Testimonies </h5>
                      <p>
                      ""
                      </p>

                      <p>
                      Links
                      </p>

                      </div>







                      </body>
                      </html>

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          The only thing I can think it would be caused by is the images you are using. I'm still not getting the same problem you are.

                            Comment

                            • Bouzy
                              New Member
                              • Jun 2007
                              • 30
                              #8
                              I changed the Css to this and it looks better now, however if you see what could have caused it, let me know because I want to know what I did. Basically the only thing I changed was I gave the <p> its own Id and set the width so it fit in the content box. If thats not proper let me know also please...


                              body {

                              background-color: #5f656b;
                              font-family: Tahoma, "Arial Unicode MS", Arial, "sans-serif", serif;
                              font-size: 12px;
                              color: #eea103


                              }

                              #content {

                              height: 505px;
                              width: 518px;
                              background-image: url(images/content.jpg);
                              background-repeat: no-repeat;
                              padding-left: 38px;
                              padding-right: 38px;
                              padding-top: 46px;
                              padding-bottom: 46px;
                              margin-top: 20px;
                              margin-bottom: 20px;





                              }

                              #navigation {

                              margin: 0px;
                              padding-top: 0px;
                              border-width: 0px;


                              }

                              #banner {

                              border-width: 0px;
                              margin: 0px;
                              padding: 0px;


                              }


                              #container {

                              width: 712px;
                              margin: 0px auto;
                              margin-left: auto;
                              margin-right: auto;
                              }

                              #home {

                              width: 442px;

                              }

                              #news {

                              width: 442px;

                              }

                                Comment

                                • nitinpatel1117
                                  New Member
                                  • Jun 2007
                                  • 111
                                  #9
                                  Originally posted by Bouzy
                                  #home {
                                  width: 442px;
                                  }

                                  }
                                  You were probably overriding the width earlier, either though the id
                                  #home{
                                  }

                                  or through the element

                                  p{
                                  }

                                    Comment

                                    Previous template Next
                                    Working...