Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    277

    Un piccolo problema con i margini

    Ciao a tutti ragazzi, e buon venerdì innanzitutto!

    Sto cominciando a carpire i segreti del CSS seguendo l'ottimo tutorial di HTM.IT. Stavo quindi provando a giochicchiare con i box, quando mi sono imbattuto in un piccolo problema.

    Ho provato a fare un box di grandezza (percentuale) pari alla metà della pagina e posto centrato nella pagina stessa.E fin qui tutto bene. Poi ho provato ad aumentare la larghezza del box al 75% della pagina, diminuendo così i margini dx e sx al 12,5%.
    Il risultato non è però quello che mi aspettavo, il box viene posizionato in alto a destra. QUal è il porblema?
    Grazie mille,

    Di sotto il codice

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    
    <style type="text/css">
    
    html {
      height: auto;
      width: auto;
      background-color: #9BD394;
          }
    div {
      margin: 25% 12,5% 25% 12,5%;/*margin: top, right, bottom, left*/
      padding: 0% 0% 0% 0%;
      border-right: 0px;
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      width: 75%;
      height: 50%;
      background-color: #FFFFFF;
    }
    
    </style>
    </head>
    
    <body>
    <div id="div.main">
    
    
    prova</p>
    <ul>[*]1[*]2[*]3[/list]
    </div>
    </body>
    </html>

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Per centrare un oggetto, e` necessario che il contenitore abbia dimensioni definite.

    Interpretando (un po' liberamente) potrei consigliarti di aggiungere:
    codice:
    html, body {
      width: 100%;
    }
    e togliere invece il width: auto.

    Nota che occorre definire le dimensioni sia per <html> che per <body>, dato che nei brwoser standard sono due oggetti distinti (sono coincidenti invece in IE quirks mode).

    Nota anche che potresti avere problemi con gli arrotondamenti: in effetti 75% + 12.5% + 12.5%, una volta che il brwoser li ha trasformati in px potrebbe risultare un nuomero maggiore del 100%.

    Di solito per centrare si usa:
    margin: 0 auto;
    oppure
    margin: XX auto YY auto;
    (in pratica si mettono in automatico i margini che il brwoser deve sistemare da solo).

    Per il verticale la cosa funziona in alcuni casi, ma per centrare il verticale normalmente si usano sistemi diversi (vedi tra i "link utili" uno dei primi argomenti in evidenza)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    277
    Grazie mille.

    Usando il tuo consiglio ho dato una lettura approfondita ai link suggeriti.
    Volendo utilizzare dimensioni percentuali, ho seguito la guida però mentre per la centratura orizzontale è tutto ok, per la verticale ho dei problemi.

    Facnedo infatti:
    codice:
    html,body {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #9BD394;
      font-family: Verdana, sans-serif;
    	font-size: 12px;
    }
    div {
    width:60%; 
    height:60%;
    position:absolute; top:50%; left:50%; /*posiziono l'angolo in alto a sinistra del box nel mzoo*/
    margin: -30% 0% 0% -30%; /*usando i margini negativi tiro su il box, centrato*/
    background:#cfc;
    border:1px solid #000;
    }
    il margine viene spostato completamente in alto, ma la logica sembra non fare una grinza! Come si spiega?

    Grazie mille,

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    277
    Qualche soluzione?

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    mentre per la centratura orizzontale è tutto ok, per la verticale ho dei problemi.
    In effetti e` per questo che avevo scritto:
    per centrare il verticale normalmente si usano sistemi diversi
    Per centrare verticalmente si usa il posizionamento assoluto e si utilizzano i margini e il left.
    Pero` la cosa non e` compatibile con le misure % dei blocchi da centrare (almeno mi pare).

    Hai gia` provato a farti un giro nei siti che propongono layout pronti? Alcuni li trovi sempre tra i "link utili", altri li puoi cercare in rete.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    277
    Alla fine ho preso una strada un po' diversa.

    Poiché volevo dimensionare il div dinamicamente, la strada scelta è stata questa:
    1- se non esiste un cookie, lo setto con javascript
    2 - se esiste leggo dal cookie la risoluzione e la invio a din_css.php
    3 - din_css.php crea le dimensioni del div dinamicamnete in base alla risoluzione.

    Mi sembra molto buona la soluzione, vi sposto qui la parte php:

    codice:
    <?php
    if(isset($_COOKIE['resolution']))
    {
    $screen_resolution = $_COOKIE['resolution'];
    ?>
    <style type="text/css">
    <?php include("din_css.php"); ?>
    </style> 
    <?php
    }
    else 
    {
    ?>
    <script type="text/javascript" src="write_cook.js"></script>
    <?php
    }
    ?>
    e qui lo script js:

    codice:
    writeCookie();
    function writeCookie()
    {
    var today = new Date();
    var the_date = new Date("December 31, 2010");
    var the_cookie_date = the_date.toGMTString();
    var the_cookie = "resolution= "+ screen.width +"x"+ screen.height;
    var the_cookie = the_cookie + "; expires=" + the_cookie_date;
    document.cookie=the_cookie;
    location = 'main_page.php';
    }
    CIao a tutti!!!!

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 © 2026 vBulletin Solutions, Inc. All rights reserved.