Help With CSS/Javascript for my home page!!

  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • 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>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23473
  • 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: 23473
  • 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: 1306
  • 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: 23473
  • 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: 1306
  • 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
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • 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: 1306
  • 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
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • 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: 1306
  • 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
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • 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: 1306
  • 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: 1306
  • 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
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • Loc: Florida

Post 3+ Months Ago

ok I see now :D just a minute...
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • 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: 23473
  • 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
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • 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: 1306
  • 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: 1306
  • 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: 23473
  • 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: 1306
  • 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: 23473
  • 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: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

:( nope
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

out of curiosity, why'd you choose to use xhtml?



check all of your image tags, and close them off, too.
(i closed the ones in the code i pasted)
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

I saw the layout in a layouts site I was in, I didn't realise it was XHTML till I actually had it on the sever and nothing was aligned.

Have a look at it now, I added your code
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23473
  • Loc: Woodbridge VA

Post 3+ Months Ago

This is what I see currently on IE 6.1 SP1

http://atnopro.com/ozzu/screenshotparents.png
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

hmmm... you have a floating div tag in IE... check it.

http://www.potentdames.com/moi/missbee01.gif
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

oh, i see it... when you pasted the code i left, you missed the < that starts it.



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

Post 3+ Months Ago

Ok heres what I have....

http://www.parentsretreat.com/*plum*.html

this is my current code:
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;
left:0px;
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;
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
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=0;
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>
  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. left:0px;
  57. background:#F0F8FF;
  58. text-align:right;
  59. font-size:10px; line-height: 17px;
  60. width:75px;
  61. }
  62. #leftlinks {
  63. background:#F0F8FF;
  64. padding:5px 5px 10px 5px;
  65. border-top:1px solid #000;border-left:1px solid #000;border-bottom:1px solid #000;
  66. }
  67. #center {
  68. float:left;
  69. background:#fff;
  70. width:602px;
  71. border:1px solid #000;
  72. voice-family:""}"";
  73. width:600px;
  74. }
  75. html>body #center {
  76. width:600px;
  77. }
  78. #right {
  79. float:left;
  80. width:75px;
  81. margin-top:125px;
  82. padding:0px;
  83. border-top:1px solid #000;}
  84. #photoblog {
  85. float:left;
  86. width:125px;
  87. background:#E0E8F0;
  88. margin: 0px 10px 10px -1px;
  89. padding-top:5px;
  90. text-align:center;
  91. border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;
  92. }
  93. p,pre {
  94. margin:0px 10px 20px 10px;
  95. text-align:justify;
  96. }
  97. .postheader {
  98. background:#ddd;
  99. margin:0px 0px 20px 0px;
  100. padding:0px 10px 0px 10px;
  101. border-top:1px solid #000;border-bottom:1px solid #000;
  102. }
  103. .first {border-top:0px;}
  104. .posttitle {
  105. font-weight:bold;
  106. padding:5px 0px 5px 0px;
  107. }
  108. .postcomments {
  109. float:right;
  110. padding:5px 0px 5px 0px;
  111. width:100px;
  112. text-align:right;
  113. }
  114. .postcomments img {display:inline;}
  115. #contentheader h1 {
  116. font-size:14px;
  117. padding:10px;
  118. }
  119. #contentright p {font-size:10px}
  120. #header {border-bottom:1px solid black}
  121. .rightimg {
  122. border-bottom:1px solid #000;
  123. border-right:1px solid #000;}
  124. img {display:block;margin:auto}
  125. </style>
  126. <script type="text/javascript">
  127. var frame
  128. var left
  129. var nav
  130. var inited
  131. function init() {
  132. window.onresize=moveNav;
  133. if (!document.createElement) return
  134. frame=document.getElementById('frame')
  135. left=document.getElementById('left')
  136. nav=document.createElement("DIV")
  137. nav.style.position="absolute";
  138. nav.style.lineHeight=left.style.lineHeight
  139. nav.style.fontSize=left.style.fontSize
  140. nav.style.padding=left.style.padding
  141. nav.style.width=left.style.width
  142. nav.style.height=getMyProperty(left,'height')
  143. nav.style.textAlign=left.style.textAlign
  144. inited = true
  145. moveNav()
  146. nav.innerHTML=left.innerHTML;
  147. document.body.appendChild(nav)
  148. left.style.visibility='hidden';
  149. watchForScroll()
  150. }
  151. function getMyProperty(obj,prop) {
  152. if (document.all) {
  153. if (prop='top') return obj.offsetTop+document.body.scrollTop+'px';
  154. if (prop='left') return obj.offsetLeft+'px';
  155. if (prop='height') return obj.offsetHeight+'px';
  156. } else {
  157. if (prop='top') return (window.pageYOffset+parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue('top')+'px'));
  158. if (prop='left') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('left');
  159. if (prop='height') return document.defaultView.getComputedStyle(obj,'').getPropertyValue('height');
  160. }
  161. }
  162. function moveNav() {
  163. if (!inited) return false;
  164. newLeft=getMyProperty(frame,'left');
  165. newTop=getMyProperty(left,'top');
  166. if (parseInt(newTop)+parseInt(getMyProperty(left,'height') > parseInt(getMyProperty(frame,'height'))-30)){
  167. newTop=(parseInt(getMyProperty(frame,'height')-30-parseInt(nav.style.height)+'px'
  168. ))}
  169. nav.style.left=0;
  170. nav.style.top=newTop;
  171. }
  172. lastS = 0
  173. thisS = 0
  174. function watchForScroll() {
  175. thisS=(document.body.scrollTop)?document.body.scrollTop:window.pageYOffset
  176. if (thisS!=lastS) {
  177. lastS=thisS
  178. moveNav()
  179. }
  180. setTimeout('watchForScroll()',50)
  181. }
  182. </script>
  183. </head><body onload="init()">
  184. <div id="frame" style="">
  185. <div id="toptab"><div class="tabtext">Parents Retreat</div></div>
  186. <div id="left" style="float:left;
  187. text-align:right;
  188. font-size:10px; line-height: 17px;
  189. 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>
  190. div id="center">
  191. <div id="header"><img style="" border="0" src="logoPR.jpg" alt="entry" height="200" width="600" /></div>
  192. <div id="photoblog">
  193. <img border="1" src="thumb1.jpg" class="photothumbnail" alt="1" height="100" width="100" /><br /><br />
  194. <img border="1" src="thumb2.jpg" class="photothumbnail" alt="2" height="100" width="100" /><br /><br />
  195. <img border="1" src="thumb3.jpg" class="photothumbnail" alt="3" height="100" width="100" /><br /><br />
  196. <img border="1" src="thumb4.jpg" class="photothumbnail" alt="4" height="100" width="100" /><br /><br />
  197. <img border="1" src="thumb5.jpg" class="photothumbnail" alt="5" height="100" width="100" /><br /><br />
  198. <img border="1" src="thumb6.jpg" class="photothumbnail" alt="6" height="100" width="100" /><br /><br /> 
  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: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

