• N
    Super User •

    creare header con div a 2 colonne

    Salve ragazzi
    fino ad ora ho sempre utilizzato le tabelle e mi sto avvicinando un po' a capire come funzionano i div per fare layout responsive.

    Quello di cui avrei bisogno e' creare un header che si divide in 2 dove a sinistra metterei il logo e a destra un banner, proprio come in questo sito (a sinistra c'e' il logo del forum e a destra un banner)

    Esistono degli esempi che potrei guardare in modo da personalizzarli?

    Grazie

    0
  • G
    User Attivo •

    Il responsive non è complesso ma neanche troppo semplice. Può essere inteso come responsive (e così era fino a qualche anno fa) l'uso di box liquidi: cioè impostando dei valori in percentuale per definire i vari box in modo che si adatti a diverse risoluzioni (primi tentativi di fornire i siti ai primi dispositivi che navigavano online).

    Oggi per responsive si intende anche l'uso del tag css "@media" che consente di modificare anche nettamente la visualizzazione degli elementi, in base alle dimensioni dello schermo.

    Fatte queste premesse, a te bastano i box definiti con %, o hai necessità di adattare la grafica con una struttura propria per piccole dimensioni dello schermo?

    Nel primo caso, ti basta una cosa del genere:

    HTML
    [HTML]<div id="header">
    <div class="logo">
    Logo
    </div>
    <div class="banner">
    Banner
    </div>
    </div>[/HTML]

    CSS
    [HTML]#header {
    width: 100%;
    }
    .logo {
    float:left;
    width: 50%;
    }
    .banner {
    float:right;
    width: 50%;
    }[/HTML]

    Per il responsive come definito oggi, devi controllare tu la visualizzazione, impostando dei "salti" a determinate larghezze del display, es:

    ESEMPIO CSS
    [HTML]#header {
    width: 900px;
    }
    @media screen and (max-width: 920px) {
    #header {
    width: 600px;
    }
    }
    @media screen and (max-width: 620px) {
    {
    width: 400px;
    }
    }
    @media screen and (max-width: 420px) {
    {
    width: 90%;
    }
    }[/HTML]

    0
  • N
    Super User •

    ciao gigi, allora io ho fatto questo (sto inserendo un div all'interno di un template wordpress)

    [html]
    <div id="sotto_header">
    <?php
    if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sotto Header')): else : ?>
    <?php endif; ?>

    	<div id="breadcrumbs">
	<?php
	if ( function_exists( 'breadcrumb_trail' ) ) breadcrumb_trail(); 
	?>
	</div>
</div>

    [/html]

    CSS
    [html]
    div#sotto_header{
    float:left;
    line-height:0;
    background:#FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding:8px;
    width:1033px;
    border-left: 1px #3e7da3 solid;
    border-right: 1px solid;
    border-bottom: 3px #dddddd solid;
    }

    div#breadcrumbs{
    float:right;
    margin-top:-15px;
    font-family: 'PT Sans Narrow', sans-serif;
    color:#779dd4;
    font-size: 15px;
    font-weight:bold;
    }
    [/html]

    Riesco a visualizzare quello che voglio visualizzare solo che se restringo la finestra, visualizzandola tipo uno smartphone, tutto si restringe e quindi diventa responsive tranne questo div che ho creato...

    Dove sbaglio?

    0
  • N
    Super User •

    ciao gigi, allora io ho fatto questo (sto inserendo un div all'interno di un template wordpress)

    [html]
    <div id="sotto_header">
    <?php
    if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sotto Header')): else : ?>
    <?php endif; ?>

    	<div id="breadcrumbs">
	<?php
	if ( function_exists( 'breadcrumb_trail' ) ) breadcrumb_trail(); 
	?>
	</div>
</div>

    [/html]

    CSS
    [html]
    div#sotto_header{
    float:left;
    line-height:0;
    background:#FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding:8px;
    width: 98.4%;
    border-left: 1px #3e7da3 solid;
    border-right: 1px solid;
    border-bottom: 3px #dddddd solid;
    }

    div#breadcrumbs{
    float:right;
    margin-top:-15px;
    font-family: 'PT Sans Narrow', sans-serif;
    color:#779dd4;
    font-size: 15px;
    font-weight:bold;
    }
    [/html]

    Riesco a visualizzare quello che voglio visualizzare solo che se restringo la finestra, visualizzandola tipo uno smartphone, il div di destra non va sotto a quello di sinistra ma si sottopone e quindi non si vede...

    Dove sbaglio?

    0
  • G
    User Attivo •

    Sarebbe da vedere la pagina online. Prova comunque a dargli a entrambi float: left. E verifica che il div che li contiene non abbia impostato un height fisso.

    0
  • N
    Super User •

    purtroppo lo sto testando in locale altrimenti mettevo l'esempio.

    In ogni caso, che intendi per height fisso? (un'altezza dove indico in pixel o % la dimensione?)

    Cmq se a breadcrumbs metto float left, il contenuto si sposta a sinistra sotto all'immagine presente nell'altro div e quindi non si vede

    Questo e' il codice che uso attualmente
    [html]
    div#sotto_header{
    float:left;
    line-height:0;
    background:#FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding:8px;
    width: 98.4%;
    height: auto !important;
    border-left: 1px #3e7da3 solid;
    border-right: 1px solid;
    border-bottom: 3px #dddddd solid;
    }

    div#breadcrumbs{
    float:right;
    margin-top:-15px;
    font-family: 'PT Sans Narrow', sans-serif;
    color:#779dd4;
    font-size: 15px;
    font-weight:bold;
    }
    [/html]

    0
  • G
    User Attivo •

    Mi spiace, senza avere l'insieme sotto mano è difficile aiutarti. Posso solo suggerirti di utilizzare gli strumenti per webmaster che ti offre il browser, mettendo a confronto il tuo DIV con gli altri che si ridimensionano come tu vorresti. Non ti resta quindi che copiare e adattare per il nuovo elemento.

    0
Effettua l'accesso per rispondere