Visualizzazione dei risultati da 1 a 4 su 4

Discussione: due box allineati in orizzontale

  1. #1

    due box allineati in orizzontale

    Salve, stò smanettando con HTML ed i CSS, ma con scarsi risultati!! Mi appoggio molto a questo sito per risolvere i problemi più semplici, con successo.
    Ora però non trovo soluzione ad una cosa: vorrei creare due box allineati in orrizontale all'interno di un box generale. Potrei inserire o due testi indipendenti oppure un testo nel primo e una foto nel secondo.
    Il box generale l'ho creato:
    codice:
    .BloccoGen{                /* riquadro generale*/
        width:750px;                  /*  lunghezza area ---*/
        padding-left:10px;        /* distanza tra la cornice interna e quella esterna*/        
        border:1px solid black;                    
        border-color:#000;  
        border-radius: 10px;
        background-color:#EBEBEB;/*colore di fondo 90%*/
    }
    il primo box interno l'ho creato:
    codice:
    .BloccoNews1{           /*---   BloccoNesws nella pagina Home ----*/
        width:450px; 
        height:80px;                   /*  altezza area del singolo box*/
        padding-left:20px;                /* distanza del testo dal bordo*/
        border: 2px solid black;      /* disegna il bordo*/
        border-color:#060;            /* colora il bordo*/
        background-color:#F5F5F5;        /*colore di fondo 95%*/
        border-radius: 10px;          /* bordi arrotondati */
      -moz-border-radius: 10px;       /* per firefox */
      -webkit-border-radius: 10px;    /* per safari, chrome */
        box-shadow:10px 10px 5px #dedede;  /* ombreggiatura esterna*/  
        padding:10px;
        margin:10px 0px 10px 0px;    /*margin-bottom:10px;  margin-top:10px;*/
    }
    Ora non so come creare il secondo box allineato con il primo; questo box dovrà avere:
    width:270px; (a questa misura si aggiungono i due valori di padding sinistro e destro di 10px)
    height:80px; /* altezza area del singolo box*/
    Mi potete aiutare?
    Grazie
    Antonio
    Ultima modifica di KillerWorm; 14-04-2017 a 23:45 Motivo: tag code

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,605
    Ciao e benvenuto, quello che vuoi fare può essere risolto in vari modi.
    Per il momento potresti fare qualche prova con la proprietà float.

    Posso consigliarti di dare uno sguardo tra i link utili CSS, al capitolo 2 sotto la voce "Float e clear" puoi trovare diverse informazioni e materiale interessante.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    E in questo caso puoi assegnare float: left; a uno e float: right; all' altro, ma in altri casi "fa il trucco" assegnare left o right ad entrambi; e anche qui andrebbe bene.

    L' alternativa è posizionare come assoluti i due div interni: fai attenzione che allora il div contenitore non può essere "normale" (position: static ma deve essere un position: absolute; anche lui o position: relative; altrimenti i due div filgli semplicemente ne escono fuori.
    codice:
    <style>
    .BloccoGen{ /* riquadro generale*/
    width:750px; /* lunghezza area ---*/ 
    height:125px;
    padding-left:10px; /* distanza tra la cornice interna e quella esterna*/ 
    border:1px solid black; 
    border-color:#000; 
    border-radius: 10px;
    background-color:#EBEBEB;/*colore di fondo 90%*/
    position: absolute; top: 77px; left: 20%;
    }
    .BloccoNews1, .BloccoNews2{
    padding-left:20px; /* distanza del testo dal bordo*/
    border: 2px solid #060; /* disegna e colora il bordo*/
    border-color:; /* */
    border-radius: 10px; /* bordi arrotondati */
    -moz-border-radius: 10px; /* per firefox */
    -webkit-border-radius: 10px; /* per safari, chrome */
    box-shadow:10px 10px 5px #dedede; /* ombreggiatura esterna*/ 
    padding:10px;
    margin:10px 0px 10px 0px; /*margin-bottom:10px; margin-top:10px;*/
    position: absolute;
    }
    .BloccoNews1 { /*--- BloccoNesws nella pagina Home ----*/
    background-color:#F5F5F5; /*colore di fondo 95%*/
    width:450px; 
    height:80px;
    }
    .BloccoNews2 {
    background-color:#F5F500; /*colore di fondo 95%*/
    opacity: 0.6;
    width:270px; 
    height:80px;
    right: 10px;
    }
    </style>
    
    <div class="BloccoGen">
    
     <div class="BloccoNews1"></div>
     <div class="BloccoNews2"></div>
    
    </div>
    Al destro occorre il position: absolute; con il right: 10px; che riprende il padding del div genitore.

    In ogni caso, e strada che seguirai, ti facilita il fatto che puoi fare DIV a dimensioni fisse in pixel.
    I guai iniziano quando occorrono DIV che si espandono a seconda del contenuto, come i vecchi DIV "normali". E io allora me ne torno senza vergogna alle tanto schifate TABLE.
    Ultima modifica di Enzo SIMONELLI; 14-04-2017 a 22:57

  4. #4
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,790
    spostiamo in css

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