PDA

Click to See Complete Forum and Search --> : Problems with embedding flash banners, and making navigation bars.

Krystedez
03-17-2007, 01:11 AM
Okay, I'm somewhat new to HTML and CSS. I took some time and read up on the basics of HTML and CSS, mainly CSS, at www.htmldog.com.

Since I looked at CSS, it seemed to be a lot easier to use... But then again a whole 'nother level for me to comprehend.

Now, I've been playing around with the elements of webpages, making small little HELLO THIS IS MY FIRST PAGE crap and what not, to practice, but now I really want to implement the advanced techniques.

It just seems everytime I try, something ALWAYS messes up, and when I DO get a desired look/work-around, I end up seeing something else wrong. Gettin' me?

Main problems I've encountered so far now are the placement of navigational bars and the banner in flash. I figured out how to make the table-borders completely transparent, even when they're linked, but when I started playing with CSS, it got really confusing. I wanted to make a transitional navi-bar where when you hovered your mouse over a button, it would swap that image you're hovering over to a new glowy button. You can look at my "example" page at http://digifacet.bbear.org to see my somewhat desired look. (You'll probably have to use I.E. 6 or 7...that's the only way to see it at it's best, but FF just makes the shoutbox move against the navi bar for some reason...) If you see, there are all individual buttons, but they're pushed together to make one big bar.

Another role-model site I've seen so far is http://mobius-x.com, where they have a good navi bar, that's what I want.

But when I wanted to get a CSS-based site and make tables and stuff, everything got cluttered and... ugh.

Well, here's a prime example of the "flash" banner that I made, being put into misuse and transformed into an ugly mess. I used a person's layout to study CSS and practice with images and tables... Ended up getting completely confused.

http://digifacet.bbear.org/tests/index.html - The desired "layout" look I wanted, without the ugly bar contraption.

http://digifacet.bbear.org/tests/index2.html - The crappy bar contraption being smallified and stretching the tables and the whole bit...

It's hard to explain all this. I'm extremely tired, but I wanted to make this topic so I could get some response soon, by the end of the weekend perhaps I had hoped to have some kinda layout, kinda like how http://difantasies.net has their layouts made in the tables section. Here is the layout I used to practice with and ended up getting utterly confused trying to put a banner and navi bar, AND make it work with multiple browsers...

http://www.difantasies.net/view/designs/3/

I know it's girly, but I wasn't paying attention to graphics... Just to layout.

Thanks for any feedback, and thank God if you read all this. I need sleep...

