Centering Page Of Html At Various Display Widths - Viewing Screen Shots No Matter Resolution

ctbrons

Apr 10 2006, 09:32 PM

I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How do I make the page always appear in the middle?
I have seen many sites set up that will adjust accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the website: www.faithcity.org/test.html.

Moving to the html Topic

truefusion

Apr 10 2006, 09:38 PM

Well, if you have a table it's easier. The main table, you could just use the align attribute and give it a value of "center". That would do it. But, if you're not a table lover, then maybe someone else can suggest a way.

michaelper22

Apr 10 2006, 10:07 PM

If the whole page is in a div tag, then add the following CSS style to it:

CODE

text-align: center;

This is assuming that the page has a preset width.
Or try this:

CODE

<div style="text-align: center;">
PAGE CONTENT HERE
</div>

That will center anything within the <div> tag.

jlhaslip

Apr 10 2006, 10:13 PM

The css you have used is this:

CODE

<!-- /* */
body {
margin: 0;
padding: 0;
position: top center;
background: silver;
font: 80% verdana, arial, sans-serif;
}

In order to center the page regardless of the screen width, use auto for the left and right margins. And text-align:center for some of the Older browsers. Like this:

CODE

<!-- /* */
body {
margin: 0 auto;
text-align:center; // for older browsers
padding: 0;
background: silver;
font: 80% verdana, arial, sans-serif;
}

And I have removed the (position top,center), also, in order to remove any potential conflicts.

Dragonfly

Apr 11 2006, 05:50 AM

If you are using separate tables for each items, meaning no tables are inside other tables then all the tables should have align="center" tags in order for all the contents to go to the center in any resolutions.

ctbrons

Apr 11 2006, 09:11 PM

QUOTE(jlhaslip @ Apr 10 2006, 05:13 PM)

The css you have used is this:

CODE

<!-- /* */
body {
margin: 0;
padding: 0;
position: top center;
background: silver;
font: 80% verdana, arial, sans-serif;
}

In order to center the page regardless of the screen width, use auto for the left and right margins. And text-align:center for some of the Older browsers. Like this:

CODE

<!-- /* */
body {
margin: 0 auto;
text-align:center; // for older browsers
padding: 0;
background: silver;
font: 80% verdana, arial, sans-serif;
}

And I have removed the (position top,center), also, in order to remove any potential conflicts.

I have made some adjustments, but it is still not completely correcting the problem. When viewing in the 800x600 I have to scroll to the right, but I cannot figure out how to eliminate that, and keep the rest of the site looking accurate.

Tyssen

Apr 11 2006, 10:00 PM

Remove the width: 100% from #menu.

WindAndWater

Apr 11 2006, 10:14 PM

Your problem's probably in the menu code

CODE

#menu {
position: absolute;
top: 5;
left: 135;
z-index: 100;
[b]width: 100%;[/b]
}

Many browsers won't use margin: auto correctly unless the width is fixed in pixels. I'm also not sure whether margin: 0px auto (what jlhaslip suggested) is valid css or not -- it could be, I have no clue. I tend to use either all the margins in the margin command, or use them individually. i.e. I'd have

CODE

margin: 0px auto auto auto;
or
margin-top: 0px;
margin-right: auto;
margin-left: auto;

but that might just be a personal preference.

Edit: I think you can also get away with using css instead of javascript for your menus, using the :hover attribute.

Tyssen

Apr 11 2006, 11:28 PM

QUOTE(WindAndWater @ Apr 12 2006, 08:14 AM)

I'm also not sure whether margin: 0px auto (what jlhaslip suggested) is valid css or not

It is. In CSS, top mirrors bottom and right mirrors left, so if top and bottom are the same and left and right are the same, you only need to specify two values. The only browser that doesn't quite cope with that is Mac IE5 where you often have to specify both margin-left: auto and margin-right: auto even though they're the same.

jlhaslip

Apr 12 2006, 06:13 AM

Here, catch ...

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Test</title>
<script type="text/javascript"><!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

//-->
 </script>
  <style type="text/css">
