Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Page 2 of 2 1 2
 
Old June 29th, 2004, 01:08 PM
Authorized User
  
Join Date: Oct 2003
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default
I am using the following javascript but would like to add some extra text just following the screen size. As hard as I've tried, I can't figure out how to do this.

<head>
<title>Your Screen Resolution Settings</title>
<script language ="javascript">
function myFunction(){
alert('Your screen resolution is '+screen.width+'x'+screen.height);
}
</script>
</head>


Rudy
 
Old June 29th, 2004, 01:54 PM
Friend of Wrox
  
Join Date: Nov 2003
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default
... you mean like this?

alert('Your screen resolution is '+screen.width+'x'+screen.height+'whatever');

?

Snib

<><
 
Old June 29th, 2004, 03:40 PM
Imar's Avatar
Wrox Author
  
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default
Liquid design using old skool HTML can be as simple as this:
Code:
<body>
<table width="100%"  border="1">
<tr valign="top">
  <td width="200">I am the meny</td>
  <td>I am the content area. I get bigger or smaller depending on 
the browser window. Try resizing the window to see what I mean.</td>
</tr>
</table>
</body>
This will create a two cell table. The left cell is pretty stable, and will only get smaller when the whole window is really small. The content are will resize automatically, taking up the browser's window minus the menu width.

Using CSS, you need a bit more code for such a short example, but the end result is much cleaner and easier to maintain. Simply move the CSS code to a separate file to make the page a bit lighter. Copy and paste the code below to a new HTML document, open it in your browser, and you'll see pretty much the same behavior:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Test Full Width</title>
    <style type="text/css">
    #MenuWrapper
    {
        float: left;
        width: 150px;
    }

    #Menu
    {
        padding: 40px 0 50px 10px;
        list-style: none;
        margin: 0;
        line-height: 22px;

    }

    #Menu ul
    {
        padding: 0 0 0 14px;
        list-style: none;
        margin: 0;
    }

    #Menu li a 
    {
        margin: 0;
        padding: 0 4px 0 0;
        padding-left: 14px;
    }

    #MainContent
    {
        padding: 40px 10px 0 0;
        margin: 0 0 0 0;
    }
    </style>
</head>
<body>
<div id="MenuWrapper">
    <ul id="Menu">
        <li><a href="#" id="default">item 1</a></li>
        <li><a href="#" id="default">item 2</a></li>
        <li><a href="#" id="default">item 3</a></li>
    </ul>
</div>
<div id="MainContent">
    <div id="ContentArea">
        I am the content area. I get bigger or smaller 
depending on the browser window. Try resizing the window to see what 
I mean.
    </div>
</div>
</body>
</html>
Search the members page for posts by Richard.York He posted some clean and good looking CSS example recently.

Using a liquid approach is really the best (and IMHO, the only) way to go. I haven't yet found a client that is willing to pay me 5 times as much, just because I need to maintain 5 sites. Building sites with standard compliant, future proof technologies like XHTML and CSS will help you build better sites faster, while they improve the maintainability and usability of the site.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Me and my monkey by Robbie Williams (Track 10 from the album: Escapology) What's This?
 
Old July 4th, 2004, 12:39 PM
Authorized User
  
Join Date: Oct 2003
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default
Thanks Imar!

Yes, I have been trying to right separate Web pages to fit different screen resolutions, and as you state this is a ton of work to do and takes up a lot of server-side space.

I would ask a special favor of you, and feel free to decline if you wish, but if I encluded the HTML code (just from my home page), would you wrap in in the CSS or table code so that it would fit any resolution? My home page is not that long so it wouldn't be too much code to put her on the formum.
--------------------------------


Quote:
quote:Originally posted by Imar
 Liquid design using old skool HTML can be as simple as this:
Code:
<body>
Code:
<table width="100%"  border="1">
<tr valign="top">
  <td width="200">I am the meny</td>
  <td>I am the content area. I get bigger or smaller depending on 
the browser window. Try resizing the window to see what I mean.</td>
</tr>
</table>
</body>
This will create a two cell table. The left cell is pretty stable, and will only get smaller when the whole window is really small. The content are will resize automatically, taking up the browser's window minus the menu width.

