Results 1 to 10 of 10

Thread: How can I make my website automatically fit into the browser?

  1. 02-08-2010, 10:47 AM #1
    John777
    John777 is offline Junior Member
    Join Date
    Feb 2010
    Posts
    15

    Exclamation How can I make my website automatically fit into the browser?

    Hello, using HTML, or JavaScript is there a way to make my website fit into my browser? I am frustrated with this, I even tried %'s but it just squishes everything up when the browser gets minimized, anyway thanks so much, I hope you help! .
  2. 02-08-2010, 10:56 AM #2
    farcaster's Avatar
    farcaster
    farcaster is offline Senior Member
    Join Date
    Apr 2008
    Location
    Chasing the Holy Grail - Pacific Northwest
    Posts
    1,312

    Default

    There are basically three ways to design a web site, fixed width, fluid, and elastic. Take a look at this screencast and get a better understanding on how they operate, along with the advantages and disadvantages of each one.

    http://css-tricks.com/video-screenca...elastic-width/

    Hope this helps you...
    In the Hyperion universe, a farcaster is an instantaneous transportation device.
    Experience: The thing you get just after you need it.
  3. 02-08-2010, 11:58 AM #3
    John777
    John777 is offline Junior Member
    Join Date
    Feb 2010
    Posts
    15

    Default Thanks but...

    That's CSS, I put in the code and it showed some plain text, and yes it fits into the browser, but only the text not the whole webpage, any other suggestions? thanks a bunch!
  4. 02-08-2010, 12:31 PM #4
    felgall's Avatar
    felgall
    felgall is offline Moderator
    Join Date
    Nov 2006
    Location
    Sydney, Australia
    Posts
    4,951

    Default

    Decide whether your pages are to be fixed, fluid, or elastic and then build the entire page to work that way.
    Stephen Chapman
    Free Computer Help
    Computer Help Blog
    Web Development eBooks and software
    JavaScript scripts and tutorials
  5. 02-08-2010, 03:20 PM #5
    John777
    John777 is offline Junior Member
    Join Date
    Feb 2010
    Posts
    15

    Default

    Soo, I should redesign my whole page into everything CSS so the code can properly work?
  6. 02-08-2010, 04:09 PM #6
    farcaster's Avatar
    farcaster
    farcaster is offline Senior Member
    Join Date
    Apr 2008
    Location
    Chasing the Holy Grail - Pacific Northwest
    Posts
    1,312

    Default

    When you design a web site, or even a single web page there are three basic tools that you use. The last one is optional.

    HTML - Used to create the content - what's on the page
    CSS - Used to create the style - how does everything look and the layout

    HTML and CSS are totally independent of each other. One does not require the other one. However, writing a bunch of CSS without any HTML to apply it to doesn't get you anything except a nicely styled blank page. Writing HTML without CSS get you content, but pretty ugly.

    Javascript can be used to create behavior of the page - a subject to master once you have a firm grasp of HTML and CSS.
    In the Hyperion universe, a farcaster is an instantaneous transportation device.
    Experience: The thing you get just after you need it.
  7. 02-08-2010, 06:21 PM #7
    redsox9's Avatar
    redsox9
    redsox9 is offline Senior Member
    Join Date
    Feb 2006
    Location
    North of Boston, MA
    Posts
    1,658

    Default

    As an addendum to farcaster's explanation, I would add that using CSS in conjunction with your HTML allows you to make changes to the style and layout more easily, like using a fixed width versus a fluid width. If you use common classes across your web pages, rather than having to manually change each page one at a time, a change to a single CSS file propogates the change across all pages with no additional effort.
    redsox9 - Go Red Sox!!! 2004 and 2007 World Series Champions!
    Visit FenwayFanatics.com, home to Boston Red Sox baseball fans everywhere... now on Facebook and Twitter!
  8. 02-09-2010, 02:58 PM #8
    John777
    John777 is offline Junior Member
    Join Date
    Feb 2010
    Posts
    15

    Default

    HTML Code:
           <html>
