Help With CSS/Javascript for my home page!!

  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Hey Everyone,

I just created a CSS/Javascript home page for my site based on another website that uses layouts. But it seems as if I've stuffed something up because if you go to my site http://www.parentsretreat.com you can see how the page looks totally stuffed!! The flower images are meant to be to the right of the page, my main header at the top, text in the middle like a blog with my nav bar where it is and my kid pictures down the left side between my nav bar and the side of the blogger.

Here's the code I have, help pleaseeeeeeeeeeeee!!!!!
:cry:

Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>.::Parents Retreat::.For Parents, Relatives & Friends Worldwide!!</title>

<style type="text/css">

body {
font:11px/1.4 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background:#F0F0F0;
margin:0px 0px 10px 0px;
padding:0px;
background-image:url(noah/bg-index.gif);
background-position:top left;background-repeat:no-repeat;
}

#frame {
width:753px;
margin:0px auto 0px auto;
padding:0px;
text-align:left;
voice-family:"\"}\"";
width:753px;
}
html>body #frame { width:753px; }

.tabtext {
padding-top:3px;
text-align:center;
}

#toptab {
background:#E8E8E8;
width:100px;
height:20px;
margin:11px 0px 0px 75px;
font-size:10px;
border-top:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;
voice-family:""}"";
margin-top:10px;
}
html>body #toptab {margin-top:10px;}

#bottomtab {
clear:both;
background:#E0E8F8;
width:240px;
height:20px;
margin:0px 0px 10px 437px;
font-size:10px;
border-bottom:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;
voice-family:""}"";
margin-left:435px;
}
html>body #bottomtab { margin-left:435px; }

#left {
float:left;
background:#F0F8FF;
text-align:right;
font-size:10px; line-height: 17px;
width:75px;
}

#leftlinks {
background:#F0F8FF;
padding:5px 5px 10px 5px;
border-top:1px solid #000;border-left:1px solid #000;border-bottom:1px solid #000;
}

#center {
float:left;
background:#fff;
width:602px;
border:1px solid #000;
voice-family:""}"";
width:600px;
}
html>body #center {
width:600px;
}

#right {
float:left;
width:75px;
margin-top:125px;
padding:0px;
border-top:1px solid #000;}

#photoblog {
float:left;
width:125px;
background:#E0E8F0;
margin: 0px 10px 10px -1px;
padding-top:5px;
text-align:center;
border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;
}

p,pre {
margin:0px 10px 20px 10px;
text-align:justify;
}

.postheader {
background:#ddd;
margin:0px 0px 20px 0px;
padding:0px 10px 0px 10px; /*I have no earthly Idea why, but giving this a right padding of10 makes it work in IE5 Mac!*/
border-top:1px solid #000;border-bottom:1px solid #000;
}
.first {border-top:0px;}

.posttitle {
font-weight:bold;
padding:5px 0px 5px 0px;
}
.postcomments {
float:right;
padding:5px 0px 5px 0px;
width:100px;
text-align:right;
}
.postcomments img {display:inline;}

#contentheader h1 {
font-size:14px;
padding:10px;
}

#contentright p {font-size:10px}

#header {border-bottom:1px solid black}

