Reply
Ensuring website fills users screen
Old 05-16-2008, 02:21 PM Ensuring website fills users screen
Novice Talker

Posts: 5
Hi all,

I've found a tutorial to center web pages using an external css style sheet.

I cant seem to get it to work though, can anyone spot what I'm doing wrong?

The external stylesheet is this:


/* stylesheet to centre a page */

div#container {
width: 725px;
margin: auto;
}

I have this saved as stylesheet.css in my public_html folder on the remote server.(same location as the web pages)

Within the head tags of my web page I have:


<link href="/stylesheet.css" rel="stylesheet" type="text/css" />


After the first body tag I have:

<div id="container">


And before the second body tag I have:

</div>

Is all this correct?

Thanks alot.

Last edited by Iotrez : 05-16-2008 at 03:23 PM.
Iotrez is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 05-16-2008, 04:07 PM Re: Ensuring website fills users screen
johniman7's Avatar
Webmaster Talker

Posts: 713
Name: John Irving
First I would remove the slash before the location of your style sheet because I believe you said you put the style sheet in the same directory as your pages. Second, the margin: auto; doesn't work in all browsers as far as I know. I remember having difficulties with browsers not doing that correctly.

Third this code really won't fill the user's screen, it will just make it 725px wide and centered. There is nothing wrong with this though. Users with smaller screens may have to scroll to see some of it, users with big screens will have some whitespace on the left and right of the div.

To truly make it fill the users screen you would use...

Code:
#container { width: 100%; height: 100%; }
... but that isn't really a great thing to do as it will distort in weird shapes.
__________________
John Irving: President, JLI Media
Loved by few, Hated by many, Respected by All
Chernobyl Accident ~ Xmod Li Ion Kits
johniman7 is offline
Reply With Quote
View Public Profile Visit johniman7's homepage!
 
Old 05-16-2008, 05:01 PM Re: Ensuring website fills users screen
Novice Talker

Posts: 5
Thanks for the reply.

I removed the slash but it is still not working.

The external css sheet doesn't seem to be having any affect at all on the webpage.
Iotrez is offline
Reply With Quote
View Public Profile
 
Old 05-16-2008, 07:19 PM Re: Ensuring website fills users screen
joder's Avatar
Flipotron

Posts: 6,350
Name: James
Location: In the ocean.
Webmaster-Talk has a CSS forum with a sticky thread that answers your question.
joder is offline
Reply With Quote
View Public Profile
 
Old 05-16-2008, 07:51 PM Re: Ensuring website fills users screen
Novice Talker

Posts: 5
I just tried using notepad instead of wordpad to create the .css file and it worked.
Iotrez is offline
Reply With Quote
View Public Profile
 
Old 05-16-2008, 08:45 PM Re: Ensuring website fills users screen
LadynRed's Avatar
Super Moderator

Posts: 6,065
Location: Tennessee
http://www.webmaster-talk.com/css-fo...r-website.html

Try margin:0 auto; then add position:relative to #container.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-17-2008, 03:54 PM Re: Ensuring website fills users screen
joder's Avatar
Flipotron

Posts: 6,350
Name: James
Location: In the ocean.
Quote:
Originally Posted by Iotrez View Post
I just tried using notepad instead of wordpad to create the .css file and it worked.
Don't use wordpad or Word for programming. Use a text or programmers editor. Word processors add extra formatting.
joder is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Ensuring website fills users screen
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 9.86234 seconds with 13 queries