web designing and screen res

DJMK4 · 17 Apr 2007 at 13:44

See below

www.dmoranda.ukfsn.org

is there anyway to get it to centre the container div in lower screen resolutions to get it to fit in the whole screen and stop any scrolling? or is it not worth it?

Sic · 17 Apr 2007 at 16:50

you'll have to take out your min-width declaration. I've also made some other changes (namely to your navigation ul), however, i think your hacks might be doing weird things to the navigation at 800x600. try this (not tested in IE

):

Code:

/* CSS Document */




/*//////Layout Objects//////*/

* {
		margin: 0;
		padding: 0;
}

body {
		background-image: url("images/body.gif");
		margin: 3% auto;
		padding: 0;
		text-align: center;
}

#container {
		margin:0 auto;
		width: 70%;
		background-color: #FFFFFF;
		border:1px solid #000;
		
}


/*Banner size 890px X 90px*/
#banner {
		margin: 2px;
		height: 90px;
		border:1px solid #000;
		background-image: url(images/banner.gif);
		background-repeat: no-repeat;
}

#menu {
		margin: 2px;
		height:24px;
		background-color:#666666;
		border:1px solid #000;
}


#body {
		margin: 2px;
		height: 75%;
		background-color: #CCCCCC;
		border:1px solid #000;
		overflow: auto;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#footer {
		margin: 2px;
		height: 18px;
		background-color:#666666;
		border:1px solid #000;
		clear:left;
		text-align: right;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color:#cccccc;
}

#phpcontainer {
		width: 500px;
		height: 200px;
		margin:0 auto;
}


		
/*/////End of Layout Objects//////*/



/*/////All Hacks//////*/


/*Box Model Hack for IE Browsers*/
* html #container {
    	width: 85%; /* for IE5 and IE6 in quirks mode */
    	w\idth: 85%; /* for IE6 in standards mode */
}

/*End of Box Model Hack*/



/*Hack for IE min-width*/
* html .minwidth {
		border-left:900px solid #CCCCCC;
	
}

* html .container {
		margin-left:-900px;
		position:relative;
		background-image: url("images/body.gif");
}

/*\*/
* html .minwidth, * html .container {
		height: 1px;
}
/**/


/*///////End of hack for IE min-width///////*/


/* /////End of Hacks/////*/





/*//////Start Of Navigation//////*/

#nav ul{
		padding : 1px 0;
		margin : 0 auto;
		text-align: center;
		width: 70%;	
}

#nav li{
   		display : inline;
		list-style-type: none;
}


#nav ul li a{
		background-color: #666666;
   		color: #cccccc;
   		font-weight : bold;
   		text-decoration : none;
                padding: 1px 10px;
   		border:1px solid #000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#nav ul li a:hover{
		background-color:#333333;
		color:#ffffff;
}


/*Code to get the current link feature working*/

#nav a:link#currentLink, #nav a:visited#currentLink, #nav a:hover#currentLink{
		color: #fff; 
		background-color: #333;
}
/*//////End Of Navigation/////*/


/*//////Start of Text Styles//////*/

h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px ;
		font-weight: bold ;
		margin: 10px auto ;
		text-align: center;
		text-decoration: underline;
}

p {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		margin: 5px auto ;
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 10px;
}



p.main {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		margin: 5px auto ;
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 10px;
		text-align: justify;
}

p.subtitle {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		font-weight: bold;
		margin: 5px auto ;
		text-align: left;
		text-decoration: underline;
		padding-left: 95px;
		padding-right: 100px;
		padding-bottom: 10px;
}

		
/*//////End of Text Styles//////*/


/*//////Start of Image Styles//////*/

img.floatLeft { 
    float: left;
    margin: 4px;
	padding-left: 100px;
	width: 100px;
	height: 100px;
	

}
img.floatRight { 
    float: right; 
    margin: 4px;
	padding-right: 100px;
	width: 100px;
	height: 100px;
	
}

img.floatRightClear { 
    float: right; 
    clear: right; 
    margin: 4px; 
	padding-right: 100px;
	width: 100px;
	height: 100px;
}


img.floatLeftClear { 
    float: left; 
    clear: left; 
    margin: 4px; 
	padding-left: 100px;
	width: 100px;
	height: 100px;
}
/*//////End of Image Styles//////*/




/*//////Start of form styles//////*/

.fname {
		width:200px;
}

.femail {
		width:200px;
}



/*//////end of form Styles//////*/

psyr33n · 17 Apr 2007 at 17:18

Whoa, divitis; you could do that in 2 divs, as an example a div for container, h1 for header, ul for nav, div for content and p for footer.

DJMK4 · 17 Apr 2007 at 19:38

Sic said:

you'll have to take out your min-width declaration. I've also made some other changes (namely to your navigation ul), however, i think your hacks might be doing weird things to the navigation at 800x600. try this (not tested in IE

):

Code:

/* CSS Document */




/*//////Layout Objects//////*/

* {
		margin: 0;
		padding: 0;
}

body {
		background-image: url("images/body.gif");
		margin: 3% auto;
		padding: 0;
		text-align: center;
}

#container {
		margin:0 auto;
		width: 70%;
		background-color: #FFFFFF;
		border:1px solid #000;
		
}


/*Banner size 890px X 90px*/
#banner {
		margin: 2px;
		height: 90px;
		border:1px solid #000;
		background-image: url(images/banner.gif);
		background-repeat: no-repeat;
}

#menu {
		margin: 2px;
		height:24px;
		background-color:#666666;
		border:1px solid #000;
}


#body {
		margin: 2px;
		height: 75%;
		background-color: #CCCCCC;
		border:1px solid #000;
		overflow: auto;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#footer {
		margin: 2px;
		height: 18px;
		background-color:#666666;
		border:1px solid #000;
		clear:left;
		text-align: right;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color:#cccccc;
}

