The Gang of Five
The forum will have some maintenance done in the next couple of months. We have also made a decision concerning AI art in the art section.


Please see this post for more details.

HTML/CSS/Javascript Help

landbeforetimelover

  • Member+
  • Littlefoot
  • *
    • Posts: 8495
  • Littlefoot
    • View Profile
    • http://www.thelandbeforetime.org
Well, I've been trying to create a new land before time website, but I'm having some difficulty.  It's nothing big, but my website doesn't quite look right and I can't put my finger on it.  There is one matter of assistance I might need.  I was wondering how I could create a bunch of picture links on the other side of the page as well while still maintaining a page that's as universal as possible.  The only way I know how would make the right navigation links in different positions for each monitor resolution.  I could also use some site suggestions.  The site is NOT functional yet, however it will be soon if I can just figure out the basic page layout for each page I put in my website.  I could use some ideas on what else to add to the website as well as some technical assistance when it comes to creating a new set of links on the other side of the page.  Here is what I have so far for my website:

http://www.freewebs.com/landbeforetimeprojects


And here is the source for the technical assistance if you're able and willing to offer it:


<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

Image1= new Image(75,50)
Image1.src = "http://i203.photobucket.com/albums/aa146/tlordame/homenolable.png"
Image2= new Image(75,50)
Image2.src = "http://i203.photobucket.com/albums/aa146/tlordame/homewithlabel.png"
Image3= new Image(75,50)
Image3.src = "http://i203.photobucket.com/albums/aa146/tlordame/button1L.png"
Image4= new Image(75,50)
Image4.src = "http://i203.photobucket.com/albums/aa146/tlordame/button1.png"
Image5= new Image(75,50)
Image5.src = "http://i203.photobucket.com/albums/aa146/tlordame/button2L.png"
Image6= new Image(75,50)
Image6.src = "http://i203.photobucket.com/albums/aa146/tlordame/button2.png"
Image7= new Image(75,50)
Image7.src = "http://i203.photobucket.com/albums/aa146/tlordame/button5L.png"
Image8= new Image(75,50)
Image8.src = "http://i203.photobucket.com/albums/aa146/tlordame/button5.png"
Image9= new Image(75,50)
Image9.src = "http://i203.photobucket.com/albums/aa146/tlordame/button6L.png"
Image10= new Image(75,50)
Image10.src="http://i203.photobucket.com/albums/aa146/tlordame/button6.png"
Image11= new Image(75,50)
Image11.src = "http://i203.photobucket.com/albums/aa146/tlordame/button3L.png"
Image12= new Image(75,50)
Image12.src = "http://i203.photobucket.com/albums/aa146/tlordame/button3.png"
Image13= new Image(75,50)
Image13.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7L.png"
Image14= new Image(75,50)
Image14.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7.png"
Image15= new Image(75,50)
Image15.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10L.png"
Image16= new Image(75,50)
Image16.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10.png"
Image17= new Image(75,50)
Image17.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4L.png"
Image18= new Image(75,50)
Image18.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4.png"
Image19= new Image(75,50)
Image19.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9L.png"
Image20= new Image(75,50)
Image20.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9.png"

function SwapOut() {
document.imageflip.src = Image2.src; return true;
}

function SwapBack() {
document.imageflip.src = Image1.src; return true;
}
function SwapOut2() {
document.imageflip2.src = Image3.src; return true;
}

function SwapBack2() {
document.imageflip2.src = Image4.src; return true;
}
function SwapOut3() {
document.imageflip3.src = Image5.src; return true;
}

function SwapBack3() {
document.imageflip3.src = Image6.src; return true;
}
function SwapOut4() {
document.imageflip4.src = Image7.src; return true;
}

function SwapBack4() {
document.imageflip4.src = Image8.src; return true;
}
function SwapOut5() {
document.imageflip5.src = Image9.src; return true;
}

function SwapBack5() {
document.imageflip5.src = Image10.src; return true;
}
function SwapOut6() {
document.imageflip6.src = Image11.src; return true;
}

function SwapBack6() {
document.imageflip6.src = Image12.src; return true;
}
function SwapOut7() {
document.imageflip7.src = Image13.src; return true;
}

function SwapBack7() {
document.imageflip7.src = Image14.src; return true;
}
function SwapOut8() {
document.imageflip8.src = Image15.src; return true;
}

