Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fitting Screen sizes.

Discussion in 'Website Design Forum:' started by Border, May 31, 2013.

  1. Border

    Border New Member

    Hey guys, I have been reading through a few posts on this issue. But still no fix. I know that there is no one line of code to fit all screen sizes. So here is the code thus far,

    HTML:
    body {
        background-image:url(Images/background.jpg);
        background-size: cover;
    }
    
    
    #flave {
        position:relative;
        left:300px;
        top:10px;
    }
    
    td {
        width:30px;
        color:#FFF;
    }
    
    
    
    p {
        position:relative;
        display:inline;
        top:-85px;
        font-size: 20px;
        color:#FFF;
        left:1000px;
    }
    #header {
        position:relative;
        left:300px;
        top:-140px;
        border: 1px solid #FFF;
        width:1200px;
    }
    
    #text {
        position:relative;
        left:700px;
        top: 260px;
    }
    That is the CSS for a site, that I have tried to recreate. But when on another screen it does not fit. I have made it so the body and/or html is width:100%; or width:100%; But still does not fit.

    I can also post the html too.


    Thanks for any help
     
  2. jooty

    jooty Active Member

    If you are just trying to get an image to scale correctly on different size windows then use this. Its never something that will be 100% right as images and screen size dont really work that way. You wouldn't want the image to become distorted etc. try this

    html {
    background: url(images/nameofimage.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
     
  3. Corrosive

    Corrosive Moderator Staff Member

    You will need to set everything to be % widths to make a 'fluid' layout and you'd also need to use the CSS box model to position everything correctly rather than 'left' and 'top'.
     
  4. Border

    Border New Member

    OK so using 'left' ect is wrong?

    I am sorry I don't really know what you mean? Would I need to give width:30% ect instead of left:200px; ect?


    The one thing I don't get is, I am sure this site looks great on your screen. As it does on mine. Fits perfect side to side. How do people get sites to fit so well on any screen?
     
    Last edited: May 31, 2013
  5. Corrosive

    Corrosive Moderator Staff Member

    Say you have a sidebar that you want to be 30% of the screen then set the width to 30%. The CSS box model is something you should Google before you go any further. There's a wealth of knowledge online.
     
    Border likes this.
  6. Border

    Border New Member

    OK, So for things like text, that needs to be fine tuned on its position could then a person use the 'left' and 'right' to move it around? and use like you said sidebars ect, using 50% width ect. to get it into the right position.



    I think I have that wrong.


    I have seen the CSS Box Model. The Margin Border Padding ect.

    I am sorry about having to ask these questions, I have been searching around online for a long time. I have been on many forums but still no help. Seems though that this site is the best.
     
    Last edited: May 31, 2013
  7. Corrosive

    Corrosive Moderator Staff Member

    You can but I wouldn't to be honest. Box model positioning all the way (or as much as you can). Say you want your paragraphs to always have a space of 25px between one and the next one then put a bottom margin of 25px on the styles of any <p> tag using CSS. Don't 'drag and drop' each paragraph. That kind of defeats the object of CSS and can have odd results.
     
  8. Border

    Border New Member

    OK, I am going to try and create a new simple page with this information
     
  9. Corrosive

    Corrosive Moderator Staff Member

    That sounds like a plan to me. Is this your first web build?
     
  10. Border

    Border New Member

    Somewhat, I have made a few. but all for personal use. If I am ever going to get anywhere this needs to be fixed haha.

    Anyway. So far so good, kinda. this is the CSS thus far.


    HTML:
    body {
    background-image:url(images/background.jpg);
    width: 100%;
    background-size:100%;
    background-repeat:no-repeat;
    }
    #logo{
    left:25%;
    
    
    }
    #header {
    width:50%;
    height:0.2%;
    background-color:#FFFFFF;
    margin:auto;
    }
    
    
    So in any rez it fits great. all exept a line of white on the far right of the screen about 3px wide. Also I am having an issue in getting the #logo into its position. I seem to be only able to move it when it is set to position:relative; but that makes the white line on the right larger.

    Any ideas? I have tried a few things but nothing so far.

    But thank you so much for your help so far, I would not of been able to do it without you!
     
  11. Corrosive

    Corrosive Moderator Staff Member

    Have you got a testing domain/corner of a web host somewhere? It would be much easier to help you if I can see what is going on 'real world'.
     
  12. Border

    Border New Member

    No, but I guess that would be better haha. Will do that now
     
  13. Border

    Border New Member

    Sorry for double post could not find the edit!

    Anyway. I have uploaded my site to a free host HERE

    This is the site without the image 'Flave' having position:relative;
     
  14. Border

    Border New Member

    Really sorry about ANOTHER post but the edit button seems to have gone!.

    So I fixed the issue with the white line. Now I am having another issue with a table not wanting to move. I have them in a line. but other than that they will not move. Here is the CSS and html.

    HTML:
    html,body
    {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }
    
    
    
    body {
    padding-right:0px;
    background-image:url(images/background.jpg);
    width: 100%;
    background-size:100%;
    background-repeat:no-repeat;
    }
    #logo{
    position:relative;
    left:15%;
    top:5%;
    
    
    }
    
    table {
    position:relative;
    display:inline;
    width:60%;
    top:5%;
    }
    
    p {
    font-size:20px;
    color:#FFFFFF;
    }
    #header {
    position:relative;
    width:70%;
    height:0.2%;
    background-color:#FFFFFF;
    top:5%;
    margin:auto;
    
    }
    
    #text {
    position:relative;
    left:40%;
    top:45%;
    }
    
    
    This is the CSS as I am sure you know! Here Is the HTML.


    HTML:
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="WaterCSS.css"/>
    <title>Flave</title>
    
    
    
    </head>
    <body>
    <div id="logo">
    <img src="images/logo.png"/>
    </div>
    <table cellspacing="60">
    <tr>
    <td><p>Collection</p></td>
    <td><p>Shop</p></td>
    <td><p>About</p></td>
    <td><p>Contact</p></td>
    </tr>
    </table>
    <div id="header"></div>
    <img id="text" src="images/text.png"/>
    
    </body>
    </html>

    This is pretty much as far as I can tell the last issue. But i have tried many things but still it does not work.


    Thanks for your help thus far though!
     
  15. Paul Murray

    Paul Murray Moderator Staff Member

    Border likes this.
  16. Corrosive

    Corrosive Moderator Staff Member

    Paul is correct. Your menu code should be;

    Code:
    <ul>
    <li>Collection</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
    </ul>
    
    Tables are for tabular data, period.
     
  17. Corrosive

    Corrosive Moderator Staff Member

    Are you wanting to have the menu up alongside the logo or below it?
     
    Border likes this.
  18. Border

    Border New Member

    Above the line and opposite to the 'logo'

    The page is one that I am trying to recreate.
     
  19. Border

    Border New Member

    I think I have done it, with changing it to a ul.

    But know that Cellspacing will not work. how can I space out the li?
     
  20. Border

    Border New Member

    I have another issue, Would seem them some parts move around when seen on other screen sizes.

    Take a look at the link to the site on the other page to see what I mean.
     

Share This Page