www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hi just a a question and im new to the forum

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    3

    Hi just a a question and im new to the forum

    Hi, everyone Im glad im here, Hu I need to know how to make my website work with all computer monitors because Im using a 21" flat screen and when I go on my laptop its to big, so what Im asking is there a code i need to us to make it fit all monitors. thanks

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You have several options:
    1) You can set your design to have a fixed width say 1000px and centered in the middle of the screen.
    The should work on all monitors

    2) You can also use a liquid design and set the width of the main container to 100% of screen size but also set the max-width to say 1000px.
    The challenge in this second option is to have your content flow in a way that users who access your web site using smartphones can see your web pages properly laid out

    Because you are new to web design, I would recommend the first option for now.

  3. #3
    Join Date
    Oct 2012
    Posts
    3
    Hi, I dont understand what you mean here is my code

    Code:
    <html>
    <head>
      <meta content="text/html; charset=ISO-8859-1"
     http-equiv="content-type">
      <title>Programming Heaven</title>
    </head>
    <body style="color: white; background-color: rgb(102, 102, 102);"
     alink="white" link="white" vlink="white">
    <div style="text-align: center;"><a href="index.html"><img
     src="http://images.cooltext.com/2800167.png"
     alt="Programming Heaven v1.0" height="114" width="1008"></a>
    <br>
    <br>
    <br>
    <br>
    <table style="text-align: left; width: 1226px; height: 29px;"
     border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td><img src="http://images.cooltext.com/2800188.png"
     alt="Home" height="54" width="95">
          <br>
          <a href="software.html"><img
     style="border: 0px solid ; width: 145px; height: 53px;"
     src="http://images.cooltext.com/2800190.png" alt="Software"></a>
          <br>
          <img src="http://images.cooltext.com/2800192.png"
     alt="Operating System" height="60" width="244"><br>
          <img src="http://images.cooltext.com/2800195.png"
     alt="Hacking" height="54" width="126">
          <br>
    &nbsp;<img src="http://images.cooltext.com/2800199.png"
     alt="Contact Me" height="51" width="179">
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          </td>
          <td>
          <div style="text-align: center;"><big><big><span
     style="font-weight: bold;">&nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; <big>Welcome to Programming
    Heaven v1.0</big></span></big> &nbsp;</big>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;<br>
          </div>
          <div style="text-align: center;"><span
     style="font-family: Verdana;">Hi, And Welcome to my
    programming website. My site will have my software I have created, and
    will have my</span><br>
          <span style="font-family: Verdana;">Operating System
    that I'm working on, It's still in beta, but I will have images
    and&nbsp;details all about it. I will have</span><br>
          <span style="font-family: Verdana;">New's
    about my website and software and hacking and computer tutorials. Right
    now I only have about two programs in my software page, I have alot of
    programs to put up but im using a free upload site to post my software,
    Later this month I will have my own service to post software and a new
    url but for now this is what </span><br>
          <span style="font-family: Verdana;">I have, If your
    wondering why the website says Programming Heaven v1.0 , because I'm
    going to update it alot</span><br>
          <span style="font-family: Verdana;">and so when I do
    that the version 1.0 will change to like version 1.2 and so on. The
    Software page there will</span><br>
          <span style="font-family: Verdana;">be no download
    links, just info about them and images, links will be up this month.
    I'f you need some personal</span><br>
          <span style="font-family: Verdana;">help with your
    windows operating system or mac and even linux just go to my contact
    page, and follow the </span><br>
          <span style="font-family: Verdana;">direction and I
    will get back with you as soon as I can. Thanks for visiting my website
    and hope you come back.</span><br>
          <span style="font-family: Verdana;"></span></div>
          <span style="font-family: Verdana;"><br>
          </span><em
     style="font-weight: bold; font-style: normal; color: rgb(0, 0, 0); font-family: arial,sans-serif; font-size: small; font-variant: normal; letter-spacing: normal; line-height: 16px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: rgb(255, 255, 255);"></em><span
     style="font-family: Verdana;"><big>&nbsp; New's
    Today 10/-/2012-</big><br>
          </span>
          <div style="text-align: center;"><span
     style="font-family: Verdana;">I have up the software page
    with about three programs and more images and info. Operating System
    page is up</span><br>
          <span style="font-family: Verdana;">with new info
    and more images. Hacking page is up but there are no links or pictures
    and info, sorry everyone </span><br>
          <span style="font-family: Verdana;">it will be up
    next time I update the site. Now site will be updated once every two
    days. Thanks</span><br>
          <span style="font-family: Verdana;"></span></div>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          </td>
        </tr>
      </tbody>
    </table>
    Copyrights  2012 Programming Heaven All Rights Reserved. <br>
    Image by <a href="http://cooltext.com">Cool Text: Free
    Graphics Generator&nbsp;</a>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Aug 2012
    Location
    1453 Gingerwood ave, Milpitas CA 95035,
    Posts
    37
    Instructions

    1 Open an HTML file on your website to edit.

    2 Directly underneath the <body> tag near the top of the file, add the following line:

    <div id="wrapper">

    Likewise, directly above the </body> tag near the end of the file, add the following line:

    </div>

    What you're doing is wrapping the entire contents of the webpage inside a division that you can style in a certain way to appear as similar as possible across different monitors. If your site has a lot of HTML pages, you'll have to do this for each page.


    3 Open your website's style sheet to edit. If your site doesn't have a style sheet (it'll be a file with a CSS extension, which stands for Cascading Style Sheets), create a new text document, save it as "style.css," and upload it to your server.

    4 Add the following code to the style sheet:

    div#wrapper {
    margin: 0 auto;
    width:750px;
    }

    This accomplishes two things. "Margin:0 auto;" sets the top and bottom margin of the wrapper to zero and the left and right of the wrapper to "auto," which centers it on the page.

    "Width:750px;" meanwhile sets the width of the wrapper to 750 pixels. On large or modern monitors this will look rather skinny, but some older monitors still have a screen resolution of only 800 by 600 pixels. If you're not worried about the (admittedly quite small) percentage of the population that still has an 800-pixel-wide screen resolution, you can probably up the number to 950 or 1,000.

    5 Make sure the style sheet is linked to the other pages on your site by including this line anywhere between the <head> and </head> tags of your HTML pages:

    <link rel="stylesheet" href="style.css" type="text/css" />

    Make sure the value after "href" is the accurate file name of your style sheet, and make sure it's in the same directory as your HTML files. When you're done, you'll have a website that remains static with a fixed width no matter what size monitor your site is viewed on.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles