www.webdeveloper.com
Results 1 to 7 of 7

Thread: Hello everyone, Just need some quick help with html please.

  1. #1
    Join Date
    Mar 2013
    Posts
    9

    Question Hello everyone, Just need some quick help with html please.

    Great afternoon Web Developer community. I have been writing in HTML and CSS for awhile now. I keep running into the same problem. Screen resolution for users...The elements will be to close together on some and perfect on my 19 inch. Or there will be spaces in between my footer and left and right sidebar. Naturally I do what any novice does. I hit google for answers. The only thing I EVER got back was, "Use percentiles" instead of width: 250px; use width: 15%; Which it is the right way to POSITION your elements. I want my website to RESIZE its self to the user connecting to my web servers.

    I know it can be done. Every single website out there does it. No matter what screen you view the website on it's always the same. Images may be smaller or bigger but not positioned different. Which is what I need. And using percentiles does not do that. Im hoping an actual Dev community for websites will be able to shed some light on this.

    ADDITIONAL INFO:

    I have HTML Basics I, II, and III under my belt.
    I have CSS positioning, styling, and editing under my belt.
    I run my own web servers using XAMPP.
    I code my documents using Adobe Dreamweaver, but I use a blank document and hand right it out.
    I have a 19" screen but need it to fit for ALL size screen (Except mobile I will expand my knowledge on that later as that deals with EM's)


    Thanks for any help you can give me. I would prefer if you did not just say here go here to this link. I have been to enough link's and am just looking for a straight answer.

  2. #2
    Join Date
    Mar 2013
    Location
    Yorkshire
    Posts
    6
    Hi,
    whilst I don't have a 'solution' to your problem I have a somewhat prevention tool.
    http://quirktools.com/screenfly/ allows you to view the site you're working on in different resolutions, devices and with different features enabled.
    It's a great tool and I would recommend using it when developing a site.
    Sorry I don't have a solution, just thought I would try my best to help you out!

    Joe.

  3. #3
    Join Date
    Mar 2013
    Posts
    9
    Any help is appretiated. Thank you. I know there is code for this though. Im not sure if it is html or java.

  4. #4
    Join Date
    Mar 2013
    Location
    Yorkshire
    Posts
    6
    Try using this Doctype?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  5. #5
    Join Date
    Mar 2013
    Posts
    9
    Adobe DreamViewer prints these lines when making a html document:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    What do these do? I know what the tags do, but what is the variables? This doctype is for translation it looks like. Would you recommend changing my DOCTYPE to what you had?
    Keep in mind when I code a webpage I create a new text document and name it something.html or something.php and then edit it in Adobe DreamViewer. I could very well be missing a simple piece of coding.

  6. #6
    Join Date
    Mar 2013
    Posts
    9
    So no one can answer this? Why is such a common piece of code so hard to find.

  7. #7
    Join Date
    Mar 2012
    Posts
    1,560
    The (or at least my) answer is do not use XHTML. It is obsolete. HTML4 Framesets are even more obsolete. I suggest using HTML5 or at least HTML4 transitional. For HTML5 the header should be something like:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="put some info for search engines to display here">
    <meta name="keywords" content="put keywords here">
    <title>the title (required)</title>
    <link rel="stylesheet" href="style.css" title="styles" type="text/css">

    As to your problem with screen sizes, there are a number of ways to build responsive pages:

    1. You need to decide the minimum and maximum device width you will support. Arguably the minimum should be 320px or 360px, but I find 480px to be a better compromise. The maximum should be something around 1000px for most uses. With wider displays/windows use margin: 0 auto; for the body (or container div) to centre the page.

    2. I use media-specific style sheets to set the transition point between handheld and screen devices. That can be anything from 640px to 800px, or so.

    3. I use position: absolute to locate divs in the display.

    4. Large images can be auto-scaled by setting their width to a % of the div (plus fixed min-width and max-width if desired), but remember, the whole image has to be down-loaded by even the smallest device.

    5. It is better to use PHP server-side to arbitrate between sending a large or small image. However, unlike JavaScript, PHP does not have direct access to the display size info, so some trickery is needed. This does not work on the landing page, so keep graphics reasonably small there.

    6. Remember to optimize the images for web use.

    I hope that helps...
    Last edited by jedaisoul; 03-25-2013 at 08:21 AM.

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