Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    102

    struttura tag div centrata

    http://img246.imageshack.us/img246/4831/divtagkr4.jpg
    questa è l'immagine della struttura realizzata ( in questo caso con DW , ma nn ha importanza fa lo stesso )




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout 33</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    html,body{margin:0;padding:0}
    body{font: 76% arial,sans-serif;text-align:center}
    p{margin:0 10px 10px}
    a{display:block;color: #981793;padding:10px}
    div#header h1{height:80px;line-height:80px;margin:0;
    padding-left:10px;background: #EEE;color: #79B30B}
    div#container{text-align:left}
    div#content p{line-height:1.4}
    div#navigation{background:#B9CAFF}
    div#extra{background:#FF8539}
    div#footer{background: #333;color: #FFF}
    div#footer p{margin:0;padding:5px 10px}

    div#container{width:700px;margin:0 auto}
    div#content{float:left;width:500px}
    div#navigation{float:right;width:200px}
    div#extra{float:right;clear:right;width:200px}
    div#footer{clear:both;width:100%}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>Header</h1></div>
    <div id="wrapper">
    <div id="content">


    </p>
    </div>
    </div>
    <div id="navigation">


    </p>
    </div>
    <div id="extra">


    </p>
    </div>
    <div id="footer">

    Here it goes the footer</p></div>
    </div>
    </body>
    </html>



    questo è il codice della struttura div ralizzata in quell'immagine.

    vorrei capire come ha fatto a centrare tutta la struttura con i tag div .senza realizzare colonne laterali.

  2. #2
    Utente bannato
    Registrato dal
    Feb 2008
    Messaggi
    910
    dando una dimensione al container 700px e un margine top 0 e un margine left e right auto il contenitore si posiziona in centro allo schermo e al margine superiore

  3. #3

    colonne

    Allora,
    al div contenitore è stato dato un margin laterale auto. I margini nei css vanno scritti cosi:

    margin:10px 20px 30px 20px;
    cioè sopra destra sotto e sinistra.

    Nel caso tu volessi dare dei margini identici per ognuno dei lati opposti cioè sopra uguale a sotto e sinistra uguale a destra puoi scrivere:

    margin: 20px 30px;

    cioè margini verticali e orizzontali... nel caso suddetto hanno utilizzato auto per fare in maniera che si autoadatti lateralmente, questo fa si che il div si centri.

    Per la suddivisione interna dei div ha dato all'attributo float se a dx o a sx, se tu crei un div e gli dai una larghezza definita e gli metti il float:right; il browser lo porta a dx, se float:left; lo porta a sinistra.

    In questa maniera puoi creare liste con dimensioni fisse simili a tabelle senza utilizzare tabelle.

    Ciao ciao

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    102
    -come faccio a centrare un tag div nella pagina?
    -e meglio costruire con i div anzichè con le tabelle , giusto ?

  5. #5
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349
    Originariamente inviato da JonnyFara
    -come faccio a centrare un tag div nella pagina?
    t'ha già risposto Hobby. per approfondimenti vedi qui

    -e meglio costruire con i div anzichè con le tabelle , giusto ?
    ne abbiamo abbondantemente parlato. http://pesanervi.diodati.org/pn/index.asp?a=293

    Cyà

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.