Using CSS, you need a bit more code for such a short example, but the end result is much cleaner and easier to maintain. Simply move the CSS code to a separate file to make the page a bit lighter. Copy and paste the code below to a new HTML document, open it in your browser, and you'll see pretty much the same behavior:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Test Full Width</title>
    <style type="text/css">
    #MenuWrapper
    {
        float: left;
        width: 150px;
    }

    #Menu
    {
        padding: 40px 0 50px 10px;
        list-style: none;
        margin: 0;
        line-height: 22px;

    }

    #Menu ul
    {
        padding: 0 0 0 14px;
        list-style: none;
        margin: 0;
    }

    #Menu li a 
    {
        margin: 0;
        padding: 0 4px 0 0;
        padding-left: 14px;
    }

    #MainContent
    {
        padding: 40px 10px 0 0;
        margin: 0 0 0 0;
    }
    </style>
</head>
<body>
<div id="MenuWrapper">
    <ul id="Menu">
        <li><a href="#" id="default">item 1</a></li>
        <li><a href="#" id="default">item 2</a></li>
        <li><a href="#" id="default">item 3</a></li>
    </ul>
</div>
<div id="MainContent">
    <div id="ContentArea">
        I am the content area. I get bigger or smaller 
depending on the browser window. Try resizing the window to see what 
I mean.
    </div>
</div>
</body>
</html>
Search the members page for posts by Richard.York He posted some clean and good looking CSS example recently.

Using a liquid approach is really the best (and IMHO, the only) way to go. I haven't yet found a client that is willing to pay me 5 times as much, just because I need to maintain 5 sites. Building sites with standard compliant, future proof technologies like XHTML and CSS will help you build better sites faster, while they improve the maintainability and usability of the site.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Me and my monkey by Robbie Williams (Track 10 from the album: Escapology) What's This?
Rudy
 
Old July 4th, 2004, 01:06 PM
Imar's Avatar
Wrox Author
  
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default
Sure, post the code here. Please delete as much unnecessary stuff as possible, so only the structure of the document remains. This makes it easier to see what's going on.

I am not going to write it for you completely, but I can give you some hints, ideas and examples so you can make the transition to CSS yourself. This way, I don't have to do your work, and you learn CSS along the way.

Sounds good?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Dangerous by Hed Planet Earth (Track 4 from the album: Blackout ) What's This?
 
Old July 4th, 2004, 03:12 PM
Authorized User
  
Join Date: Oct 2003
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default
Thanks for the help, Imar

<HTML>

<div align=center>

<style type="text/css">
<!--
a:link, a:active, a:visited {
color: #CBAC57;
text-decoration: underline}

a:hover {
color: #B28816;
text-decoration: none}

BODY{
scrollbar-face-color: #000000;
scrollbar-shadow-color: #CBAC57;
scrollbar-highlight-color: #CBAC57;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #C0AD60;
scrollbar-arrow-color: #CBAC57;
overflow: hidden}
//-->
</style>

<script language="JavaScript">
<!--
if (parent.frames.length > 0)
{
parent.location.href = location.href;
}
-->
</script>

<script type="text/javascript" language="javascript">
<!--
function on1()
{if (!document.images) return; document.a.src = "../images/butt_link1_sel_on.jpg";}
function on2()
{if (!document.images) return; document.b.src = "../images/butt_link2_sel_on.jpg";}
function on3()
{if (!document.images) return; document.c.src = "../images/butt_link3_sel_on.jpg";}
function on4()
{if (!document.images) return; document.d.src = "../images/butt_link4_sel_on.jpg";}
function on5()
{if (!document.images) return; document.e.src = "../images/butt_link5_sel_on.jpg";}
function on6()
{if (!document.images) return; document.f.src = "../images/butt_link6_sel_on.jpg";}

function off1()
{if (!document.images) return; document.a.src = "../images/butt_link1_sel_off.jpg";}
function off2()
{if (!document.images) return; document.b.src = "../images/butt_link2_sel_off.jpg";}
function off3()
{if (!document.images) return; document.c.src = "../images/butt_link3_sel_off.jpg";}
function off4()
{if (!document.images) return; document.d.src = "../images/butt_link4_sel_off.jpg";}
function off5()
{if (!document.images) return; document.e.src = "../images/butt_link5_sel_off.jpg";}
function off6()
{if (!document.images) return; document.f.src = "../images/butt_link6_sel_off.jpg";}

