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

G
Unlocking android phone
Replies
5
Views
595
Greiggsy
G
clio_ross
Welder recommendations
Replies
5
Views
903
Martin_172
Martin_172
T
Clio Campus instrument conversion
Replies
3
Views
431
Martin_172
Martin_172
obcuz
A sticky question
Replies
1
Views
291
hopgop1
hopgop1
Oggy997
Any Tableau users?
Replies
7
Views
500
Cookie
Cookie


Top