Layout a tre colonne con barra laterale con float relative
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: 0
}
body {
font: 100.01% “Trebuchet MS”,
Verdana, Arial,
sans-serif;
background: #FFFFCC;
color: #555;
text-align: center;
}
div#container
{
width: 950px;
margin: 0 auto;
background: url(3col.jpg) repeat-y;
text-align: left;
}
div#header
{
background: #DBF8B4;
}
div#sidebar
{
float: left;
width: 200px;
}
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;
Nessun commento:
Posta un commento