Poszionamento/grandezza div e consiglio grafico

di il
3 risposte

Poszionamento/grandezza div e consiglio grafico

Ciao a tutti,

Sto facendo un piccolo sito piuttosto basilare.
La base grafica di ogni pagina è cosi composta:
-striscia in alto che copre tutta la larghezza del video per il titolo;
-barra laterale per il menù;
-spazio rimanente per il contenuto.

Allego qui i codice:
-index.html

<html>
	<head>
		<title> Prova DIV </title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="contenitore">
			<div id="titolo">
			</div>
			<div id="menuLaterale">
			</div>
			<div id="principale">
				Una mattina mi son svegliato</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				Una mattina mi son svegliato</br>
				Eo ho trovato l'invasor</br>

				O partigiano porta mi via</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				O partigiano porta mi via</br>
				Che mi sento di morir</br>

				E se io muoio da partigiano</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				E se io muoio da partigiano</br>
				Tu mi devi seppellir</br>

				Mi seppellire lassù in montagna</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				Mi seppellire lassù in montagna</br>
				Sotto l'ombra di un bel fiore</br>

				E le genti che passeranno</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				E le genti che passeranno</br>
				Mi diranno: "Che bel fior"</br>

				È questo il fiore del partigiano</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				È questo il fiore del partigiano</br>
				Morto per la libertà </br>
				</br>
				**************************************************</br>
				</br>
				Una mattina mi son svegliato</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				Una mattina mi son svegliato</br>
				Eo ho trovato l'invasor</br>

				O partigiano porta mi via</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				O partigiano porta mi via</br>
				Che mi sento di morir</br>

				E se io muoio da partigiano</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				E se io muoio da partigiano</br>
				Tu mi devi seppellir</br>

				Mi seppellire lassù in montagna</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				Mi seppellire lassù in montagna</br>
				Sotto l'ombra di un bel fiore</br>

				E le genti che passeranno</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				E le genti che passeranno</br>
				Mi diranno: "Che bel fior"</br>

				È questo il fiore del partigiano</br>
				O bella ciao, bella ciao, bella ciao ciao ciao</br>
				È questo il fiore del partigiano</br>
				Morto per la libertà </br>
			</div>
		</div>
	</body>
</html> 
-style.css

#contenitore
{

	background-color:#ffff00; /* Giallo */
	overflow:scroll;

}

#menuLaterale
{
	position:absolute;
	background-color:#000080; /* Blu */
	left:0px;
	top:20vh;
	width:20vw;
	height: 80vh;
	margin:0px;
	
}

#titolo
{
	position:absolute;
	background-color:#ff0000; /* Rosso */
	top: 0px;
	left: 0px;
	right: 0px;
	width:100vw;
	height: 20vh;
	margin:0px;
}

#principale
{
	position:absolute;
	background-color:#00ff00; /* Verde */
	top:20vh;
	left:20vw;
	right:0px;
	height:80vh;
	width:80vw;
	

}
Quando all'interno del div principale c'è troppo testo, questo viene tagliato. Per risolvere ho settato al div in questione l'opzione overflow a scroll.
Questo ha risolto la situazione ma in un modo che non mi piace. Rende l'area di lettura troppo piccola, infatti permette lo scroll solo del div principale.
Allora ho tagliato e incollato la stringa "overflow:scroll;" in #contenitore. Questo risolve completamnete il problema, infatti ora può essere scrollata l'intera pagina. Contemporaneamnete però nel momento in cui scrollo in giù i div sembrano tagliati.

Come posso risolvere?

Un'altra cosa, il menù laterale dovrebbe contenere un piccolo elenco puntato che funge da collegamneto verso altre pagine, il resto dello spazio sarebbe inutilizzato. Che alternativa posso adottare? Oppure esteticamente come lo posso migliorare? (nella sito definitivo tutti i div sono trasparenti e, su quello contenitore è impostata un immagine di background quindi non si vedono i bordi )

P.S. Ho scelto il testo di quella canzone perchè è il primo che mi è venuto in mente. Ho appena guardarto una serie tv in cui viene citato spesso e sono abbastanza in fissa.

3 Risposte

  • Re: Poszionamento/grandezza div e consiglio grafico

    Ciao,
    Prima di tutto è interessante come hai sviluppato il sito,sinceramente non avrei utilizzato il "position absolute" per le colonne, ma sono gusti personali.
    comunque, non imporre il "overflow:scroll" se non funziona è perchè c'è qualcosa che non va
    prima di tutto, per ovviare il tuo problema puoi fare due cose:
    - metti al posto di "overflow: scroll", metti "position: relative" al div contenitore (id="contenitore"), così i div con "position absolute" non ne se vanno per i fatti loro
    - seconda cosa, esperienza insegna, non mettere mai l'altezza ai div che devono contenere del testo, devi lasciarlo libero di avere tutto il testo che vuole
  • Re: Poszionamento/grandezza div e consiglio grafico

    Ciao Acid,

    Grazie per la risposta! Con i tuoi suggerimenti sono riuscito a risolovere. Pensavo fosse un problema più grande, invece una stupidata. Grazie 1000!

    Invece per la tua nota riguardo la stranezza dell'utilizzo del "position absolute" cosa potrei usare in alternativa? Mi interessa sempre imparare le tecniche per scrivere un bel codice... (Stranamente questo non è un argomento molto presente sul web)
  • Re: Poszionamento/grandezza div e consiglio grafico

    Ci sono tanti metodi per dirla tutta, io prediligo l'uso di flexbox o del grid, mi facilita molto il lavoro, e anche di tanto
Devi accedere o registrarti per scrivere nel forum
3 risposte