#phpcontainer {
		width: 500px;
		height: 200px;
		margin:0 auto;
}


		
/*/////End of Layout Objects//////*/



/*/////All Hacks//////*/


/*Box Model Hack for IE Browsers*/
* html #container {
    	width: 85%; /* for IE5 and IE6 in quirks mode */
    	w\idth: 85%; /* for IE6 in standards mode */
}

/*End of Box Model Hack*/



/*Hack for IE min-width*/
* html .minwidth {
		border-left:900px solid #CCCCCC;
	
}

* html .container {
		margin-left:-900px;
		position:relative;
		background-image: url("images/body.gif");
}

/*\*/
* html .minwidth, * html .container {
		height: 1px;
}
/**/


/*///////End of hack for IE min-width///////*/


/* /////End of Hacks/////*/





/*//////Start Of Navigation//////*/

#nav ul{
		padding : 1px 0;
		margin : 0 auto;
		text-align: center;
		width: 70%;	
}

#nav li{
   		display : inline;
		list-style-type: none;
}


#nav ul li a{
		background-color: #666666;
   		color: #cccccc;
   		font-weight : bold;
   		text-decoration : none;
                padding: 1px 10px;
   		border:1px solid #000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#nav ul li a:hover{
		background-color:#333333;
		color:#ffffff;
}


/*Code to get the current link feature working*/

#nav a:link#currentLink, #nav a:visited#currentLink, #nav a:hover#currentLink{
		color: #fff; 
		background-color: #333;
}
/*//////End Of Navigation/////*/


/*//////Start of Text Styles//////*/

h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px ;
		font-weight: bold ;
		margin: 10px auto ;
		text-align: center;
		text-decoration: underline;
}

p {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		margin: 5px auto ;
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 10px;
}



p.main {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		margin: 5px auto ;
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 10px;
		text-align: justify;
}

p.subtitle {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		font-weight: bold;
		margin: 5px auto ;
		text-align: left;
		text-decoration: underline;
		padding-left: 95px;
		padding-right: 100px;
		padding-bottom: 10px;
}

		
/*//////End of Text Styles//////*/


/*//////Start of Image Styles//////*/

img.floatLeft { 
    float: left;
    margin: 4px;
	padding-left: 100px;
	width: 100px;
	height: 100px;
	

}
img.floatRight { 
    float: right; 
    margin: 4px;
	padding-right: 100px;
	width: 100px;
	height: 100px;
	
}

img.floatRightClear { 
    float: right; 
    clear: right; 
    margin: 4px; 
	padding-right: 100px;
	width: 100px;
	height: 100px;
}


img.floatLeftClear { 
    float: left; 
    clear: left; 
    margin: 4px; 
	padding-left: 100px;
	width: 100px;
	height: 100px;
}
/*//////End of Image Styles//////*/




/*//////Start of form styles//////*/

.fname {
		width:200px;
}

.femail {
		width:200px;
}



/*//////end of form Styles//////*/

seems ok but again i want the min-width so when the window is minimised it will only shrink the container div down to a certain point. also the menu objects are small, i want them to space out to fill out the nav bar abit...see here to see what i mean.

www.dmoranda.ukfsn.org

Test this in 800x600 it dont look right :confused:

also 1024x768 which is the minimum these days the container div still goes off the bottom of the page.

DJMK4 · 18 Apr 2007 at 10:29

Anyone?

Iv just re-arranged some stuff, im not to fussed about 800x600 browsers because hardly anyone uses them, 1024x768 is a bare minimum these days so i would like it to display in them browsers ok. and it displays ok at higher resolutions:

can someone test the below link in 1024x768 and tell me if it fits in the screen (i.e. no scrolling down)..

can it be tested in IE and firefox?

psyr33n · 18 Apr 2007 at 13:26

Just use percentages and make the layout semi-liquid?

DJMK4 · 18 Apr 2007 at 13:33

I was told to stay away from percentages?

What exactly do i need to use percentages on? just the container div? or everything?

also does anyone have any guides on semi-liquid layouts

psyr33n · 18 Apr 2007 at 13:59

All elements you've given fixed widths. Who told you to stay away from percentages and why?

DJMK4 · 18 Apr 2007 at 14:15

psyr33n said:
All elements you've given fixed widths. Who told you to stay away from percentages and why?

Cant find the thread it was in, what exactly do i need to change to %'s then? just the width of the container? or the width of all elements on the page? is it just the widths or do i need to do the height aswel?

blade007 · 18 Apr 2007 at 14:27

if you work on percentages you have to do a bit more design work .. coz everything will expand and contract, so you need to think about your div backgrounds and how they can be styled (textures than can be repeated on -y)

i don't like the current top-margin of 3% that you have. the site moves around depending upon screen resolution.

psyr33n · 18 Apr 2007 at 14:32

what exactly do i need to change to %'s then? just the width of the container? or the width of all elements on the page?

psyr33n said:
All elements you've given fixed widths.

Look into different layout types and how they work:
-http://www.autisticcuckoo.net/archive.php?id=2004/07/21/fixed-liquid-elastic
-http://css-discuss.incutio.com/?page=FluidDesign

Whether to go fixed or liquid, or elastic (an increasingly-used technique):
-http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/
-http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/

DJMK4 · 18 Apr 2007 at 14:35

blade007 said:
if you work on percentages you have to do a bit more design work .. coz everything will expand and contract, so you need to think about your div backgrounds and how they can be styled (textures than can be repeated on -y)

i don't like the current top-margin of 3% that you have. the site moves around depending upon screen resolution.

What do you suggest then? i made it 3% because people were compaining that they had to scroll on lower resolutions?