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
and here is the CSS
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!
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!