.rightimg {
border-bottom:1px solid #000;
border-right:1px solid #000;}

img {display:block;margin:auto}
</style>
<script type="text/javascript">

var frame
var left
var nav
var inited
function init() {
window.onresize=moveNav;
if (!document.createElement) return //begone, old browser
frame=document.getElementById('frame')
left=document.getElementById('left')
nav=document.createElement("DIV")
nav.style.position="absolute";
nav.style.lineHeight=left.style.lineHeight
nav.style.fontSize=left.style.fontSize
nav.style.padding=left.style.padding
nav.style.width=left.style.width
nav.style.height=getMyProperty(left,'height')
nav.style.textAlign=left.style.textAlign

inited = true
moveNav()
nav.innerHTML=left.innerHTML;
document.body.appendChild(nav)
left.style.visibility='hidden';
watchForScroll()
}

function getMyProperty(obj,prop) {
if (document.all) {
if (prop='top') return obj.offsetTop+document.body.scrollTop+'px';
if (prop='left') return obj.offsetLeft+'px';
if (prop='height') return obj.offsetHeight+'px';
} else {
if (prop='top') return (window.pageYOffset+parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue('top')+'px';
if (prop='left') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('left');
if (prop='height') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('height');
}
}

function moveNav() {
if (!inited) return false;
newLeft=getMyProperty(frame,'left');
newTop=getMyProperty(left,'top');
if (parseInt(newTop)+parseInt(getMyProperty(left,'height')> parseInt(getMyProperty(frame,'height'))-30){
newTop=(parseInt(getMyProperty(frame,'height')-30-parseInt(nav.style.height)+'px'
}
nav.style.left=newLeft
nav.style.top=newTop
}

lastS = 0
thisS = 0
function watchForScroll() {
thisS=(document.body.scrollTop)?document.body.scrollTop:window.pageYOffset
if (thisS!=lastS) {
lastS=thisS
moveNav()
}
setTimeout('watchForScroll()',50)
}

</script>
</head><body onload="init()">

<div id="frame" style="">
<div id="toptab"><div class="tabtext">Parents Retreat</div></div>
<div id="left" style="float:left;
text-align:right;
font-size:10px; line-height: 17px;
width:75px;"><div id="leftlinks"><b>main</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='parentsretreat.com';return true" onmouseout="window.status='';return true">home</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='meet your managers';return true" onmouseout="window.status='';return true">about</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='articles';return true" onmouseout="window.status='';return true">forum archives</a><br /><br /><b>talk time</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Parents Retreat Forum';return true" onmouseout="window.status='';return true">the forum</a><br /><br /><b>whats on offer</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Chat Time';return true" onmouseout="window.status='';return true">have a chat</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Articles';return true" onmouseout="window.status='';return true">parenting articles</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Photo Gallery';return true" onmouseout="window.status='';return true">photo gallery</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='competitions';return true" onmouseout="window.status='';return true">competitions</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='web journals';return true" onmouseout="window.status='';return true">web journals</a><br /><br /><b>etcetera</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='e-cards';return true" onmouseout="window.status='';return true">e-cards</a><br /><a href="" onmouseover="window.status='links';return true" onmouseout="window.status='';return true">links</a><br /><a href="mailto:admin@parentsretreat.com" class="sidemenulink" onmouseover="window.status='admin';return true" onmouseout="window.status='';return true">e-mail</a></div></div>

<div id="center">
<div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
<div id="photoblog">
<img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"><br><br>
<img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"><br><br>
<img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"><br><br>
<img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"><br><br>
<img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"><br><br>
<img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"><br><br>

<div class="postheader first"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.18am</a>.::Welcome to Parents Retreat::.</div></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>

<div class="postheader"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.19am</a>.::Why Should YOU join Parents Retreat?::.</div></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>

<div class="postheader"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.21am</a>.::What Parents Retreat has to Offer::.</div></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
<div id="right">
<img class="rightimg" border="0" src="pic1.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic2.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic3.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic4.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic5.jpg" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic6.jpg" alt="f" height="75" width="75">
</div>
<div id="bottomtab"><div class="tabtext">©2004 Parents Retreat. All rights reserved. </div></div>
</div>

</div></body>
</html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

This is probably going to be most appropriate for the programming board for the moment so after I reply, I'll shift it there. It's probably going to be a combination of fixing the javascript an maybe some tweaking.

When I go to your page I get a runtime error:

Quote:
Line:174
ERROR: Expected ")"


When I went to debug it, I am told this information:
Quote:
An exception of type 'Microsoft Jscript runtime error: Object expected' was not handled.


Line 174 is your body tag:
Code: [ Select ]
</head><body onload="init()">


Something in your init function isn't quite right I think, but I looked at the script and it didn't jump out at me. We have several members who are very good with javascript. I'm sure once they see this we can help you get it resolved.

//Moved to programming.

P.S. Looks like it's going to be a nice page once we get it fixed.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Check these two lines in function moveNav()

Code: [ Select ]
if (parseInt(newTop)+parseInt(getMyProperty(left,'height')> parseInt(getMyProperty(frame,'height'))-30){
newTop=(parseInt(getMyProperty(frame,'height')-30-parseInt(nav.style.height)+'px'
  1. if (parseInt(newTop)+parseInt(getMyProperty(left,'height')> parseInt(getMyProperty(frame,'height'))-30){
  2. newTop=(parseInt(getMyProperty(frame,'height')-30-parseInt(nav.style.height)+'px'


I think there are a couple closing parenthesis missing, but not sure where they should be.
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

I'm getting so frustrated, I haven't stopped fiddling with the code since I woke up and my flyer for the site got sent out this morning, I can just imagine what people would think if they looked at it the way it is at the moment :(
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

Why would you send out flyers with out it being completly done to satisfaction?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

*smiles at Miss_Bee -- don't worry it will come. Where's RichB when you need him? He'd have had this fixed while I'm still looking at it.
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

I decided to change the home page this morning and fouled it up big time!!

I just did a code validation and it came up with 57 errors!!! Most of which claimed by angle brackets werent right like < br > instead of together but I've checked them all and they are all ok!! It also says my character set isnt right for CSS and XHTML....I'm to the point of pulling my hair out now!!

Thanks helping me sort this out guys, I really appreciate it!
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I've placed missing )s but before I post where they go I must ask, is the left menu supposed to jump down and too the right when you scroll ? :oops:
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Well see I got it off a layout page but stuffed if I remember where I got it from, on the first page it was static but then when you clicked on the second page, it scrolled!

Hmmm what do you think? It mentions scroll in my code..
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

You need to add
Code: [ Select ]
position:absolute;

to #left in your CSS, that will take the boogers out of the layout. Have an idea about the floating nav just need to know if it was originally supposed to junp down & right :D
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

I think it was meant to be up and down and thanks for that bit, I'll add it now and see if it works.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Are we getting closer ? (missing tag closings keep poping up as i look into it further :wink: )
Code: [ Select ]
<!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" xml:lang="en"
lang="en">
<html>
<head>
<title>.::Parents Retreat::.For Parents, Relatives & Friends Worldwide!!</title>

<style type="text/css">

body {
font:11px/1.4 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background:#F0F0F0;
margin:0px 0px 10px 0px;
padding:0px;
background-image:url(noah/bg-index.gif);
background-position:top left;background-repeat:no-repeat;
}

#frame {
width:753px;
margin:0px auto 0px auto;
padding:0px;
text-align:left;
voice-family:"\"}\"";
width:753px;
}
html>body #frame { width:753px; }

.tabtext {
padding-top:3px;
text-align:center;
}

#toptab {
background:#E8E8E8;
width:100px;
height:20px;
margin:11px 0px 0px 75px;
font-size:10px;
border-top:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;
voice-family:""}"";
margin-top:10px;
}
html>body #toptab {margin-top:10px;}

#bottomtab {
clear:both;
background:#E0E8F8;
width:240px;
height:20px;
margin:0px 0px 10px 437px;
font-size:10px;
border-bottom:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;
voice-family:""}"";
margin-left:435px;
}
html>body #bottomtab { margin-left:435px; }

#left {
position:absolute;
background:#F0F8FF;
text-align:right;
font-size:10px; line-height: 17px;
width:75px;
}

#leftlinks {
background:#F0F8FF;
padding:5px 5px 10px 5px;
border-top:1px solid #000;border-left:1px solid #000;border-bottom:1px solid #000;
}

#center {
float:left;
background:#fff;
width:602px;
border:1px solid #000;
voice-family:""}"";
width:600px;
}
html>body #center {
width:600px;
}

#right {
float:left;
width:75px;
margin-top:125px;
padding:0px;
border-top:1px solid #000;}

#photoblog {
float:left;
width:125px;
background:#E0E8F0;
margin: 0px 10px 10px -1px;
padding-top:5px;
text-align:center;
border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;
}

p,pre {
margin:0px 10px 20px 10px;
text-align:justify;
}

.postheader {
background:#ddd;
margin:0px 0px 20px 0px;
padding:0px 10px 0px 10px; /*I have no earthly Idea why, but giving this a right padding of10 makes it work in IE5 Mac!*/
border-top:1px solid #000;border-bottom:1px solid #000;
}
.first {border-top:0px;}

.posttitle {
font-weight:bold;
padding:5px 0px 5px 0px;
}
.postcomments {
float:right;
padding:5px 0px 5px 0px;
width:100px;
text-align:right;
}
.postcomments img {display:inline;}

#contentheader h1 {
font-size:14px;
padding:10px;
}

#contentright p {font-size:10px}

#header {border-bottom:1px solid black}

.rightimg {
border-bottom:1px solid #000;
border-right:1px solid #000;}

img {display:block;margin:auto}
</style>
<script type="text/javascript">

var frame
var left
var nav
var inited
function init() {
window.onresize=moveNav;
if (!document.createElement) return //begone, old browser
frame=document.getElementById('frame')
left=document.getElementById('left')
nav=document.createElement("DIV")
nav.style.position="absolute";
nav.style.lineHeight=left.style.lineHeight
nav.style.fontSize=left.style.fontSize
nav.style.padding=left.style.padding
nav.style.width=left.style.width
nav.style.height=getMyProperty(left,'height')
nav.style.textAlign=left.style.textAlign

inited = true
moveNav()
nav.innerHTML=left.innerHTML;
document.body.appendChild(nav)
left.style.visibility='hidden';
watchForScroll()
}

function getMyProperty(obj,prop) {
if (document.all) {
if (prop='top') return obj.offsetTop+document.body.scrollTop+'px';
if (prop='left') return obj.offsetLeft+'px';
if (prop='height') return obj.offsetHeight+'px';
} else {
if (prop='top') return (window.pageYOffset+parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue('top')+'px'));
if (prop='left') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('left');
if (prop='height') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('height');
}
}

function moveNav() {
if (!inited) return false;
newLeft=getMyProperty(frame,'left');
newTop=getMyProperty(left,'top');
if (parseInt(newTop)+parseInt(getMyProperty(left,'height') > parseInt(getMyProperty(frame,'height'))-30)){
newTop=(parseInt(getMyProperty(frame,'height')-30-parseInt(nav.style.height)+'px'
))}
nav.style.left=newLeft;
nav.style.top=newTop;
}

lastS = 0
thisS = 0
function watchForScroll() {
thisS=(document.body.scrollTop)?document.body.scrollTop:window.pageYOffset
if (thisS!=lastS) {
lastS=thisS
moveNav()
}
setTimeout('watchForScroll()',50)
}

</script>
</head><body onload="init()">

<div id="frame" style="">
<div id="toptab"><div class="tabtext">Parents Retreat</div></div>
<div id="left" style="float:left;
text-align:right;
font-size:10px; line-height: 17px;
width:75px;"><div id="leftlinks"><b>main</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='parentsretreat.com';return true" onmouseout="window.status='';return true">home</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='meet your managers';return true" onmouseout="window.status='';return true">about</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='articles';return true" onmouseout="window.status='';return true">forum archives</a><br /><br /><b>talk time</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Parents Retreat Forum';return true" onmouseout="window.status='';return true">the forum</a><br /><br /><b>whats on offer</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Chat Time';return true" onmouseout="window.status='';return true">have a chat</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Articles';return true" onmouseout="window.status='';return true">parenting articles</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Photo Gallery';return true" onmouseout="window.status='';return true">photo gallery</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='competitions';return true" onmouseout="window.status='';return true">competitions</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='web journals';return true" onmouseout="window.status='';return true">web journals</a><br /><br /><b>etcetera</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='e-cards';return true" onmouseout="window.status='';return true">e-cards</a><br /><a href="" onmouseover="window.status='links';return true" onmouseout="window.status='';return true">links</a><br /><a href="mailto:admin@parentsretreat.com" class="sidemenulink" onmouseover="window.status='admin';return true" onmouseout="window.status='';return true">e-mail</a></div></div>

<div id="center">
<div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
<div id="photoblog">
<img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"><br><br>
<img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"><br><br>
<img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"><br><br>
<img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"><br><br>
<img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"><br><br>
<img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"><br><br>
</div>

<div class="postheader first"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.18am</a>.::Welcome to Parents Retreat::.</div></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>

<div class="postheader"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.19am</a>.::Why Should YOU join Parents Retreat?::.</div></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>

<div class="postheader"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.21am</a>.::What Parents Retreat has to Offer::.</div></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
<div id="right">
<img class="rightimg" border="0" src="pic1.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic2.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic3.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic4.gif" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic5.jpg" alt="f" height="75" width="75">
<img class="rightimg" border="0" src="pic6.jpg" alt="f" height="75" width="75">
</div>
<div id="bottomtab"><div class="tabtext">©2004 Parents Retreat. All rights reserved. </div></div>
</div>

</div></body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
  4. lang="en">
  5. <html>
  6. <head>
  7. <title>.::Parents Retreat::.For Parents, Relatives & Friends Worldwide!!</title>
  8. <style type="text/css">
  9. body {
  10. font:11px/1.4 Verdana, Arial, Helvetica, sans-serif;
  11. text-align:center;
  12. background:#F0F0F0;
  13. margin:0px 0px 10px 0px;
  14. padding:0px;
  15. background-image:url(noah/bg-index.gif);
  16. background-position:top left;background-repeat:no-repeat;
  17. }
  18. #frame {
  19. width:753px;
  20. margin:0px auto 0px auto;
  21. padding:0px;
  22. text-align:left;
  23. voice-family:"\"}\"";
  24. width:753px;
  25. }
  26. html>body #frame { width:753px; }
  27. .tabtext {
  28. padding-top:3px;
  29. text-align:center;
  30. }
  31. #toptab {
  32. background:#E8E8E8;
  33. width:100px;
  34. height:20px;
  35. margin:11px 0px 0px 75px;
  36. font-size:10px;
  37. border-top:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;
  38. voice-family:""}"";
  39. margin-top:10px;
  40. }
  41. html>body #toptab {margin-top:10px;}
  42. #bottomtab {
  43. clear:both;
  44. background:#E0E8F8;
  45. width:240px;
  46. height:20px;
  47. margin:0px 0px 10px 437px;
  48. font-size:10px;
  49. border-bottom:1px solid #000; border-left:1px solid #000;border-right:1px solid #000;
  50. voice-family:""}"";
  51. margin-left:435px;
  52. }
  53. html>body #bottomtab { margin-left:435px; }
  54. #left {
  55. position:absolute;
  56. background:#F0F8FF;
  57. text-align:right;
  58. font-size:10px; line-height: 17px;
  59. width:75px;
  60. }
  61. #leftlinks {
  62. background:#F0F8FF;
  63. padding:5px 5px 10px 5px;
  64. border-top:1px solid #000;border-left:1px solid #000;border-bottom:1px solid #000;
  65. }
  66. #center {
  67. float:left;
  68. background:#fff;
  69. width:602px;
  70. border:1px solid #000;
  71. voice-family:""}"";
  72. width:600px;
  73. }
  74. html>body #center {
  75. width:600px;
  76. }
  77. #right {
  78. float:left;
  79. width:75px;
  80. margin-top:125px;
  81. padding:0px;
  82. border-top:1px solid #000;}
  83. #photoblog {
  84. float:left;
  85. width:125px;
  86. background:#E0E8F0;
  87. margin: 0px 10px 10px -1px;
  88. padding-top:5px;
  89. text-align:center;
  90. border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;
  91. }
  92. p,pre {
  93. margin:0px 10px 20px 10px;
  94. text-align:justify;
  95. }
  96. .postheader {
  97. background:#ddd;
  98. margin:0px 0px 20px 0px;
  99. padding:0px 10px 0px 10px; /*I have no earthly Idea why, but giving this a right padding of10 makes it work in IE5 Mac!*/
  100. border-top:1px solid #000;border-bottom:1px solid #000;
  101. }
  102. .first {border-top:0px;}
  103. .posttitle {
  104. font-weight:bold;
  105. padding:5px 0px 5px 0px;
  106. }
  107. .postcomments {
  108. float:right;
  109. padding:5px 0px 5px 0px;
  110. width:100px;
  111. text-align:right;
  112. }
  113. .postcomments img {display:inline;}
  114. #contentheader h1 {
  115. font-size:14px;
  116. padding:10px;
  117. }
  118. #contentright p {font-size:10px}
  119. #header {border-bottom:1px solid black}
  120. .rightimg {
  121. border-bottom:1px solid #000;
  122. border-right:1px solid #000;}
  123. img {display:block;margin:auto}
  124. </style>
  125. <script type="text/javascript">
  126. var frame
  127. var left
  128. var nav
  129. var inited
  130. function init() {
  131. window.onresize=moveNav;
  132. if (!document.createElement) return //begone, old browser
  133. frame=document.getElementById('frame')
  134. left=document.getElementById('left')
  135. nav=document.createElement("DIV")
  136. nav.style.position="absolute";
  137. nav.style.lineHeight=left.style.lineHeight
  138. nav.style.fontSize=left.style.fontSize
  139. nav.style.padding=left.style.padding
  140. nav.style.width=left.style.width
  141. nav.style.height=getMyProperty(left,'height')
  142. nav.style.textAlign=left.style.textAlign
  143. inited = true
  144. moveNav()
  145. nav.innerHTML=left.innerHTML;
  146. document.body.appendChild(nav)
  147. left.style.visibility='hidden';
  148. watchForScroll()
  149. }
  150. function getMyProperty(obj,prop) {
  151. if (document.all) {
  152. if (prop='top') return obj.offsetTop+document.body.scrollTop+'px';
  153. if (prop='left') return obj.offsetLeft+'px';
  154. if (prop='height') return obj.offsetHeight+'px';
  155. } else {
  156. if (prop='top') return (window.pageYOffset+parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue('top')+'px'));
  157. if (prop='left') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('left');
  158. if (prop='height') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('height');
  159. }
  160. }
  161. function moveNav() {
  162. if (!inited) return false;
  163. newLeft=getMyProperty(frame,'left');
  164. newTop=getMyProperty(left,'top');
  165. if (parseInt(newTop)+parseInt(getMyProperty(left,'height') > parseInt(getMyProperty(frame,'height'))-30)){
  166. newTop=(parseInt(getMyProperty(frame,'height')-30-parseInt(nav.style.height)+'px'
  167. ))}
  168. nav.style.left=newLeft;
  169. nav.style.top=newTop;
  170. }
  171. lastS = 0
  172. thisS = 0
  173. function watchForScroll() {
  174. thisS=(document.body.scrollTop)?document.body.scrollTop:window.pageYOffset
  175. if (thisS!=lastS) {
  176. lastS=thisS
  177. moveNav()
  178. }
  179. setTimeout('watchForScroll()',50)
  180. }
  181. </script>
  182. </head><body onload="init()">
  183. <div id="frame" style="">
  184. <div id="toptab"><div class="tabtext">Parents Retreat</div></div>
  185. <div id="left" style="float:left;
  186. text-align:right;
  187. font-size:10px; line-height: 17px;
  188. width:75px;"><div id="leftlinks"><b>main</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='parentsretreat.com';return true" onmouseout="window.status='';return true">home</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='meet your managers';return true" onmouseout="window.status='';return true">about</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='articles';return true" onmouseout="window.status='';return true">forum archives</a><br /><br /><b>talk time</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Parents Retreat Forum';return true" onmouseout="window.status='';return true">the forum</a><br /><br /><b>whats on offer</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Chat Time';return true" onmouseout="window.status='';return true">have a chat</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Articles';return true" onmouseout="window.status='';return true">parenting articles</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='Photo Gallery';return true" onmouseout="window.status='';return true">photo gallery</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='competitions';return true" onmouseout="window.status='';return true">competitions</a><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='web journals';return true" onmouseout="window.status='';return true">web journals</a><br /><br /><b>etcetera</b><br /><a href="" onclick="return false;" class="sidemenulink" onmouseover="window.status='e-cards';return true" onmouseout="window.status='';return true">e-cards</a><br /><a href="" onmouseover="window.status='links';return true" onmouseout="window.status='';return true">links</a><br /><a href="mailto:admin@parentsretreat.com" class="sidemenulink" onmouseover="window.status='admin';return true" onmouseout="window.status='';return true">e-mail</a></div></div>
  189. <div id="center">
  190. <div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
  191. <div id="photoblog">
  192. <img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"><br><br>
  193. <img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"><br><br>
  194. <img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"><br><br>
  195. <img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"><br><br>
  196. <img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"><br><br>
  197. <img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"><br><br>
  198. </div>
  199. <div class="postheader first"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.18am</a>.::Welcome to Parents Retreat::.</div></div>
  200. <p>blah blah blah</p>
  201. <p>blah blah blah</p>
  202. <p>blah blah blah</p>
  203. <p>blah blah blah</p>
  204. <p>blah blah blah</p>
  205. <div class="postheader"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.19am</a>.::Why Should YOU join Parents Retreat?::.</div></div>
  206. <p>blah blah blah</p>
  207. <p>blah blah blah</p>
  208. <p>blah blah blah</p>
  209. <p>blah blah blah</p>
  210. <p>blah blah blah</p>
  211. <div class="postheader"><div class="postcomments"></div><div class="posttitle"><a href="" onclick="return false;">24.05.04 01.21am</a>.::What Parents Retreat has to Offer::.</div></div>
  212. <p>blah blah blah</p>
  213. <p>blah blah blah</p>
  214. <p>blah blah blah</p>
  215. <p>blah blah blah</p>
  216. <p>blah blah blah</p>
  217. </div>
  218. <div id="right">
  219. <img class="rightimg" border="0" src="pic1.gif" alt="f" height="75" width="75">
  220. <img class="rightimg" border="0" src="pic2.gif" alt="f" height="75" width="75">
  221. <img class="rightimg" border="0" src="pic3.gif" alt="f" height="75" width="75">
  222. <img class="rightimg" border="0" src="pic4.gif" alt="f" height="75" width="75">
  223. <img class="rightimg" border="0" src="pic5.jpg" alt="f" height="75" width="75">
  224. <img class="rightimg" border="0" src="pic6.jpg" alt="f" height="75" width="75">
  225. </div>
  226. <div id="bottomtab"><div class="tabtext">©2004 Parents Retreat. All rights reserved. </div></div>
  227. </div>
  228. </div></body>
  229. </html>
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Ok when I added that bit heres what I got http://www.parentsretreat.com, the layout needs to be moved slightly right so the pictures are lined up against the left nav bar and the blogger needs to fill the center white square, then the strip of flower pics needs to be moved up the right top pic aligned with my title where it cuts out from to top section of the pic.

