Posizionamento css

Posizionamento con Css

Basta guardare un pò nel web per capire che i template che si trovano sono al 99% strutturati con i “div”. Questi con la potenza dei css possono dar vita con poco codice a vere e proprie strutture per un sito web.
Anche se oggi si trovano davvero un numero elevatissimo di template già belli e pronti, questo metodo è utile anche per i contenuti stessi.

Partiamo da un codice base di una semplice pagina html:

<html>
<head>
<title>Posizionamento con css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
	<div id="header">
    header
    </div>
	<div id="main">
    	<div id="sx">
    	barra sx
        </div>
        <div id="body">
        corpo della pagina
        </div>
    </div>
    <div id="footer">
    footer
    </div>
</div>
</body>
</html>


e dal suo foglio di stile:

@charset "utf-8";
/* CSS Document */

#container,
#header,
#main,
#sx,
#body,
#footer {
	border:solid #000;
}

Naturalmente queste poche impostazioni css non sono sufficienti per avere la nostra struttura. Ecco come si presenta la pagina:
Posizionamento css 01

Adesso andremo a impostare nel css l’adattamento di ogni singolo div. Cominciamo con l’eliminare i bordi che ci sono serviti solo per evidenziare i div vuoti.

Al corpo della pagina ed al container cureremo gli spazi a 0 e le due misure al 100%

html, body {
	margin:0;
	padding:0;
	border: 0;
}

#container {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

Agli altri div daremo una posizione relativa al container oltre le misure a noi necessarie:

#header {
	position:relative;
	height:100px;
	width:100%;
	background-color:#966;
}

#main {
	position:relative;
	height:700px;
	margin:0;
}

#sx {
	position:relative;
	float:left;
	height:100%;
	width:100px;
	background-color:#09F;
	margin:0;
}

#body {
	position:relative;
	width:100%;
	height:100%;
	margin:0;
}

#footer {
	position:relative;
	height:130px;
	width:100%;
	background-color:#399;
}

Un particolare da tenere conto è il float impostato a sinistra nel div #sx. Questo posiziona all’interno del #main il div a sinistra così da avere subito di seguito il #body.

Ho dato dei colori agli sfondi così da evidenziare i singoli spazi:
Posizionamento css

Il css completo sarà quindi il seguente:

@charset "utf-8";
/* CSS Document */

html, body {
	margin:0;
	padding:0;
	border: 0;
}

#container {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

#header {
	position:relative;
	height:100px;
	width:100%;
	background-color:#966;
}

#main {
	position:relative;
	height:700px;
	margin:0;
}

#sx {
	position:relative;
	float:left;
	height:100%;
	width:100px;
	background-color:#09F;
	margin:0;
}

#body {
	position:relative;
	width:100%;
	height:100%;
	margin:0;
}

#footer {
	position:relative;
	height:130px;
	width:100%;
	background-color:#399;
}

Ora inseriamo una riga nel corpo della nostra pagina:

<div id="body">
  <p>Riga di testo a sinistra <span>e riga di testo a destra</span></p>
</div>

impostiamo i margini a zero:

#body p {
	margin:0;
}

Ora andiamo a posizionare il testo inserito tra i tag “span” a destra:

#body p span {
	float:right;
}

Questo è stato possibile semplicemnete impostando il float a destra. Il float si applica relativamente al paragrafo “p” contenitore del tag “span”:
Posizionamento css

Questo è un esempio base per iniziare ad apprendere la potenza dei css.

A voi il sorgente: posizionamento-css

Davide Arduini Arduini

Developer Web in Php, Html, Asp, Css. Esperienza in sviluppo di siti web, pannelli gestionali e applicativi aziendali per uso interno. Conoscenza base dei vari CMS (Joomla, WordPress, etc..)

WebSite


Seguimi su: TwitterFacebookLinkedInPinterestGoogle PlusYouTube

Login Php (parte 1 del tutorial)
Css dinamici con Php

Potrebbero interessarti anche

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *