Pure CSS: espandere colonne verticalmente

di il
16 risposte

Pure CSS: espandere colonne verticalmente

Sono intrappolato in un progetto web che prevede la realizzazione di un sito statico. Allo scopo sto usando il framework Pure CSS, solo che non riesco a far sì che che le due colonne occupino tutto lo spazio disponibile della pagina.
HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/pure-min.css">
        <link rel="stylesheet" href="css/grids-responsive.css">
        <link rel="stylesheet" href="css/customize.css">
    </head>
    <body>
        <div class="pure-g">
            <div class="pure-u-1-5" style="background-color: darkblue;">
            
            </div>
            <div class="pure-u-4-5">
                <h1 class="page-title">Titolo Pagina</h1>
                <h3 class="page-subtitle">Qui ci va un sottotitolo</h3>
            </div>
        </div>
        <div class="pure-g">
            <div class="pure-u-1-5">
                <div class="pure-menu dark-menu">
                    <ul class="pure-menu-list">
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                        <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                    </ul>
                </div>
            </div>
            <div class="pure-u-4-5 main-content">
                <p class="main-text">Contenuto</p>
            </div>
        </div>
        
    </body>
</html>
CSS

.page-title
{
    text-align: center;
    color:darkblue;
}
.page-subtitle
{
    text-align: center;
    color:darkblue;
}
.footer-notes
{
    text-align: center;
}
.dark-menu
{
    background-color:darkblue;
}
.nav-text
{
    color:white;
}
.main-content
{

    
}
.main-text
{
    color:darkblue;
}
Allego anche un'immagine che illustra chiaramente il problema. Qualunque suggerito è ben accetto, anche perché non vedo l'ora di finire sta roba.
Allegati:
18548_bb6380d68efbca2f5a06867bda7855ae.png
18548_bb6380d68efbca2f5a06867bda7855ae.png

16 Risposte

  • Re: Pure CSS: espandere colonne verticalmente

    Non riesco a provare il tuo codice perché sono su un Tablet, comunque un metodo semplice per ottenere due colonne é innanzitutto di raccogliere il tutto in un div contenitore con proprietà margin impostata 0 auto, quindi in ciascuno dei due div colonna imposta display a inline-block e width a 49%.
  • Re: Pure CSS: espandere colonne verticalmente

    Purtroppo così facendo, "Contenuto" si sovrappone al menù a sinistra.
  • Re: Pure CSS: espandere colonne verticalmente

    Be, non ti so dire, mi sarò spiegato male perchè deve funzionare.
  • Re: Pure CSS: espandere colonne verticalmente

    Il CSS aggiornato è questo:
    
    .page-title
    {
        text-align: center;
        color:darkblue;
    }
    .page-subtitle
    {
        text-align: center;
        color:darkblue;
    }
    .footer-notes
    {
        text-align: center;
    }
    .dark-menu
    {
        background-color:darkblue;
        display: inline-block;
    }
    .nav-text
    {
        color:white;
    }
    .main-content
    {
    
        display: inline-block;
    }
    .main-text
    {
        color:darkblue;
    }
    .container
    {
        margin: 0 auto;
    }
    
    HTML
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="css/pure-min.css">
            <link rel="stylesheet" href="css/grids-responsive.css">
            <link rel="stylesheet" href="css/customize.css">
        </head>
        <body>
          <div class="container">
                <div class="pure-g">
                    <div class="pure-u-1-5" style="background-color: darkblue;">
    
                    </div>
                    <div class="pure-u-4-5">
                        <h1 class="page-title">Titolo Pagina</h1>
                        <h3 class="page-subtitle">Qui ci va un sottotitolo</h3>
                    </div>
                </div>
                <div class="pure-g">
                    <div class="pure-u-1-5">
                        <div class="pure-menu dark-menu">
                            <ul class="pure-menu-list">
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                                <li class="pure-menu-item"><a class="pure-menu-link nav-text" href="#">Item</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="pure-u-4-5 main-content">
                        <p class="main-text">Contenuto</p>
                    </div>
                </div>
            </div>
        </body>
    </html>
    

    Allegati:
    18548_985a36309a4f7ea01c4e58588ce0dd66.png
    18548_985a36309a4f7ea01c4e58588ce0dd66.png
  • Re: Pure CSS: espandere colonne verticalmente

    Se non risolvi prima domani ti do una mano
  • Re: Pure CSS: espandere colonne verticalmente

    Intendevo una struttura semplice come quella che ti allego
    
    <!DOCTYPE html>
    <html lang="it">
    	<head>
    		<style type="text/css">
    			#container {
    				margin:0 auto;
    				text-align:center;
    			}
    			#container .column {
    				display: inline-block;
    				width:40%;
    				text-align:left;
    				padding:20px;
    			}
    			#header, #footer {
    				text-align:center;
    				margin: 20px;
    				font-weight:bold;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="header">Questo è l'header</div>
    		<div id="container">
    			<div class="column">
    				<h3>Colonna uno</h3>
    Nel mezzo del cammin di nostra vita mi ritrovai in una selva oscura che la diritta via era smarrita.
    			</div>
    			<div class="column">
    				<h3>Colonna due</h3>
    Tempera del principio del mattino e il sol montava in su con quelle stelle ch'eran con lui quando l'amor divino mosse per primo quelle cose belle.
    			</div>
    		</div>
    		<div id="footer">Questo è il footer</div>
    	</body>
    </html>
    
    
    
    devi fare solo attenzione alla width delle colonne perchè è sensibile ad aventuali margin o padding del div (di cui devi tenere conto).
  • Re: Pure CSS: espandere colonne verticalmente

    Il problema della larghezza non ce l'ho, sia usando i framework Bootstrap() e PureCSS(), sia realizzando il layout mano con float o flexbox. Il problema che ho con tutte le soluzioni riguarda solo l'altezza, nemmeno i margini perché esiste box-sizing: border-box. Faccio una prova con la struttura che hai postato, anche se non ho la necessità di creare colonne e righe in CSS, ma solo di riempire verticalmente lo spazio delle colonne mantenendo le classiche percentuali 20%-80% per menù e contenuto.
  • Re: Pure CSS: espandere colonne verticalmente

    Ho provato il tuo codice, ma dà sempre il solito problema del footer troppo in alto.
    Allegati:
    18548_864c029b825879c314f45f1a0a723db0.png
    18548_864c029b825879c314f45f1a0a723db0.png
  • Re: Pure CSS: espandere colonne verticalmente

    Usa margin-top su #footer.
  • Re: Pure CSS: espandere colonne verticalmente

    sebaldar ha scritto:


    Usa margin-top su #footer.
    Naturalmente con margin-top funziona, solo che devo mettere un margine fisso e ciò non va bene dato che il sito deve essere, come amano chiamarlo gli amanti del web, "responsive". Di certo non mi posso mettere a fare una "at-rule" per ogni risoluzione disponibile sul mercato.
  • Re: Pure CSS: espandere colonne verticalmente

    Non capisco, così è "responsive", fammi un esempio di cosa intendi
  • Re: Pure CSS: espandere colonne verticalmente

    Intendo dire che impostando un margine superiore fisso, in pixel, si perde in adattabilità dovendo di conseguenza ricorrere alle @media queries per ciascuna delle maggiori risoluzioni in commercio.
  • Re: Pure CSS: espandere colonne verticalmente

    Fallo in em o percento
  • Re: Pure CSS: espandere colonne verticalmente

    Ho già provato e non funziona. Sto valutando flexbox.
Devi accedere o registrarti per scrivere nel forum
16 risposte