Ciao a tutti sto cercando di creare un sito che vada bene per quasi tutte le risoluzioni di monitor e perché no se è possibile per tutti quanti.
Allora sul mio monitor (pc portatile) con risoluzione 1366X768 si vede tutto benissimo...
Quando vado a vedere il tutto su un pc con risoluzione diversa la posizione degli oggetti cambia...Come posso far si che ogni div abbia una distanza e posizione nello stesso modo in tutti gli schermi?
CODICE HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<script type="text/javascript" src="curvycorners.js"></script>
<script type="text/javascript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#round");
}
</script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="logo">
<a href="index.html">
[img]images/logo.gif[/img]
</a>
</div>
<div id="nav">
<ul>
[*]Home
[*]Novità
[*]Connettiti
[*]Registrati
[*]Supporto
[/list]
</div>
<div class="rounded" id="content">
Entra a far parte del mondo YourEXP e avrai la possibilità di leggere, commentare e raccontare le tue e le esperienze degli altri!
Imparerai ad apprezzare e consigliare allo stesso tempo, non perdere altro tempo!
Iscriviti!
</p>
</div>
<div id="push">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CODICE CSS:
html, body {
height: 100%;
}
html {
background: url("images/sfondo.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*{margin:0;padding:0;}
body {
font-family: Verdana, Geneva, sans-serif;
font-size:14px;
}
#container {
width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -28px;
}
#logo {
background-color:#000033;
width: 9%;
height: 28px;
float:left;
}
#nav {
background-color:#000033;
width: 91%;
height: 28px;
padding:0px 0px;
float:right;
}
#nav ul {
list-style-type:none;
}
#nav ul li {
float:left;
border-right: 1px dotted white;
}
#nav a:link, #nav a:visited {
color:gray;
text-decoration:none;
padding:5px 10px;
display:block;
}
#nav a:hover {
background-color: white;
color: gray;
}
#content {
float:right;
}
#content.rounded {
width: 33%;
height: 32%;
background-color: transparent;
background-image:url("images/content.gif")
color: #E63302;
margin: 25% 12% 0% 0%;
border: 5px solid #000033;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
p {
font-size: 18px;
padding: 10px 20px 30px 20px;
color: white;
text-align:"justify";
}
#footer {
background-color:#000033;
width: 100%;
height: 28px;
float:left;
}
#footer, #push {
clear: both;
}
#push {
height:50px;
}
Rispondi quotando