ok that div tag is fixed.....could it be in the CSS or Java bit thats not making it align?
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

what would really help, is putting your CSS in it's own .css file, and
linking it. this will clean the page up a bit, usually, if the css is huge,
it's more convienent, and then you can control tons of pages with
one source.


do you have a pic of what you are trying to do? or are you just trying
to meet the w3 standard.
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

most likely there's a clash in the css... did you say you borrowed the code?
(it's probly here in the thread but....) do you have a link to the page you
are modifying?


im looking at it, i don't know if i can help you, but im trying...
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Well no not really, I found it on another site, they were talking about the way this guy had layed out his website and offered his code below it, mine looks near identical to his but I made my own graphics.
I'm starting to wonder if maybe I've done some sort of copyright issue!!
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

no... lots of people offer their code up... zeldman and a list apart.
(for example) but you're expected to modify it.


personally, i won't use them. i dissect them, and learn stuff, but
usually, i design around my images... so i don't like to use other
peoples layouts. but as far as copyright, i think you're okay.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

9 times out of ten if you got a css layout screwwing up it's too many rules - I will look when I've had a shower :)
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Thanks rtm it will be much appreciated
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

quick q, the left nav is supposed to scroll with the page? If it does I can probably sort you out a version that is a lot cleaner, but does not validate.
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

