Pagina 1 di 1
Doppio padding-bottom
Inviato: 21/10/2016, 15:51
da frank
Sto sistemando il mio blog e da un tema ho trovato questo css con un doppio padding-bottom. Io non so se è un'errore dell'autore o se è corretto. Questo è il css:
Codice: Seleziona tutto
#sidebar {
background-color: #294a6f;
width:225px;
border-right:3px solid #ccc;
border-left:3px solid #ccc;
text-align: center;
float: left;
color:#91a3af;
font-size:12px;
line-height: 15px;
padding-bottom:30px;
margin-bottom: -5000px;
padding-bottom: 5000px;
}
Re: Doppio padding-bottom
Inviato: 12/12/2016, 22:46
da Sir Xiradorn
E' un errore bello e buono
Re: Doppio padding-bottom
Inviato: 12/12/2016, 22:59
da frank
Anche a me sembrava strano, ora ho messo così:
Codice: Seleziona tutto
/* Colonna di sinistra */
#sidebar {
background-color: #1f3b58;
width:225px;
border-right:3px solid #ccc;
border-left:3px solid #ccc;
text-align: center;
float: left;
color:#91a3af;
font-size: 0.85em;
line-height: 15px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
Ora la colonna sinistra arriva fin troppo in basso. Se ci fai caso sotto i link dei Siti amici c'è uno spazio enorme che non riesco togliere. Credo sia questo css che crea questo spazio.
http://photoman.altervista.org
Re: Doppio padding-bottom
Inviato: 13/01/2017, 20:16
da Sir Xiradorn
Nella sidebar hai un margin-bottom che ti spara il valore così in basso a 500px
Re: Doppio padding-bottom
Inviato: 13/01/2017, 22:09
da frank
Dove lo vedi il margin-bottom: 500px;
Re: Doppio padding-bottom
Inviato: 14/01/2017, 0:21
da Sir Xiradorn
Se usi qualsiasi strumento di analisi lo vedi tu stesso. Guarda lo screen fatto da firebug:
Re: Doppio padding-bottom
Inviato: 14/01/2017, 0:27
da frank
Ho capito, tu hai trovato il css originale, ma nel child c'è questo:
Codice: Seleziona tutto
/* Colonna di sinistra */
#sidebar {
background-color: #1f3b58;
width:225px;
border-right:3px solid #ccc;
border-left:3px solid #ccc;
text-align: center;
float: left;
color:#91a3af;
font-size: 0.85em;
line-height: 15px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
Potrei mettere così, ma me la taglia alla fine dei widget
Re: Doppio padding-bottom
Inviato: 14/01/2017, 14:35
da Sir Xiradorn
Il problema è che vuoi fare un pareggio delle colonne facendole arrivare alla stessa altezza non hai una soluzione semplicistica per arrivare al risultato. Dovresti usare o un po di javascript per farne fare il pareggio dinamico, oppure hai altre soluzioni solo con l'uso del css ma sono più o meno efficaci. Per darti una idea leggiti sta cosa:
http://www.hongkiat.com/blog/css-equal-height/ ci sono delle ottime alternative come la falsa colonna, il gradiente o altre tecniche più o meno semplici
Faccio una precisazione di una cosa che mi son ricordato adesso. Il margin-bottom e padding-bottom a -5000px e 5000px rispettivamente sono stati usati per una tecnica che ti permette di avere la colonna della sidebar ad altezza identica al container. Ma manca qualcosa per fare si che la sidebar stessa non sfondi il container. Credo sia un problema di overflowing ma devo vedere. Intanto ragionaci su da solo mentre appena ho un secondo vedo il problema dove sta
Re: Doppio padding-bottom
Inviato: 16/01/2017, 7:12
da frank
Al container ho tolto
overflow: initial !important; e sembra che dagli schermi '11 in su funzioni.
Codice: Seleziona tutto
/* Theme Layout */
#container {
font-size: 1em;
width:1250px;
}
Re: Doppio padding-bottom
Inviato: 16/01/2017, 13:07
da Sir Xiradorn
Il container deve avere assolutamente l'overflow in hidden non initial altrimenti non funziona l'equal column height