What's new
By:
ClioSport.net

This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

.css question

A

Andy.

Car  Cupra
I am trying to make a site for a friend as a favour. She has designed the layout etc which left me to turn it into a digital layout....

I am stuck with .css though.

I have the page here and want the whole thing to be central on the screen... is that possible to do?

Any code/ help would be greatly appreciated...

P.S. Please excuse the messy code, the pages were just a quick draft to get the approval for colours etc before I made the final thing.
 
Wrap it in a <div id="page">

Then in css

#page {
margin-left: auto;
margin-right: auto;
width: whatever;
}
 
You need to make a container div for everything to sit in, then in css you want "margin: 0 auto;".

Gay! Too late, probably wouldn't work anyway.
 
Bugger, no luck sadly... I can't work out why everything is stuck where it is. Is there something else in the other DIV's causing the problem?
 
Where did you put the div? My way works.. fact! (providing you set the width to anything other than 100%)

Altho, you have everything set with widths.. too many.. that's what'll be causing the issue.
 
width was set to 80%... The <div id="page"> is just after the <BODY> and the </DIV> at the very end to close it all off.

The source code might reveal a little more.... as I am stumped!
 
Daz said:
Wrap it in a <div id="page">

Then in css

#page {
margin-left: auto;
margin-right: auto;
width: whatever;
}
Click to expand...

No need for the wrapper div, just apply the properties to the <body>. You don't need separate margin-left and margin-right either:

body {width:1000px; margin:auto;}

As you're using absolute positioning, then you just need to add position:relative; to the body and the whole lot will shift over.

body {width:780px; margin:auto; position:relative;}

That will do it.
 
I have just tried it but still no joy. The positioning is a bit confusing to me, I'll go have a read through Google.

Page code:
Code: 
<html>

<head>

<title>Home_1.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#Home1r2c5 {
	position:absolute;
	left:305px;
	top:21px;
	width:417px;
	height:37px;
	z-index:1;
	visibility:visible;
}
#Home1r4c1 {
	position:absolute;
	left:0px;
	top:460px;
	width:1024px;
	height:104px;
	z-index:2;
	visibility:visible;
}
#Home {
	position:absolute;
	left:234px;
	top:575px;
	width:54px;
	height:34px;
	z-index:3;
	visibility:visible;
}
#Home1r6c3 {
	position:absolute;
	left:288px;
	top:575px;
	width:7px;
	height:34px;
	z-index:4;
	visibility:visible;
}
#Gallery {
	position:absolute;
	left:295px;
	top:575px;
	width:159px;
	height:34px;
	z-index:5;
	visibility:visible;
}
#Home1r6c6 {
	position:absolute;
	left:454px;
	top:575px;
	width:10px;
	height:34px;
	z-index:6;
	visibility:visible;
}
#Exhiubitions {
	position:absolute;
	left:464px;
	top:575px;
	width:229px;
	height:34px;
	z-index:7;
	visibility:visible;
}
#Home1r6c10 {
	position:absolute;
	left:693px;
	top:575px;
	width:14px;
	height:34px;
	z-index:8;
	visibility:visible;
}
#Contact {
	position:absolute;
	left:707px;
	top:575px;
	width:86px;
	height:34px;
	z-index:9;
	visibility:visible;
}
#Home1r8c8 {
	position:absolute;
	left:470px;
	top:631px;
	width:88px;
	height:75px;
	z-index:10;
	visibility:visible;
}
#apDiv1 {
	position:absolute;
	width:1024px;
	height:460px;
	z-index:0;
	background-color:#CCCC9A;
	left:0px;
	top:0px;

}
#apDiv2 {
	position:absolute;
	width:1024px;
	height:160px;
	z-index:0;
	left:0px;
	top:564px;
	background-color:#310100;
}
#body {
	width:780px; 
	margin:auto; 
	position:relative;
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onLoad="MM_preloadImages('index/Gallery_rollover.jpg','index/Exhiubitions_rollover.jpg','index/Contact_rollover.jpg')">

<div id="Home1r2c5"><img name="Home_1_r2_c5" src="index/Home_1_r2_c5.jpg" width="417" height="37" border="0"></div>
<div id="Home1r4c1"><img name="Home_1_r4_c1" src="index/Home_1_r4_c1.jpg" width="1024" height="104" border="0"></div>
<div id="Home"><img name="Home_img" src="index/Home.jpg" width="54" height="34" border="0"></div>
<div id="Home1r6c3"><img name="Home_1_r6_c3" src="index/Home_1_r6_c3.jpg" width="7" height="34" border="0"></div>
<div id="Gallery"><a href="Gallery_main.htm"><img src="index/Gallery.jpg" name="Gallery_img" width="159" height="34" border="0" onMouseOver="MM_swapImage('Gallery_img','','index/Gallery_rollover.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="Home1r6c6"><img name="Home_1_r6_c6" src="index/Home_1_r6_c6.jpg" width="10" height="34" border="0"></div>
<div id="Exhiubitions"><a href="Exhibitions.htm"><img src="index/Exhiubitions.jpg" name="Exhiubitions_img" width="229" height="34" border="0" onMouseOver="MM_swapImage('Exhiubitions_img','','index/Exhiubitions_rollover.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="Home1r6c10"><img name="Home_1_r6_c10" src="index/Home_1_r6_c10.jpg" width="14" height="34" border="0"></div>
<div id="Contact"><a href="Contact.htm"><img src="index/Contact.jpg" name="Contact_img" width="86" height="34" border="0" onMouseOver="MM_swapImage('Contact_img','','index/Contact_rollover.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="Home1r8c8"><img src="index/Home_1_r8_c8.jpg" name="Home_1_r8_c8" width="88" height="75" border="0"></div>

