, div significa divisore, è lo scatolone che divide tutto il testo.
PRIMO BLOCCO DI TESTO <- Il primo blocco di testo verrà ROSSO
SECONDO BLOCCO DI TESTO <- Il secondo blocco di testo verrà GRASSETTO
...etc....
5. Es. puoi anche mettere nella class, due classi diverse.
<- verrà colorato in rosso e visualizzato anche in grassetto
BLOCCO DI TESTO
*/
/* Colori */
.rosso {color:red;}
.verde {color:green;}
.blu {color:blue;}
.giallo {color:yellow;}
.marrone {color:brown;}
/* Tipologie */
.grassetto {font-weight: bold;}
.italico {font-style: italic;}
.sottolineato {text-decoration:underline;}
/* Ora, vediamo come puoi affiancare due div invece di metterli uno sopra l'altro. Questa modalità si usa per le cose responsive.
Se tu fai:
Blocco dentro
Blocco dentro
I div ti verranno grandi come tutta la pagina in orizzontale, ed in verticale, saranno allineati.
Ma potresti voler fare una tabella responsiva 1X2 cioè, una riga e due colonne.
A questo punto, ti creo un frammento di codice CSS che ti permetta di realizzarlo,
metto anche una piccola marginazione di 10 px all'interno dei div. Non curarti del codice sotto */
div.contenitore {
width: 100%;
}
div.affiancato div {
float: left;
width: 50%;
padding: 10px;
text-align:center; /* questo serve per centrare il testo in ogni div affiancato */
}
div.termina {
clear: left;
}
/* ora, per affiancare i due blocchi in una pagina, dovrai fare così: tu non devi cambiare nulla, solo inserire questo frammento di codice nella pagina, e mettere la roba al posto di BLOCCO A SINISTRA e di BLOCCO A DESTRA. Tutte le configurazioni sono già state fatte dal codice sopra, di cui ti ho detto di non curarti.
Puoi usare questo codice quante volte vuoi in qualunque pagina od articolo, perché, come vedi, tutte le dichiarazioni vengono fatte qui.
BLOCCO A SINISTRA
BLOCCO A DESTRA
/*
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 04 2021 | 09:04:14 */
@media screen and (max-width:500px)
{
.psac-post-title a {font-size:15px;}
}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 01 2023 | 15:12:07 */
/* elimina il link a se stesso del titolo del post */
h1.post-title.entry-title {pointer-events: none; cursor: default; text-decoration: none; color: black;}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 09 2023 | 14:22:44 */
/**/
#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {background-color:#DBE1FA;color:black;}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 10 2021 | 14:13:14 */
.blog-author {display:none;}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 10 2021 | 14:28:01 */
@media screen and (max-width:950px)
{
.logo {max-width: 390px;}
}
@media screen and (max-width:890px)
{
.logo {max-width: 360px;}
}
@media screen and (max-width:850px)
{
.logo {max-width: 320px;}
}
@media screen and (max-width:800px)
{
.logo {max-width: 290px;}
}
@media screen and (max-width:680px)
{
.logo {max-width: 300px;}
}
@media screen and (max-width:630px)
{
.logo {max-width: 250px;}
}
@media screen and (max-width:570px)
{
.logo {max-width: 220px;}
}
@media screen and (max-width:535px)
{
.logo {max-width: 200px;}
}
@media screen and (max-width:520px)
{
.logo {max-width: 180px;}
}
@media screen and (max-width:479px)
{
.logo {max-width: 300px;}
}
@media screen and (max-width:160px)
{
.logo {max-width: 100\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\px;}
}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 12 2021 | 22:20:45 */
.fototeampadding {margin-top:-30px;}
@media screen and (min-width:800px)
{
.sboro {padding-left:100px;padding-right:100px;}
}
@media screen and (min-width:500px)
{
.sboro {margin-left:40px;margin-right:40px;}
}
@media screen and (max-width:500px)
{
.sboro {margin-left:20px;margin-right:20px;}
}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 29 2021 | 20:07:33 */
.slidermodello {margin-bottom:20px;}
.psac-post-meta span.psac-post-meta-innr {font-size:14px; font-style:bolder;color:black;}
@import url('https://fonts.googleapis.com/css2?family=Candal&display=swap');
time.date-container.minor-meta.updated {color:black;font-size:22px;}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 23 2023 | 15:35:38 */
.widgettitle {color:#009fd9;text-align:center;}
#top #wrap_all .all_colors h3 {color:#009fd9;text-align:center;}
.widget {padding-top:1px; padding-bottom:1px;}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 22 2021 | 08:35:52 */
/* Underlined per i links */
.sottolineato, a {text-decoration:underline;}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 10 2023 | 14:33:28 */
/* correzione posizionamento lente ingrandimento */
.is-search-icon{margin-top:-20px;}
.modificaivorysearch {
display: inline-block;
width: 40%;
margin-left: 30%;
margin-top: 10px;
max-width: 100%;
}
.fabi-simple-search-wrap {
width: 100%;
max-width: 520px;
margin: 10px auto;
}
.fabi-simple-search-form {
display: flex;
gap: 8px;
align-items: stretch;
width: 100%;
}
.fabi-simple-search-label {
flex: 1;
margin: 0;
}
.fabi-simple-search-input {
width: 100%;
height: 42px;
padding: 0 13px;
font-size: 15px;
border: 1px solid #bdbdbd;
border-radius: 7px;
box-sizing: border-box;
background: #fff;
}
.fabi-simple-search-input:focus {
outline: none;
border-color: #7f9db9;
box-shadow: 0 0 0 3px rgba(127,157,185,0.20);
}
.fabi-simple-search-button {
height: 42px;
padding: 0 16px;
font-size: 14px;
font-weight: 700;
border-radius: 7px;
border: 1px solid #555;
background: #555;
color: #fff;
cursor: pointer;
}
.fabi-simple-search-button:hover {
background: #333;
}
/* Evidenziazione termini nel popup AJAX */
.relevanssi-live-search-results mark,
.fabi-live-highlight {
background: #fff1a8;
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* Migliora leggermente il box risultati live, se il plugin usa le classi standard */
.relevanssi-live-search-results {
z-index: 99999;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
@media (max-width: 600px) {
.fabi-simple-search-form {
flex-direction: column;
}
.fabi-simple-search-button {
width: 100%;
}
}
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 21 2023 | 14:40:28 */
@media screen and (min-width:1240px)
{
.pospulst1 {float: left; width: 16.66%; text-align: center;}
.pospulst2 {float: left; width: 16.66%; text-align: center;}
.pospulst3 {float: left; width: 16.66%; text-align: center;}
.pospulst4 {float: left; width: 16.66%; text-align: center;}
.pospulst5 {float: left; width: 16.66%; text-align: center;}
.pospulst7 {float: left; width: 16.66%; text-align: center;}
}
@media screen and (min-width:500px) and (max-width:1240px)
{
.pospulst1 {float: left; width: 33.33%; text-align: center;margin-bottom:5px;}
.pospulst2 {float: left; width: 33.33%; text-align: center;margin-bottom:5px;}
.pospulst3 {float: left; width: 33.33%; text-align: center;margin-bottom:5px;}
.pospulst4 {float: left; width: 33.33%; text-align: center;margin-bottom:5px;}
.pospulst5 {float: left; width: 33.33%; text-align: center;margin-bottom:5px;}
.pospulst7 {float: left; width: 100%; text-align: center;margin-bottom:5px;}
}