What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Having an issue with screen rez and %

Border180

Junior Member
Hey guys, I am having a massive issue with getting my site to fit on other sized screens. Thus far, the Backgrounds fits fine! and other images work great. But when I take a look on another screen like the mac I am on now, they are in the wrong places.

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>


and here is the CSS

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%;
}


I have also uploaded it to a free web hosting site. You can find it HERE


ALSO, I should say that the table will not move into the position that I need it to go, you can see the issue on the site. It won't go on the other side of the image "Flave".

If you guys could help out that would be great!
 
Top