PDA

View Full Version : Center content with CSS - it is not working


charlotte
02-05-2006, 03:59 AM
I have tried to change the code as it said in your article " Center with CSS" but it is not working.....

What have I done wrong?

website: www.mallorcaescape.com


Charlotte :(

gmcrone
02-05-2006, 04:53 AM
You are using absolute positioning which puts your layers outside the normal flow.
E.G.
#Layer1 {
position:absolute;
left:4px;
top:3px;
width:647px;
height:95px;
z-index:1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;

remove the position:absolute
try changing it to postion:relative

Mike...

charlotte
02-05-2006, 05:25 AM
Thanks for your reply, but it did not work, see attached image,
suddenly to much space and the last 2 images disappeared

Charlotte

gmcrone
02-05-2006, 04:10 PM
I took your code and stripped it down so you will have to add back in some things:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Mallorca hotels with great charm and character. Book online, get instant confirmation. Find the best car rental deal on Mallorca." />
<meta name="keywords" content="mallorca hotels,majorca, hotels, hotel, finca, rural,agroturismo, design, lodging, accommodation, reservar, reservation, hoteles, Spain hotels, Mallorca accommodation, where to stay Mallorca, vila, alojamiento, habitaciones, reservar, mallorcaescape, charminghotels, fincas" />
<meta name="robots" content="index,follow" /><meta name="revisit-after" content="10 days" />
<meta name="page-topic" content="travel, tourism" /><title>Mallorca Hotels</title>

<style type="text/css">
<!--
body {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
text-align : left ;
margin-left : 10% ;
margin-right : 10% ;
}
div.Layer1 {
clear: both;
height:95px;
width: 730px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
}
div.Layer2 {
clear:both;
width: 221px;
height:36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
div.Layer7 {
clear: both;
width: 730px;
height:122px;
}
div.Layer8 {
clear: both;
width:730px;
height:77px;
z-index: auto;
}
div.Layer9 {
height:20px;
width:722px;
}
-->
</style>


<script type="text/javascript" language="javascript">
var sc_project=283925;
var sc_invisible=1;
var sc_partition=0;
var sc_security="";
</script>
<script type="text/javascript" language="javascript" src="images/newstart/counter.js"></script>

<script language="Javascript"><!--

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************

function image() {
};

image = new image();
number = 0;

// imageArray
image[number++] = "images/slide/1.jpg"
image[number++] = "images/slide/2.jpg"
image[number++] = "images/slide/3.jpg"
image[number++] = "images/slide/4.jpg"
image[number++] = "images/slide/5.jpg"
// keep adding items here...
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//--></script>

</head>
<body>
<div class="wrapper">
<div class="Layer1" id="Layer1">
images/slide/5.jpg
</div>



</p>
<div class="Layer2" id="Layer2">
images/newstart/logo.jpg
</div>

<div class="Layer7" id="Layer7">
images/newstart/newimage1.jpg
</div>


</p>
<div class="Layer8" id="Layer8">
images/newstart/newimage2.jpg
</div>


</p>


</p>


</p>


</p>


</p>
<div class="Layer9" id="Layer9">
images/newstart/email.jpg</div>
</div>
<noscript><a href="http://www.statcounter.com/" target="_blank">
http://c1.statcounter.com/counter.php?sc_project=283925&amp;java=0&amp;security=&amp;inv isible=1</a> </noscript>

</body>
</html>