Utilizzando i CSS proprietà float aggiunge una notevole quantità di flessibilità al design del sito Web. Basato su DIV CSS design è diventato lo standard del settore, ma l'ascesa di CSS design ha anche frustrato molti web designer. Sotto vecchi metodi di progettazione basati su tabella, centraggio DIVs era semplice, ma la stessa operazione presenta problemi sotto uno schema di disegno CSS. Uno dei modi più semplici per eseguire questa operazione è tramite l'utilizzo della proprietà float. Tuttavia, poiché gli unici valori validi per la proprietà float sono destra e sinistra, rendendo un galleggiante DIV al centro richiede un livello di creatività.

Istruzioni

1

Creare un foglio di stile da utilizzare per la pagina in questione.

2

Definire un nuovo tipo di classe per i div che verranno essere lanciati al centro. Dare questa proprietà di float e larghezza di classe.

3

Impostare il valore della proprietà float a "sinistra" e il valore della proprietà width su qualsiasi larghezza è necessario soddisfare esigenze particolari. Si noti che è necessario impostare il valore della proprietà width come percentuale della larghezza totale dell'elemento contenitore anziché come un valore assoluto.

4

Definire un tipo di seconda classe. I div utilizzando questa classe visualizzano sempre all'estrema sinistra della tua pagina e spingeranno la prima classe di div al centro della pagina. Dare questa classe float, la proprietà width e height.

5

Impostare il valore della proprietà float a "sinistra" e il valore della proprietà height su qualcosa di piccolo come "1px" o "1%". Calcolare il valore della proprietà width sottraendo il valore della proprietà width del vostro tipo di prima classe da 100 per cento e dividendolo per due. Ad esempio, se il valore della proprietà width del vostro tipo di prima classe è il 30 per cento, il valore della proprietà width per questa classe sarebbe 100% - 30% = 70% / 2 = 35 per cento.

6

Salvare il foglio di stile come un file di testo e assegnargli un'estensione "CSS".

7

Caricare il tuo foglio di stile sul server che ospita la pagina web.

8

Collegare il vostro foglio di stile alla tua pagina web. Questo si ottiene aggiungendo un tag LINK nella sezione HEAD della tua pagina. Il tag LINK dovrebbe essere come segue: < link rel = "stylesheet" href="your_style_sheet.css" type = "text/css" / > (dove il tuo foglio di stile è denominato "your_style_sheet.css"). Se è stato inserito nel foglio di stile in una directory diversa da quella dove si trova la tua pagina web, è necessario designare la posizione esatta nella proprietà HREF del tag LINK.

9

Inserire un DIV nella pagina web che utilizza il tipo di seconda classe definito nel foglio di stile. Immediatamente successivo, inserire un DIV che utilizza il tipo di prima classe definito nel foglio di stile. Questo DIV verrà essere smantellato il centro.

Consigli & Avvertenze

• Un'opzione alternativa per la creazione di un foglio di stile è quello di mettere una dichiarazione di stile nella sezione HEAD della tua pagina web. Una dichiarazione di stile inizia con un tag < style > e termina con un < / stile > tag. Inserire il codice CSS necessario tra questi due tag e rimuovere il tag di collegamento che si è inserito nella sezione HEAD della tua pagina web.