(P.S., I DID "try" to validate my CSS and HTML files I used here, and the HTML file couldn't be validated for some reason or another, but the CSS one didn't have real problems, except for some reason it didn't like the color codes I put in for the arrow bar on the right and bottom sides of the browser to change the colors... Those aren't a big deal though I don't think...)
NogDog
03-17-2007, 02:07 AM
The first thing to do is to make your HTML valid. The very first task in that regard is to start the page out with a full doctype declaration as the very first line of the file, preferably a "strict" doctype like the following (to which I've also added a few other goodies you should have to start your document):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>

After that, run it through the HTML Validator (http://validator.w3.org/) until you get rid of all other errors (including the fact that you have multiple <body> tags and <script> blocks outside of the <head> section).

Once you have valid HTML to work with, then you can start worrying about whether or not the browser is displaying it the way you want it to. If the HTML is invalid, there's no way you can reasonably expect different browsers to make identical guesses as to what you intended. (And don't forget to use the CSS Validator (http://jigsaw.w3.org/css-validator/) to make sure your CSS is correct.)
Krystedez
03-17-2007, 06:12 PM
Alright, I've taken the time to make sure the CSS and HTML are both validated.

I took a plunge into trying to make the navigational bar work first. This is what I have so far.

http://digifacet.bbear.org/validated/

Please download the css file here (http://digifacet.bbear.org/validated/index.css) and download the source code from the validated site and take a look.

The main things I want to accomplish are:

1.) Multi-browser support: If you navigate the "validated" page in both I.E. 6 and Firefox, you'll notice that they're different. F.F. displays it slightly hap-hazardly. I can't just change the table background image I used for either browser, because one or the other will be mis-aligned. I need help in that area, to make the placement better for both browsers.

2.) Navigational-bar creation: I need to make the navigational bar similar to what is displayed on Mobius-X (http://mobius-x.com). There are three problems with it now, besides the alignment issues like it has in common with the rest of the tables. They are

-The spacing between each image. I want to make them connect together so that they make a "bar" in literal terms. This was my intent from the beginning at least.

-Each image has an aggrivating "outline" around it, thanks to it being an image, which has similar colors to "text links", as in, blue for regular, purple for visited... I can not forsee a way to make it disappear for good in both FireFox and I.E. like I did on my site Digifacet (http://digifacet.bbear.org).

-Finally, the flashiest problem, I wanted to create a bar that would have the images glow or change like on MX, using a MouseOver swap code of some sort. For some reason, when I entered the following code right after the "Start Left Column Navigation" part of the HTML code, here:

<!--Start Left Column Navigation-->

<body topmargin="0" leftmargin="8%" rightmargin="0" bottommargin="0" onLoad="MM_preloadImages(
'img/about_on.gif',
'img/'animations_on.gif,
'img/artwork_on.gif',
'img/comics_on.gif',
'img/forums_on.gif',
'img/games_on.gif',
'img/home_on.gif',
'img/links_on.gif',
'img/music_on.gif',
'img/video_on.gif');" >

It would not do anything for the page itself, and also, the validator said the "<body...." part of it didn't work, so I had to get rid of it for the sake of validity. Also, in the beginning of the code I put a javascript--which passed validation oddly enough--so that it would be able to swap the images in and out when you moved the mouse over the buttons. So far I've had no such luck...

3.) Flash Banner: I want to make the flash banner that is on Digifacet (http://digifacet.bbear.org) appear on the top of the validated page without screwing up anything, in either FireFox or I.E. How do I do this? You can download the flash banner here (http://digifacet.bbear.org/SPBanner.swf).

Thanks for any and all help, it's much appreciated, and any tips/tricks would be great too!
NogDog
03-17-2007, 10:24 PM
The borders around the images is easy - just add the following to your stylesheet:

img { border: none; }
Krystedez
03-18-2007, 01:13 AM
New, validated, and made with background, and also changed the img element in the CSS document.

Here (http://digifacet.bbear.org/validated/)

Now...is there any way you or someone else could help me with the other things? I sat and tried to make the images connect using my old tables from the original site at Digifacet (http://digifacet.bbear.org/), but they still won't work... >_<

Also, when they did work, they only worked in I.E. very slightly, and there was a small slit of white between the Home button and the firey-top image...

And the last part, the flashyness... Anyway to get my useless javascript code to work? ;_;

Of course, I still need help with alignment...
NogDog
03-18-2007, 04:51 AM
Try these mods for the nav links:

table.nav, table.navtop {
border-collapse;
}
.nav img, .navtop img {
display: block;
margin: 0;
}
.nav td, .navtop td {
padding: 0;
}

Hopefully that will get rid of any extraneous space.
Krystedez
03-18-2007, 02:53 PM
I did what you said, but unfortunately it only did a little bit of space-trimming.. There's still some useless space between each image.

I went ahead and tried to make a javascript code like my friend's site has, to put these images along with their swap-codes in, and hopefully make it work, but it didn't. I made the javascript external, coded the images in the right directory, and the link names, and it still doesn't work; it just leaves an empty space... I know this is the CSS section of the site, but if you could look over my javascript code I tried to use...

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var

i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){

d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;

for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d)

d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;

n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];


for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById)

x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;

document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;

if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}





document.write('<center><table cellspacing="0" cellpadding="0"

><tr><td style="background:url(\'navi/navback.png'); padding:0px; margin:0px; " >


<a href="index.html" onMouseOver="MM_swapImage(\'link1\',\'\',\'navi/nav00a.gif',1)"
onMouseOut="MM_swapImgRestore()"><img src="nav00b.gif" name="link1" ></a><br>

<img src="nav00c.gif" style="padding-top:-1px;" /><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link2\',\'\',\'navi/nav02b.gif',2)"
onMouseOut="MM_swapImgRestore()"><img src="nav02a.gif" name="link2" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link3\',\'\',\'navi/nav03b.gif',3)"
onMouseOut="MM_swapImgRestore()"><img src="nav03a.gif" name="link3" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link4\',\'\',\'navi/nav04b.gif',4)"
onMouseOut="MM_swapImgRestore()"><img src="nav04a.gif" name="link4" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link5\',\'\',\'navi/nav05b.gif',5)"
onMouseOut="MM_swapImgRestore()"><img src="nav05a.gif" name="link5" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link6\',\'\',\'navi/nav06b.gif',6)"
onMouseOut="MM_swapImgRestore()"><img src="nav06a.gif" name="link6" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link7\',\'\',\'navi/nav07b.gif',7)"
onMouseOut="MM_swapImgRestore()"><img src="nav07a.gif" name="link7" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link8\',\'\',\'navi/nav08b.gif',8)"
onMouseOut="MM_swapImgRestore()"><img src="nav08a.gif" name="link8" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link9\',\'\',\'navi/nav09b.gif',9)"
onMouseOut="MM_swapImgRestore()"><img src="nav09a.gif" name="link9" ></a><br>

<a href="index.html" onMouseOver="MM_swapImage(\'link10\',\'\',\'navi/nav10b.gif',10)"

onMouseOut="MM_swapImgRestore()"><img
src="nav10a.gif" name="link10" ></a><br>

<img src="znavz.gif" style="padding-top:-1px;" /><br>

</td></tr>

</table></center><br>

And here's the section of HTML that it uses...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<TITLE>Divine Elegance</TITLE>
<link rel="stylesheet" type="text/css" href="index.css">

<script type="text/css">

</script>


</HEAD>

<BODY>

<!-- Begin Table -->
<table class="main">

<TR>
<TD ROWSPAN="1" COLSPAN="1">



</TD>
</TR>
<!-- End Table -->

<tr>
<td>

<!--Start Left Column Navigation-->


<table class="navtop">
<tr><td width="119px" valign="top" >
<script src="newjava.js"></script>
<script language="javascript">buildtop1();</script>
</td>
</tr>

If this isn't going to work, maybe it has to do with the td width part... I don't know. I'm a bum in javascript so I don't know what all the code means...

Maybe I can make the javascript internal? Or maybe I'm missing something in the script code.. I don't know. It worked just fine on his site (http://www.mobius-x.com/home.html)...

Regardless, here is the link to the new, validated one with the code you gave me to use: http://digifacet.bbear.org/validated and this here is where I tried to use the javascript and failed, where it makes nothing but blank space.http://digifacet.bbear.org/validated/index2.html