Does that make sense??? *scratches head*
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Oh and my header has moved too far left!!

I'm on the verge of giving up! :(
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

ok I see now :D just a minute...
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Ok added your code and my nav bar is now scrolling :) but header needs to be above my blogger box, blogger content needs to be centered, left pic strip needs to move over aligned against nav bar and right pic strip needs to be aligned against my header and blogger on the right....

God I'm asking for alot!! Sorry everyone :(
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Giving up would be disapointing given how far you've come.


This may or may not help, but your doctype is a generic microsoft version. Change it and your begining HTML tag from this:

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
  2. <html>


to this:
Code: [ Select ]
<!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" xml:lang="en"
lang="en">
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
  4. lang="en">


I have no idea if that will make a difference, but it may. My version is the correct way to current standards.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

There are alot of end tags mising, I can't take any more time to look into it right now (wish i could) but I've replaced my original draft of this source with changes i've made for anyone that can pickup where i left off.

Don't give up bee, once the bugs are worked out this will be a nice layout :D
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

i don't know if anyone covered this, but the
Code: [ Select ]
<br>
thing is because all
brackets have to be closed for XHTML. so they should all be
Code: [ Select ]
</br>
.
same with
Code: [ Select ]
<img>
make sure the whole thing is closed off.


She has the bracket tags correct. I looked at those-- too they are all <br /> which is how they should be. I didn't check the image tags though, but I suspect they are correct.
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Thanks guys, didn't really make a difference ATNO but thanks so much for trying.

