background preloader

Div et CSS : une mise en page rapide et facile

Div et CSS : une mise en page rapide et facile
Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!! Related:  PROJET HTML

Exemple de conception d'un site dynamique Passons maintenant à la création de la base de données. Commencez par créer une base nomée BASE_TEST. Nous allons ensuite créer la table `pages`, en fonction des besoins ennoncés ci-dessus : Id_page : int auto_increment (clé primaire): identifiant unique Titre : varchar(255) : titre Mots_cles : varchar(255) : mots-clés Description : varchar(255) : description Contenu : text : contenu Id_parent : int : Identifiant de la page parent Afin de définir la page 'racine' du site, nous allons déclarer que son Id_parent vaudra 0. Code SQL correspondant Sélectionnez CREATE TABLE `pages` ( `Id_page` INT NOT NULL AUTO_INCREMENT , `Titre` VARCHAR( 255 ) NOT NULL , `Mots_cles` VARCHAR( 255 ) NOT NULL , `Description` VARCHAR( 255 ) NOT NULL , `Contenu` TEXT NOT NULL , `Id_parent` INT DEFAULT '1' NOT NULL , PRIMARY KEY ( `Id_page` ) ); Pour le champ Id_parent, j'ai choisi 1 comme valeur par défaut, afin d'éviter que par mégarde plusieurs pages ne se retrouvent avec soit une valeur nulle soit 0 comme parent.

Osez HTML5 et CSS3 ! Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres". A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.

Crer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !

Menu déroulant – FrogWeb Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative). Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ». Rien ne vous empêche également de les laisser.

Espacement en CSS (padding) Cours CSS, Cascading Style Sheets Défintion Le "Padding", c'est la distance entre le bord d'un élément HTML et son contenu Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage CSS sur ce lien) Syntaxe CSS Voici comment ce construit une notion de padding en CSS : padding-top: espace en pixels ou pourcentage; padding-left: espace en pixels ou pourcentage; padding-right: espace en pixels ou pourcentage; padding-bottom: espace en pixels ou pourcentage; Gestion de la valeur du padding : Vous avez 2 possibilités : 1 Espace en pixels (exemple 10px) 2 Pourcentage (70%) Vous pouvez aussi déclarer vos marges comme cela :padding: 10px 10px 10px 10px; Les valeurs définissent l'espace entre les éléments HTML dans cet ordre : 1 haut 2 droite 3 bas 4 gauche A savoir : Si ne renseignez qu'une valeur, elle sera prise par défaut pour les autres espaces entre les éléments HTML : padding: 10px; Si vous renseignez deux ou trois valeurs, elles seront la références pour les cotés opposés :

L'arborescence d'un site web la base d'un projet réussi Rappelons qu'un site internet est composé de plusieurs pages et contenus qui peuvent être de natures différentes : liste d'actualités, un forum de discussion, une page contact, un extranet, etc.L'arborescence permet d'organiser ce contenu de manière logique et hiérarchisée. Arborescence vs navigation Attention à ne pas confondre la navigation du site avec son arborescence même si ces deux notions sont très proches. Effectivement à l'heure où les sites sont de plus en plus maillés et interactifs, on accède de multiples manières à un même contenu. Par exemple, la page d'accueil d'un site peut accueillir une grosse animation flash qui met en avant certaines parties, également accessibles par le menu principal, mais aussi par des modules annexes dans d'autres sections du site. La problématique de navigation intervient d'ailleurs après l'arborescence du site web, puisqu'elle est étroitement liée à son ergonomie et à son design. Comment représenter les informations ?

Initiation au positionnement CSS : 3. position absolue et fixe La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML. Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. En CSS :