function SwapBack8() {
document.imageflip8.src = Image16.src; return true;
}
function SwapOut9() {
document.imageflip9.src = Image17.src; return true;
}

function SwapBack9() {
document.imageflip9.src = Image18.src; return true;
}
function SwapOut10() {
document.imageflip10.src = Image19.src; return true;
}

function SwapBack10() {
document.imageflip10.src = Image20.src; return true;
}
// - stop hiding -->
</SCRIPT>
<style type="text/css">
.image2{
position:absolute;
Left:-5px;
Top:225px;
}
body
{
background-image: url('http://www.freewebs.com/Backgrounds/Sky/ss073.jpg');
}
.image{
position:absolute;
left:-5px;
top:100px;
}
h1{
font-size:35px;
color:red;
text-decoration:underline;
text-align:center;
position:relative;
top:-80px;
}
.maintext{
text-align:center;
color:blue;
}
.image3{
Position:absolute;
Left:-5px;
top:350px;
}
.text4{
color:white;
text-decoration:bold;
font-size:18px;
text-align:center;
position:relative;
top:30%;
background-color:black;
}
.image4{
position:absolute;
left:-5px;
top:475px;
}
.image5{
position:absolute;
left:-5px;
top:600px;
}
.garbage{
text-align:center;
position:relative;
top:65px;
}
hr{
position:relative;
top:-85px;
}
.image6{
position:absolute;
top:100px;
left:85%;
}
.image7{
position:absolute;
top:225px;
left:85%;
}
.image8{
position:absolute;
top:615px;
left:85.3%;
}
.image9{
position:absolute;
top:475px;
left:85%;
}
.image10{
position:absolute;
top:350px;
left:85%;
}
</style>
</head>
<body>
<div class="image"><A HREF="http://www.google.com" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
<IMG NAME="imageflip" SRC="http://i203.photobucket.com/albums/aa146/tlordame/homenolable.png"BORDER=0></A></div>

<div class="image2"><a href="http://www.google.com" onMouseOver="SwapOut2()" onMouseOut="SwapBack2()">
<img name="imageflip2" src="http://i203.photobucket.com/albums/aa146/tlordame/button1.png"BORDER=0></a></div>

<div class="image3"><a href="http://www.google.com" onMouseOver="SwapOut3()" onMouseOut="SwapBack3()">
<img name="imageflip3" src="http://i203.photobucket.com/albums/aa146/tlordame/button2.png"BORDER=0></a></div>

<div class="image4"><a href="http://www.google.com" onMouseOver="SwapOut4()" onMouseOut="SwapBack4()">
<img name="imageflip4" src="http://i203.photobucket.com/albums/aa146/tlordame/button5.png"BORDER=0></a></div>

<div class="image5"><a href="http://www.google.com" onMouseOver="SwapOut5()" onMouseOut="SwapBack5()">
<img name="imageflip5" src="http://i203.photobucket.com/albums/aa146/tlordame/button6.png"BORDER=0></a></div>

<div class="image6"><a href="http://www.google.com" onMouseOver="SwapOut6()" onMouseOut="SwapBack6()">
<img name="imageflip6" src="http://i203.photobucket.com/albums/aa146/tlordame/button3.png" BORDER=0></a></div>

<div class="image7"><a href="http://www.google.com" onMouseOver="SwapOut7()" onMouseOut="SwapBack7()">
<img name="imageflip7" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7.png" BORDER=0></a></div>

<div class="image8"><a href="http://www.google.com" onMouseOver="SwapOut8()" onMouseOut="SwapBack8()">
<img name="imageflip8" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10.png" BORDER=0></a></div>

<div class="image9"><a href="http://www.google.com" onMouseOver="SwapOut9()" onMouseOut="SwapBack9()">
<img name="imageflip9" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4.png" BORDER=0></a></div>

<div class="image10"><a href="http://www.google.com" onMouseOver="SwapOut10()" onMouseOUt="SwapBack10()">
<img name="imageflip10" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9.png" BORDER=0></a></div>