I am now looking into your codes and trying to fix it now Miss Bee. I will post the code once I can fix it :D...
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Oh guys thank you so much!!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I now have got you valid xhtml, and have started to play with the css. The first thing I notice is you have the tantek celic box model hack done wrong in a few places - I've corrected this and converted it to the reduced version, because I'm assuming that you don't need to support opera 5.

I have now deleted all that javascript and got the whole thing to work with about 4 lines off (non-valid) css. It scrolls like a beauty now, Ill get it uploaded so you can have a look. I still have to sot out the widths and stuff for IE but that is the easy bit :D

I'll get a link once I have uploaded
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

you're a legend rtm xxx
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I know :D

http://www.service6.org.uk/richard/missbee.html

Thats the link - it displays jerky in scummy IE because it's using javascript (only one line though - yay for efficient code!), this is the best you will get with IE, there is a slight delay on the jscript. But in any decent browsers it will display with a super-smooth pure css position:fixed

Do not use the code yet, I still need to sort out the width and stuff, which is gonna take a while because my boss has started to realise I am doing no work.

Plus Dreamweaver has now messed up all the image links cos I clicked yes instead of no :roll:

I'll probably get it sorted at lunch, if thats ok.
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Looking good honey but on my 600x800 browser the nav bar is covering half the site on the left :(
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Yeah take your time its only 6.42pm here
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

what browser? And version

IE5 perhaps? If so then thats fine, thats gonna be fixed with the margins and widths and stuff - I know what the problem is there :wink:


Oh no, thats something else - I see what you mean now. I'll get that fixed too - don't you worry :D
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

hehe yeah IE5 ..... legend, legend, legend!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

May I ask why you are using IE5? :lol: considering the upgrade is available for free as are other, better browsers?

is it 5.0 or 5.5?
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

Why don't you use IE6 or Mozilla? I am using Netscape Navigator :D
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Cos I'm Old School hahahahahahhaha, nah F**ked if I know why I'm not! :shock:
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Any luck yet rtm?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Nope, it's not lunch for another half hour :D I should get it all done during my lunch break, so hopefully have it done by half one = 1 and a half hours :)
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Ok cool but don't spend all lunch working on my *plum* website babe! Go and and enjoy it!!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Nah theres nothing to do - I spend all my lunch doing IT type stuff for me normally - I left the disk at home today :lol:
I got 50 minutes of just sitting otherwise :)



WOOOOOOOOOOOOOOOOO

Done with 2 minutes to spare! Lol I had some problems between IE5 and IE6, but it's sorted now. Working in IE5.5, IE6, and Firefox - is a good bet that working in firefox it will work in mozilla, netscape and Opera. Also should work in IE5.0, but I'm not sure on that and can't check.

I'm assuming your top image is 600px wide, if not let me know and I'll work out how to fix it. Aso you will need to update all your image src's, but they should be easy to find as I put in some whitespace in the html for you.

Let me know if you have any problems - I haven't tested thouroughly. Anything now will just be tweaking though :D

http://www.service6.org.uk/richard/msbee.html

I'll also sort you an annotated copy if you wish. Just let me know
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Wooooo Hoooo theres only 2 problems sweety...

The blogger content and headers under the pictures on the left next to the nav bar have to actually be next to the pictures but on the right so all the content is under the header in the middle section :( and lastly the small pics need to be on the outside of the blogger square on the right so that the first pic is aligned next to the header line but above the blogger line....

Hope that makes sense and I hope I don't sound ungrateful but thats a big prob and I truly do appreciate everything you have done!! xxxxx
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Nah thats cool, I take it you just want the whole center section "flipped" and that gap got rid of? Let me know that that is right before I start on it.

//edit actually I have no idea what you are saying - can you do me a quick sketch? :lol:

anyway, as I said the difficult bit is done, anything else is just quick tweaks :D
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

yep i'll do u a quick sketch now
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Ok here it is hun....its only really rough but its an idea of the layout i want but with the drift you already have just how i want the blogger and the right sided pics ok...

http://www.parentsretreat.com/*plum*.html
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

ooooohhhh, so some of the images are gonna be outside the main area. Um, I know I'm being really dumb, but Ive got two sets of images and one goes on the left one on the right lol. Which side do the ones with the grey/blue background go on?
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

they go on the left the smaller pictures go on the right
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

try now:

http://www.service6.org.uk/richard/msbee.html

It may need a little tweaking to make it work with the images (depending on size) - but I think that is done now :)