var imgslist = new Array(
"../images/butt_link1_sel_on.jpg",
"../images/butt_link2_sel_on.jpg",
"../images/butt_link3_sel_on.jpg",
"../images/butt_link4_sel_on.jpg",
"../images/butt_link5_sel_on.jpg",
"../images/butt_link6_sel_on.jpg");

var imgs=new Array();
for (x=0; x<imgslist.length; x++)
if (document.images)
{imgs[x]=new Image(); imgs[x].src = imgslist[x];}

//-->
</script>

</head>

<body bgcolor=black marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="800" border="0" cellpadding="0" cellspacing="0">


<tr>
<td><img src="../images/index_01.jpg" width="175" height="100"></td>
<td><img src="../images/index_02.jpg" width="25" height="100"></td>
<td><img src="../images/index_03.jpg" width="180" height="100"></td>
<td><img src="../images/index_03.jpg" width="220" height="100"></td>
<td><img src="../images/index_03.jpg" width="200" height="100"></td>
</tr>

<tr>


<td><img src="../images/index_06.jpg" width="175" height="50"></td>
<td><img src="../images/index_07.jpg" width="25" height="50"></td>
<td background="../images/bg.jpg" width="400" height="300" colspan="2" rowspan="13">

<div id="Layer1"
style="position:absolute; left:180px; top:9px; width:555px; height:325px; z-index:1; overflow: auto">

<img src="images/CB027000.jpg" align=left>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<blockquote><strong>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FREE Practice Exams


<P>

