vai all' indice generale
creiamo un progetto come da esempio.
lunedì 8 aprile 2013
contenitore esteso e footer bloccato in basso
vai all' indice generale
Vediamo come fare un CSS il cui contenitore riempie tutta la pagina a prescindere dal contenuto e il cui footer rimane bloccato in basso:
vista.php :
style.css:
Vediamo come fare un CSS il cui contenitore riempie tutta la pagina a prescindere dal contenuto e il cui footer rimane bloccato in basso:
vista.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
/>
<title>Home</title>
<link rel="stylesheet"
href="../CSS/style.css" type="text/css"
media="screen"
/>
</head>
<body>
<div id="container">
<div id="header">
<h1>Il logo qui</h1>
</div>
<div id="sidebar">
<h2>barra laterale</h2>
<p>sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar
sidebar sidebar sidebar</p>
</div>
<div id="main">
<div id="coluno">
<h2>colonna uno</h2>
<p>colonna uno colonna
uno colonna uno colonna uno colonna uno
colonna uno
colonna uno colonna uno colonna uno colonna uno
colonna
uno colonna
uno colonna uno colonna uno colonna uno colonna
uno</p>
</div>
<div id="coldue">
<h2>colonna due</h2>
<p>colonna due colonna
due colonna due colonna due colonna due
colonna due
colonna due colonna due colonna due colonna due
colonna
due colonna
due colonna due colonna due colonna due colonna
due
colonna due</p>
</div>
<div id="coltre">
<h2>colonna tre</h2>
<p>colonna tre colonna tre colonna tre colonna
tre colonna tre
colonna tre
colonna tre colonna tre colonna tre colonna tre
colonna
tre</p>
</div>
</div>
<div id="footer">
<p>Qui il footer</p>
</div>
</div>
</body>
</html>
style.css:
@CHARSET "ISO-8859-1";
html {
height: 100%;
padding: 10px;
}
body {
font: 100.01% “Trebuchet MS”,
Verdana, Arial,
sans-serif;
background: #00BFFF;
color: #555;
text-align: center;
height: 95%;
}
div#container
{
width: 950px;
margin: 0 auto;
position: relative; min-height : 100%;
background: white;
text-align: left;
padding-top: 1px;
padding-bottom:
5px;
padding-right: 5px;
padding-left: 5px;
border-radius: 20px;
-moz-border-radius:
20px;
-webkit-border-radius:
20px;
min-height: 100%;
}
div#header
{
background: #DBF8B4;
}
div#sidebar
{
float: left;
width: 200px;
padding-right: 5px;
padding-left: 50px;
}
div#main
{
float: left;
width: 610px;
}
div#coluno
{
float: right;
width: 200px;
position: relative;
left: -400px;
}
div#coldue
{
float: right;
width: 200px;
position: relative;
left: 0px;
}
div#coltre
{
float: right;
width: 200px;
position: relative;
left: 400px;
}
div#footer
{
clear: both;
width: 100%;
background: #D0B4F8;
position: absolute;
bottom: 5%;
}
lunedì 25 marzo 2013
Utilizzare un file di configurazione personalizzato
vai all' indice generale
Creiamo nella cartella : application/config/ un file file_di_configurazione.php :
controllo.php :
Utilizzare un file di configurazione personalizzato
Possiamo creare un file di configurazione personalizzato da usare per impostare tutti quei valori che devono essere centralizzati in una applicazione.Creiamo nella cartella : application/config/ un file file_di_configurazione.php :
<?php
$config['messaggio_centralizzato'] = 'messaggio uno';
Creiamo un file di controllo nella cartella application\controllers\controllo.php :
<?php
class controllo extends CI_Controller
{
public function index()
{
$this->config->load('file_di_configurazione.php');
$msg = $this->config->item('messaggio_centralizzato');
echo $msg;
}
}
Adesso il messaggio è centralizzato. Possiamo utilizzarlo in centinaia di controlli diversi e modificarlo solo nel file di configurazione.- il file di configurazione deve essere messo nella cartella config
- il file di configurazione deve contenere un array
giovedì 21 marzo 2013
Layout a tre colonne con angoli arrotondati
vai all' indice generale
Layout a tre colonne con angoli arrotondati
vista.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
/>
<title>Home</title>
<link rel="stylesheet"
href="../CSS/style.css" type="text/css"
media="screen"
/>
</head>
<body>
<div id="container">
<div id="header">
<h1>Il logo qui</h1>
</div>
<div id="sidebar">
<h2>barra laterale</h2>
<p>sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar
sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar
sidebar sidebar sidebar sidebar</p>
</div>
<div id="main">
<div id="coluno">
<h2>colonna uno</h2>
<p>colonna uno colonna
uno colonna uno colonna uno colonna uno
colonna
uno colonna uno colonna uno colonna uno colonna uno
colonna
uno
colonna uno colonna uno colonna uno colonna uno colonna
uno</p>
</div>
<div id="coldue">
<h2>colonna due</h2>
<p>colonna due colonna
due colonna due colonna due colonna due
colonna
due colonna due colonna due colonna due colonna due
colonna
due
colonna due colonna due colonna due colonna due colonna
due
colonna
due colonna due colonna due colonna due colonna due
colonna
due
colonna due colonna due colonna due colonna due colonna
due
colonna
due colonna due colonna due</p>
</div>
<div id="coltre">
<h2>colonna tre</h2>
<p>colonna tre colonna
tre colonna tre colonna tre colonna tre
colonna
tre colonna tre colonna tre colonna tre colonna tre
colonna
tre</p>
</div>
</div>
<div id="footer">
<p>Qui il footer</p>
</div>
</div>
</body>
</html>
style.css :
@CHARSET "ISO-8859-1";
html,body {
margin: 0;
padding: 10px;
}
body {
font: 100.01% “Trebuchet MS”,
Verdana, Arial,
sans-serif;
background: #00BFFF;
color: #555;
text-align: center;
}
div#container
{
width: 950px;
margin: 0 auto;
background: white;
text-align: left;
padding-top: 1px;
padding-bottom:
5px;
padding-right: 5px;
padding-left: 5px;
border-radius: 20px;
-moz-border-radius:
20px;
-webkit-border-radius:
20px;
}
div#header
{
background: #DBF8B4;
}
div#sidebar
{
float: left;
width: 200px;
padding-right: 5px;
padding-left: 50px;
}
div#main
{
float: left;
width: 610px;
}
div#coluno
{
float: right;
width: 200px;
position: relative;
left: -400px;
}
div#coldue
{
float: right;
width: 200px;
position: relative;
left: 0px;
}
div#coltre
{
float: right;
width: 200px;
position: relative;
left: 400px;
}
div#footer
{
clear: both;
width: 100%;
background: #D0B4F8;
Iscriviti a:
Commenti (Atom)