Again let me know any other tweaks
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Everything is perfect now except the nav bar needs to move back over to the left outside the main boxes, its overlapping the images and main header again and the titles and content still need to be moved to the center white section under the header. Sorry babes:(

hehehehe sick of me yet!!
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

OMGGGGGGGGGGGGGG YOU ARE THE BIGGEST LEGEND!!!!!!!!!

Thankyou soooooooooooooooooooo much rtm!!!! You have no idea how appreciative of this I am!!!

Thankyou for being so patient with me and constantly persisting!!! Luv ya for it *kiss* *kiss* *kiss* *kiss* *kiss*

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

Post 3+ Months Ago

Heres the final page sweety, thankyou sooooo much all over again!!


http://www.parentsretreat.com
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

sorry ozzu went all funny and my post dissapeared, insert before miss bee's last:

No its ok, I have just been confused all along about what you wanted - the overlapping was an error on my part - I moved some stuff in the html and ended up nesting some divs badly - thats sorted now.

I thought all along that the content was supposed to be running down the side, like little bits and pieces you sometimes get :lol:

Right It is done, probably. I now see what you wanted all along - dammit I'm so dumb sometimes.... :roll:

again - if I missed anything, let me know - not tested IE5 - my colleague is back and using that computer now.

Same file again



To be honest the only reason I had to be so persistant was because I just didn't get what was needed. I spent most of the time figuring how to get Gecko, IE6 AND IE5 to all play nice together, without loads of javascript. All the stuff at the end was really simple so no worries :D
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

I hope I didn't keep you from doing anything else though, thats what I felt worse about :(
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

well I'm copying about 50 sheets of hand-written tables into excel, and yes you should feel very guilty about dragging me away from <b>that</b> :wink:

The html is a bit different to how you last saw it, lol I've moved stuff around and deleted bits of it - but it should be pretty easy to figure out. Don't try to change too much in the CSS without giving me a shout first, there's some stuff in there that will become very unstable if it's not precise lol.

also, the html validates, but the CSS doesn't - I've used two lines of Microsoft only code in there (which saves us 60 lines of javascript so i decided its ok).
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

Awww thankyou!! Not changing a thing except to add real links to my menu, content instead of blah blah blah and maybe my images when the time comes for adding the sites kids to the main page and thats it!!

I love what you've done. You have no idea how valuable you are!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I could mail you an invoice if really think I'm valuable :wink:
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

lol nah i'll pass thanks :P off to bed now my mind is at ease. You've saved me from the worst horrible day today! Gotta go get my broken down car from a bad neighborhood tomorrow. Hope its not stripped down when I get there....been there since saturday so fingers crossed!

Goodnight hun and thankyou once again!! *kiss, kiss*
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

A hah.!! At last, the error is solved. Sorry I was late :(
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

rtm223 wrote:
I could mail you an invoice if really think I'm valuable :wink:


$100 for fixing the codes
$900 for knowing what to fix

Totally = $1000

How about it Bee? :P

Dark Coder
  • potent
  • Novice
  • Novice
  • User avatar
  • Posts: 19
  • Loc: diego

Post 3+ Months Ago

rtm223 wrote:
I now have got you valid xhtml, and have started to play with the css. The first thing I notice is you have the tantek celic box model hack done wrong in a few places - I've corrected this and converted it to the reduced version, because I'm assuming that you don't need to support opera 5.



*SWOON*
  • joebert
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • Loc: Florida

Post 3+ Months Ago

Sweeeeeeet !! I was hoping this would be solved when I got home today :P

Good job rtm :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

*beams*


Dark_Coder wrote:
$100 for fixing the codes
$900 for knowing what to fix


Ha - I didn't <b>fix</b> anything, it was quicker to re-write half of it :lol:


@joebert I <i><b>finally</b></i> got to one before you fixed it first eh :) :wink:


*now shuffles into the corner to do penance, so that the Gods of Web Standards will refrain from striking me down with a hail of wet kippers for my icky browser-specific codes.
  • Miss_Bee
  • Guru
  • Guru
  • User avatar
  • Posts: 1306
  • Loc: Eagle Vale, Sydney (Campbo Chickadee)

Post 3+ Months Ago

LMAO
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3243
  • Loc: South Africa

Post 3+ Months Ago

Just as a matter of good practice now that you are fiddling with XHTML, try keeping your CSS external ie link to it rather than have it embedded in the page, easier to manage and when you are trying to debug you don't have to scroll up for years then back down you can just flip between your docs.

XHTML is very similar to HTML the major difference is that your empty elements (the one's without close tags) need to be closed inside the tag ie:
Code: [ Select ]
<input type="text" name="blah" />
but you knew that already :wink:

Also try to stick to strict doc types, they make life more difficult but at the end of the day the code is more compatible and disallows sloppy coding which means it is easier to find errors.

Anyways seeing the way everone got together and help out was amazing! :D
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

ha ha ha . By the way, any recommended sites for me? I am newbie web designer .. hee so I need all your help dear brothers, sisters and friends here :D
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3243
  • Loc: South Africa

Post 3+ Months Ago

Dark_Coder wrote:
ha ha ha . By the way, any recommended sites for me? I am newbie web designer .. hee so I need all your help dear brothers, sisters and friends here :D


Depends what you wanna learn
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

As far as I am concerned, there is hardly any difference between html and xhtml - I learned xhtml in half an hour. I've also started using the 1.1 doctype, which is neither strict nor transitional.

Plus i always put links to the css, but it saves me uploading multiple files to show miss bee to keep it all in the header :lol:

Rabid Dog wrote:
Dark_Coder wrote:
ha ha ha . By the way, any recommended sites for me? I am newbie web designer .. hee so I need all your help dear brothers, sisters and friends here :D


Depends what you wanna learn


http://www.w3schools.com is always a good place to start, although if you wanna learn css layout techniques like that, it's hard to find sites with really thorough tutorials on them. You have to scrap around to get bits and pieces from a few different places:

http://www.glish.com
http://www.bluerobot.com/web/layouts/

and follow all the links from glish as well. But as I said, most are not very thorough, some just give an example and some code for you to take apart yourself, so you've gotta play with them. Plus css layouts can be very unstable if you get something really little wrong. And then there is that browser compatibillity thing.

As I keep promising my CSS tutorials site will be launching within a month and the tutorials are in-depth and thorough, with pretty pictures also :D - which is why it is taking so long :lol:
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

Now, I'd to look sites with good interfaces coz I wanna take as samples ;).
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3243
  • Loc: South Africa

Post 3+ Months Ago

rtm223 wrote:
As far as I am concerned, there is hardly any difference between html and xhtml - I learned xhtml in half an hour. I've also started using the 1.1 doctype, which is neither strict nor transitional.


that is why I said the major difference is something as simple as closing empty tags :D

The only reason XHTML came into being was to make HTML compatability with XML. (think that's the right way to describe it?)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

well the correct way to describe it is like this:
Quote:
The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.


unless you actually want people to understand you :roll: It's also there to make html stricter, although this may be a by-product of basing on xml.
  • Dark_Coder
  • Newbie
  • Newbie
  • Dark_Coder
  • Posts: 13

Post 3+ Months Ago

Thanks a lot rtm ;)
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3243
  • Loc: South Africa

Post 3+ Months Ago

rtm223 wrote:
well the correct way to describe it is like this:
Quote:
The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.


unless you actually want people to understand you :roll: It's also there to make html stricter, although this may be a by-product of basing on xml.


Sorry didn't have my XHTML manual handy when posted the response :oops:

Post Information

  • Total Posts in this topic: 91 posts
  • Users browsing this forum: No registered users and 19 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
 
 

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