What do you mean end tags Joebert?
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Awwwww Potent!!! I am gonna try that now!!!
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

yeh... and it may be
Code: [ Select ]
< /br>

with a space before the slash... but because these are
usually just a "one tag" function, it gets a little
bit of a pain in xhtml.

im not a fan of xhtml, but we had a whole class on it a few quarters ago.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

i don't know if anyone covered this, but the
Code: [ Select ]
<br>
thing is because all
brackets have to be closed for XHTML. so they should all be
Code: [ Select ]
</br>
.
same with
Code: [ Select ]
<img>
make sure the whole thing is closed off.


She has the bracket tags correct. I looked at those-- too they are all <br /> which is how they should be. I didn't check the image tags though, but I suspect they are correct.

//PS the are "Break" tags not Bracket (as in line-break)
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

Code: [ Select ]
<div id="center">
<div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
<div id="photoblog">
<img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"><br><br>
<img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"><br><br>
<img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"><br><br>
<img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"><br><br>
<img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"><br><br>
<img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"><br><br>
  1. <div id="center">
  2. <div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
  3. <div id="photoblog">
  4. <img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"><br><br>
  5. <img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"><br><br>
  6. <img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"><br><br>
  7. <img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"><br><br>
  8. <img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"><br><br>
  9. <img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"><br><br>



