webpage cut off

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
drdokter
Forum Newbie
Posts: 21
Joined: Thu Jul 23, 2009 10:57 am

webpage cut off

Post 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/
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: webpage cut off

Post by jackpf »

Because your container div is positioned absolutely and positions itself with percentages.
drdokter
Forum Newbie
Posts: 21
Joined: Thu Jul 23, 2009 10:57 am

Re: webpage cut off

Post by drdokter »

How should it be coded then?
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: webpage cut off

Post 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.
drdokter
Forum Newbie
Posts: 21
Joined: Thu Jul 23, 2009 10:57 am

Re: webpage cut off

Post 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>
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: webpage cut off

Post 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?
drdokter
Forum Newbie
Posts: 21
Joined: Thu Jul 23, 2009 10:57 am

Re: webpage cut off

Post 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.
drdokter
Forum Newbie
Posts: 21
Joined: Thu Jul 23, 2009 10:57 am

Re: webpage cut off

Post 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!
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: webpage cut off

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: webpage cut off

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