Help with CSS (Center website on screen)



HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin:0; padding:0;}
body {width:100%;}
#wrapper {width:90%; margin:0 auto;}
</style>
</head>

<body>
<div id="wrapper">
blah blah
</div>
</body>
</html>
You could center it like this, change the width in % to what you need, can also be in px or em etcetera
 
Last edited:
or here, I just took a look at your css file:

HTML: 
/* 
----------------------------------------------------------------------------- 
BASIC INLINE/TEXT STYLING
-----------------------------------------------------------------------------*/

body {
    background: #fafafa url(images/page.png) repeat-x scroll left top;
}


body{
    
    font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:16px;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    margin: 0;
    padding: 0;
    width:100%;
}


#wrapper{
    background-color:#fff;
    width: 960px;
    margin:0 auto;
    overflow: hidden;
    border-left:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
}
 
Your #wrapper's margin is "0", which means it has a 0px margin for top, right, bottom, and left.

Change it to "0 auto" and that will make the top and bottom margins 0px and the right and left margins be centered on the screen.
 
Rexibit said:
Your #wrapper's margin is "0", which means it has a 0px margin for top, right, bottom, and left.

Change it to "0 auto" and that will make the top and bottom margins 0px and the right and left margins be centered on the screen.
Click to expand...

Is this change in regards to the forum or the skyscraper problem? I believe I already made that change
 
CLKeenan said:
Is this change in regards to the forum or the skyscraper problem? I believe I already made that change
Click to expand...

It's in regards to the entire site. It's all aligned to the left of the screen. Check in Firebug and you will see that when you make the change as I pointed out, it'll fix the positioning.

The skyscraper issue is a problem with the total content width. After you fix the margins for the #wrapper, then you'll be able to tackle that.
 
CLKeenan said:
Well, the site (Free Notes, Outlines, Vocab and Practice Exams | Course-Notes.Org) is now aligned to the middle. It's the forum (Course-Notes.Org Community - Powered by vBulletin) that isn't. It also has the skyscraper issue with it appearing too far to the right.
Click to expand...

Right. I meant the forum. I was just going off the link you gave. I wasn't checking to URL.

Attached are some images to help you.

As far as the skyscraper ad, it's because it's positioned absolutely. It will "Always" go to that position. Different resolutions will give different positions. You'll need to revise how you are structuring the tags on the page.

I've included a quick fix to make it work with my resolution. A better option would be to widen the wrapper, then make the container of the actual forum a fixed/percentage width and give the skyscraper ad the remaining width and make it float left and have a margin that will keep it a fixed distance to the right of the content.
 

Attachments

  • course-notes-forum_1.jpg
    course-notes-forum_1.jpg
    72.8 KB · Views: 3
  • course-notes-forum_2.jpg
    course-notes-forum_2.jpg
    68.9 KB · Views: 2
  • course-notes-forum_3.jpg
    course-notes-forum_3.jpg
    75 KB · Views: 2
  • course-notes-forum_4.jpg
    course-notes-forum_4.jpg
    78.3 KB · Views: 2
Main Site (Drupal):
Chrome/Firefox -> Center aligned. Skyscaper displays properly. Placement is hardcoded to 1325px though. Ideally it would be 20 pixels to the right of the main column.
IE -> Center aligned. Skyscaper displays properly. Placement is hardcoded to 1325px though. Ideally it would be 20 pixels to the right of the main column.

percentage width and give the skyscraper ad the remaining width and make it float left and have a margin that will keep it a fixed distance to the right of the content.


That sounds exactly what I need. If you're interested in coding it, I'd be interested in paying you.

Forum (vBulletin):
Chrome/Firefox -> Center aligned. Skyscraper does not appear anywhere.
IE -> Far right aligned. Skyscraper does not appear anywhere.

CSS file for both forum and drupal is here: http://www.middleschoolhq.com/themes/platform/style.css
 
You must log in or register to reply here.
Top Bottom