TWBS: Come affrontare il problema di una barra superiore con altezza variabile?

**realtebo** · 16-09-2014, 09:25

Da circa un anno sto sviluppando un'app ad uso esclusivamente interno all'azienda dove lavoro, è sviluppata in PHP usando Yii 1 e, quasi ovviamente viste le mie limitate capacità come web designer/graphic/stylist, uso twitter bootstrap con un tema ed un layout persantemente modificato.

L'app è divisa in moduli, ogni mdulo ha il suo punto di accesso nella navbar superiore.
Il problema è che i moduli stanno diventando tanti e alcune volte, per alcuni utenti che vedono tantissimi moduli, visto dal tablet, la barra diventa su due righe.

Questo non sarebbe di per se un problema, anche se mi fa schifo, visto l'ambito esclusivamente professionale ed interno in cui viene usata. E nessuno dei 52 utenti se nè è mai lamentato.

Il vero problema è che la barra in cima è fissa, per cui il body ha un certo padding-top per permettere di 'scorrere' il contenuto senza calpestare la barra sopra. Quindi quando la barra diventa su due righe, le prime rige del contenuto sono 'nascoste' sotto la barra stessa.

Spero di essermi spiegato, sennò ditemi pure.

La mia domanda è questa: c'è modo usando TWBS di avere sia la barra superiore fissata in cima che un contenuto che 'parte' da sotto la barra, una specie di 'padding-top' variabile ?

**Prill** · 16-09-2014, 09:56

Con le media queries? Se la finestra è larga y (e so che con quella larghezza la barra si dispone su due righe) allora il padding-top sarà tot

**realtebo** · 16-09-2014, 10:37

grazie, forse non ho spiegato tutto.

Io uso già le media-query, ma il problema l'abbiamo anche alle dimensioni 'massime', tipo sopra a 1200px. Purtroppo non sta a me decidere i moduli, e a chi comanda e a chi li usa stan bene così, ma vorrei farci qualcosa.

diciamo che un utente, tipo io che essendo il developer ho la visibilità completa, ho lo schermo, che so..., largo 1200px. Con tredici moduli la barra va su due righe.

L'utente magazziniere ha sempre uno schermo largo 1200px ma vede solo tre moduli.

Se imposto il padding-top con le media query non ottengo quel che voglio, cioè che il contenuto si adatti al numero di righe della barra superiore e non posso far vedere al magazziniere il contenuto con 140px di padding perchè IO e altri due vediamo la barra su due righe.

Scusatemi se mi sono spiegato male, e grazie di nuovo per l'attenzione prestatami

**Enzaccio** · 16-09-2014, 14:06

Un bel layout a TABLE magari con pure un !DOCTYPE HTML 3 risolverebbe tutto e ti funzionerebbe in maniera spettacolare; ma è obsoleto.

Eh, il progresso ...

**realtebo** · 16-09-2014, 14:29

Stavo cercando il tasto grazie ma non lo trovo ... a parte gli scherzi, davvero nessuna soluzione?

**Enzaccio** · 16-09-2014, 14:34

In che modo ".. la barra in cima è fissa .." ? position: fixed; ? absolute con Body converso in DIV 's ? JavaScript che la mantiene fissa ma spostandola ?

**realtebo** · 17-09-2014, 11:41

position: fixed

**Enzaccio** · 18-09-2014, 12:31

Originariamente inviata da realtebo

position: fixed

che da' problemi di compatibilità con versioni anche recenti di IExplorer che non lo riconosce, e lo esegue come position: static; (nemmeno absolute). Di solito si compensa con uno SCRIPT che ri-posiziona il DIV allo scrollare della pagina: il risultato è spesso una barra tremolante su IE; ora non so questo se c'è nell' insieme htm+script del tuo "coso", ma soprassediamo.

JavaScript consente un workaround che risolve perfettamente il tuo problema. Ti posto un modellino, aprilo con un Mozzilla/netscape per vederlo all' opera: ridimensiona la finestra col trascina e vedi come tutto s' aggiusta.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>plastic bar</title>


<script type="text/javascript">

function adjustBar(){

 var barHeight=window.document.getElementById("navbar").offsetHeight;

 document.getElementById("container").style.marginTop=barHeight + "px";

 document.title=barHeight;
 
}
</script>

<style type="text/css">
 
.modulo {float: left; width: 80px; height: 70px; margin: 2px; border: 1px dashed green}
</style>

</head><body onload="adjustBar();" onresize="adjustBar();">

<div id="navbar" style="position: fixed; padding: 2px; border: 1px dashed red">

<div class="modulo"></div><div class="modulo"></div>
<div class="modulo"></div><div class="modulo"></div>
<div class="modulo"></div><div class="modulo"></div>
<div class="modulo"></div><div class="modulo"></div>
<div class="modulo"></div><div class="modulo"></div>
<div class="modulo"></div><div class="modulo"></div>
</div>

<div id="container" 
  style="position: absolute; left: 8px; 
         width: 100%; height: 1000px; 
         margin-top: 82px; border: 1px dashed blue"><h2>
bla . . . <br>bla . . . bla . . . bla . . . bla . . . <br>bla . . . bla . . . bla . . . bla . . . </h2></div>

</body>
</html>

Discussione: TWBS: Come affrontare il problema di una barra superiore con altezza variabile?

Strumenti discussione

Ricerca discussione

Visualizza

TWBS: Come affrontare il problema di una barra superiore con altezza variabile?

Tag per questa discussione

Permessi di invio