none of those are closed...
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

yes... im sorry, it is
Code: [ Select ]
<br />


here's a page i knew they had to be closed, tho.
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

If someone has a chance can you please look at my code now and tell me if my brackets and mark up is wrong cos I can't see it and now I'm confused
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

ATNO/TW wrote:
//PS the are "Break" tags not Bracket (as in line-break)



i know, i tend to call the < things brackets... hahah, im unconventional.
what can i say...
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Don't change whatever you have there now. It's looking a bit closer to like I think you want it. It's a bit odd at 1280x1024 res, but at lest things look like they are starting to line up. Let me see if I can get a screenshot up for you.
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

Code: [ Select ]
<div id="center">
<div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
<div id="photoblog">
<img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"></br></br>
<img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"></br></br>
<img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"></br></br>
<img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"></br></br>
<img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"></br></br>
<img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"></br></br>
  1. <div id="center">
  2. <div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600"></div>
  3. <div id="photoblog">
  4. <img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100"></br></br>
  5. <img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100"></br></br>
  6. <img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100"></br></br>
  7. <img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100"></br></br>
  8. <img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100"></br></br>
  9. <img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100"></br></br>


that was my bad... it should read:

Code: [ Select ]
<div id="center">
<div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600" /></div>
<div id="photoblog">
<img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100" /><br /><br />
<img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100" /><br /><br />
<img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100" /><br /><br />
<img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100" /><br /><br />
<img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100" /><br /><br />
<img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100" /><br /><br />
  1. <div id="center">
  2. <div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600" /></div>
  3. <div id="photoblog">
  4. <img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100" /><br /><br />
  5. <img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100" /><br /><br />
  6. <img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100" /><br /><br />
  7. <img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100" /><br /><br />
  8. <img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100" /><br /><br />
  9. <img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100" /><br /><br />



try that...
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1307
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

:( nope
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 91 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.