What's new
By:
Filters
ClioSport.net

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.

  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.
 
Daz

Daz

Wrap it in a <div id="page">

Then in css

#page {
margin-left: auto;
margin-right: auto;
width: whatever;
}
 
A

Alex H

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.
 
A

Andy.

  Cupra
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?
 
Daz

Daz

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.
 
A

Andy.

  Cupra
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!
 
Red Cup

Red Cup

ClioSport Club Member
  Focus RS
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.
 
A

Andy.

  Cupra
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>
 
Red Cup

Red Cup

ClioSport Club Member
  Focus RS
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>
 
A

Andy.

  Cupra
Thanks for your help, but it hasn't fixed it. I was quite enjoying playing with CSS until I hit this bit. lol
 
Red Cup

Red Cup

ClioSport Club Member
  Focus RS
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
 
A

Andy.

  Cupra
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!
 
A

Andy.

  Cupra
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!
 
A

Andy.

  Cupra
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
738
hopgop1
hopgop1
LincsClio
Possibly Stupid Radiator A/C Question
Replies
7
Views
483
Martin_172
Martin_172
Rystar
1.5dci no start issues
Replies
11
Views
2K
Brigsy
Brigsy
massiveCoRbyn
Pretending to be a Rally Driver (Snetterton Stages 2024)
Replies
16
Views
2K
massiveCoRbyn
massiveCoRbyn
bendangerous
CLIO 172 CUP RESTO MOD
Replies
10
Views
3K
bendangerous
bendangerous


Top