Structure HTML et rendu CSS des balises : bloc et en-ligne La compréhension de la structure des éléments HTML est paradoxalement un sujet peu connu des développeurs web. Bien souvent sont évoqués des éléments de type bloc et des éléments de type en-ligne. Il faut savoir que ces désignations sont quelque peu faussées car elles mélangent une partie des spécifications HTML (qui proposent des catégorisations d'éléments) et une partie des spécifications CSS (qui proposent des modèles de rendus). Historiquement, HTML ne proposait que deux catégories d'éléments : les éléments de niveau block et les éléments de niveau inline. Cette catégorisation autorise ou non certaines imbrications (par exemple un niveau inline de peut pas contenir de niveau block). En HTML5 La catégorisation est améliorée et modifiée depuis HTML5. Le flux (flow) regroupe la plupart des éléments courants, c'est-à-dire les autres sous-modèles cités ci-après, ainsi que le contenu texte simple. Emboîtements En HTML4 et XHTML 1.x Voir la liste HTML4 des éléments de rendu En-ligne. block none

27 Templates HTML5/CSS3 Gratuits pour Sites d'Entreprise | Beaux Themes Voici une liste de superbes templates HTML5 et CSS3 gratuits qui vous aiderons à créer le site internet de votre business (entreprise) avant ce soir minuit. Voyez de vous même. Il y a quelques années, la création de sites internet était tout un casse-tête surtout pour les débutants en HTML et CSS. Mais aujourd’hui avec le grand avènement des templates, le temps et l’énergie requis pour concevoir un site web unique, fonctionnel et professionnel ont été considérablement réduis. Si vous êtes sur cette page, c’est surement parce que vous désirez gagner du temps, de l’énergie et de l’argent lors de la création de vos sites internet. Et bien si c’est le cas, alors vous êtes au bon endroit. Cette liste de templates HTML5/CSS3 gratuits contient les meilleurs templates dont vous aurez besoin pour la création du site internet de votre compagnie. Toutes les pages html, les images, les css, les js et même les fichiers psd vous sont offerts lors du téléchargement. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

Introduction au CSS3 Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d’en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s’agit de la suite logique de l’Introduction à l’HTML5, mais elle peut être lue indépendamment. Sommaire Le CSS3 c’est quoi ? Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1. Mais le CSS3 c’est également un ensemble de nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan… bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur, l’est au développeur également ! Exemple pratique : Les bordures arrondies Et vous vous dites : Avec pour CSS : Non. à

Créer sa première page web: code html d'un page web Nous allons a présent éditer la page que l'on vient de créer (pour le moment, elle est vide), pour cela nous avons besoin d'un éditeur de texte comme le bloc-note (notepad en anglais). Dans le menu Démarrer de windows, vous allez trouver le menu "executer..." tapez notepad Une fois le notepad ouvert, allez dans le menu fichier, et ouvrez index.htm il ne vous reste plus que a saisir le texte ci dessous. Sauvez. Pour vérifier que votre page à bien été créée, double-cliquer sur le fichier index.htm. Pour plus d'informations sur le document html et son contenu, rendez vous dans la section html de ce site pour mieux comprendre le html. Rendez vous dans la section "mon premier site pas à pas" pour créer plusieurs pages et des liens entre elles...

Initiation au positionnement CSS : 2.position float La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. Comment l’utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS : 1.Flux et position relative. Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre. Le fonctionnement des flottants Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative, mais utile pour certains navigateurs) : En HTML: <p class="jaune">Une boîte jaune flottant</p><p class="verte">Une boîte verte doté d'un contenu plus long…</p> En CSS: Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 Première utilisation : une mise en page à deux colonnes En CSS : Et en HTML :

Arrire-plans avec CSS 3 Backgrounds CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale background-image: url("image1"), url("image2"); background-position: x y, x y; background-repeat: no-repeat; Les différentes valeurs doivent être ajustées en fonction du nombre d'images à charger et de leurs positions respectives. L'ordre de déclaration est important : dans l'exemple ci-après, la position left top s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Démonstration Prise en charge

Télécharger Quick Slide Show gratuit

Related:  html - css- javascriptdesign avancé