jen07850
03-05-2005, 08:42 PM
Usually when making layouts i use templates and for this one i tried a css layout but i don't no how to link the navigation into the middle part and i no you can't do that without an i frame but i don't really no where to put it etc!
here is the code for the page
<html>
<head>
<title>::ICE POP::</title>
<style type="text/css">
body { font: 11px/1.4 Verdana, Arial, Helvetica, sans-serif;
text-align:center;background:#3399CC;margin:0px 0px 10px 0px;
padding:0px; }
#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:#0066CC;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:#0066CC;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:#0066CC;text-align:right;font-size:10px; line-height: 17px;width:75px;}
#leftlinks {text-align:left;background:#0066CC;padding:5px 5px 10px 5px;border-top:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000;}
#center {float:left;background:#FFFFFF;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:#FFFFFF;margin: 0px 10px 10px -1px;padding-top:5px;text-align:left;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:#0066CC;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;}
#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,'').getP ropertyValue('left');
if (prop=='height') return document.defaultView.getComputedStyle(obj,'').getP ropertyValue('height');
}
}
function moveNav() {
if (!inited) return false;
newLeft=getMyProperty(frame,'left');
newTop=getMyProperty(left,'top');
if (parseInt(newTop)+parseInt(getMyProperty(left,'hei ght')) > 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.scro llTop: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">ICE POP</div></div>
<div id="left" style="float:left;
text-align:right;
font-size:10px; line-height: 17px;
width:75px;">
<div id="leftlinks"><b>Navigation</b><br />
<a href="home.html" class="sidemenulink">Home</a><br />
<a href="male.html" class="sidemenulink">Male artists</a><br />
<a href="female.html" class="sidemenulink">Female artists </a><br />
<a href="bands.html" class="sidemenulink">Bands</a><br />
<a href="forum.html" class="sidemenulink">Forum</a><br />
<a href="gallery.html" class="sidemenulink">Gallery</a><br />
<a href="fun.html" class="sidemenulink">Fun</a><br />
<a href="media.html" class="sidemenulink">Media</a><br />
<a href="website.html" class="sidemenulink">web/site</a><br />
<br /><b>::EXTRAS::</b><br />
<a href="news.html" class="sidemenulink" >News</a><br />
<a href="specials.html" class="sidemenulink">Specials</a><br />
<a href="mailto:icepop2005@hotmail.co.uk" class="sidemenulink">e-mail</a></div></div>
<div id="center">
<div id="header"><img style="" border="0" src="icepop.gif" alt="title" height="200" width="600" /></div>
<div id="photoblog">
<b><u>Single releases</u></b><br />
Elvis-Good luck charm<br />
Mariah Carey-It's like that<br />
Marilyn Manson-The nobodies 05<br />
Mcfly-All about you<br />
Tyler James-Foolish'<br /> <br />
<b><u>Album releases</u></b><br />
The Bravery-The Bravery <br />
Longview-Mercury<br />
Crosby Stills and Nash-Greatest Hits<br />
Daft Punk-Human After All<br />
Stereophonics -Language,^^^,Violence,Other<br />
Moby-Hotel<br /> <br />
<b><u>On CD:UK</u></b><br />
Lemar <br />
Basement Jaxx<br />
Mcfly<br />
G4<br /> <br />
<b><u>On TOTP</u></b><br />
Phantom Planet<br />
Shapeshifters<br />
Moby<br />
Kaiser Chiefs<br />
Akon<br />
Nelly<br />
Girls Aloud<br /> <br />
<b><u>On TOTP Saturday</u></b><br />
Rachel Stevens <br />
Freefaller<br />
Sunset Strippers<br />
Girls Aloud<br />
Greenday<br /> <br />
<b><u>On SMILE</u></b><br />
G4<br /> <br />
</div>
THINK IT NEEDS TO BE AROUND HERE
<div class="postheader first"> <div class="posttitle"> <u>05.03.04 </u> TITLE OF MESSAGE</div></div>
<p> FIRST MESSAGE
<div class="postheader"> <div class="posttitle"> <u>DATE - TIME</u>TITLE OF MESSAGE</div></div>
Second message</div>
<div id="right">
<img class="rightimg" border="0" src="artist.gif" alt="artist of the week:mcfly" height="75" width="75" />
<img class="rightimg" border="0" src="song.gif" alt="song of the week:joss stone-spoiled" height="75" width="75" />
<img class="rightimg" border="0" src="album.gif" alt="album of the week:rooster-staring at the sun" height="75" width="75" />
<a href="www.popjustice.co.uk"><img class="rightimg" border="0" src="site.gif" alt="site of the week:popjustice" height="75" width="75" /></a>
<a href="http://www.nickyjohnston.co.uk/images/will_young.jpg"><img class="rightimg" border="0" src="pic.gif" alt="pic of the week:will young" height="75" width="75" /></a>
</div>
<div id="bottomtab"><div class="tabtext">©2005 ICE POP All rights reserved. </div></div>
</div>
</body>
</html>
Help please :D
lots of luv Jen
here is the code for the page
<html>
<head>
<title>::ICE POP::</title>
<style type="text/css">
body { font: 11px/1.4 Verdana, Arial, Helvetica, sans-serif;
text-align:center;background:#3399CC;margin:0px 0px 10px 0px;
padding:0px; }
#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:#0066CC;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:#0066CC;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:#0066CC;text-align:right;font-size:10px; line-height: 17px;width:75px;}
#leftlinks {text-align:left;background:#0066CC;padding:5px 5px 10px 5px;border-top:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000;}
#center {float:left;background:#FFFFFF;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:#FFFFFF;margin: 0px 10px 10px -1px;padding-top:5px;text-align:left;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:#0066CC;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;}
#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,'').getP ropertyValue('left');
if (prop=='height') return document.defaultView.getComputedStyle(obj,'').getP ropertyValue('height');
}
}
function moveNav() {
if (!inited) return false;
newLeft=getMyProperty(frame,'left');
newTop=getMyProperty(left,'top');
if (parseInt(newTop)+parseInt(getMyProperty(left,'hei ght')) > 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.scro llTop: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">ICE POP</div></div>
<div id="left" style="float:left;
text-align:right;
font-size:10px; line-height: 17px;
width:75px;">
<div id="leftlinks"><b>Navigation</b><br />
<a href="home.html" class="sidemenulink">Home</a><br />
<a href="male.html" class="sidemenulink">Male artists</a><br />
<a href="female.html" class="sidemenulink">Female artists </a><br />
<a href="bands.html" class="sidemenulink">Bands</a><br />
<a href="forum.html" class="sidemenulink">Forum</a><br />
<a href="gallery.html" class="sidemenulink">Gallery</a><br />
<a href="fun.html" class="sidemenulink">Fun</a><br />
<a href="media.html" class="sidemenulink">Media</a><br />
<a href="website.html" class="sidemenulink">web/site</a><br />
<br /><b>::EXTRAS::</b><br />
<a href="news.html" class="sidemenulink" >News</a><br />
<a href="specials.html" class="sidemenulink">Specials</a><br />
<a href="mailto:icepop2005@hotmail.co.uk" class="sidemenulink">e-mail</a></div></div>
<div id="center">
<div id="header"><img style="" border="0" src="icepop.gif" alt="title" height="200" width="600" /></div>
<div id="photoblog">
<b><u>Single releases</u></b><br />
Elvis-Good luck charm<br />
Mariah Carey-It's like that<br />
Marilyn Manson-The nobodies 05<br />
Mcfly-All about you<br />
Tyler James-Foolish'<br /> <br />
<b><u>Album releases</u></b><br />
The Bravery-The Bravery <br />
Longview-Mercury<br />
Crosby Stills and Nash-Greatest Hits<br />
Daft Punk-Human After All<br />
Stereophonics -Language,^^^,Violence,Other<br />
Moby-Hotel<br /> <br />
<b><u>On CD:UK</u></b><br />
Lemar <br />
Basement Jaxx<br />
Mcfly<br />
G4<br /> <br />
<b><u>On TOTP</u></b><br />
Phantom Planet<br />
Shapeshifters<br />
Moby<br />
Kaiser Chiefs<br />
Akon<br />
Nelly<br />
Girls Aloud<br /> <br />
<b><u>On TOTP Saturday</u></b><br />
Rachel Stevens <br />
Freefaller<br />
Sunset Strippers<br />
Girls Aloud<br />
Greenday<br /> <br />
<b><u>On SMILE</u></b><br />
G4<br /> <br />
</div>
THINK IT NEEDS TO BE AROUND HERE
<div class="postheader first"> <div class="posttitle"> <u>05.03.04 </u> TITLE OF MESSAGE</div></div>
<p> FIRST MESSAGE
<div class="postheader"> <div class="posttitle"> <u>DATE - TIME</u>TITLE OF MESSAGE</div></div>
Second message</div>
<div id="right">
<img class="rightimg" border="0" src="artist.gif" alt="artist of the week:mcfly" height="75" width="75" />
<img class="rightimg" border="0" src="song.gif" alt="song of the week:joss stone-spoiled" height="75" width="75" />
<img class="rightimg" border="0" src="album.gif" alt="album of the week:rooster-staring at the sun" height="75" width="75" />
<a href="www.popjustice.co.uk"><img class="rightimg" border="0" src="site.gif" alt="site of the week:popjustice" height="75" width="75" /></a>
<a href="http://www.nickyjohnston.co.uk/images/will_young.jpg"><img class="rightimg" border="0" src="pic.gif" alt="pic of the week:will young" height="75" width="75" /></a>
</div>
<div id="bottomtab"><div class="tabtext">©2005 ICE POP All rights reserved. </div></div>
</div>
</body>
</html>
Help please :D
lots of luv Jen