<div id="apDiv1">
  <div id="apDiv2"></div>
</div>

</body></div>
</html>
 
You don't need a hash before "body". It's an element name not an ID.

Try this:

Code: 
<html>

<head>

<title>Home_1.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#Home1r2c5 {
	position:absolute;
	left:305px;
	top:21px;
	width:417px;
	height:37px;
	z-index:1;
	visibility:visible;
}
#Home1r4c1 {
	position:absolute;
	left:0px;
	top:460px;
	width:1024px;
	height:104px;
	z-index:2;
	visibility:visible;
}
#Home {
	position:absolute;
	left:234px;
	top:575px;
	width:54px;
	height:34px;
	z-index:3;
	visibility:visible;
}
#Home1r6c3 {
	position:absolute;
	left:288px;
	top:575px;
	width:7px;
	height:34px;
	z-index:4;
	visibility:visible;
}
#Gallery {
	position:absolute;
	left:295px;
	top:575px;
	width:159px;
	height:34px;
	z-index:5;
	visibility:visible;
}
#Home1r6c6 {
	position:absolute;
	left:454px;
	top:575px;
	width:10px;
	height:34px;
	z-index:6;
	visibility:visible;
}
#Exhiubitions {
	position:absolute;
	left:464px;
	top:575px;
	width:229px;
	height:34px;
	z-index:7;
	visibility:visible;
}
#Home1r6c10 {
	position:absolute;
	left:693px;
	top:575px;
	width:14px;
	height:34px;
	z-index:8;
	visibility:visible;
}
#Contact {
	position:absolute;
	left:707px;
	top:575px;
	width:86px;
	height:34px;
	z-index:9;
	visibility:visible;
}
#Home1r8c8 {
	position:absolute;
	left:470px;
	top:631px;
	width:88px;
	height:75px;
	z-index:10;
	visibility:visible;
}
#apDiv1 {
	position:absolute;
	width:1024px;
	height:460px;
	z-index:0;
	background-color:#CCCC9A;
	left:0px;
	top:0px;

}
#apDiv2 {
	position:absolute;
	width:1024px;
	height:160px;
	z-index:0;
	left:0px;
	top:564px;
	background-color:#310100;
}
body {
	width:1000px; 
	margin:auto; 
	position:relative;
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onLoad="MM_preloadImages('index/Gallery_rollover.jpg','index/Exhiubitions_rollover.jpg','index/Contact_rollover.jpg')">

<div id="Home1r2c5"><img name="Home_1_r2_c5" src="index/Home_1_r2_c5.jpg" width="417" height="37" border="0"></div>
<div id="Home1r4c1"><img name="Home_1_r4_c1" src="index/Home_1_r4_c1.jpg" width="1024" height="104" border="0"></div>
<div id="Home"><img name="Home_img" src="index/Home.jpg" width="54" height="34" border="0"></div>
<div id="Home1r6c3"><img name="Home_1_r6_c3" src="index/Home_1_r6_c3.jpg" width="7" height="34" border="0"></div>
<div id="Gallery"><a href="Gallery_main.htm"><img src="index/Gallery.jpg" name="Gallery_img" width="159" height="34" border="0" onMouseOver="MM_swapImage('Gallery_img','','index/Gallery_rollover.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="Home1r6c6"><img name="Home_1_r6_c6" src="index/Home_1_r6_c6.jpg" width="10" height="34" border="0"></div>
<div id="Exhiubitions"><a href="Exhibitions.htm"><img src="index/Exhiubitions.jpg" name="Exhiubitions_img" width="229" height="34" border="0" onMouseOver="MM_swapImage('Exhiubitions_img','','index/Exhiubitions_rollover.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="Home1r6c10"><img name="Home_1_r6_c10" src="index/Home_1_r6_c10.jpg" width="14" height="34" border="0"></div>
<div id="Contact"><a href="Contact.htm"><img src="index/Contact.jpg" name="Contact_img" width="86" height="34" border="0" onMouseOver="MM_swapImage('Contact_img','','index/Contact_rollover.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div>
<div id="Home1r8c8"><img src="index/Home_1_r8_c8.jpg" name="Home_1_r8_c8" width="88" height="75" border="0"></div>

<div id="apDiv1">
  <div id="apDiv2"></div>
</div>

</body>
</html>
 
Thanks for your help, but it hasn't fixed it. I was quite enjoying playing with CSS until I hit this bit. lol
 
It works for me in Safari and Firefox Mac.

There's probably something IE doesn't like going on in the mess of HTML and CSS that Fireworks has chucked out. I'd recommend redoing it properly. Absolute positioning isn't really the best way of doing what you're trying to do.

Have a look at the tutorials on www.w3schools.com
 
I seem to be able to make it work if I create the page myself... just means more work and trying to make everything fit where it should.

Thanks for your help!
 
FFS..... all the above worked. I was using a preview from Dreamweaver which did not display the page correctly, however if you open the file from the folder it does.

Good enough for me, drinks on me!
 
It didn't work in IE, but after a bit of googling, it turned out all I needed was to copy this to the top of the page:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
You must log in or register to reply here.

Similar threads

S
Clio 1.8t with O2m or 02j?
Replies
10
Views
3K
hopgop1
hopgop1
LincsClio
Possibly Stupid Radiator A/C Question
Replies
7
Views
1K
Martin_172
Martin_172
Rystar
1.5dci no start issues
Replies
11
Views
6K
Brigsy
Brigsy
massivewangers
Pretending to be a Rally Driver (Snetterton Stages 2024)
Replies
16
Views
7K
massivewangers
massivewangers
bendangerous
CLIO 172 CUP RESTO MOD
Replies
10
Views
5K
bendangerous
bendangerous
Back
Top