<div class="garbage"><!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_mirrorblack.js">
</script></div>
<h1>Austin's Land Before Time Projects</h1>
<hr>
<div class="text4" style="position:relative; overflow:hidden; left:30%; top:70px; overflow:hidden; width:537px; height:260px; z-index:3">Hello and welcome to my land before time projects
website.  The main purpose of this website is to catalog and index all of the most important land before time projects I complete as well as enable other land before time
fans to view and use these projects to their benefit.  Please, have a look around and if you like something don't hesitate to download it.  The main projects are indexed
on the navbar to the left of this text.  The links will take you to other places where you can view and download these projects of mine.  Thank you for your consideration
and for taking the time to read this message.  You may now proceed to download anything you wish from this website.  The images on the left (the one's with red circles around them) are actually links.  You may follow them in order to view the main pages of this website.</div>
</body>
</html>


Mornai

  • Petrie
  • *
    • Posts: 777
    • View Profile
Well, i can't help you with that sorry, but i'm sure other members here can. I can't wait for the site to be up and running fully because i'm sure it would be good. I clicked the link before reading the post by accident and i wondered why every link led me to Google. :lol


landbeforetimelover

  • Member+
  • Littlefoot
  • *
    • Posts: 8495
  • Littlefoot
    • View Profile
    • http://www.thelandbeforetime.org
Quote
I clicked the link before reading the post by accident and i wondered why every link led me to Google.


Well, I've gotta take ya somewhere. :lol


Petrie.

  • Hatchling
  • *
    • Posts: 0
  • It's good to be the king!
    • View Profile
Would look even nicer if the red circle was less thick. :)  Everything loads a-ok for me....Opera included.


landbeforetimelover

  • Member+
  • Littlefoot
  • *
    • Posts: 8495
  • Littlefoot
    • View Profile
    • http://www.thelandbeforetime.org
Quote
Would look even nicer if the red circle was less thick.

Well, I thought so too in the beginning.  It didn't look very good though so I asked a friend of mine who's a graphic designer and they advised me to create a slight oval shape to the circle by altering the exterior angles by 5 degrees and to make the circle thicker to create the illusion of depth.  I also decided to add my own touch to it by not only making words appear when the user hovers their mouse but also to darken the image by 44% when doing this while leaving the circle out of the darkening process in order to deepen depth perception.


Quote
Everything loads a-ok for me....Opera included.

Well, I have been trying my best to make this website as universal as possible and it seems I'm getting the hang of it.  Javascript is really confusing though. :p


landbeforetimelover

  • Member+
  • Littlefoot
  • *
    • Posts: 8495
  • Littlefoot
    • View Profile
    • http://www.thelandbeforetime.org
Okay.  I've tried something new with the positioning for the right navigation links.  Does this show up funny for anyone?

http://www.freewebs.com/landbeforetimeproj...%20template.htm


If this works out, I can use this as a universal template for all my pages.  I haven't added any content yet because I have to make sure to get the layout right before adding additional content.


Clawandfang

  • Petrie
  • *
    • Posts: 980
    • View Profile
The text is skewed too far to the right, and it's annoying to have to scroll over each and every one of those icons to find anything specific... but generally it's okay.


Lillefot

  • Cera
  • *
    • Posts: 3245
    • View Profile
