2011-07-14 2 views
0

J'aime vraiment ce que ce site a fait avec leur mise en page CSS. Y at-il des tutoriels que tout le monde peut me diriger vers/une explication de la mise en page - en particulier comment obtenir ces petites images liées à aligner sur l'image plus grande. Je suis un peu nouveau au design. Faites le moi savoir.Mise en page CSS d'un site Web particulier

Site: http://www.fssjax.org

Merci

+1

ces petites images sur la plus grande peuvent être de simples divs absolument positionnés ... Je vous suggère de chercher des tutoriels sur le positionnement absolu en CSS. –

Répondre

4

Télécharger Firefox's Web Developer Add-on et Firebug. (Chrome a quelque chose de similaire - probablement d'autres navigateurs aussi). Après leur installation, rendez-vous sur la page en question et cliquez sur Plan -> Elément courant de contour. Cela fera en sorte que tout ce que vous allez faire vous montrera une bordure rouge autour de lui - ce qui vous aidera à comprendre toutes les parties qui composent leur page. Puis, cliquez avec le bouton droit sur un élément et cliquez sur Inspecter l'élément (en bas des options contextuelles). Cela vous montrera le HTML sur la gauche et le CSS sur la droite - le moyen idéal pour apprendre comment ils mettent en page leur page.

+0

Merci beaucoup. Le plugin firefox était quelque chose que je n'avais aucune idée et aidé énormément. – TopChef

2

Télécharger Firebug pour Firefox, il vous permet de facilement contrôler les éléments sur une page web et voir leur css, etc. Chrome a également un Bult dans l'inspecteur.

Inspectez un élément, regardez le CSS puis Google pour savoir ce que le CSS fait si vous n'êtes pas sûr.

1

Bon ok, il est un peu une navigation de merde ... mais

Quoi qu'il en soit, la navigation est construit en utilisant l'attribut flotteur (http://www.w3schools.com/css/css_float.asp). Deux éléments (les conteneurs) sont placés séquentiellement, puis le premier (le nav) est flotté à la gauche de la seconde. L'attribut position (http://www.w3schools.com/cssref/pr_class_position.asp) est également utilisé pour le déplacer sur l'image.

Et comme les autres l'ont dit, utilisez Firebug pour comprendre ce que tout fait.