Site not fitting to other Screen Sizes

HTML & CSS
1

Hi guys, I know that this issue has been posted or much of been poster millions of times around the web. But still my issue has not been fixed. I have tried a lot of ways. I have gone through so much advice but nothing seems to work.

I just need to page content to work on other screen sizes. I am working on a 1900x1080 rez screen. The sites built on it will not fit on other screens smaller. OK so I went around online looking for sites to try a recreate. (not to sell or pass on as my own, just for practice!) went great the sites looked great. But then I went to see it on another screen and the content is in the wrong places.

So I started looking around online. I could not find much help. Hope you guys can lend me a hand.

Anyways! here is the html code.

<html>
<head>
<link type="text/css" rel="stylesheet" href="WaterCSS.css"/>
<title>Flave</title>



</head>
<body>
<div id="content">
<div id="logo">
<img src="images/logo.png"/>
</div>
<ul cellspacing="60">
<li>Collection</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="header"></div>
<img id="text" src="images/text.png"/>
</div>
</body>
</html>

and Here is the CSS.

html,body
{
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow-x: hidden;
}



body {
padding-right:0px;
background-image:url(images/background.jpg);
width: 100%;
background-size:cover;
background-repeat:no-repeat;
}


#logo {
position:relative;
left:25em;
top:3.7em;


}

ul li {
padding-right:15px;
}


li {
position:relative;
display:inline;
left:59em;
top:0.5em;
color:#FFFFFF;
font-size:20px;
}




#header {
position:relative;
width:70em;
height:0.2em;
left:25em;
background-color:#FFFFFF;
top:-0.1em;
}

#text {
position:relative;
left:45em;
top:25em;
}

A thing I should say, is that I have used px and % along with em when moving things around to now victory. IF I am using them right that is. Where all the em’s are above there used to be %.

Thanks guys!

2

Border180,

Your example code is not practical. (I’m being polite.)

position:relative is no way to position everything on a web page.

Delete all of the css and start over.

I strongly recommend taking a couple of weeks and read one book about writing html and css. Read the rules, Work through the exercises. When you finish, you will be able to write code that works.

3

Screw being polite. If somethings wrong I need to know!

I always thought that position:relative was wrong out of so many forums and so called pros! No one but you has seen it.

OK I will start looking online again, that site that I used to ‘learn’ CSS was, it would seem,…not good.

4

There are some very large and great sites out there for learning HTML and CSS, personally I have two sites which I enjoy learning from which are Tuts+ and Treehouse.