<script language="JavaScript">
<!--
browsok = (((navigator.appName == "Netscape")
&& (parseInt(navigator.appVersion) >=3))
|| ((navigator.appName == "Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion)>=3)));
if(browsok){
// MouseOn
//Note: the 88 is for the WIDTH, 25 is for the HEIGHT
     redbutton1 = new Image(88, 25);
     redbutton1.src = "../images/a+_login_button_white4_green_text.gif";
     redbuttonn1 = new Image(88, 25);
     redbuttonn1.src = "../images/network+_login_button_white4_green_text.gif";
     redbuttonrs1 = new Image(88, 25);
     redbuttonrs1.src = "../images/routing_login_button_white4_green_text2.gif";
     redbuttonin1 = new Image(88, 25);
     redbuttonin1.src = "../images/i-net+_login_button_whitebg_green_text2.gif";
     redbuttonil1 = new Image(88, 25);
     redbuttonil1.src = "../images/i_net+_button_blue.gif";
     lnx1 = new Image(88, 25);
     lnx1.src = "../images/linux+_button_blue.gif";
     xp1 = new Image(88, 25);
     xp1.src = "../images/windowsxp_button_blue.gif";
     xplogin1 = new Image(88, 25);
     xplogin1.src = "../images/windowsxp_login_button_white4_green_text.gif";
     lnxlogin1 = new Image(88, 25);
     lnxlogin1.src = "../images/linux+_login_button_white4_green_text.gif";
     tutorial1 = new Image(88, 25);
     tutorial1.src = "../images/98_me_button_blue.gif";
     tutorialxp1 = new Image(88, 25);
     tutorialxp1.src = "../images/xp_button_blue.gif";
     tutorialpc1 = new Image(88, 25);
     tutorialpc1.src = "build_pc_button_blue.gif";

//MouseOff
//Note: the 88 is for the WIDTH, 25 if for the HEIGHT
    redbutton0 = new Image(88, 25);
    redbutton0.src = "../images/a+_login_button_green.gif";
    redbuttonn0 = new Image(88, 25);
    redbuttonn0.src = "../images/network+_login_button_green.gif";
    redbuttonrs0 = new Image(88, 25);
    redbuttonrs0.src = "../images/routing_login_button_green2.gif";
    redbuttonin0 = new Image(88, 25);
    redbuttonin0.src = "../images/i-net+_login_button_green2.gif";
    redbuttonil0 = new Image(88, 25);
    redbuttonil0.src = "../images/i_net+_button_black.gif";
    lnx0 = new Image(88, 25);
    lnx0.src = "../images/linux+_button_black.gif";
    xp0 = new Image(88, 25);
    xp0.src = "../images/windowsxp_button_black.gif";
    xplogin0 = new Image(88, 25);
    xplogin0.src = "../images/windowsxp_login_button_green.gif";
    lnxlogin0 = new Image(88, 25);
    lnxlogin0.src = "../images/linux+_login_button_green.gif";
    tutorial0 = new Image(88, 25);
    tutorial0.src = "../images/98_me_button_black.gif";
    tutorialxp0 = new Image(88, 25);
    tutorialxp0.src = "../images/xp_button_black.gif";
    tutorialpc0 = new Image(88, 25);
    tutorialpc0.src = "build_pc_button_black.gif";



}
function BNB_mouseon(n){
    if(browsok){
        imageON = eval(n + "1.src");
        document [n].src = imageON;
     }
}
function BNB_mouseoff(n){
    if(browsok){
imageOFF = eval(n + "0.src");
        document [n].src = imageOFF;
     }
}
// -->
</script>

<P>

<center>
<applet CODE="djscroller.class" Archive = djfiles.zip WIDTH=450 HEIGHT=220>
             <param name = scrollSpeed value = 17><param name = scrollbar value = false><param name = foregroundColor value =0xC0AD60><param name = backgroundColor value =0x000000><param name = borderColor value = 0xC0AD60><param name = borderSize value = 4><param name = frame value = _top><param name = engine value = textfile_mainpage.txt><param name = splash0 value = "Loading Data ..."><param name = splashColor value = 0xFFFFFF></applet></center>
<center>Registered Users - Use the Scrollbar to view login buttons and additional information below</center>
<P>
<center>
<a class="yellowcyan" a href="#" onClick="window.open('http://www.networkdriven.com/faq.htm','','toolbar=no,width=750,height=475,left= 20,top=27,screenX=5,screenY=0,status=no,scrollbars =yes,resize=yes');return false">privacy policy/faq</a>


| <a class="yellowcyan" a href="#" onClick="window.open('http://www.networkdriven.com/faq.htm','','toolbar=no,width=750,height=475,left= 20,top=27,screenX=5,screenY=0,status=no,scrollbars =yes,resize=yes');return false">lost passwords</a>


| <a class="yellowcyan" a href="#" onClick="window.open('http://www.networkdriven.com/feedback_form_front.htm','','toolbar=no,width=750, height=475,left=20,top=27,screenX=5,screenY=0,stat us=no,scrollbars=yes,resize=yes');return false">feedback</a>


| <a class="yellowcyan" a href="#" onClick="window.open('http://www.networkdriven.com/review.htm','','toolbar=no,width=750,height=475,le ft=20,top=27,screenX=5,screenY=0,status=no,scrollb ars=yes,resize=yes');return false">testimonials</a>


| <a class="yellowcyan" a href="#" onClick="window.open('http://www.networkdriven.com/mail_a_friend.htm','','toolbar=no,width=750,height =475,left=20,top=27,screenX=5,screenY=0,status=no, scrollbars=yes,resize=yes');return false">tell-a-friend</a>

<pre>

</pre>

<center>Registered Users Login Here</center>

<center>


<a href="login_foraplus.htm"
     onmouseout="BNB_mouseoff('redbutton')" onmouseover=
     "BNB_mouseon('redbutton');return true ">
<img src="../images/a+_login_button_green.gif" name="redbutton"
WIDTH=137 HEIGHT=27 VSPACE=3 border=0></a>


<a href="login.htm"
     onmouseout="BNB_mouseoff('redbuttonn')" onmouseover=
     "BNB_mouseon('redbuttonn');return true ">
<img src="../images/network+_login_button_green.gif" name="redbuttonn"
WIDTH=137 HEIGHT=27 VSPACE=3 border=0></a>

<a href="login_forinet.htm"
     onmouseout="BNB_mouseoff('redbuttonin')" onmouseover=
     "BNB_mouseon('redbuttonin');return true ">
<img src="../images/i-net+_login_button_green2.gif" name="redbuttonin"
WIDTH=137 HEIGHT=27 VSPACE=3 border=0></a>


<br>
<a href="login_forrs.htm"
     onmouseout="BNB_mouseoff('redbuttonrs')" onmouseover=
     "BNB_mouseon('redbuttonrs');return true ">
<img src="../images/routing_login_button_green2.gif" name="redbuttonrs"
WIDTH=137 HEIGHT=27 VSPACE=3 border=0></a>


<a href="login_forwindowsxp.htm"
     onmouseout="BNB_mouseoff('xplogin')" onmouseover=
     "BNB_mouseon('xplogin');return true ">
<img src="../images/windowsxp_login_button_green.gif" name="xplogin"
WIDTH=137 HEIGHT=27 VSPACE=3 border=0></a>

<a href="login_forlinux+.htm"
     onmouseout="BNB_mouseoff('lnxlogin')" onmouseover=
     "BNB_mouseon('lnxlogin');return true ">
<img src="../images/linux+_login_button_green.gif" name="lnxlogin"
WIDTH=137 HEIGHT=27 VSPACE=3 border=0></a></center>


<p>



<center>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {

var url="http://www.networkdriven.com/index22.html";
var title="Virtual Exam Cram";

document.write('<A HREF="javascript:window.ext');
document.write('ernal.AddFavorite(url,title);" ');
document.write('onMouseOver=" window.status=');
document.write("'Add Virtual Exam Cram to your Favorites'; return true ");
document.write('"onMouseOut=" window.status=');
document.write("' '; return true ");
document.write('"><img src="../images/spacer.gif" border=0">Bookmark This Site</a>');
}
else {
var msg = "Don't forget to bookmark us!";
if(navigator.appName == "Netscape") msg += " ";
document.write(msg);
}

// End -->
</script>


</center>
</div-->


<P>

<center>
&copy; 2003 All rights reserved


<script language="JavaScript">
//<!--
function getLongDateString()
{ //method defined on class Date.
    //Returns a date string of the form: Day DD Month,YYYY
    //(e.g. Sunday 27 September, 1998)
    monthNames = new Array("January","February","March","April","May"," June","July","August","September","October","Novem ber","December");
dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday");
    dayOfWeek = this.getDay();
    day = dayNames[dayOfWeek];
    dateOfMonth = this.getDate();
monthNo = this.getMonth();
    month = monthNames[monthNo];
year = this.getYear();
    if (year < 2000)
year = year + 1900;
dateStr = day+" "+dateOfMonth+" "+month+", "+year;
    return dateStr;
}
//register the method in the class Date
Date.prototype.getLongDateString=getLongDateString ;

function DocDate()
{ //return the document modification date (excl.time)
//as a string
    DateTimeStr = document.lastModified;
    secOffset = Date.parse(DateTimeStr);
    if (secOffset == 0 || secOffset == null) //Opera3.2
             dateStr = "Unknown";
    else
    {
        aDate = new Date();
        aDate.setTime(secOffset);
        //use method defined above
        datestr = aDate.getLongDateString();
    }
    return dateStr;
}
// --></script>


<script language="JavaScript">
//<!--
document.write("<center> Last Update: ");
document.writeln(DocDate(),"</center>");
// -->
</script>
<P>
</center>


<center>

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
s="na";c="na";j="na";f=""+escape(document.referrer )
</SCRIPT>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript1.2">
s=screen.width;v=navigator.appName
if (v != "Netscape") {c=screen.colorDepth}
else {c=screen.pixelDepth}
j=navigator.javaEnabled()
</SCRIPT>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
function pr(n) {document.write(n,"\n");}
NS2Ch=0
if (navigator.appName == "Netscape" &&
navigator.appVersion.charAt(0) == "2") {NS2Ch=1}
if (NS2Ch == 0) {
r="&size="+s+"&colors="+c+"&referer="+f+"&java="+j +""
pr("<A HREF=\"http://www.TheCounter.com\" TARGET=\"_top\"><IMG"+
" BORDER=0 SRC=\"http://c3.thecounter.com/id=2376869"+r+"\"><\/A>")}
</SCRIPT>
<NOSCRIPT><A HREF="http://www.TheCounter.com" TARGET="_top"><IMG
SRC="http://c3.thecounter.com/id=2376869" ALT="TC" BORDER=0></A>
</NOSCRIPT>

</center>



<center>Best viewed at 800 x 600 screen resolution</center>


<br><br><br><br><br><br><br>
</strong></blockquote>

</div>
</td>
<td><img src="images/../index_09_blk.jpg" width="200" height="50"></td>
</tr>

<tr>
<td><a href="http://www.networkdriven.com/qp/codelink.html" onmouseover="on1();" onmouseout="off1();"><img src="../images/butt_link1_sel_off.jpg" width="175" height="20"
border="0" name="a"></a></td>
<td rowspan="11"><img src="../images/index_11.jpg" width="25" height="145"></td>
<td rowspan="11"><img src="../images/index_12.jpg" width="200" height="145"></td>
</tr>

<tr>
<td><img src="../images/index_13.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="http://www.networkdriven.com/qp/codelink_ccna.html" onmouseover="on2();" onmouseout="off2();"><img src="../images/butt_link2_sel_off.jpg" width="175" height="20"
border="0" name="b"></a></td>
</tr>

<tr>
<td><img src="../images/index_15.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="http://www.networkdriven.com/qp/codelink_i-net+.html" onmouseover="on3();" onmouseout="off3();"><img src="../images/butt_link3_sel_off.jpg" width="175" height="20"
border="0" name="c"></a></td>
</tr>

<tr>
<td><img src="../images/index_17.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="http://www.networkdriven.com/qp/codelink_lnx+.html" onmouseover="on4();" onmouseout="off4();"><img src="../images/butt_link4_sel_off.jpg" width="175" height="20"
border="0" name="d"></a></td>
</tr>

<tr>
<td><img src="../images/index_19.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="http://www.networkdriven.com/qp/codelink_network+.html" onmouseover="on5();" onmouseout="off5();"><img src="../images/butt_link5_sel_off.jpg" width="175" height="20"
border="0" name="e"></a></td>
</tr>

<tr>
<td><img src="../images/index_21.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="http://www.networkdriven.com/qp/codelink_windowsxp.html" onmouseover="on6();" onmouseout="off6();"><img src="../images/butt_link6_sel_off.jpg" width="175" height="20"
border="0" name="f"></a></td>
</tr>

<tr>
<td><img src="../images/index_23.jpg" width="175" height="105"></td>
<td><img src="../images/index_24.jpg" width="25" height="105"></td>
<td><img src="../images/index_25.jpg" width="200" height="105"></td>
</tr>

<tr>
<td><img src="../images/index_26.jpg" width="175" height="35"></td>
<td><img src="../images/index_27.jpg" width="25" height="35"></td>
<td><img src="../images/index_28.jpg" width="180" height="35"></td>
<td><img src="../images/vec_logo2.jpg" width="220" height="35"
border="0"></a></td>
<td><img src="../images/index_30_2.jpg" width="200" height="35"></td>
</tr>
</table>
</body>
</html>

---------------------------------------------------

Quote:
quote:Originally posted by Imar
 Sure, post the code here. Please delete as much unnecessary stuff as possible, so only the structure of the document remains. This makes it easier to see what's going on.

I am not going to write it for you completely, but I can give you some hints, ideas and examples so you can make the transition to CSS yourself. This way, I don't have to do your work, and you learn CSS along the way.

Sounds good?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Dangerous by Hed Planet Earth (Track 4 from the album: Blackout ) What's This?
Rudy
 
Old July 5th, 2004, 03:11 AM
Imar's Avatar
Wrox Author
  
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default
I think you missed this:
Quote:
quote:Please delete as much unnecessary stuff as possible, so only the structure of the document remains.
There is tons of unnecessary stuff in your page; loads of JavaScript, applets, old skool browser detection stuff, font tags all over the place. Please try to bring your page down to just the structure which probably includes just HTML tables. Instead of adding lots of mages, use "Menu Goes Here" and "Content Goes Here" placeholders. This way, it's much easier to see the structure of the document, without having to wade through tons of irrelevant code.

Cheers,

Imar
 
Old July 5th, 2004, 12:08 PM
Authorized User
  
Join Date: Oct 2003
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default
Sorry, I'll work on that and repost...



Quote:
quote:Originally posted by Imar
 I think you missed this:
Quote:
quote:Please delete as much unnecessary stuff as possible, so only the structure of the document remains.
There is tons of unnecessary stuff in your page; loads of JavaScript, applets, old skool browser detection stuff, font tags all over the place. Please try to bring your page down to just the structure which probably includes just HTML tables. Instead of adding lots of mages, use "Menu Goes Here" and "Content Goes Here" placeholders. This way, it's much easier to see the structure of the document, without having to wade through tons of irrelevant code.

Cheers,

Imar
Rudy
 
Old July 5th, 2004, 12:43 PM
Authorized User
  
Join Date: Oct 2003
Posts: 96
Thanks: 0
Thanked 0 Times in 0 Posts
Default
Imar,

This should be easier to work with.

<html>
<head>
<script type="text/javascript" language="javascript">
 <!--
function on1()
{if (!document.images) return; document.a.src = "../images/butt_link1_sel_on.jpg";}
function on2()
{if (!document.images) return; document.b.src = "../images/butt_link2_sel_on.jpg";}
function on3()
{if (!document.images) return; document.c.src = "../images/butt_link3_sel_on.jpg";}
function on4()
{if (!document.images) return; document.d.src = "../images/butt_link4_sel_on.jpg";}
function on5()
{if (!document.images) return; document.e.src = "../images/butt_link5_sel_on.jpg";}
function on6()
{if (!document.images) return; document.f.src = "../images/butt_link6_sel_on.jpg";}

function off1()
{if (!document.images) return; document.a.src = "../images/butt_link1_sel_off.jpg";}
function off2()
{if (!document.images) return; document.b.src = "../images/butt_link2_sel_off.jpg";}
function off3()
{if (!document.images) return; document.c.src = "../images/butt_link3_sel_off.jpg";}
function off4()
{if (!document.images) return; document.d.src = "../images/butt_link4_sel_off.jpg";}
function off5()
{if (!document.images) return; document.e.src = "../images/butt_link5_sel_off.jpg";}
function off6()
{if (!document.images) return; document.f.src = "../images/butt_link6_sel_off.jpg";}

var imgslist = new Array(
"../images/butt_link1_sel_on.jpg",
"../images/butt_link2_sel_on.jpg",
"../images/butt_link3_sel_on.jpg",
"../images/butt_link4_sel_on.jpg",
"../images/butt_link5_sel_on.jpg",
"../images/butt_link6_sel_on.jpg");

var imgs=new Array();
for (x=0; x<imgslist.length; x++)
 if (document.images)
  {imgs[x]=new Image(); imgs[x].src = imgslist[x];}

//-->
</script>

</head>

<body bgcolor=black marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="800" border="0" cellpadding="0" cellspacing="0">


<tr>
<td><img src="../images/index_01.jpg" width="175" height="100"></td>
<td><img src="../images/index_02.jpg" width="25" height="100"></td>
<td><img src="../images/index_03.jpg" width="180" height="100"></td>
<td><img src="../images/index_03.jpg" width="220" height="100"></td>
<td><img src="../images/index_03.jpg" width="200" height="100"></td>
</tr>

<tr>


<td><img src="../images/index_06.jpg" width="175" height="50"></td>
<td><img src="../images/index_07.jpg" width="25" height="50"></td>
<td background="../images/bg.jpg" width="400" height="300" colspan="2" rowspan="13">

<div id="Layer1"
style="position:absolute; left:180px; top:9px; width:555px; height:325px; z-index:1; overflow: auto">

<img src="images/CB027000.jpg" align=left>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<blockquote><strong>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FREE Practice Exams


<P>

</script>
<P>

</div>
</html>

Rudy
 
Old July 6th, 2004, 01:40 AM
Imar's Avatar
Wrox Author
  
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default
Hi Rudy,

I looked at the page, but I am not clear on what you're trying to accomplish. This is what I think you want:

1 row with a logo. Currently it is split up in 5 separate table cells and images, but that is not necessary.

Another row, divided in two parts: a menu on the left and the content section on the right. The content section should resize automatically, while the menu is fixed..

Is that correct? If so, I think the example I posted earlier should do exactly that. Did you try that example? Did it work?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Crying by Björk (Track 2 from the album: Debut) What's This?
Page 2 of 2 1 2





Similar Threads
Thread Thread Starter Forum Replies Last Post
Redirecting Page With Alert arnabghosh Classic ASP Professional 0 November 8th, 2007 02:43 AM
Button that opens an image comicghozt Access 6 June 3rd, 2006 02:29 AM
drop down list opens dynamically when page loads robear Javascript How-To 5 April 21st, 2006 10:05 AM
Alert Shows On Page Load Ben Horne Javascript How-To 3 April 6th, 2004 04:30 PM
page download alert sirsyme Classic ASP Basics 0 July 15th, 2003 09:07 AM




Contact Us - Wrox - Privacy Statement - Top

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.