Centrare pagina AP Div

Di: terenziodecimomeridio | 26/09/2020 17:36:55
Ciao a tutti!
Come faccio a centrare la mia pagina web creata con gli AP Div??
Grazie.

Risposte



Prima di centrare il div è necessario creare e istruire il tag Body con il seguente parametro: body{ text-align: center;}. Inserire il tag div e assegnargli un nome. Se sarà il contenitore dell'intero sito (container) sarebbe necessario uno stile con più parametri. Il parametro per riportare gli oggetti a sinistra è: div#container{text-align: left;}.

Di: Gian Paolo | 26/09/2020 17:37:55


Ciao,
Non mi è molto chiaro come fare. Sono abbastanza a secco di dreamweaver...posto il codice della homepage del mio sito:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FotoCineClub2001</title>
<link href="css/fotocinecss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="layout">
<div id="header"></div>
<div id="menu"></div>
<div id="contenuto"></div>
<div id="footer"></div>
</div>
</body>
</html>
Nonostante abbia creato in DIV tag contenitore non sono riuscito a centrarlo e si allinea a sinistra...
ecco il foglio di stile:
#layout {
height: 100%;
width: 100%;
vertical-align: middle;
background-color: #FFFFFF;
}
#header {
background-image: url(../images/header_background.jpg);
height: 200px;
width: 955px;
left: auto;
top: auto;
right: auto;
bottom: auto;
vertical-align: middle;
border: thin solid #FFFFFF;
}
#menu {
background-image: url(../images/menu_background.jpg);
height: 34px;
width: 955px;
border: thin solid #FFFFFF;
}
#contenuto {
background-color: #FCFBFD;
border: thin solid #FFFFFF;
height: auto;
width: 955px;
}
#footer {
background-image: url(../images/footer_background.jpg);
border: thin solid #FFFFFF;
height: 35px;
width: 955px;
}
Qualcuno mi aiuti!!!! GRAZIE!!!

Di: terenziodecimomeridio | 26/09/2020 17:37:55


RISOLTO!!!!!
Ho semplicemente aggiunto:
align="center"
nel tag <div id="layout">

Di: terenziodecimomeridio | 26/09/2020 17:37:55


Non è la soluzione tecnica giusta. Si vede chiaramente che stai proseguendo per tentativi e non per cognizione. Queste cose per farle bene necessitano di studio. Dovresti acquisire consapevolezza di come si costruisce un layout con i DIV. Innanzitutto bisogna conoscere cos'è un layout monolitico o a colonna singola, a due o tre colonne. Conoscere la differenza tra un layout "Fisso", un layout "Fluido" e un layout "Elastico". Cos'è e come posizionare il "DIV contenitore" (DIV CONTAINER), l'Header, il Content (il div dei contenuti), il div Navigation (quello della navigazione) il Footer a piè di pagina ecc. Cos'è un posizionamento "assoluto", un posizionamento "relativo" e un posizionamento con i "float".
Per questi motivi ti voglio consigliare un'ottima guida on-line, che tratta tutti questi argomenti in più lezioni e con annessi i rispettivi esempi che puoi scaricare sul tuo disco. Alla fine avrai acquisito consapevolezza, e avrai la soddisfazione di costruire un layout robusto, pronto ad essere codificato nella maniera corretta da più browser alle differenti risoluzioni di schermo. . Non sarai costretto ogni volta ad apportare modifiche per non aver rispettato delle regole fondamentali. Meglio partire col piede giusto, altrimenti ti troverai ad acquisire cattive abitudini dure da togliersi. Te lo dico per esperienza personale... Leggila con attenzione http://css.html.it/guide/lezione/50/introduzione/.

Di: Gian Paolo | 26/09/2020 17:38:55


Grazie per il link!! Andrò subito a vederlo. In effetti sono molto a secco di dreamweaver...ho anche comperato uno di quei libretti in libreria ma a quanto pare non è servito a molto...

Di: terenziodecimomeridio | 26/09/2020 17:38:55


Beh in effetti i manuali sono orientati a spiegare le funzionalità del programma, di struttura e di layout non c'è granché. La guida che ti ho segnalato è specifica sull'argomento "DIV", indipendentemente da DW.

Di: Gian Paolo | 26/09/2020 17:38:55


Ancora grazie per il link...ora mi è tutto un pò più chiaro...ho cestinato il vecchio sito che stavo costruendo e ho iniziato da capo seguendo il tutorial da te segnalato!!! Grazie Grazie Grazie!!!!

Di: terenziodecimomeridio | 26/09/2020 17:38:55