As a HTML coding user myself, I think it looks very nice! (but it's ture that the text is skewed)
Do well. Live well. And dress very well.


landbeforetimelover

  • Member+
  • Littlefoot
  • *
    • Posts: 8495
  • Littlefoot
    • View Profile
    • http://www.thelandbeforetime.org
Quote
The text is skewed too far to the right.

Sorry.  I uploaded the wrong file.  This is really hard and I'm getting confused.  Try the new site.  I fixed it:


http://www.freewebs.com/landbeforetimeproj...%20template.htm


Here is the new source.  Can anyone tell my why no matter what I do I can't position the block of text further down the page while maintaining it's centered position?  The CSS variable is .text4.  I believe I can fix this in CSS and I don't need any more javascript (I hope so anyways).  Please note that the "text-align" variable is just the text and not the paragraph itself.  I centered the paragraph using the  "margin-left:auto; margin-right: auto;" variables.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

Image1= new Image(75,50)
Image1.src = "http://i203.photobucket.com/albums/aa146/tlordame/homenolable.png"
Image2= new Image(75,50)
Image2.src = "http://i203.photobucket.com/albums/aa146/tlordame/homewithlabel.png"
Image3= new Image(75,50)
Image3.src = "http://i203.photobucket.com/albums/aa146/tlordame/button1L.png"
Image4= new Image(75,50)
Image4.src = "http://i203.photobucket.com/albums/aa146/tlordame/button1.png"
Image5= new Image(75,50)
Image5.src = "http://i203.photobucket.com/albums/aa146/tlordame/button2L.png"
Image6= new Image(75,50)
Image6.src = "http://i203.photobucket.com/albums/aa146/tlordame/button2.png"
Image7= new Image(75,50)
Image7.src = "http://i203.photobucket.com/albums/aa146/tlordame/button5L.png"
Image8= new Image(75,50)
Image8.src = "http://i203.photobucket.com/albums/aa146/tlordame/button5.png"
Image9= new Image(75,50)
Image9.src = "http://i203.photobucket.com/albums/aa146/tlordame/button6L.png"
Image10= new Image(75,50)
Image10.src="http://i203.photobucket.com/albums/aa146/tlordame/button6.png"
Image11= new Image(75,50)
Image11.src = "http://i203.photobucket.com/albums/aa146/tlordame/button3L.png"
Image12= new Image(75,50)
Image12.src = "http://i203.photobucket.com/albums/aa146/tlordame/button3.png"
Image13= new Image(75,50)
Image13.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7L.png"
Image14= new Image(75,50)
Image14.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7.png"
Image15= new Image(75,50)
Image15.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10L.png"
Image16= new Image(75,50)
Image16.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10.png"
Image17= new Image(75,50)
Image17.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4L.png"
Image18= new Image(75,50)
Image18.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4.png"
Image19= new Image(75,50)
Image19.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9L.png"
Image20= new Image(75,50)
Image20.src = "http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9.png"

function SwapOut() {
document.imageflip.src = Image2.src; return true;
}

function SwapBack() {
document.imageflip.src = Image1.src; return true;
}
function SwapOut2() {
document.imageflip2.src = Image3.src; return true;
}

function SwapBack2() {
document.imageflip2.src = Image4.src; return true;
}
function SwapOut3() {
document.imageflip3.src = Image5.src; return true;
}

function SwapBack3() {
document.imageflip3.src = Image6.src; return true;
}
function SwapOut4() {
document.imageflip4.src = Image7.src; return true;
}

function SwapBack4() {
document.imageflip4.src = Image8.src; return true;
}
function SwapOut5() {
document.imageflip5.src = Image9.src; return true;
}

function SwapBack5() {
document.imageflip5.src = Image10.src; return true;
}
function SwapOut6() {
document.imageflip6.src = Image11.src; return true;
}

function SwapBack6() {
document.imageflip6.src = Image12.src; return true;
}
function SwapOut7() {
document.imageflip7.src = Image13.src; return true;
}

function SwapBack7() {
document.imageflip7.src = Image14.src; return true;
}
function SwapOut8() {
document.imageflip8.src = Image15.src; return true;
}

function SwapBack8() {
document.imageflip8.src = Image16.src; return true;
}
function SwapOut9() {
document.imageflip9.src = Image17.src; return true;
}

function SwapBack9() {
document.imageflip9.src = Image18.src; return true;
}
function SwapOut10() {
document.imageflip10.src = Image19.src; return true;
}

function SwapBack10() {
document.imageflip10.src = Image20.src; return true;
}
// - stop hiding -->
</SCRIPT>
<style type="text/css">
.image2{
position:absolute;
Left:-5px;
Top:225px;
}
body
{
background-image: url('http://www.freewebs.com/Backgrounds/Sky/ss073.jpg');
}
.image{
position:absolute;
left:-5px;
top:100px;
}
h1{
font-size:35px;
color:red;
text-decoration:underline;
text-align:center;
position:relative;
top:-80px;
}
.maintext{
text-align:center;
color:blue;
}
.image3{
Position:absolute;
Left:-5px;
top:350px;
}
.text4{
color:white;
text-decoration:bold;
font-size:18px;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.image4{
position:absolute;
left:-5px;
top:475px;
}
.image5{
position:absolute;
left:-5px;
top:600px;
}
.garbage{
text-align:center;
position:relative;
top:65px;
}
hr{
position:relative;
top:-85px;
}
.image6{
position:absolute;
top:100px;
left:85%;
}
.image7{
position:absolute;
top:225px;
left:85%;
}
.image8{
position:absolute;
top:615px;
left:85.3%;
}
.image9{
position:absolute;
top:475px;
left:85%;
}
.image10{
position:absolute;
top:350px;
left:85%;
}
</style>
</head>
<body>
<div class="image"><A HREF="http://www.google.com" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
<IMG NAME="imageflip" SRC="http://i203.photobucket.com/albums/aa146/tlordame/homenolable.png"BORDER=0></A></div>

<div class="image2"><a href="http://www.google.com" onMouseOver="SwapOut2()" onMouseOut="SwapBack2()">
<img name="imageflip2" src="http://i203.photobucket.com/albums/aa146/tlordame/button1.png"BORDER=0></a></div>

<div class="image3"><a href="http://www.google.com" onMouseOver="SwapOut3()" onMouseOut="SwapBack3()">
<img name="imageflip3" src="http://i203.photobucket.com/albums/aa146/tlordame/button2.png"BORDER=0></a></div>

<div class="image4"><a href="http://www.google.com" onMouseOver="SwapOut4()" onMouseOut="SwapBack4()">
<img name="imageflip4" src="http://i203.photobucket.com/albums/aa146/tlordame/button5.png"BORDER=0></a></div>

<div class="image5"><a href="http://www.google.com" onMouseOver="SwapOut5()" onMouseOut="SwapBack5()">
<img name="imageflip5" src="http://i203.photobucket.com/albums/aa146/tlordame/button6.png"BORDER=0></a></div>

<div class="image6"><a href="http://www.google.com" onMouseOver="SwapOut6()" onMouseOut="SwapBack6()">
<img name="imageflip6" src="http://i203.photobucket.com/albums/aa146/tlordame/button3.png" BORDER=0></a></div>

<div class="image7"><a href="http://www.google.com" onMouseOver="SwapOut7()" onMouseOut="SwapBack7()">
<img name="imageflip7" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7.png" BORDER=0></a></div>

<div class="image8"><a href="http://www.google.com" onMouseOver="SwapOut8()" onMouseOut="SwapBack8()">
<img name="imageflip8" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10.png" BORDER=0></a></div>

<div class="image9"><a href="http://www.google.com" onMouseOver="SwapOut9()" onMouseOut="SwapBack9()">

<img name="imageflip9" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4.png" BORDER=0></a></div>

<div class="image10"><a href="http://www.google.com" onMouseOver="SwapOut10()" onMouseOUt="SwapBack10()">
<img name="imageflip10" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9.png" BORDER=0></a></div>

<div class="garbage"><!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_mirrorblack.js">
</script></div>
<h1>Austin's Land Before Time Projects</h1>
<hr>
<div class="text4" style="position:relative; overflow:hidden; width:537px; height:317px; z-index:3">Hello and welcome to my land before time projects
website.  The main purpose of this website is to catalog and index all of the most important land before time projects I complete as well as enable other land before time
fans to view and use these projects to their benefit.  Please, have a look around and if you like something don't hesitate to download it.  The main projects are indexed
on the navbar to the left of this text.  The links will take you to other places where you can view and download these projects of mine.  Thank you for your consideration
and for taking the time to read this message.  You may now proceed to download anything you wish from this website.  The images on the left (the one's with red circles around them) are actually links.  You may follow them in order to view the main pages of this website.</div>
<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";_uff=false;urchinTracker();}</script></body>
</html>


Clawandfang

  • Petrie
  • *
    • Posts: 980
    • View Profile
Ah... move the text back!
I've only ever dabbled in CSS I'm afraid, so can provide no techical assistance, just a view point.


landbeforetimelover

  • Member+
  • Littlefoot
  • *
    • Posts: 8495
  • Littlefoot
    • View Profile
    • http://www.thelandbeforetime.org
Quote
Ah... move the text back!


It's your browser.  I can't make my websites compatible with IE.  It's such a primitive horrible browser and I can no longer support it.  Bill Gates obviously had his finger up his butt when he decided to release IE7.  Nothing was updated at all except for minor crap no one cares about.  It was just made so windows vista would have a browser.  No version of IE will support CSS margins and I can't continue to waste time for a browser that's decades behind ALL of the other third party browsers out there.  IE is the reason I hated web design class.  It is so incompatible with CSS and javascript it's not even funny.  All it can really do with 100% efficiency is display web pages with only HTML.


EDIT:  despite compatibility issues, I've added some old fashioned HTML tags in the body section that should keep IE in line.  It had better not screw up alignment in other browsers though.  What a stupid browser......it didn't even recognize margins. :bang :rolleyes: