Page 1 of 1

webpage cut off

Posted: Fri Sep 04, 2009 9:44 pm
by drdokter
Can anyone tell me why on certain computers and sometimes when the browser window is smaller, this website will have the top banner cut off?
http://ap.com.msu.edu/

Re: webpage cut off

Posted: Fri Sep 04, 2009 9:52 pm
by jackpf
Because your container div is positioned absolutely and positions itself with percentages.

Re: webpage cut off

Posted: Fri Sep 04, 2009 9:55 pm
by drdokter
How should it be coded then?

Re: webpage cut off

Posted: Fri Sep 04, 2009 10:10 pm
by jackpf
Well, I can't tell you that can I? I don't know how you want it to look.

Just have a mess around with the CSS for div#container or whatever it is.

Re: webpage cut off

Posted: Fri Sep 04, 2009 10:14 pm
by drdokter
I just want the entire page centered. I know you are getting tired of me--you are 16 years old--so smart! I am 50 years old but I have a PhD and can do lots of other things. I just happen to get stuck doing the website because I happen to know how to design webpages (at least in html with Dreamweaver). I never tried it with css before so I am having a headache.
Would this work?

<style type="text/css">
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; /* for IE */
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */

border: 2px solid #000;
width: 80%;
}
p {
margin: 0.3em 0.3em 0.5em 0.3em;
}
code {
font-size: 115%;
}
</style>

Re: webpage cut off

Posted: Fri Sep 04, 2009 10:27 pm
by jackpf
No no, it's fine, I don't mind.

But I don't know...why not try it and see? I recommend you download something like firebug or webdeveloper which lets you edit CSS and see the effects in real time.

margin: 0 auto will center the div...which by the sound of things is what you want?

Re: webpage cut off

Posted: Fri Sep 04, 2009 10:29 pm
by drdokter
Thanks...I have to do it in the morning--go back to work and code it in my office.

Shucks and this is supposed to be a three day holiday here in the States.

I will be back if I still go nuts in the morning.

Re: webpage cut off

Posted: Sat Sep 05, 2009 10:04 am
by drdokter
Ok, so I tried some new coding, and now it's still weird.

The banner getting cut off is no longer a problem on the main page: http://ap.com.msu.edu/ but in IE it will not center.


Please help me!

Re: webpage cut off

Posted: Sat Sep 05, 2009 10:19 am
by jackpf
it's because you're putting everything in a div, and the div is not centered. So the container is centered, but it's centered within a div that isn't centered...if you get me.

Seriously, download webdeveloper, it's so much easier to edit CSS with.

Re: webpage cut off

Posted: Sat Sep 05, 2009 12:55 pm
by John Cartwright
The easiest way I've found to accomplish a centered site is to use margins: auto; width a fixed width. Something like:

Code: Select all

 
<style>
   div#pagecontainer {} 
   div#sitecontainer { width: 800px; margin: auto; }
</style>
 
<div id="pagecontainer">
   <div id="sitecontainer">
       I'm in the middle!
   </div>
</div>

Moved to HTML, CSS and other UI Design Technologies.