Originariamente inviato da stefen
...ma come fare in modo che tutte le varie componenti ce sonosull pagina ppaiono sempre nell stessa posizione anche cambiando la risoluzione di visualizzazione?
se le vedo sul 1280x1024 sono tutte verso sinistra
se le vedo sul 1024X768 appaione centrate...
Fare un layout liquido o elastico č un impegno abbastanza complesso adatto solo a programmatori esperti, pertanto se non hai un'esperienza abbastanza forte ti sconsiglio di addentrarti in questa pratica ma usare layout fissi.
Puoi sempre trovare in rete dei layout giā pronti liquidi o elastici da usare.
Qui di seguito ti posto un esempio fatto in fretta e non collaudato
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #6F7D94;
}
.sidebar1 {
float: left;
width: 20%;
background: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background: #93A5C4;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;/
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Cambia il colore dello sfondo e del testo per la navigazione tramite mouse e tastiera */
background: #6F7D94;
color: #FFF;
}
/* ~~ Il pič di pagina ~~ */
.footer {
padding: 10px 0;
background: #6F7D94;
position: relative;
clear: both;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">Qui logo 20%X90px + Header</div>
<div class="sidebar1">
<ul class="nav">[*]Collegamento uno[*]Collegamento due[*]Collegamento tre[*]Collegamento quattro[/list]
Cinque</p>
</div>
<div class="content">
<h1>Colonna centrale</h1>
</p>
</div>
<div class="sidebar2">
<h4>Colonna destra</h4>
</div>
<div class="footer">
Questo č il footer</p>
</div>
</div>
</body>
</html>
Permessi di invio
Rispondi quotando