Fitting Screen sizes.

B

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
 
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;
}
 
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'.
 
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:
Border said:
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?
Click to expand...

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.
 
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:
Border said:
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?
Click to expand...

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.
 
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!
 
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'.
 
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;
 
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!
 
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.
 
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?
 
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.
 
You must log in or register to reply here.
Back
Top