2009-05-13 7 views
0

Je veux que le texte principal du html (div.main) pour être près de la taille de papier standard (8.5inch - marge 1Dans sur les deux = 6,5)Une meilleure css div align (3 colonnes, milieu grand)

I Je veux que mon menu de barre latérale soit en dehors de ça. Donc j'ai compris comment verrouiller la page à près de 1024 res (j'utilise 996px donc j'ai de la place pour la barre de défilement verticale)

Cela semble assez bonne à 1024 et 1280 résolution de largeur, mais je ne suis pas sûr de plus élevé. Aussi peut-être vous les gars avez une suggestion à mieux aligner ce (en gardant le 6.5in au centre)

index.html

<div> 
    <div class="menu"> 
    <ul> 
    <li><a href="">Home</a></li> 
    <li>Test</li> 
    <li>Test 2</li> 
    <li>Contact</li> 
    </ul> 
    </div> 
</div> 

<div class="row"> 
<div class="dummy">&nbsp;</div> 

<div class="main"> 
lots of textlots of textlots of textlots of textlots of textlots of textlots of textlots of text 
... 
lots of textlots of textlots of textlots of textlots of textlots of textlots of textlots of text 
</div> 

<div class="sidebar"> 
Some links here</br> 
<br>Some links here</br> 
<br>Some links here</br> 
<br>Some links here</br> 
<br>Some links here</br> 
</div> 
</div> 


</body> 
</html> 

my.css:

div.row 
{ 
    width: 996px; 
    margin-left: auto; 
    margin-right: auto; 
} 

div.dummy { 
    float: left; 
    padding-right: 148px; 
} 

div.sidebar { 
    float: left; 
    padding-left: 32px; 
} 

div.main 
{ 
    width: 6.5in; 
    float: left; 
} 

.menu { padding-bottom: 60px; } 
.menu ul { margin:0px auto; } 
.menu li { 
    width: 22%; 
    text-align:center; 
    display:block; 
    float:left; 
    } 
.menu a { display:block; } 
+1

Je ne sais pas mac, mais 6,5 pouces sur ma tablette et sur mon moniteur de bureau ont chacun des dimensions de pixels différents! – syockit

Répondre

1

Les pixels sont de largeur variable, entièrement dépendante de l'appareil de visualisation. À l'extrême, par exemple, un iPhone est d'environ 2 pouces de large avec une largeur de 380px. Un écran de 15 "mesure environ 8 pouces de largeur et 800 pixels de largeur.Par conséquent, un iPhone est environ 4 fois la résolution

En outre, si vous changez la résolution du même moniteur - de 800x600 à 1024x768 - vous avez maintenant plus de pixels Le seul moyen de contourner cela est d'utiliser pt s au lieu de px s 72pts est d'environ 1 pouce. Personnellement, je n'utilise jamais pt s, mais j'ai entendu dire que les navigateurs sont très incohérents dans leur traitement des CSS qui les utilisent. fic question, par conséquent, vous auriez besoin d'utiliser une taille fixe globale sur la page qui est suffisante pour contenir votre sidebar et votre div #main. Flotter un à gauche, et l'autre à droite.

+0

Dans une application idéale, 'pt' sera la réponse. Malheureusement, la plupart des applications n'honorent pas les paramètres dpi, et en tant que tel, 'pt' sera juste une multiplication de' px' (par exemple 10pt = 16px à 96 dpi) – syockit