PDA

View Full Version : Centering web page for wide screen monitors


PCWA
09-28-2010, 08:46 AM
Hi,

I'm a newcomer to this site (and forum), but not to Dreamweaaver per se (I have DW MX2004). I've been having trouble with centering web pages on wide screen monitors.
They load with everything where it should be in the main body etc, but they tend to stay on the left side of wide screen monitors. To compound the problem, I don't have a wide screen monitor, mine is a 16" (on the diagonal measurement) CRT screen. Makes it a tad difficult to preview it if you know what I mean.
I did read the post that Mike Crone put up about centering using CSS, tried what he suggested, but it still stays somewhat to the left on a wide screen (according to someone who's web site I'm doing).
Any suggestions from people experienced in this area? If need be, I can send either the URL of the index page, or the html and CSS of the relevant section for perusal. The site is online.

Many thanks,

Paul

gentleone
09-28-2010, 08:54 AM
need url to look, yes!

PCWA
09-28-2010, 09:00 AM
Hello,

Here's the URL of the site: http://www.neildiamondtribute.com.au

I'm a freelance sound engineer, with about 40 plus years experience, but don't do a lot regards web sites apart from my own (www.paulclose.iinet.net.au).

I'm based in Perth West Australia, and I am aware of the time differences between here and other countries.

Cheers,

Paul

edbr
09-28-2010, 09:33 AM
a quick look but you are missind a closing
</div> before the </body> add another and it should centre my validator shows it missing

PCWA
09-28-2010, 09:56 AM
a quick look but you are missind a closing
</div> before the </body> add another and it should centre my validator shows it missing


Hi,

I just had a look it ( I had it printed out), and found that I have two (2) </div> before the </body>. Do I need to add a third </div> ?

Paul

edbr
09-28-2010, 10:02 AM
if they need balancing, yes

edbr
09-28-2010, 10:04 AM
actualy its reading a differenrt error , still a unclosed div which probably is throwing you

Result: 0 errors / 5 warnings

line 88 column 7 - Warning: <embed> is not approved by W3C
line 68 column 1 - Warning: missing </div>
line 78 column 1 - Warning: <div> anchor "Layer3" already defined
line 83 column 5 - Warning: <object> attribute "id" has invalid value "Flash player"
line 99 column 23 - Warning: trimming empty <strong>

PCWA
09-28-2010, 10:10 AM
Ok, just added the third </div> before the </body>, saved and uploaded it. Has it worked? I can't preview in widescreen here.
Thanks,

Paul

PCWA
09-28-2010, 10:13 AM
actualy its reading a differenrt error , still a unclosed div which probably is throwing you

Result: 0 errors / 5 warnings

line 88 column 7 - Warning: <embed> is not approved by W3C
line 68 column 1 - Warning: missing </div>
line 78 column 1 - Warning: <div> anchor "Layer3" already defined
line 83 column 5 - Warning: <object> attribute "id" has invalid value "Flash player"
line 99 column 23 - Warning: trimming empty <strong>