<!-- body {
margin: 0 auto;
padding: 0;
background: silver;
font: 80% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}


#menu {
position: absolute;
top: 5;
z-index: 100;

}



#menu dl {
float: left;
width: 8em;
background: #7F7C75;
margin: 0 1px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #7F7C75;
border: 1px solid gray;
}

#menu dd {
border: 1px solid gray;
}

#menu li {
text-align: top center;
background: #7F7C75;
}

#menu li a, #menu dt a {
color: #FEF2DC;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: #000000;
}

#site {
position: absolute;
z-index: 1;
top: 70px;
left: 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; }

a {text-decoration: none;
color: #222;
}

-->

  </style></head>

<body>

<div style="margin: 0px auto; text-align: center;" id="menu">
<dl><dt onmouseover="java script:montre();"><a title="Home" href="http://www.faithcity.org/index.html">Home†</a></dt></dl>

<dl><dt onmouseover="java script:montre('smenu1');"><font color="#fef2dc">Programs</font></dt><dd style="display: none;" onmouseout="java script:montre('');" onmouseover="java script:montre('smenu1');" id="smenu1">
    <ul>

      <li><a href="http://faithcity.org/familyshelter.html">Family
Shelter</a></li>

      <li><a href="http://faithcity.org/hopeformen.html">Hope
for Men</a></li>

      <li><a href="http://faithcity.org/hopeforwomen.html">Hope
for Women</a></li>

      <li><a href="http://faithcity.org/foodprogram.html">Food
Program</a></li>

      <li><a href="http://faithcity.org/clothing.html">Clothing
Outreach</a></li>

    </ul>

  </dd></dl>

<dl><dt onmouseover="java script:montre('smenu2');"><font color="#fef2dc">Facilities</font></dt><dd style="display: block;" onmouseout="java script:montre('');" onmouseover="java script:montre('smenu2');" id="smenu2">
    <ul>

      <li><a href="http://faithcity.org/chapel.html">Chapel</a></li>

      <li><a href="http://faithcity.org/diningroom.html">Dining
Room</a></li>

      <li><a href="http://faithcity.org/dormitory.html">Dormitory</a></li>

    </ul>

  </dd></dl>

<dl><dt onmouseover="java script:montre();"><a title="Staff" href="http://www.faithcity.org/staff.html">Staff</a></dt></dl>

<dl><dt onmouseover="java script:montre('smenu3');"><font color="#fef2dc">Activities</font></dt><dd style="display: none;" onmouseout="java script:montre('');" onmouseover="java script:montre('smenu3');" id="smenu3">
    <ul>

      <li><a href="http://faithcity.org/children.html">Children's
Activities</a></li>

      <li><a href="http://faithcity.org/chapelservices.html">Chapel
Services</a></li>

      <li><a href="http://faithcity.org/biblestudies.html">Bible
Studies</a></li>

      <li><a href="http://faithcity.org/princesstea.html">Princess
Tea</a></li>

    </ul>

  </dd></dl>

<dl><dt onmouseover="java script:montre();"><a title="History" href="http://www.faithcity.org/history.html">History</a></dt></dl>

<dl><dt onmouseover="java script:montre();"><a title="Contact" href="http://www.faithcity.org/contact.html">Contact</a></dt></dl>

</div>

<img style="position: absolute; top: 0px; " src="test_files/greybar.jpg"><img style="position: absolute; top: 31px;" src="test_files/supportheader.jpg"><img style="position: absolute; top: 244px;" src="test_files/goldbar.jpg"><img style="position: absolute; top: 275px;" src="test_files/backgroundfade.jpg"><img style="position: absolute; top: 539px;" src="test_files/goldbar.jpg">


</body></html>

There were some pixels in the menu and the images which were side-shifting them. Absolute positioning isn't relly recommended for a beginning site, but what the heck, go for it...
Next you will have to work on the Menu drop-downs. They didn't work for me, but I have an old decrepit Browser and nothing fancy like that works in it. it would help if you could post the link where you got the javascript coding from and someone could help sort that out, too. or maybe have a look for a Cascading Style Sheet solution. They work in all Browsers even if the javascript is turned off.

