Hi all

 

Can anyone tell me how I can stop things moving around when the window is re-sized?

 

my site is www.riacornall.co.uk

 

I want the tabs to stay the same width and the background image to reduce if the window is made smaller. Is that possible?

 

Thanks

Kerstey

 

CSS:

*{
padding:0;
font-size:100%;

}

body { 
font: 0.9em tahoma, arial;
color:white;
margin-top:20px;
background: black;
text-align:center;
}

a:link {
color:orange;
text-decoration:none;
}

a:visited {
color: orange;
text-decoration:none;
}

a:hover {
color: white;
text-decoration:none;
}

a:active  {
color: orange;
text-decoration:none;
}

#header{
margin-bottom:20px;
}

#header ul {
list-style: none;
padding: 0;
margin: 0;
}

#header li {
display: inline;
border: solid;
border-color: #FFFFCC;
border-width: 2px 2px 2px 2px;
float: left;
width: 14%;
background: url(Images/tab1.JPG) top right no-repeat;
margin: 0 0.5em 0 0;
}

#header a {
background-image: url(Images/tab1.JPG);
color:black;
display: block;
padding: 9px;
text-decoration: none;
}

#header a:hover {
color: white;
}

#header #selected {
font-weight: bold;
background-image: url(Images/tab1.JPG);
}	

#header #selected a{
background-image: url(Images/tab1.JPG);
color: white;
}

#main-content li{
width:200px;
border:solid #CCC;
border-width:0 1px 1px 0;
/* uncomment and adjust this if you want a rounded frame in Mozilla browsers
-moz-border-radius:20px;
*/
background:#FFF;
padding:10px;
text-align:center;
position:relative;
float:left;
display:inline;
margin:5px;
}

#fullplate-navigation{
list-style:none;
margin:5px 0 0 45px;

}

#fullplate-navigation li{
display:block;
float:left;
width:210px;

}

#previous{
text-align:left;
}

#next{
text-align:right;
}

#fullplate-navigation li a{
display:block;
width:190px;
padding:10px;
}

#fullplate-navigation li a:hover{
color:#333;
}

#fullplate-photo{
border:solid #EEE;
border-width:0 1px 1px 0;
/* uncomment and adjust this if you want a rounded frame in Mozilla browsers
-moz-border-radius:20px;
*/
background:#FFF;
padding:5px 15px 15px 15px;
margin:0 auto;
width:600px;
}

#main-content  a span{
/*\*/
position:absolute;
left:-9999px;

}

#main-content a:hover span{	
top:10px;
left:10px;
width:202px;
font-weight:bold;
background:#FFF;
color:#999;
padding:5px 0 5px 0;
text-transform:uppercase;
font-size:80%;
border:1px solid #EEE;
border-width:0 0 10px 0;
filter: alpha(opacity=100);
/*-moz-opacity:.8;
	opacity:.80;*/
/**/} 

img{
border:1px solid #EEE;
/* delete line above and uncomment this for an inset effect
border:1px solid;
border-color:#666 #EEE #EEE #666;
*/
}

#foot{
padding-top:10px;
margin-bottom:20px;
clear:left;
}

#content {
clear: both;
color: white;
background: black;
padding: 2em;
}

#contenta {
clear: both;
color: white;
background-image: url(Images/P1020030long.png);
background-repeat: no-repeat;
padding: 0 0 11% 0;
}

#contentb {
clear: both;
color: white;
background-image: url(Images/P1020030long.png);
background-repeat: no-repeat;
padding: 10% 0 45% 0;
}

#contentc {
padding: 5% 0 0 0;
clear:both;
}

#wrap{
width:720px;
margin:0 auto;
position:relative;
}

p {
margin: 0 5% 0 52%;
text-align: center;
padding: 0 0 1em 0;
font: 1.2em tahoma, arial;
}

h1 {
color: orange;
font-weight: bold;
font-family: tahoma, arial;
padding: 2em 0 1em 0;
margin: 0% 5% 0 0%;
}

h2 {
color: orange;
font-weight: bold;
font-size: 2em;
font-family: tahoma, arial;
padding: 1em 0 1em 0;
margin: 0 0 0 50%;
clear: both;
}

