Besoin d'aide avec la mise en page CSS existant compréhension

Question

J'ai trouvé ce grand site Web avec différents exemples de mise en page à http://matthewjamestaylor.com

Et en particulier celui-ci: link text

(voir la source pour css complète et balisage)

Je suis en train d'apprendre css et je ne pouvais pas trouver où puis-je changer modifier la largeur des marges (de la gauche et les colonnes du milieu)

Chaque valeur dans cette mise en page est connecté à une autre, donc si je change à o ne placez cela change d'autres endroits.

Answer 1

Première étape: installez Firebug pour Firefox.

Il y a trois valeurs connectées dont vous avez besoin de changer: le width et right de la barre latérale (.col2), et la valeur left de la colonne du milieu (.colright).

Par exemple, essayez les modifications suivantes:

.colright { left: 300px; } 

.col2 { right: 250px; } 

Cela change la largeur de la barre latérale, mais pas sa largeur de texte (donc le texte semble avoir une plus grande marge).

Answer 2

Celle de gauche est commandée par:

.leftmenu .col2 { 
    float:left; 
    width:170px; 
    position:relative; 
    right:185px; 
} 

Note: la valeur right est supérieure à la largeur, qui est ce qui contrôle l'espacement gauche de cette colonne. Vous devez également modifier la dernière valeur de la marge.

.leftmenu .col1 { 
    margin:0 15px 0 215px; 
    overflow:hidden; 
    position:relative; 
    right:100%; 
} 

et 200px left figure ici:

.leftmenu .colright { 
    background:#FFFFFF none repeat scroll 0 0; 
    float:left; 
    left:200px; 
    position:relative; 
    width:200%; 
} 

Notez que le modèle? 15 pixels à gauche puis 170 pixels de contenu = 170 et 185. Ajoutez 15 pixels sur la droite, allez à la colonne suivante puis ajoutez 15 pixels de plus et vous êtes à 215 pixels.