Layout a due colonne
Si presenta una raccolta di layout con CSS molto semplici, integrati in Codeigniter. Ogni esempio si concentra sulla presentazione quindi si crea un progetto CodeIgniter e si creano 3 file :
application\controllers\controllo.php
application/views/vista.php
CSS\style.css
Se non esiste già va creata anche la cartella CSS.
In tutti i gli esempi il controllo serve solo a caricare la vista. Tutti i dati presentati sono cablati nella vista.
fonte : http://www.giorgiotave.it/forum/css/132467-struttura-pagina-con-div-e-css.html
controllo.php :
<?php
class controllo extends CI_Controller
{
public function index()
{
$this->load->view('vista');
}
}
vista.php :
<!DOCTYPE html>
<html>
<head>
<title>Layout 2 colonne</title>
<meta name="generator"
content="Bluefish"/>
<meta name="author"
content=""/>
<meta name="copyright"
content=""/>
<meta name="keywords"
content=""/>
<meta name="description"
content=""/>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8"/>
<meta http-equiv="content-style-type"
content="text/css"/>
<link rel="stylesheet"
href="../CSS/style.css" type="text/css" media="screen"
/>
</head>
<body>
<div id="global">
<div id="header">
<h1>Titolo sito</h1>
</div>
<div id="sidebar">
<ul>
<li><a id="activelink"
href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="container">
<h1>Layout a due colonne</h1>
<p>testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo
testo
testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo
testo
testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo
testo
testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo
testo
testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo testo
testo
</p>
</div>
<div id="footer">2010 © mio sito</div>
</div>
</body>
</html>
style.css :
@CHARSET "ISO-8859-1";
html,body {
margin: 0 auto;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 76%;
text-align: center;
}
div#global
{
width: 800px;
margin: 50px auto;
text-align: left;
}
div#header
{
height: 50px;
border: 2px solid
#000;
padding-left: 10px;
}
div#sidebar
{
float: right;
width: 200px;
margin: 10px
0px 10px
0px;
border: 2px
solid #000;
}
div#container {
margin: 10px 215px
10px 0px;
padding: 20px;
text-align: justify;
border: 2px
solid #000;
}
div#footer {
height: 40px;
clear: right;
text-align: center;
padding: 10px;
border: 2px
solid #000;
}
/*navigazione*/
div#sidebar ul {
padding: 20px;
list-style-type: none;
}
div#sidebar li {
margin: 0;
padding: 0;
}
div#sidebar a {
color: #369;
text-decoration: none;
}
div#sidebar a:hover {
color: #033;
text-decoration: underline;
}
div#sidebar a#activelink {
color: #033;
text-decoration: none;
Nessun commento:
Posta un commento