Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering a page in browsers?

Status
Not open for further replies.

missjackiechan

Technical User
Dec 2, 2008
1
GB
Am really sorry to post basic question as I am new to Dreaweaver. (using MX too)

I have a page I have designed and cant get the main image to stay centred in browsers. Can anyone suggest how I can do this and if so where to insert code? There is a div centre near the bottom??

Thanks

Code below (although I work in design view)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>soanyway introduction</title>
<style type="text/css">
<!--
body {
background-color: #A29C2F;
}
.style3 {color: #A29C2F; font-family: "Gill Sans"; font-size: 12px;}
.style5 {color: #A29C2F; font-family: "Gill Sans"; font-size: 14px; }
body,td,th {
color: #A29C2F;
}
a {
font-family: Gill Sans;
color: #A29C2F;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #A29C2F;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style6 {color: #000000}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<a href="soanyway.htm"><img src="roadsignsmall.jpg" width="1055" height="791" border="0" align="baseline" usemap="#Map">
<map name="Map">
<area shape="rect" coords="426,1,1054,790" href="soanyway.htm">
</map>
</a>
<div id="Layer1" style="position:absolute; width:420px; height:788px; z-index:1; left: 10px; top: 16px;">
<p>&nbsp;</p>
<p align="left" class="style3"> <span class="style6">kkkik</span> <img src="soanywayletteringsmal.jpg" width="171" height="44"></p>
<blockquote>
<p align="left" class="style5">&nbsp;</p>
<p align="left" class="style5">Soanyway is a magazine project initiated by </p>
<p align="left" class="style5">Derek Horton and Lisa Stansbie.</p>
<p align="left" class="style5">&nbsp;</p>
<p align="left" class="style5">Soanyway is a repository for words, pictures and sound </p>
<p align="left" class="style5">that tell stories. </p>
<p align="left" class="style5">&nbsp;</p>
<p align="left" class="style5">We interpret the idea of a &lsquo;story&rsquo; very openly, in</p>
<p align="left" class="style5"> relation to fact and fiction, narration or implication, </p>
<p align="left" class="style5">and structure or a lack of it. And we regard most history, </p>
<p align="left" class="style5">theory and critique as stories about stories. </p>
<p align="left" class="style5">&nbsp;</p>
<p align="left" class="style5">Soanyway welcomes submissions in any form, medium and</p>
<p align="left" class="style5">format.<a href="mailto: submissions@soanyway.org.uk"> submissions@soanyway.org.uk</a></p>
<p align="left" class="style5">&nbsp;</p>
<p align="left" class="style5">&ldquo;There's a thousand sides to everything - not just heroes </p>
<p align="left" class="style5">and villains. So anyway, ... so anyway, ... so anyway&hellip;&ldquo;So anyway&rdquo; </p>
<p align="left" class="style5">ought to be one word. Like a place or a river&hellip; Soanyway River.&rdquo;</p>
</blockquote>
<p>&nbsp;</p>
</div>
<div align="center"></div>
</body>
</html>
 
I can't believe you have not received an answer for this. This type of questions may be better asked in the HTML/CSS forum ...

That being said, if you have not gotten this fixed, try:

Following your <body> tag
<div style="width: 80%; margin-left: auto; margin-right: auto;">

and just before the </body> tag
<div style="clear: both;">&nbsp;</div>
</div>

Hope this helps!


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Why dont you just create a table (1 row, 1 column)

Put the image in the table and centre the table in the tbale properties?

I've always found this the easiest way to arrange text and images.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top