VideoHelp Forum




+ Reply to Thread
Results 1 to 5 of 5
  1. 8th Dec 2005 17:26 #1
    gooberguy
    gooberguy is offline
    Member gooberguy's Avatar
    Join Date
    May 2003
    Location
    WNY, USA
    Search Comp PM
    Send a message via AIM to gooberguy
    any way to change the way the page looks depending on there resolution?

    ex. (if 600*800, then load index_small)
    (if 1024*1028, then load index_big)
    Quote Quote  
  2. 8th Dec 2005 19:58 #2
    guns1inger
    guns1inger is offline
    Always Watching guns1inger's Avatar
    Join Date
    Apr 2004
    Location
    Miskatonic U
    Search Comp PM
    Most sizes (eg. tables etc) can be set either in absolutes or percentages. If you use percentages it will scale with the page resolution. Otherwise you are looking some scripint, probably in javascript. Google for some java script tutorial sites and you will probably find some code samples pretty quickly.
    Read my blog here.
    Quote Quote  
  3. 8th Dec 2005 21:25 #3
    Supreme2k
    Supreme2k is offline
    Greetings Supreme2k's Avatar
    Join Date
    Feb 2003
    Location
    Right Here, Right Now
    Search Comp PM
    Code:
    <SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
 window.location="index_lg.html";
}
else
{
  window.location="index_sm.html";
}
//-->
</SCRIPT>
    Copyright infringement is not theft
    Quote Quote  
  4. 11th Dec 2005 05:00 #4
    Faustus
    Faustus is offline
    Member Faustus's Avatar
    Join Date
    Apr 2002
    Location
    Dallas, TX
    Search Comp PM
    Send a message via AIM to Faustus
    bump to make my virus scanner stop freaking out
    Quote Quote  
  5. 11th Dec 2005 05:38 #5
    thecoalman
    thecoalman is offline
    Member thecoalman's Avatar
    Join Date
    Feb 2004
    Location
    Pennsylvania
    Search PM
    Use a fluid design.... this will give you two columns with a a fluid header and right column.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>2 Columns with Fluid Right Column and Header.</title>
  
<style type="text/css">
body,html
{
width: 100%;
height: 100%; 
background: #000000;
}


#header
{ 
position: absolute; top: 0px; left: 10px;
width: auto;
height:100px;
background: #FF0000;
text-align: center;
}

#leftnav
{
position: absolute; top: 110px; left: 10px;
width: 150px;
margin: 0px;
height: 100%; 
background: #008000;
}

#content
{
position: absolute; top: 110px; left: 170px;
width: auto;
height: 100%; 
background: #808000;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div id="header"><div style="width: 100%;">Test</div></div>
<div id="leftnav">Test</div>
<div id="content"><div style="width: 100%;">Test</div></div>

</body>
</html>
    One thing to note, the <div> tags within the container div's are to counteract how FF and IE treat 100% width differently in this setting. If the container div's are set to 100% IE will expand them to 100% of the viewport, in other words you would have to scroll right. I set the container to auto and the content container to 100% which works perectly in IE. This does not work perfectly in FF, you need content that will fill 100% of the screen.....

    Edit:
    Originally Posted by thecoalman
    This does not work perfectly in FF, you need content that will fill 100% of the screen.....
    One simple solution to make it expand 100% in FF is to insert a tble of 100% in thew container div...

    One last note.... if you use this you need to remeber that your pages are going to be fluid so keep that in mind when adding the content, text and images can and will shift.....
    Quote Quote  



Similar Threads

« Previous Thread | Next Thread »
Visit our sponsor! Try DVDFab and backup Blu-rays!