PDA

View Full Version : Entrance page...


Eberth
July 10th, 2003, 05:51 PM
Hi, how can i do a entrance page with a resizable background?, so it fits on any browser??
asphaltcowboy
July 10th, 2003, 06:02 PM
example? (and no, I'm not gunning for samples from your new 'supah amazing' website ;)). I *think*, (though, dont quote me) that generally you can't resize the background, unless you have one background for each res and then you have a script to determine the users' resolutions..

you could just have the smallest res (800x600 I assume?). Or whouldn't that work?
Eberth
July 10th, 2003, 06:04 PM
Originally posted by asphaltcowboy
example? (and no, I'm not gunning for samples from your new 'supah amazing' website
ahahahahaha :bad:

like electrongeek´s entrance page, that thing is also on 2advanced.....
reverendflash
July 10th, 2003, 06:05 PM
if your splash page is vector (no bitmaps), then simply make it 100% of width and height... it will be slightly slower on larger res, but that will solve it...

Revhttp://www.aulman.com/rev.gif
DDD
July 10th, 2003, 06:25 PM
post an example of wut u are reffering to
asphaltcowboy
July 10th, 2003, 06:26 PM
*whispers* Pssst! he can't! it's a secret! ;)
DDD
July 10th, 2003, 06:27 PM
nah.....I know ES is a secret.......but like where he has seen it b4...he referenced 2a but I dont get what he is talking baout
Eberth
July 10th, 2003, 06:29 PM
Originally posted by asphaltcowboy
*whispers* Pssst! he can't! it's a secret! ;)

enough!!!!
asphaltcowboy
July 10th, 2003, 06:36 PM
are you going to show them some examples or not? :P
Eberth
July 10th, 2003, 06:38 PM
this image, is repeated until it reaches the edge of the browser
(this is on eg's site)
Eberth
July 10th, 2003, 06:39 PM
and on 2advanced...
Eberth
July 10th, 2003, 06:41 PM
Originally posted by asphaltcowboy
are you going to show them some examples or not? :P
(-:
asphaltcowboy
July 10th, 2003, 06:44 PM
oooooh! like that! well.. if it's like EG's one, then you just make it 1 pixel thick and set it as the table background - then assign the width you need for the page :)
Eberth
July 10th, 2003, 06:47 PM
and it wont appear on all the background repeatedly,?
eilsoe
July 10th, 2003, 06:49 PM
:P

nono, just use it as a bg-image in a table cell :)
Eberth
July 10th, 2003, 06:50 PM
ok... i'll try that....
Alucard_X
July 10th, 2003, 06:51 PM
Yup pretty much what he said.

You set html table borders width to 100% and you put this image, usually 1-5 pixels thick as your background image.

On higher resolutions, the html just repeats the background image (which is only a few pixels thick) but it gives an awesome effect of the entrance page graphics "extending".

If you need instructions (not saying you...but if) then ask i will tell you how to do that.

:)
DDD
July 10th, 2003, 06:51 PM
yeah make a table with 3 cols 1 row. The table dimensions should be 100% wide and however tall you want it. now the 1st td set its width to 50% set the middle td to lets say 300px, now the last td make it 50%... In the 2 td's with 50% as the width place a bgrd image in the tag.... Be sure to set you top, left, right and bottom margins to 0px, in the body tag or CSS. If you need the code let me know but I think you'll learn better if you take my steps and do it.
Eberth
July 10th, 2003, 06:54 PM
Originally posted by Alucard_X


If you need instructions (not saying you...but if) then ask i will tell you how to do that.

:)

i'm not so good on html, so yes.... i need some instructions please...
Alucard_X
July 10th, 2003, 06:54 PM
Originally posted by 3d-iva
yeah make a table with 3 cols 1 row. The table dimensions should be 100% wide and however tall you want it. now the 1st td set its width to 50% set the middle td to lets say 300px, now the last td make it 50%... In the 2 td's with 50% as the width place a bgrd image in the tag.... Be sure to set you top, left, right and bottom margins to 0px, in the body tag or CSS. If you need the code let me know but I think you'll learn better if you take my steps and do it.

Bullseye!
Eberth
July 10th, 2003, 06:54 PM
ok, i'll follow 3d-iva's instructions, if i have any doubt, i'll post it here ;)
Eberth
July 10th, 2003, 07:03 PM
how can i set the margins to 0px?
DDD
July 10th, 2003, 07:07 PM
keep in mind if you want it centered vertically also.......make the table 3 cols by 3 rows (100% wide 100% height). follow the same instructions but setting the height of the scaling td's to 50%.
asphaltcowboy
July 10th, 2003, 07:09 PM
for 0px margins:


