1. Accueil
  2. Question et réponse
  3. jQtouch CSS Header Bar

jQtouch CSS Header Bar

2009-10-28 8 views
2

J'utilise jQtouch pour une petite application mobile. En utilisant le default CSS l'application ressemble à ce que je veux. Cependant, j'ai besoin d'un en-tête à gauche et à droite de la page. Par exemple, alt text http://shaiperednik.com/img/AV-Clock-20091028-084713.pngjQtouch CSS Header Bar

Si quelqu'un peut me diriger dans la bonne direction pour y parvenir, je l'apprécierais grandement. Je vous remercie!

Source

2009-10-28 shaiss

+0

ma solution temporaire était d'utiliser des tables, mais je pense qu'il devrait y avoir un bon css façon de le faire. – shaiss

Répondre

2

Que diriez-vous de certains css standard? Quelque chose comme ceci:

div.leftHeader 
{ 
    float: left; 
} 
div.rightHeader 
{ 
    float: right; 
} 
div.clear 
{ 
    clear: both; 
}

Et puis utilisez ce code HTML:

<div class="leftHeader">In</div> 
<div class="rightHeader">Day/Week</div> 
<div class="clear"></div>

Source

2009-11-11 10:14:07

+0

Je dois marquer celui-ci comme bon parce que cela fonctionne et son utilisation de CSS. Les tables sont mauvaises http://goo.gl/TLm6 – shaiss

+0

L'utilisation de '

' pour la mise en page est mauvaise, mais l'utiliser pour afficher les données tabulaires est sémantiquement correct. Et CSS est également utilisé pour le style '
'. – JohnB

2

shaiss,

Je pense que l'aide est <table> sélecteurs le chemin à parcourir. À mon avis, votre application affiche des données tabulaires. Par conséquent, je pense "In" et "Day/Week" devrait être en-têtes de colonne. Utilisez <th></th> au lieu d'un <td></td> pour définir les cellules d'en-tête. Vous devez envelopper <th> dans <tr></tr> et <thead> et <tbody> sont facultatifs:

<table> 
    <thead> 
    <tr><td>col1</td><td>col2</td></tr> 
    </thead> 
    <tbody> 
    <tr><td>data1</td><td>data2</td></tr> 
    </tbody> 
</table>

Ensuite, vous pouvez positionner le <th> avec le "In" comme ceci:

thead th.left 
{ 
    text-align: left; 
}​

code source complet ici: http://jsfiddle.net/g3MKj/

Bien sûr, quelque chose comme le code de Jan Aagaard pourrait fonctionner pour vous. Mais juste pour le plaisir d'apprendre, une autre façon d'accomplir la même chose en CSS est:

span.absolute-right 
{ 
    position:absolute; 
    right:0; 
    margin-right:10px; 
}

HTML:

<span>In</span> 
<span class="absolute-right">Day/Week</span>

Je cet exemple, et Jan Aagaard de, plus un autre exemple en utilisant position:relative ici : http://jsfiddle.net/L7fTp/

Source

2010-06-02 22:10:19 JohnB

Questions connexes

 Questions connexes