h3 {
color:black
}

h4 {
text-align: center;
color: orange;
font-weight: bold;
font-family: tahoma, arial;
padding: 1em 0 1em 0;
margin: 0% 0% 0 0;
clear: both;
}

h5 {
color: orange;
Text-align: left;
font-weight: bold;
font-family: tahoma, arial;
padding: 1em 0 1em 0;
margin: 0% 5% 0 0%;
}

Is that not what CSS is all about though??? Positioning depending on size of browser window

Had a quick play with your css

 

Try this

 

* {font-size:100%;padding:0;}#wrap {margin:0 auto;width:950px;}body {-x-system-font:none;background:black none repeat scroll 0 0;color:white;font-family:tahoma,arial;font-size:0.9em;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin-top:20px;text-align:center;}a:link {color:orange;text-decoration:none;}a:visited {color:orange;text-decoration:none;}a:hover {color:white;text-decoration:none;}a:active {color:orange;text-decoration:none;}#header {margin-bottom:20px;}#header ul {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;width:900px;}#header li {background:transparent url(Images/tab1.JPG) no-repeat scroll right top;border:2px solid #FFFFCC;display:inline;float:left;margin:0 0.5em 0 0;width:160px;}#header a {background-image:url(Images/tab1.JPG);color:black;display:block;padding:9px;text-decoration:none;}#header a:hover {color:white;}#header #selected {background-image:url(Images/tab1.JPG);font-weight:bold;}#header #selected a {background-image:url(Images/tab1.JPG);color:white;}#main-content li {background:#FFFFFF none repeat scroll 0 0;border-color:#CCCCCC;border-style:solid;border-width:0 1px 1px 0;display:inline;float:left;margin:5px;padding:10px;position:relative;text-align:center;width:200px;}#fullplate-navigation {list-style-image:none;list-style-position:outside;list-style-type:none;margin:5px 0 0 45px;}#fullplate-navigation li {display:block;float:left;width:210px;}#previous {text-align:left;}#next {text-align:right;}#fullplate-navigation li a {display:block;padding:10px;width:190px;}#fullplate-navigation li a:hover {color:#333333;}#fullplate-photo {background:#FFFFFF none repeat scroll 0 0;border-color:#EEEEEE;border-style:solid;border-width:0 1px 1px 0;margin:0 auto;padding:5px 15px 15px;width:600px;}#main-content a span {left:-9999px;position:absolute;}#main-content a:hover span {background:#FFFFFF none repeat scroll 0 0;border-color:#EEEEEE;border-style:solid;border-width:0 0 10px;color:#999999;font-size:80%;font-weight:bold;left:10px;padding:5px 0;text-transform:uppercase;top:10px;width:202px;}img {border:1px solid #EEEEEE;}#foot {clear:left;margin-bottom:20px;padding-top:10px;}#content {background:black none repeat scroll 0 0;clear:both;color:white;padding:2em;}#contenta {background-image:url(Images/P1020030long.png);background-repeat:no-repeat;clear:both;color:white;padding:0 0 11%;}#contentb {background-image:url(Images/P1020030long.png);background-repeat:no-repeat;clear:both;color:white;padding:10% 0 45%;}#contentc {clear:both;padding:5% 0 0;}#wrap {margin:0 auto;position:relative;width:720px;}p {-x-system-font:none;font-family:tahoma,arial;font-size:1.2em;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin:0 25px 0 600px;padding:0 0 1em;text-align:center;width:600px;}h1 {color:orange;font-family:tahoma,arial;font-weight:bold;margin:0 5% 0 0;padding:2em 0 1em;}h2 {clear:both;color:orange;font-family:tahoma,arial;font-size:2em;font-weight:bold;margin:0 0 0 600px;padding:1em 0;width:500px;}h3 {color:black;}h4 {clear:both;color:orange;font-family:tahoma,arial;font-weight:bold;margin:0 0 0 0;padding:1em 0;text-align:center;}h5 {color:orange;font-family:tahoma,arial;font-weight:bold;margin:0 5% 0 0;padding:1em 0;text-align:left;width:500px;}

 

I think I have fixed most elements, but because you are using mostly percentages it allows your elements to adjust to the browser size.

 

Pat