<BODY BGCOLOR="#FFFFFF" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
Eberth
July 10th, 2003, 07:16 PM
i cant get it ..... :(
i'm using dreamweaver, but i dont get it
Eberth
July 10th, 2003, 07:19 PM
i have this



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<BODY BGCOLOR="#FFFFFF" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<table width="100%" border="0" cellpadding="0100">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
Eberth
July 10th, 2003, 07:36 PM
wait..... i think i'm getting it....
Eberth
July 10th, 2003, 07:42 PM
ok, it's done :D, but now, how do i center it vertically?
DDD
July 10th, 2003, 07:42 PM
marginheight=0 marginwidth=0

This will cause problems in NS and Opera.... use right-margin and bottom-margin. Also for compatibility it is better if you declare it in css. but for testing how you have it is fine.

But yes that table looks fine. Keep in mind that will only center horizontally
DDD
July 10th, 2003, 07:43 PM
actually it is margin-right and margin-bottom
Eberth
July 10th, 2003, 07:46 PM
http://www.eberthdesigns.com/fakeindex.htm
Eberth
July 10th, 2003, 07:47 PM
.......but i still see a small space in the right border
DDD
July 10th, 2003, 07:48 PM
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="50%">&nbsp;</td>
<td height="50%">&nbsp;</td>
<td width="50%" height="50%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="transparent.gif" width="300" height="300"><br>your content here</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="50%">&nbsp;</td>
<td height="50%">&nbsp;</td>
<td height="50%">&nbsp;</td>
</tr>
</table>

I knew you were going to ask that
Eberth
July 10th, 2003, 07:50 PM
Originally posted by Eberth
.......but i still see a small space in the right border

ohh, now it dissapeared...
Eberth
July 10th, 2003, 07:52 PM
now..... how do i center it vertically?????
DDD
July 10th, 2003, 08:06 PM
if you use my tables it should now be centered vertically
Eberth
July 10th, 2003, 08:08 PM
i have to change everything again?
or what do i have to modify in my code?
Eberth
July 10th, 2003, 08:09 PM
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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];}
}
//-->
</script>
</head>

<BODY BGCOLOR="#FFFFFF" leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad="MM_preloadImages('fondoeberthover.jpg')">
<table width="100%" height="250" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="50%" height="200" background="fondoeberth.jpg">&nbsp;</td>
<td width="275px" background="fondoeberth.jpg"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('boton','','fondoeberthover.jpg',1)"><img src="fondo2.jpg" name="boton" width="455" height="250" border="0"></a></td>
<td width="69%" background="fondoeberth.jpg">&nbsp;</td>
</tr>

</table>
</body>
</html>


this is my code....
DDD
July 10th, 2003, 08:12 PM
just put your line

<td width="275px" background="fondoeberth.jpg"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('boton','','fondoeberthover.jpg',1)"><img src="fondo2.jpg" name="boton" width="455" height="250" border="0"></a></td>

In where mine says


<td><img src="transparent.gif" width="300" height="300">your content here</td>

That should work....now I wish some one would look at my post and give me some opinions:scream:
DDD
July 10th, 2003, 08:24 PM
actually add the first
<tr>

and the third
<tr>.....in that order you took them from my code.

Or you can just add your


<td width="275px" background="fondoeberth.jpg"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('boton','','fondoeberthover.jpg',1)"><img src="fondo2.jpg" name="boton" width="455" height="250" border="0"></a></td>

to my code....then paste all the MM header stuff to mine
Eberth
July 10th, 2003, 08:28 PM
i added the first and the third <td> and i get this:
www.eberthdesigns.com/fakeindex.htm
Eberth
July 10th, 2003, 08:29 PM
oh, i found out what had happened....
now it works :D
thankyou so much!!!
DDD
July 10th, 2003, 08:39 PM
np...your logo is really sweet
Eberth
July 11th, 2003, 01:51 PM
another question, how can i remove the dotted square that appears when you click the image??
DDD
July 11th, 2003, 01:58 PM
if you are using DW. You can download an extension for that. It is called Scrubber or link scrubber search macromedia for it www.macromedia.com. Other than that I know it is a browser propert you can access with javascript.
DDD
July 11th, 2003, 02:15 PM
http://www.macromedia.com/cfusion/exchange/index.cfm#loc=en_us&view=sn121&viewName=Dreamweaver%20Extension&extID=17461

may or may not work with MX
DDD
July 11th, 2003, 02:21 PM
i think the newer release can e found here
http://www.projectseven.com/extensions/index.htm
fluid_0ne
July 11th, 2003, 02:39 PM
OMG!
USE STYLE!


---------------------------------------------------->


body {
background: #FFFFFF url(bg.gif) repeat-x;
background-position: center center;
}


---------------------------------------------------->



that's it!


lol
DDD
July 11th, 2003, 03:14 PM
He wants to control the scaling. and BG positioning does not work on older NS
fluid_0ne
July 12th, 2003, 06:17 AM
ok