<head>
<title>TEST.</title>
</head>
<body style="background-color:rgb(0, 102, 255)">
<div Id="image0" name="image0" style="position:absolute;left:131;top:191;z-index:4016">
</div>
<div Id="image1" name="image1" style="position:absolute;left:339;top:191;z-index:4017">
</div>
<div Id="image2" name="image2" style="position:absolute;left:547;top:191;z-index:4018">
</div>
</div>
<div Id="image4" name="image4" style="position:absolute;left:963;top:191;z-index:4020">
</div>
<div Id="text0" name="text0" style="position:absolute;left:124;top:254;width:1056;height:25;z-index:4021;background-color:transparent;margin:1px">
<hr>
</div>
<div Id="text1" name="text1" style="position:absolute;left:511;top:949;width:429;height:20;z-index:4022;background-color:transparent;margin:1px">
</FONT>
</div>
<div Id="text2" name="text2" style="position:absolute;left:481;top:965;width:505;height:20;z-index:4023;background-color:transparent;margin:1px">
<br></font>
</div>
<div Id="text3" name="text3" style="position:absolute;left:576;top:143;width:288;height:25;z-index:4027;background-color:transparent;margin:1px">
</div>
<div Id="text4" name="text4" style="position:absolute;left:578;top:145;width:219;height:21;z-index:4026;background-color:transparent;margin:1px">
</div>
<div Id="text5" name="text5" style="position:absolute;left:248;top:5;width:571;height:181;z-index:4031;background-color:transparent;margin:1px">
<font face="arial" size="2">&nbsp;<br></font>
</div>
<div Id="text6" name="text6" style="position:absolute;left:808;top:3;width:310;height:69;z-index:4032;background-color:transparent;margin:1px">
<font face="arial" size="2">&nbsp;<br></font>
</div>
<div Id="text7" name="text7" style="position:absolute;left:793;top:167;width:313;height:17;z-index:4036;background-color:transparent;margin:1px">
<font face="arial" size="2">&nbsp;<br></font>
</div>
<div Id="text8" name="text12" style="position:absolute;left:315;top:794;width:142;height:26;z-index:4058;background-color:transparent;margin:1px">
</div>
<div Id="text9" name="text13" style="position:absolute;left:459;top:794;width:646;height:29;z-index:4059;background-color:transparent;margin:1px">
<font face="arial" size="2"><span class="Apple-style-span" style="font-size: 18px; ">Test website</span><br></font>
</div>
<div Id="text10" name="text11" style="position:absolute;left:438;top:731;width:529;height:31;z-index:4066;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold;" size="3"><span style="font-family: arial;"></span></font></font><font face="arial" size="2"><br></font>
</div>
<div Id="text11" name="text12" style="position:absolute;left:393;top:754;width:636;height:25;z-index:4067;background-color:transparent;margin:1px">
<br></FONT>
</div>
<div Id="text12" name="text13" style="position:absolute;left:433;top:837;width:586;height:27;z-index:4068;background-color:transparent;margin:1px">
</div>
<div Id="text13" name="text15" style="position:absolute;left:438;top:291;width:445;height:412;z-index:4072;background-color:transparent;margin:1px">
<FONT face=arial size=2>&nbsp;<br></FONT>
</div>
<div Id="text14" name="text16" style="position:absolute;left:886;top:507;width:374;height:30;z-index:4073;background-color:transparent;margin:1px">
<a id="linkid15" style="text-decoration: none;" href="http://test.com"><font face="arial" size="2"><font><span style=""><span class="Apple-style-span" style="font-family: georgia; font-size: 16px;"></span></span></font></font></a>
</div>
<div Id="text15" name="text17" style="position:absolute;left:149;top:502;width:312;height:28;z-index:4074;background-color:transparent;margin:1px">
<div Id="text16" name="text18" style="position:absolute;left:371;top:988;width:52;height:18;z-index:4075;background-color:transparent;margin:1px">
<a id="linkid18" style="text-decoration: none;" href="http://test.com"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Home</font><br></font></a>
</div>
<div Id="text17" name="text19" style="position:absolute;left:423;top:987;width:16;height:20;z-index:4077;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">|</font><br></font>
</div>
<div Id="text18" name="text20" style="position:absolute;left:439;top:988;width:75;height:20;z-index:4079;background-color:transparent;margin:1px">
<a id="linkid20" style="text-decoration: none;" href="http://test.com/members"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Members</font><br></font></a>
</div>
<div Id="text19" name="text21" style="position:absolute;left:513;top:988;width:19;height:14;z-index:4081;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">|</font><br></font>
</div>
<div Id="text20" name="text22" style="position:absolute;left:527;top:988;width:42;height:18;z-index:4083;background-color:transparent;margin:1px">
<a id="linkid22" style="text-decoration: none;" href="http://test.com/blog"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Blog</font><br></font></a>
</div>
<div Id="text21" name="text23" style="position:absolute;left:567;top:988;width:19;height:14;z-index:4085;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">|</font><br></font>
</div>
<div Id="text22" name="text24" style="position:absolute;left:582;top:988;width:41;height:18;z-index:4087;background-color:transparent;margin:1px">
<a id="linkid24" style="text-decoration: none;" href="http://test.com/wiki"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Wiki<br></font></font></a>
</div>
<div Id="text23" name="text25" style="position:absolute;left:621;top:988;width:18;height:17;z-index:4089;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">|</font><br></font>
</div>
<div Id="text24" name="text26" style="position:absolute;left:638;top:988;width:89;height:17;z-index:4091;background-color:transparent;margin:1px">
<a id="linkid26" style="text-decoration: none;" href="http://test.com/contact"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Contact Us<br></font></font></a>
</div>
<div Id="text25" name="text27" style="position:absolute;left:724;top:988;width:18;height:17;z-index:4093;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">|</font><br></font>
</div>
<div Id="text26" name="text28" style="position:absolute;left:741;top:988;width:111;height:20;z-index:4095;background-color:transparent;margin:1px">
<a id="linkid28" style="text-decoration: none;" href="http://test.com"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Privacy Policy<br></font></font></a>
</div>
<div Id="text27" name="text29" style="position:absolute;left:849;top:988;width:20;height:19;z-index:4097;background-color:transparent;margin:1px">
<font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">|</font><br></font>
</div>
<div Id="text28" name="text30" style="position:absolute;left:865;top:988;width:111;height:20;z-index:4099;background-color:transparent;margin:1px">
<a id="linkid30" style="text-decoration: none;" href="http://intergated.com/terms-of-use"><font face="arial" size="2"><font style="font-weight: bold; font-family: verdana; color: rgb(255, 153, 0);" size="2">Terms of Use<br></font></font></a>
</div>
<div Id="text29" name="text30" style="position:absolute;left:507;top:860;width:390;height:33;z-index:4102;background-color:transparent;margin:1px">
<FONT face=arial size=2><font face="arial"><font face="arial"><span class="Apple-style-span" style="font-size: 16px; font-weight: bold;">This website will be open on Summer 2010!</span></font></font></FONT>
</div>
<div Id="text30" name="text30" style="position:absolute;left:912;top:161;width:126;height:14;z-index:4103;background-color:transparent;margin:1px">