Strange, I don't get those messages from DW here when previewing. The FlashPlayer works here when I go to the uRL itself, and also on my friend's browser (it's his web site).

Paul

edbr
09-28-2010, 10:15 AM
no give me a min ill have a better look at it

PCWA
09-28-2010, 10:15 AM
Line 68 is the <div class "wrapper"> I thought DW put the closing </div> in automatically after that.

PCWA
09-28-2010, 10:26 AM
I should have said I thought the </div> for the "wrapper" went in after all the site content at end of page.
Sorry.

edbr
09-28-2010, 10:27 AM
take the width attribute out of the body it is making your page center within a body size the same as you wrapper

edbr
09-28-2010, 10:29 AM
yes it does but it ios not uncommon for closing divs to get lost . just run through them an make sure they are balancing

PCWA
09-28-2010, 10:42 AM
take the width attribute out of the body it is making your page center within a body size the same as you wrapper

Ok, but that was the original suggestion posted by Mike Crone that I found on the web.
The 'DIAMOND' logo at top of the page is 830px wide from memory, and the Nav section at bottom of each page is a bit wider than that. Does that mean the wrapper size of 770px doesn't have any effect (ie, squeezing or distorting) of those sections?

Paul

PCWA
09-28-2010, 10:49 AM
Sorry, I originally had it as:
body {
text-align ; center;
min-width ; 770 ; etc, but got an error message saying the min-width tag was not accepted by IE6 etc and other browsers, so I took the min- bit out.

Paul

PCWA
09-28-2010, 10:57 AM
take the width attribute out of the body it is making your page center within a body size the same as you wrapper


Ok, just took the width attribute out of the body, and changed the wrapper to 860px to accomodate the width of the logo etc, previewed it here at home, but it added a horizontal scroll bar and moved the content to the right of screen about 1" or so.

Paul

edbr
09-29-2010, 01:43 AM
you are putting youe content in an absotule positioned div then moving it to the right so it appears off centre

PCWA
09-29-2010, 02:21 AM
you are putting youe content in an absotule positioned div then moving it to the right so it appears off centre

Hi,
This is driving me nuts :) I can't find anywhere in the DW Help section about centering the page for widescreen, or the particular section regarding the width attribute.
Can you show me where the absolute positioned div is, and what I need to remove to make it center?
I spoke to my friend last night, he looked at it on his widescreen (using Firefox as I do), and said it had movedto the right of screen, but ithad also changed the link colour from red to white. Yet when I viewed it online in Firefox, the links were all red (apart from the Home/index) as they were intended to be.
Your help and patience is much appreciated. I can't figure why DW will let you insert min-width(after text-align) but not haveanything on it in their Help section. At the same time it also says that IE up to V6 won't recognise it, yet that was what Mike Crone pit in to his suggestion on the topic.

Many thanks,

Paul

PCWA
09-29-2010, 02:29 AM
Just a quick add-on, in MC's suggestion (www.dreamweaverclub.com/css-center-content.php) he also notes at the end that the last line in the CSS code "position ; relative" is (only) needed if you have absolutely positioned elements on the page, which I do, otherwise you won't get a centerd page.

edbr
09-29-2010, 02:42 AM
the wrapper div will centre on all screens as you have it, providing you have margin left and right it will work.
you are running in to trouble because you are using these absolute positioning so much it is after all a straight forward design.

here is a partial re write which i hope will show you what im banging on a bout

<!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">
<style type="text/css">
<!--


body {
font-family: Georgia, Times New Roman, Times, serif;
background-color: #000000;
}
div.wrapper{
width: 770px;
text-align: left;
background-color: #000;
margin-left: auto;
margin-top: auto;
border:#FFF thick solid;
position:relative;
}
#header{ width:100%; float:left;}
#navbar{ width:100%; float:left;text-align:center;}

#content{ width:100%; float:left;}
#footer{ width:100%; float:left; text-align:center;}

a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #0000FF;
}
.style1 {font-size: 12px;
color: #CCCCCC;
}
.style2 {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.style3 {font-size: 12px; color: #FFFFFF; font-weight: bold; }
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="navbar"><em><span class="style1">Copyright &copy; Brenton Fosdike 2009 / 2010</span></em></div>
<div id="content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" name="Flash player" width="400" height="440" id="Flash player">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" />
<embed src="slideshow.swf" width="400" height="440" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Flash player"></embed>
</object>
</div>
</body>
</html>

edbr
09-29-2010, 02:44 AM
one div is centred on isnt. i added a border so you can see the bounding lines of the div.
your next step will be to use ul li to position your nav items but that can come later. use code view of course or split view you will see it

PCWA
10-03-2010, 08:50 AM
Hi,
Thanks for that, and the add-on after it. For some reason, I didn't get any email notification about these replies, I did for all the previous ones.
I'll have a look at it on DW here at home first to see how it affects it.
Meanwhile, I did make a few changes to the index page and uploaded it.
A friend of mine checked it on his widescreen laptop (Mac) and said it was now centered. Trial and error now I guess.

Thanks,

Paul



the wrapper div will centre on all screens as you have it, providing you have margin left and right it will work.
you are running in to trouble because you are using these absolute positioning so much it is after all a straight forward design.

here is a partial re write which i hope will show you what im banging on a bout

<!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">
<style type="text/css">
<!--


body {
font-family: Georgia, Times New Roman, Times, serif;
background-color: #000000;
}
div.wrapper{
width: 770px;
text-align: left;
background-color: #000;
margin-left: auto;
margin-top: auto;
border:#FFF thick solid;
position:relative;
}
#header{ width:100%; float:left;}
#navbar{ width:100%; float:left;text-align:center;}

#content{ width:100%; float:left;}
#footer{ width:100%; float:left; text-align:center;}

a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #0000FF;
}
.style1 {font-size: 12px;
color: #CCCCCC;
}
.style2 {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.style3 {font-size: 12px; color: #FFFFFF; font-weight: bold; }
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="navbar"><em><span class="style1">Copyright &copy; Brenton Fosdike 2009 / 2010</span></em></div>
<div id="content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" name="Flash player" width="400" height="440" id="Flash player">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" />
<embed src="slideshow.swf" width="400" height="440" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Flash player"></embed>
</object>
</div>
</body>
</html>

PCWA
10-06-2010, 01:32 AM
Hi,
After making a few changes, and correcting missing bits and pieces, I finally got all seven pages up at 02:30 this morning. Still have a minor centering problem with the pic's pages (slightly off center to the container), but I think that may again be a missing tag that I haven't noticed somewhere, possibly a </div> towards the end.
You're welcome to have a look : www.neildiamondtribute.com.au
Thanks again for all the help.
Cheers,
Paul


Originally Posted by edbr http://www.dreamweaverclub.com/forum/images/buttons/viewpost.gif (http://www.dreamweaverclub.com/forum/showthread.php?p=183317#post183317)
the wrapper div will centre on all screens as you have it, providing you have margin left and right it will work.
you are running in to trouble because you are using these absolute positioning so much it is after all a straight forward design.

here is a partial re write which i hope will show you what im banging on a bout

edbr
10-06-2010, 02:14 AM
return validation

line 83 column 7 - Warning: <embed> is not approved by W3C
line 115 column 1 - Warning: discarding unexpected </div>
line 116 column 1 - Warning: discarding unexpected </container>
line 73 column 1 - Warning: <div> anchor "Layer3" already defined
line 78 column 5 - Warning: <object> attribute "id" has invalid value "Flash player"
line 94 column 23 - Warning: trimming empty <strong>

PCWA
10-06-2010, 09:04 AM
return validation

line 83 column 7 - Warning: <embed> is not approved by W3C
line 115 column 1 - Warning: discarding unexpected </div>
line 116 column 1 - Warning: discarding unexpected </container>
line 73 column 1 - Warning: <div> anchor "Layer3" already defined
line 78 column 5 - Warning: <object> attribute "id" has invalid value "Flash player"
line 94 column 23 - Warning: trimming empty <strong>




Hi,

Can't quite figure out why DW (and other web design software) suggests or says to embed flash players etc if the W3C doesn't approve it. Would like to know why they don't approve it.
The unexpected </container> ? There is a container ( I used that instead of wrapper) to center the page, so logically there will be a closing </container>. I found I had to add the closing </div> to help with the centering. I've changed the already defined "Layer3" to "Layer14" as it was holding the named anchor #Top.
Line 78 <object> attribute is only unsupported by Netscape Navigator 6.0 according to my version of DW (MX2004).
Line 94 empty <strong> was a strange one, don't know how it got there, I've deleted it with no ill effects.

It's not easy to design something that suits all browsers etc., I'd say nigh impossible because (like DMX lighting manufacturers) there's no standardisation.
For the moment, I'll live with it. I'll chat with my friend who I did the site for about any issues he has. At the moment, his browser (also Firefox) turns the link text colour white instead of red as it appears on other screens here.

Time for kopi kao...:p

Paul

edbr
10-06-2010, 09:19 AM
should be div not container, the errors for below are
id layer is used twice and the same embed warnings but the rest is ok

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title><meta name="keywords" content="DIAMOND, Neil Diamond Tribute Show, Brenton Fosdike, Kelly Green, Dennis Bird, Tony Celiberti, Emilio Furfaro, successfull West Australian acts, the show others talk about, Ross Mitchell Entertainment, Perth West Australia" />
<style type="text/css">

body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
}
body {
background-color: #000000;
text-align: center;
padding: 0;
}
#container {
position: relative;
background:#fff;
width:950px;
margin:0 auto;

}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #0000FF;
}
.style1 {font-size: 12px;
color: #CCCCCC;
}
.style2 {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.style3 {font-size: 12px; color: #FFFFFF; font-weight: bold; }
-->
</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>
<div id="container">
<div id="Layer6" style="position:absolute; width:242px; height:21px; z-index:4; left: 374px; top: 857px;">
<div align="center"><em><span class="style1">Copyright &copy; Brenton Fosdike 2009 / 2010</span></em></div>
</div>
<div id="Layer1" style="position:absolute; width:102px; height:22px; z-index:26; left: 70px; top: 778px;">
<div align="center" class="style2">HOME</div>
</div>
<div id="Layer3" style="position:absolute; width:840px; height:260px; z-index:24; left: 67px; top: 7px;">
<div align="center"><img src="diamond-logo_A.jpg (http://www.dreamweaverclub.com/forum/view-source:file:///C:/Users/ed/Desktop/diamond-logo_A.jpg)" width="840" height="260" /></div>
</div>
<div id="Layer3" style="position:absolute; width:31px; height:28px; z-index:13; left: 459px; top: 15px;">
<div align="center"><a name="Top" id="Top"></a></div>
</div>
<div id="Layer4" style="position:absolute; width:400px; height:440px; z-index:25; left: 292px; top: 294px;">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" name="Flash player" width="400" height="440" id="Flash player">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:[],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" />
<embed src="slideshow.swf (http://www.dreamweaverclub.com/forum/view-source:file:///C:/Users/ed/Desktop/slideshow.swf)" width="400" height="440" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:[],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Flash player"></embed>
</object>
</div>
</div>

<div id="Layer2" style="position:absolute; width:102px; height:22px; z-index:36; left: 180px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/biography.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/biography.htm)">BIOGRAPHY</a></div>
</div>
<div id="Layer5" style="position:absolute; width:102px; height:22px; z-index:35; left: 289px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/bandmembers.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/bandmembers.htm)">BAND</a></div>
</div>
<div id="Layer7" style="position:absolute; width:102px; height:22px; z-index:29; left: 398px; top: 777px;">
<div align="center"><span class="style2"><a href="http://neildiamondtribute.com.au/techinfo.htm (http://www.dreamweaverclub.com/forum/view-source:http://neildiamondtribute.com.au/techinfo.htm)">TECH INFO</a></span></div>
</div>
<div id="Layer8" style="position:absolute; width:102px; height:22px; z-index:30; left: 505px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/contactus.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/contactus.htm)">CONTACT</a> </div>

</div>
<div id="Layer9" style="position:absolute; width:102px; height:22px; z-index:31; left: 616px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/ask-us.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/ask-us.htm)">Q &amp; A</a> </div>
</div>
<div id="Layer10" style="position:absolute; width:102px; height:22px; z-index:32; left: 725px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/pics-page.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/pics-page.htm)">PICS PAGE</a> </div>
</div>
<div id="Layer11" style="position:absolute; width:60px; height:22px; z-index:33; left: 468px; top: 826px;">
<div align="center" class="style2"><a href="#Top (http://www.dreamweaverclub.com/forum/view-source:file:///C:/Users/ed/Desktop/Untitled-1.html#Top)">TOP</a></div>

</div>

<div id="Layer12" class="style3" style="position:absolute; width:541px; height:20px; z-index:34; left: 215px; top: 243px;">If you can't see the flash slides below, download the flash player here: <a href="http://get.adobe.com/flashplayer/ (http://www.dreamweaverclub.com/forum/view-source:http://get.adobe.com/flashplayer/)">Flash Player</a></div>
<div id="Layer23" style="position:absolute; width:883px; height:30px; z-index:28; left: 58px; top: 773px;"></div>
<div id="Layer13" style="position:absolute; width:102px; height:22px; z-index:37; left: 833px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/links.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/links.htm)">LINKS</a></div>
</div>
</div>

</body>
</html>

PCWA
10-06-2010, 09:58 AM
Hi,
I changed the layer number etc and uploaded it all about 15 to 20 minutes ago. I just had a look at it and the new code is below.
You'll see where the extra Layer3 is now Layer14 (holding the named anchor in place). Sorry, just had a friend drop in, couldn't reply earlier. Different names given by different people, some say call it a wrapper, others say call it a container, you say call it a <div>. From all I can see, it's working at the moment. When I have the time, I'll try and see why the pic's pages are slightly off center despite the container. Bound to be something simple I've missed.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title><meta name="keywords" content="DIAMOND, Neil Diamond Tribute Show, Brenton Fosdike, Kelly Green, Dennis Bird, Tony Celiberti, Emilio Furfaro, successfull West Australian acts, the show others talk about, Ross Mitchell Entertainment, Perth West Australia" />
<style type="text/css">

body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
}
body {
background-color: #000000;
text-align: center;
padding: 0;
}
#container {
position: relative;
background:#fff;
width:950px;
margin:0 auto;

}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #0000FF;
}
.style1 {font-size: 12px;
color: #CCCCCC;
}
.style2 {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.style3 {font-size: 12px; color: #FFFFFF; font-weight: bold; }
-->
</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>
<div id="container">
<div id="Layer6" style="position:absolute; width:242px; height:21px; z-index:4; left: 374px; top: 857px;">
<div align="center"><em><span class="style1">Copyright &copy; Brenton Fosdike 2009 / 2010</span></em></div>
</div>
<div id="Layer1" style="position:absolute; width:102px; height:22px; z-index:26; left: 70px; top: 778px;">
<div align="center" class="style2">HOME</div>
</div>
<div id="Layer3" style="position:absolute; width:840px; height:260px; z-index:24; left: 67px; top: 7px;">
<div align="center"><img src="diamond-logo_A.jpg (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/diamond-logo_A.jpg)" width="840" height="260" /></div>
</div>
<div id="Layer14" style="position:absolute; width:31px; height:28px; z-index:13; left: 459px; top: 15px;">
<div align="center"><a name="Top" id="Top"></a></div>
</div>
<div id="Layer4" style="position:absolute; width:400px; height:440px; z-index:25; left: 292px; top: 294px;">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" name="Flash player" width="400" height="440" id="Flash player">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" />
<embed src="slideshow.swf (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/slideshow.swf)" width="400" height="440" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Ve rdana',titleFont:'Verdana',showControls:false,fram eShow:false,slideDelay:4,captionSize:10,captionCol or:#333333,titleSize:10,transitionsType:'Fade',tit leColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Flash player"></embed>
</object>
</div>
</div>
<div id="Layer2" style="position:absolute; width:102px; height:22px; z-index:36; left: 180px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/biography.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/biography.htm)">BIOGRAPHY</a></div>
</div>
<div id="Layer5" style="position:absolute; width:102px; height:22px; z-index:35; left: 289px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/bandmembers.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/bandmembers.htm)">BAND</a></div>
</div>
<div id="Layer7" style="position:absolute; width:102px; height:22px; z-index:29; left: 398px; top: 777px;">
<div align="center"><span class="style2"><a href="http://neildiamondtribute.com.au/techinfo.htm (http://www.dreamweaverclub.com/forum/view-source:http://neildiamondtribute.com.au/techinfo.htm)">TECH INFO</a></span></div>
</div>
<div id="Layer8" style="position:absolute; width:102px; height:22px; z-index:30; left: 505px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/contactus.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/contactus.htm)">CONTACT</a> </div>
</div>
<div id="Layer9" style="position:absolute; width:102px; height:22px; z-index:31; left: 616px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/ask-us.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/ask-us.htm)">Q &amp; A</a> </div>
</div>
<div id="Layer10" style="position:absolute; width:102px; height:22px; z-index:32; left: 725px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/pics-page.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/pics-page.htm)">PICS PAGE</a> </div>
</div>
<div id="Layer11" style="position:absolute; width:60px; height:22px; z-index:33; left: 468px; top: 826px;">
<div align="center" class="style2"><a href="#Top (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/#Top)">TOP</a></div>
</div>

<div id="Layer12" class="style3" style="position:absolute; width:541px; height:20px; z-index:34; left: 215px; top: 243px;">If you can't see the flash slides below, download the flash player here: <a href="http://get.adobe.com/flashplayer/ (http://www.dreamweaverclub.com/forum/view-source:http://get.adobe.com/flashplayer/)">Flash Player</a></div>
<div id="Layer23" style="position:absolute; width:883px; height:30px; z-index:28; left: 58px; top: 773px;"></div>
<div id="Layer13" style="position:absolute; width:102px; height:22px; z-index:37; left: 833px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/links.htm (http://www.dreamweaverclub.com/forum/view-source:http://www.neildiamondtribute.com.au/links.htm)">LINKS</a></div>
</div>
</div>
</div>
</container>
</body>
</html>
</html>

PCWA
10-06-2010, 09:59 AM
Oops, should have put that in a better format for replying instead of the 'quick reply'. Apologies.

gentleone
10-06-2010, 10:13 AM
Oops, should have put that in a better format for replying instead of the 'quick reply'. Apologies.

Indeed! Use code tags or html tags next time in the advanced editor. I've tried to fix it, but that didn't help much. It become one long HTML tag line.

Anyways... you give id's a name so that you can style them in your css.
So your container will be:
<div id="container">
...content here...
</div>
CSS:

#container {styles here}


To embed flash movies better to look into the swfobject method.
http://blog.deconcept.com/swfobject/

edbr
10-06-2010, 10:43 AM
you are still using </container> have a look at the code i posted for you

PCWA
10-06-2010, 10:48 AM
Indeed! Use code tags or html tags next time in the advanced editor. I've tried to fix it, but that didn't help much. It become one long HTML tag line.

Anyways... you give id's a name so that you can style them in your css.
So your container will be:
<div id="container">
...content here...
</div>
CSS:

#container {styles here}
To embed flash movies better to look into the swfobject method.
http://blog.deconcept.com/swfobject/

Yes, sometimes I act faster than I think :lol: Wasn't aware the 'quick reply' form would scramble it together so much.
I did use the <div id="container"> in the html, and the CSS is #container { etc. }
I'll see how it goes, and I'll have a look at your suggestion re embedding flash players etc.
Thanks,
Paul

edbr
10-06-2010, 10:52 AM
you still use </container> see my post before.
as to not centreing , iys the absolute positioning you have used

example
<div id="Layer4" style="position:absolute; width:400px; height:440px; z-index:25; left: 292px; top: 294px;">
<div align="center">

PCWA
10-06-2010, 11:07 AM
you still use </container> see my post before.
as to not centreing , iys the absolute positioning you have used

example
<div id="Layer4" style="position:absolute; width:400px; height:440px; z-index:25; left: 292px; top: 294px;">
<div align="center">


Yes, I know what you're saying but from what I can see, the pages are centering with the obvious exception of the pic's pages, which tend to be slightly to the right. All the pages have that absolute positioning in them, but only the pics pages are staying a bit off center. There has to be another reason for it.
I'll have another look at it later this evening re the div.wrapper when I get time. Due to inoperable bone spurs between 4 sets of lower vertabra on the inside of the spinal column, I can only spend so much time sitting down at a computer these days. Life's a beach, and then.... :)
Thanks for your continued (and undoubtably frustrated) help on this.

Paul

gentleone
10-06-2010, 11:09 AM
Yes... ebre is right. You use way too many ap (absolute positioned) divs. They're not meant to layout a webpage. You will ran into more and more troubles with this.
Developing websites is not 'I drop here a div and ah... lets drop here another div... no wait, I drag it here'
You must understand some simple basics which include 'normal flow' and 'CSS box model'.

PCWA
10-06-2010, 11:21 AM
Yes... ebre is right. You use way too many ap (absolute positioned) divs. They're not meant to layout a webpage. You will ran into more and more troubles with this.
Developing websites is not 'I drop here a div and ah... lets drop here another div... no wait, I drag it here'
You must understand some simple basics which include 'normal flow' and 'CSS box model'.

Fair enough, it's 3 years since I did the course in design at TAFE here, and it was I guess the basics in some ways, with a side course in using images and photography etc.
All the while, I've been concentrating mainly on what I've done for the last 40 odd years, audio engineering and sound system design etc. Throw in 2 years after the website design course of learning Mandarin, and you can get a dose of overload.
I might stick to what I know best, but take a bit more time to look at the web site side of things in terms of structure.

Paul

PCWA
10-06-2010, 11:23 AM
Sorry, that should have read "2 years of learning Mandarin straight after I did the web site design course".

Paul

gentleone
10-06-2010, 11:37 AM
Are you saying that this (the ap divs) is how you learned it at TAFE?

PCWA
10-06-2010, 11:46 AM
From best of memory, yes. I did the ourse because I found it interesting, and thought it would be a usefull tool at times. My short term memory is becoming worse each day (it happens with age), so I don't always remember what I did on a web site a day ago, let alone 3 years ago. As far as audio goes, it's not a problem because I've been in the industry so long I know what to do.
It becomes a strange situation when I can probably tell you just about every show and tour I've done and where since the 60's, but I don't always remember what I did yesterday.

gentleone
10-06-2010, 12:03 PM
I'm not surprised that TAFE taught you web design the wrong way... they're far from the only educational institute that teach web design the wrong way :)
But nice... music... my other biggest passion as well. Before I started with web design I did it for 20 years professionally as well (producer, dj, artist management and event organizer), but I quit because I found myself becoming too old to run into the night scene... although I do miss the girls that were running in the night scene as well :)

edbr
10-07-2010, 01:40 AM
It becomes a strange situation when I can probably tell you just about every show and tour I've done and where since the 60's, but I don't always remember what I did yesterday.
funny its the 60's i have memory blanks about . cant think why still the flash backs help :)

PCWA
10-07-2010, 09:12 AM
funny its the 60's i have memory blanks about . cant think why still the flash backs help :)

Ah, the flashbacks.... stories the walls could tell :twisted:
Or maybe because we remember having more fun and freedom back then, my industry was a lot more relaxed then. These days some of the over-the-top professionalism has taken the lustre, or at least some of the fun, out of it.

To Gentleone, at 63 plus, I don't bother going to clubs etc for recreatin, a pub occasionally for a Guinness, but that's it. The only time I bother to go out at night is if I have a gig to do, or one worth seeing.