Latest Entries

moldboy

Apr 25 2006, 02:58 AM

the easiest way is to add a <center> after the <body>, and a </center> right before the </body>

Tyssen

Apr 24 2006, 10:56 PM

Window moving/resizing scripts are, in my opinion, one of the rudest and most annoying things that javascript can do. I've got my window set the way it is for a reason - cos I like it that way. I don't want the designer of a site I haven't even seen yet to change my window without even asking me. It's like me walking into someone else's house and moving their furniture around.

brano

Apr 24 2006, 12:23 PM

QUOTE(ctbrons @ Apr 10 2006, 10:32 PM)

Moving to the html Topic

Try to add this script to head of your document:

<script language="JavaScript1.2">

</script>

Tyssen

Apr 12 2006, 10:27 PM

You need to go back to the Suckerfish tutorial and look at it more closely. For starters, your second level <ul>s are outside the <li></li> that's meant to enclose them.

Recent Queries:-

how to display text in the middle of screen using html - 71.04 hr back. (1)

Similar Topics

Keywords : centering html display widths viewing screen shots resolution

where did you learn html from? - (84)
HI, i am intresting in knowing where you began learning html of what inspired you to start learning
html. which programs did you use or which progs dyu use?...

Help Making A Web Adress Bar Using Html/js - (9)

Html Cool Codes? - (6)

hey guys..whats up..well i ws just wondering if you guys have any cool codes for myspace or
something..you know to design a page using html/css codes...see i tried googling around but all the
sites had the same thing..they dont have a unique one...i want like games in my page...like my
friend he had like tetris in his page..and i want a game// or anything like that to make my page
cool /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' />
anybody????plz...PEAcE!...

Html Ascii Codes - A Complete List - downloadable php file (3)

I was often frustrated at how, despite there being thousands of ASCII "special characters" such as
&8659; , websites that claimed to list them all only listed the first 256. To combat this issue,
I have created a table which lists the first 10,001 - from  to &10000; I am sure
there are many more but it is simply not feasible to create a table with many more rows as viewing
it would put terrific strain on the browser.! You can download the file in two forms. One uses
PHP to dynamically create the table (1KB), the other has it ready-made in pure HT...

Html Div Help [resolved] - help with the divs in ipb (1)

hey guys, as you may know, i have ipb 2.3.4 set up on my site. i am currently using the centura
skin and like it a lot. i have customised the header bar in terms of the logo, however also want a
slab of text linking to the forums home at the top of the banner. i have so far managed to achieve
this to work in firefox (see attached screenshot), however it just screws up in ie, opera and safari
(i think). the link is here here is the code, both html and css, of the ipb header, and i have
placed between stars the parts i have edited: CODE the css (only the ed...

Best Way To Protect Html Form Fields - Looking for suggestions on how to protect form fields during user inpu (3)

My working example is here http://sonesay.trap17.com/application.php The form submits to itself
and stores what ever the user inputs into session variables. Thats all fine and I have validation
checks for it, I wanted to add more and I remember comming across a site where they would lock from
fields to prevent any changes if the information was already supplied and validated. I'm looking
to build something similar but cant seem to figure out how to get that same effect at this time.
Heres my program logic so far application.php includes('application_content....

Help With Css/html Layout - Horizontal List Problems (5)

I can't figure out why this horizontal list isnt working. Underneath my banner is supposed to
be a green gradient bar with a list of links in the center of the page. The links are all the way
to the left and are really small. The banner is also overlapping the list for some reason. This is
my current layout(don't worry, I'm not trying to advertise).
http://www.stormgaming.net/stormcreations/ This is my CSS file
http://www.stormgaming.net/stormcreations/storm.css Thanks in advance for any help....

Html Application Form - (6)

does anyone know how to make a form/application that when you submit the form with the submit but it
sends it in a email to you email address if anyone on here knows please please let me know thanks, i
want this so i can have members apply for a team on my football site and there information will come
back to me and i can accept or reject them for that job...

Html Editor - non WYSIWYG (19)

What editor can I download and use that isn't a WYSIWYG(what-you-see-is-what-you-get) and is
free. Currently I use NotePad but I want something better....

Login In Using Html - (12)

I have looked around and I can't find any code to help me out. I want to make it so you can log
in to my site to get member featues. Could some one please help me...

Do You Know Html? - Just Wondering, most of you would know. (65)

Well I was just wondering, i know this polol might sound stupid, as this is a hosting site forum and
the chances are you do know HTML, but the other day i met 2 people who didt have a clue what HTML
was, and was just at the forum because they found this forum active. And also do you know any other
programming languages, just wondering. I myself know HTML, C++ kinda, and learing PHP. Talking about
Languages I know Tamil, English, Lote /tongue.gif' border='0' style='vertical-align:middle'
alt='tongue.gif' /> ....

Creating Rss Feeds For Wapsites - How to display rss feeds in a php enabled site (5)

Anyone who wants to help me? I want my site to have this feature but I don't know how.
/sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" /> Hope you could me
with embedding these xml files in my wml pages.. Moved to the HTML, XML ect.. forum ...

Creating Link In Html - Help Me With This! - (5)

edit: Neeeaavverrrminddd..... I was a total noob at php when i posted this and I needed help doing
something with bbcode in php and didn't really know what I was saying.. /blush.gif"
style="vertical-align:middle" emoid=":blush:" border="0" alt="blush.gif" /> Anyway topic
resolved......

Wanna Learn Html From Scratch - downloade an online tutorial,formatted my c: lost it forever,and FORGO (5)

id prefer something i can download .....coz my internet connection is highly intermittant Moved
from the Java section to the HTML section. ...

Ok Background Help Please - html (4)

OK so i've given up on the paint for background now how would i get it to look like this
http://img.photobucket.com/albums/v614/Dj1.../background.jpg without using paint and without it
coming out to look like this... http://img.photobucket.com/albums/v614/Dj169211/Damn.jpg like,
with just html code, not trying to use paint and do the BS any ideas?...

Html Question Concerning Pre Tag And Code Tag - (8)

My question is, why would anyone use the CODE tag when you can use the PRE tag? 1. The PRE tag
recognises white space, the CODE tag does not. 2. The CODE tag requires that you escape some
chars, the PRE tag does not. I cannot see anything that the CODE tag achieves that is special apart
from sounding as though it is perfect for displaying code which IMO it is not. Thanks. ...

Some More Help With Html - (2)

Ok so yet again i need some help i have this so far: CODE <html> <head>
</head> <BODY BGCOLOR="black" TEXT="white" LINK=#XXXXXX
VLINK=#XXXXXX> <body> <center><h1> Pearl
Harbor</h1></center> <hr> <p> <a
href="http://photobucket.com" target="_blank"><img
src="http://i173.photobucket.com/albums/w59/tuhyd/pearlharbor.jpg" border="0"
align=right alt="USS Arizona "></a></right> <a ...

Html Help - (6)

ok so i need help again i was wondering how i can make a navigation bar that looks like this
Free Website Templates 
Information Slide Show Pictures title="Time Line"> Time
Line  Im having a problem putting
the names of things that i want to go in those four boxes i tried to put in names but it didnt show
up so i was wondering if anyone could give me some help...

Help With Html - (11)

Ok so i just started learn html about a couple of weeks ago and i make a background image using this
code: CODE <style type="text/css"> body {
background-image:url("http://img.photobucket.com/albums/w59/tuhyd/backgrounds.jpg
4;); background-repeat: no-repeat}</style> and i am having trouble putting my
text on the top in the center becasue my links are on the left every time i try and move the text up
it moves the links down and separates them and i don't know what to do. added code tags.
please use appropri...

How To Display Php Code [resolved] - Html Help With Php Codebox (8)

I'm trying to make codebox for my guestbook so that users can post PHP code inside.. I tried
many versions but none of them works If i use , or i can display HTML code, but when i try to
write PHP code it executes it does not display.. There is a way to make swap for You have codebox
in forum to display php how can i make that?! thanks...

Html And Javascript - Not php as first indicated... (12)

Edit your ScrollBar colors Change "Your color", to color code, that u need. CODE <STYLE
type="text/css"> 
</STYLE> Insert Date Place this code between , tags CODE <script
language=Javascript> <!-- v...

Wanting To Touch Up/learn My Html Again - (26)

Ok, well recently i realized that i am not as skilled in HTML (such as building website layouts) as
i want to be, with tables etc... and so i was thinking about going through many many many many many
many sites and just touching up on my HTML and see if i can code my own website template before
starting to learn PHP because that is what i want to do. so, i am asking all of you experianced
people on trap17 what websites did you use to learn your HTML skills, yees i know i could go to
google and type in learn html or somthing along the lines of that, but i want to know wh...

Html Query - HTML Query (2)

OK, so I want to know if it's possible to have my links as a seperate file and simply reference
that file in the rest of my site's pages so that if I change the links, I don't have to go
and edit every single page of my site. Does anyone know how to do this?...

Having Html Troubles...... - Please help! (0)

I'm having troubles with the background colours on the HTML pages on my site
keri-j.trap17.com Basically, the colors are hex codes and i'm no HTML n00b, god no! But, I
just can't figure this one out! I have the background colour in the body tag (duh) " " on
all my pages but on some of them the background is white. This might be to do with some javascript i
have recently edited in each page or certain errors but whatever it is i can't figure it
out! This is my homepage with the correct background color This is my poetry page with the
fau...

Have You Used This Html Code? - very useful (9)

how do you do if you want to put a video or audio file on you page...maybe you will use CODE
<object><param name=url value="url"></object>/*simple format*/
CODE <div><embed src="url"></embed></div> /*simple
format*/ there is a very familiar code for carring out the video show : CODE <img
dynsrc="http://kenvi9999.googlepages.com/ff7.wmv" border=1>/*an example:FF7*/
have you used this html code...I just knew a tag can achieve video play that is really co...

Error In Css (or Html) - (5)

Well i am currently working on a project, and for this i need to fix this little error: Code is:
CODE $this->frm .= "<style type=\"text/css\">
                                                 </style>{$this->top}
                        <from action=\"$PHP_SELF\"
method=\"post\" name=\"\">
                        <table width=\"800�...

Html And Xhtml - serving the right kind (11)

Right now I have a site, which I've made XHTML 1.0 Strict. I am sending it as
application/xhtml+xml to browsers that say they can handle it, and as text/html to all other
browsers. Anyway, I started thinking that I'd much rather send proper HTML 4.01 to browsers that
don't understand XHTML instead of XHTML pretending to be HTML 4.01. It's not really a
problem with IE, because it is made to handle badly written sites, but who knows, some browser that
can handle HTML, but not XHTML, may be (correctly) parsing CODE <p> Hello <br />
World...

Width Of Display Area Of Browser Window - is there a formula? (6)

I am making a table in a website that's as big as the display area of the browser for instance:
CODE <Table border=0 cellpadding=0 cellspacing=0 width=?? align=center> .... .....
</table> How do I know the width of the browser display area? Better yet, is there a
general formula for that for other screen resolutions? I know a little bit of javascript, are
there functions for that?...

Screen Resolution - I need a code to help out here please... (6)

Hey everyone.. I was just wondering if there was a code/script that I could insert into my html
website to change viewers resolution from 1024x800 to 800x600 or something to that effect. It's
just I use 800x600 at home, and I programme it around that, and it's fine, but on some public
computers it's default to 1024x800 and can't be changed.. Is there a script to chance
this??? Help plz anyone!!! Thanks in advance, Sean....

Url Redirection = Javascript+html - Redirect using scripts! (4)

In javascript Browser redirection can be done in 3 ways: 1) Alert Redirect: CODE
<html> <script>     alert("This page has been moved to a new location...
click OK to be redirected.");     location = "http://www.your-website.com";
</script> </html> 2) Confirm and Redirect: CODE <html>
<script>     if(confirm("This page has been moved to a new location... would you
like to be redirected"))     {   location = "http://www.your-website.com";
    }...

Looking for centering, page, html, display, widths, viewing, screen, shots, matter, resolution

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE