Web Wiz - Green Windows Web Hosting

  New Posts New Posts RSS Feed - Centering page at res. 1024
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Topic ClosedCentering page at res. 1024

 Post Reply Post Reply
Author
seanog View Drop Down
Newbie
Newbie


Joined: 25 October 2005
Status: Offline
Points: 6
Direct Link To This Post Topic: Centering page at res. 1024
    Posted: 02 November 2005 at 11:25am
Hi,
I have this fixed sidebar website www.loversofbeauty.com/rawfood.htm and at res 800x600 it looks ok, but at res 1024 I want to have it centered (it is fixed body pixel size), and also to have the right hand scroll bar along th EDGE of the screen...? Thank you. This is the CSS:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">




<head>

<!--#include virtual="/meta/index.txt"-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>


<style type="text/css">

<!--

body {
margin : 0;
padding : 0;
background : #000000;
color : white;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : medium;
width : 790px;
margin-right : auto;


}
.invisible {
display : none;
}
#fixed {
position : absolute;
top : 0;
left : 0;
width : 10em;
height : 100%;
background : #eeeeee;
color : black;
}
body > #fixed {
position : fixed;
}
#header {
margin-left : 9em;
padding-left : 6em;
background : #99ff33;
color : #000fff;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 1.5;
}
#content {
margin-left : 10em;
padding : 1em;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size :14px;
line-height : 1.5;
background : #00cc66;
}
code, pre {
font-family : monospace;
font-size : large;
font-weight : bold;
background : transparent none;
color : yellow;
}
.center {
text-align : center;
}
h1 {
font-size : 4em;
text-align : center;
}
h2 {
margin-top : 2em;
}
h3 {
margin-top : 1em;
text-align : center;
}
h4 {
margin-top : 10px;
text-align : center;
}
a:link {
background : transparent none;
color : #999999;
}
a:visited {
background : transparent none;
color : #666666;
}
a:active {
background : transparent none;
color : #99ff00;
}
a:hover {
background : transparent none;
color : #000000;
}
#fixed a {
text-decoration : none;
padding-left : 1.5em;
background : none;
font-weight : bold;
font-size : smaller;
margin-bottom : 2px;
}
#fixed a:hover {
background : none;
color : #ffcc33;
}
div.address {
border-top : 0px solid black;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}
div.address img {
border : 0;
text-align : left;
}


-->
</style>

Back to Top
dpyers View Drop Down
Senior Member
Senior Member


Joined: 12 May 2003
Status: Offline
Points: 3937
Direct Link To This Post Posted: 03 November 2005 at 7:24pm
Drop the fixed width. Use percentages and relative positioning. You can wrap the div in another div that's aligned right in order to position stuff along the right edge of the screen.

Never assume that your users always have their browsers set for full screen. At least half probably browse with a reduced size browser. The best written sites accommodate any "viewport size" and disregard screen size. That's what fluid design is all about - viewports - not screens.

Lead me not into temptation... I know the short cut, follow me.
Back to Top
seanog View Drop Down
Newbie
Newbie


Joined: 25 October 2005
Status: Offline
Points: 6
Direct Link To This Post Posted: 05 November 2005 at 5:00am
yea, I see the advantage of the fluid design, but could I also have my fixed sidebar included?
Back to Top
dj air View Drop Down
Senior Member
Senior Member
Avatar

Joined: 05 April 2002
Location: United Kingdom
Status: Offline
Points: 3627
Direct Link To This Post Posted: 05 November 2005 at 5:52am
are you referring to the white bar on the left

yes set the div's or table width to a set width if you want it a certain size or a %.

on another note might be worth looking at some image components like aspjpeg etc... those images are very large and will guzzle your bandwidth like anything.

or you could 1. compress the images or 2. have a compressed version also.
Back to Top
seanog View Drop Down
Newbie
Newbie


Joined: 25 October 2005
Status: Offline
Points: 6
Direct Link To This Post Posted: 05 November 2005 at 3:08pm
I mean that the sidebar with links is fixed (doesn't move) when you scroll vertically. Actually I made a couple of changes: made the body width 100%, so it stretches to fill the screen at 1024 res (which isn't very asthetic, but at least you can squeeze the page to a smaller size and still read most of it). Thanks.
Back to Top
seanog View Drop Down
Newbie
Newbie


Joined: 25 October 2005
Status: Offline
Points: 6
Direct Link To This Post Posted: 05 November 2005 at 3:10pm
oh ..and of course I compressed the images too.
www.loversofbeauty.com/rawfood.htm
Back to Top
dpyers View Drop Down
Senior Member
Senior Member


Joined: 12 May 2003
Status: Offline
Points: 3937
Direct Link To This Post Posted: 06 November 2005 at 10:17am
The trick to web site design is to remember that the user has control over how they view the site. It's a fluid medium and no fixed like a print page where you have absolute control over the layout.

The best you can do is suggest a layout. After that it's up to the user and the limitations of their particular browser.

At larger viewport sizes, your site looks like this in Opera...


In Netscape, Mozilla, IE, and FireFox the off-white background color of the left sidebar carries all the way to the bottom of the page but the black area under the green table remains.

Edit: Regarding moving the sidebar links as the window scrolls...
I've seen a couple of CSS approaches t this but they usually involve using javascript to some degree. I think that you're probably better off looking for a single javascript solution for having the menu div scroll. I understand that there's a couple of AJAX methods out there but don't know how supportable they are across browser types.

Javascript comes in good and very bad flavors so you may need to try a couple before you hit on one that works.

Even better would be to repeat the menu in a footer across the bottom of the page. Avoids java script complications and gives the user another way to navigate that most will be familiar with.


Edited by dpyers - 06 November 2005 at 10:24am

Lead me not into temptation... I know the short cut, follow me.
Back to Top
 Post Reply Post Reply

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.08
Copyright ©2001-2026 Web Wiz Ltd.


Become a Fan on Facebook Follow us on X Connect with us on LinkedIn Web Wiz Blogs
About Web Wiz | Contact Web Wiz | Terms & Conditions | Cookies | Privacy Notice

Web Wiz is the trading name of Web Wiz Ltd. Company registration No. 05977755. Registered in England and Wales.
Registered office: Web Wiz Ltd, Unit 18, The Glenmore Centre, Fancy Road, Poole, Dorset, BH12 4FB, UK.

Prices exclude VAT at 20% unless otherwise stated. VAT No. GB988999105 - $, € prices shown as a guideline only.

Copyright ©2001-2026 Web Wiz Ltd. All rights reserved.