www.webdeveloper.com
Results 1 to 2 of 2

Thread: How do make my site work on all resolutions ?

  1. #1
    Join Date
    Dec 2011
    Posts
    1

    How do make my site work on all resolutions ?

    Hi, i just learnt html and css and made a nice little website, but it only seems to work on my resolution , 1440x900 the text gets messed up when i zoom in and out. Please help me, Is there a certain way i should make them, special script or something ? my site is www.grooveofmusic.com (this is just a temp domain)

  2. #2
    Join Date
    Nov 2011
    Posts
    47
    any reason why you are using absolute positioning so much?

    You need to put a container div around everything.
    give the div a set width and center it
    get rid of all that absolute positioning.

    Use the code below for your css.review it for changes I made to it. Just add a <div class="container"> right after your <body> tag and a </div> right before your </body>

    If you have any questions after feel free to ask.

    body
    {
    color:white;
    background-image:url(background.jpg);
    font-family:Tahoma;
    text-align: center;
    }
    .container
    {
    width: 960px;
    margin-left:auto;
    margin-right: auto;
    }
    a:link
    {
    color:white;
    text-decoration:none;
    }
    a:visited
    {
    color:white;
    }
    a:hover
    {
    color:white;
    text-decoration:underline;
    }
    #header
    {
    width: 960px;
    font-size:20px;
    text-align:right;
    margin-left:auto;
    margin-right: auto;
    clear: both;
    letter-spacing: 1px;
    padding-top: 10px;
    }
    .top
    {
    text-align:right
    }
    #body
    {
    width: 940px;
    margin-left:auto;
    margin-right: auto;
    border:2px solid black;
    background-image:url(background.png);
    color:black;
    font-size:25px;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
    color:white;
    }
    h1
    {
    font-size:30px;
    }
    h2
    {
    font-size: 20px;
    }
    p {font-size:25px;}

    #topimage
    {
    float: right;
    }
    #logo
    {
    float: left;
    }
    #footer
    {
    color:white;
    text-align:right;
    }

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