<div Id="text31" name="text31" style="position:absolute;right:650;top:95;width:200;height:19;z-index:4097;background-color:transparent;margin:1px"><script language = "JavaScript">
var now = new Date();
var dayNames = new Array("Sunday -","Monday -","Tuesday -","Wednesday -","Thursday -","Friday -","Saturday -");
var monNames = new Array("January","February,","March,","April,","May,","June,","July,","August,","September,","October,","November,","December,");
document.write("" + dayNames[now.getDay()] + " " + monNames[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear());
</script>
    That's the source code. So yeah, this is what's making me frustrated, what should I fix to make it fluid, or float?
  9. 02-09-2010, 04:50 PM #9
    felgall's Avatar
    felgall
    felgall is offline Moderator
    Join Date
    Nov 2006
    Location
    Sydney, Australia
    Posts
    4,951

    Default

    The first thing to do is to get rid of all the position:absolute and use float:left and float:right to position the elements instead.

    Using position:absolute relative to the window means that everything will be in a specific position and can't move if the window is too small. The only time you should use position:absolute is nested inside a position:relative element to overlap things on top of one another or for parts of the page you intend to animate using JavaScript.
    Stephen Chapman
    Free Computer Help
    Computer Help Blog
    Web Development eBooks and software
    JavaScript scripts and tutorials
  10. 02-09-2010, 05:23 PM #10
    John777
    John777 is offline Junior Member
    Join Date
    Feb 2010
    Posts
    15

    Default

    Ok, I did, from absolute: to float:, now everything is aligned to the side stacked on one another, but when I make the browser smaller or bigger, it still doesn't expand with the browser, or shall I arrange them all in the middle of the page?
    Last edited by John777; 02-10-2010 at 01:32 PM.
« Previous Thread | Next Thread »

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules