| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
MAIDEN
Habitué(e)
Inscrit le: 31 Juil 2004
Messages: 577
Localisation: Si je t'écrit, d'aprés toi je suis devant mon grille pain ?
|
 Posté le: 20 Aoû 2006 22:36 Sujet du message: [Regle] A la recherche du design idéal |
 |
|
Bonsoir tout le monde,
J'ai remarqué que depuis quelques temps cette section ressemble de plus en plus a un formulaire de demande de decoupe  .
Certe ma demande touche au xHTML/CSS, mais mon travail et presque finit et j'aurais juste besoin de quelques reponse, et, pour faire honneur au titre de mon message, d'un GROS coup de main pour regler les details persistants me genant dans la finalisation de ma maquette.
Je souhaiterais rajouter un fond, qui manque tellement, à mon site qui ne devrais pas tarder à sortir de son sommeil.
Ceci etant dit je passe à la réalisation du fond (trés simple je l'avoue) et la decoupe.
J'ai mis en place le code CSS mais je me retrouve avec quelques questions :
-Mon image de fond est un degradé, il est donc impensable d'utiliser la fonction background-repeat, y a-t'il un moyen "d'étirer" l'image avec la longueur de mon block principal ?
-En 1280x1024 mes images sont parfaitements racordées avec un margin: -3px; pour le block central, mais lorsque l'on a une autre resolution les images sont alors séparées, j'aurais besoin d'un coup de main. (cf image 1)
Merci d'avance.
(Et oui j'aime le gris  , comme le dirai ma prof d'art plastique "je suis faché avec la couleur", et avec elle aussi d'ailleur ...)
[EDIT] Désolé pour la qualité des images mais je les ai compressées au maximun afin de prendre le moins de place.
| Description: |
| Le probleme lorsque la page s'affiche sous une autre resolution que 1280x1024 |
|
| Taille du fichier: |
15.51 Ko |
| Vu: |
774 fois |
|
| Description: |
| Le rendu souhaité sous toutes les résolutions. |
|
| Taille du fichier: |
35.29 Ko |
| Vu: |
774 fois |
|
| Description: |
| Le fichiers index.html + les images + les CSS |
|
Télécharger |
| Nom du fichier: |
codes-source.zip |
| Taille du fichier: |
3.88 Ko |
| Téléchargé: |
38 fois |
_________________
- Dont feed the troll ...
- Linux is like sex : It's better when it's free !!!
Dernière édition par MAIDEN le 29 Aoû 2006 22:21; édité 1 fois |
|
| Revenir en haut de page |
|
 |
MAIDEN
Habitué(e)
Inscrit le: 31 Juil 2004
Messages: 577
Localisation: Si je t'écrit, d'aprés toi je suis devant mon grille pain ?
|
| Posté le: 22 Aoû 2006 20:10 Sujet du message: |
|
|
Un petit Up, si un Gounlaf passe dans le coin 
Je suis pas susceptible moi 
_________________
- Dont feed the troll ...
- Linux is like sex : It's better when it's free !!!
|
|
| Revenir en haut de page |
|
|
Gounlaf
Accro
Inscrit le: 26 Juin 2004
Messages: 7123
Localisation: http://peet.fr
|
|
| Revenir en haut de page |
|
|
MAIDEN
Habitué(e)
Inscrit le: 31 Juil 2004
Messages: 577
Localisation: Si je t'écrit, d'aprés toi je suis devant mon grille pain ?
|
| Posté le: 22 Aoû 2006 20:46 Sujet du message: |
|
|
Merciiii, tu peux pas savoir comme tu me fait plaisir là !
Je vais enfin pouvoir ameliorer mon code (deja là il est pas super propre ........ *_*) et avoir un design potable.
_________________
- Dont feed the troll ...
- Linux is like sex : It's better when it's free !!!
|
|
| Revenir en haut de page |
|
|
Gounlaf
Accro
Inscrit le: 26 Juin 2004
Messages: 7123
Localisation: http://peet.fr
|
| Posté le: 22 Aoû 2006 21:15 Sujet du message: |
|
|
Bien, plusieurs petites choses ...
- ON NE TOUCHE PAS AU BODY !
On y règle que certaines propriétées élémentaires (tu le verras dans les fichiers joints)
- L'indentage purement en ligne, c'est pas top. Des l'instant où l'élément est caractérisés par plus de 3 propriétés (en moyenne), il vaut mieux passer a un indentage "classic", donc une propriete, un retour chariot, un tab etc ... (voir fichier joint aussi).
- Concernant ton code, en général, ca va.
- Concernant ta sémantique, c'est à chier. "Tout" est à revoir (quasiment) :
- L'insertion d'un texte se fait dans un paragraphe <p></p>. Le div n'est qu'un conteneur, servant à une mise en page plus pousée. Il est tres pratique pour regrouper différents éléments.
- Les titres importants sont défins par les balises hX, X allant de 1 a 6, 1 étant le plus important.
Sémantiquement parlant, <h1></h1> sert a définir le titre de ton site, tout comme la balise <title></title>. Si le titre ne doit apparaitre que dans "le haut de la page, la barre url", on défini quand meme le h1, mais on le masque (voir astuces plus bas).
Donc ton "Bienvenue ...." n'a rien a faire dans un h1. Il serait mieux dans un h2.
- Le CSS est fait pour séparer le texte du design. Ainsi, dans ton code xHTML, tu ne doit retrouver aucun élément du design en tant qu'image ( <img /> ), ormis le logo du site (s'il y en a), ceci pour la simple raison qui suit : si tu imprimes ton site, l'imprimante ne prend pas en compte par défaut les CSS (enfin je ne suis pas sur, ca dépend aussi du media défini pour l'appel du css), et n'imprime que le texte. Donc tu te trouves avec une page blanche, et un logo, et non un bout de design (entre autre ton header et ton footer). Ainsi, tu doit définir a ton header, et ton footer, une image de fond, et laissé un div vide (hélas). <--- Hélas, car, logiquement, et sémantiquement, un élément sans contenu doit être comme ceci : < />. Comme les <hr />, et les <img />. Or, sous IE, et FF il me semble, un <div /> est mal interperté, contrairement a un <div></div>.
Par contre, les images tel les smileys, ou une image d'illustration etc, doivent être appelées en tant qu'image (<img />), car elles font parties du contenu de ton site, et non du design.
Du coup, tes marges négative, tu les vires (et leur "necessite", le fait que t'as du les mettre dans ton cas, est expliqué un peu plus bas).
Donc, pour résumer dans ton cas précis, <div id="top"></div> ... <div id="bottom"></div>, et l'image de fond défini en background.
- Le coup du "dégradé extensible" ... c'est dla bidouille pur et dur : donc tu laisses ton "top" (rectifié apres avoir lut le point précédent
 ). Ton dégradé sera en repeat-x du div#corp. Et le footer, tu le fait sur fond transparent (juste l'intérieur).
Ainsi, suivant la longeur de ton texte, le corp prendant plus ou moins de place, et le footer transparent sera "gris" ou blanc a l'intérieur
- Concernant les marges négatives que t'as du mettre : et bien, tu as insere les top et bottom en tant qu'images. Ceci "rempli" ton div, tel un texte. Et tout texte à une taille ... Dans le cas d'une image, ca créer une marge (je ne sais plus si elle varie ou non). Donc, s'il devait t'arriver de foutre une image dans un div seule, tel ton "bottom", et bien, tu appliques un font-size:0; ... mais, dans bien des cas, ca ne t'arriveras pas, car tu aura défini l'image en tant que background .
Maintenant, voici une feuille de style(s ? je sais jamais :/) et une page xhtml pre-formatées (surtout la css).
Le body est donc défini avec le strict minimum, pour éviter tout conflit. Ensuite, une généralisation de certaines balises courantes est fait, pour éviter encore une fois tout conflit. Ainsi, toute valeur étant défini a 0, ou a 100%, fait que tu doit préciser (ou non) pour tes différents éléments, un margin, un padding, un font-size ou autre ... Mais dans tout les cas, plus de probleme de décalage ou autre imprévu, étant donné qu'on a défini des valeurs de bases à "0".
La class hid (tu peux l'appelé autrement) sert a masqué un ou des éléments. Ce n'est pas un display:hidden, car les lecteurs d'écran (les programmes qui parlent quoi, il lise ce qu'il ya a l'écran xD) lisent cet élément (hors il ne le devraient pas ...).
Donc dans ton cas, tu peux masquer ton h1, comme ceci : <h1 class="hid">La page perso de MAIDEN</h1>
Voilà pour l'instant, c'est déjà beaucoup et peu a la fois. Si tu n'a pas compris certaines choses, n'hésite pas
| Description: |
|
Télécharger |
| Nom du fichier: |
cadeau.zip |
| Taille du fichier: |
1.46 Ko |
| Téléchargé: |
38 fois |
_________________
Intégration xHTML & CSS - Portfolio - www.Gounlaf.com
Au Badge Insolent V2 encore plus mieux ! |
|
| Revenir en haut de page |
|
|
MAIDEN
Habitué(e)
Inscrit le: 31 Juil 2004
Messages: 577
Localisation: Si je t'écrit, d'aprés toi je suis devant mon grille pain ?
|
| Posté le: 22 Aoû 2006 21:39 Sujet du message: |
|
|
Merci beaucoup, tu m'impressionne, tout ca m'a l'air trés interressant, je m'y plonge dés que j'ai finit de re-reinstaller ma Debian.
Pour le probleme de semantique notement le fait que je n'utilise pas de <p></p> je comptais le regler aussitot que possible.
Bon dés que peut m'y remettre, demain matin ou aprem donc, je te repond.
Merci encore.
_________________
- Dont feed the troll ...
- Linux is like sex : It's better when it's free !!!
|
|
| Revenir en haut de page |
|
|
Gounlaf
Accro
Inscrit le: 26 Juin 2004
Messages: 7123
Localisation: http://peet.fr
|
|
| Revenir en haut de page |
|
|
MAIDEN
Habitué(e)
Inscrit le: 31 Juil 2004
Messages: 577
Localisation: Si je t'écrit, d'aprés toi je suis devant mon grille pain ?
|
| Posté le: 22 Aoû 2006 21:51 Sujet du message: |
|
|
Ca va je comprend sans soucis, mais comme le Web n'etait pas ma priorité jusque la (je me met tranquilou au PHP) j'ai raté quelques wagons.
Pour tout dire j'ai decouvert que le standard n'etais plus le HTML 4.0 il y a ..... un an ! Pis le CSS j'y ai jamais vraiment touché quand je faisais mes sites, donc j'ai essayé de ratraper mon retard dans ce domaine le plus vite possible, ce qui fait que j'ai toujours besoin d'aide dans ce domaine.
_________________
- Dont feed the troll ...
- Linux is like sex : It's better when it's free !!!
|
|
| Revenir en haut de page |
|
|
Loira
Administratrice
Team BP
Inscrit le: 13 Nov 2004
Messages: 36511
Localisation: Rhône-Alpes
|
| Posté le: 22 Aoû 2006 22:41 Sujet du message: |
|
|
Ben dis donc, Gounlaf, quand tu t'y mets...
_________________
Merci à Zarumbatus, auteur de mon avatar ! |
|
| Revenir en haut de page |
|
|
Kitsune
VIP
Inscrit le: 14 Déc 2002
Messages: 8745
Localisation: Terrier normand sous ce p***** de crachin
|
| Posté le: 22 Aoû 2006 22:53 Sujet du message: |
|
|
même moi qui m'y connais vraiment que de très loin j'ai tout compris...
dailleurs je m'en sors moins bête ^^
merci pour le petit cours goun
_________________
 |
|
| Revenir en haut de page |
|
|
Gounlaf
Accro
Inscrit le: 26 Juin 2004
Messages: 7123
Localisation: http://peet.fr
|
|
| Revenir en haut de page |
|
|
ShadowKris
VIP
Inscrit le: 27 Sep 2004
Messages: 2301
|
| Posté le: 23 Aoû 2006 2:39 Sujet du message: |
|
|
Gounlaf il déchire en xHTML/CSS
c'est mon prof de sémantique :]
en tout cas très bien expliqué, on comprend parfaitement :]
et chouette design Maiden
_________________
Mon PortFolio : http://www.shadowkris.com | Blog : http://blog.shadowkris.com |
|
| Revenir en haut de page |
|
|
ZaK
Team BP
Inscrit le: 03 Juil 2004
Messages: 4549
Localisation: Chez moi avec Eileen et Lemerou :)
|
| Posté le: 23 Aoû 2006 3:15 Sujet du message: |
|
|
| Ben oui qu'il est fort notre Gouniaf ^^'
|
|
| Revenir en haut de page |
|
|
Gounlaf
Accro
Inscrit le: 26 Juin 2004
Messages: 7123
Localisation: http://peet.fr
|
|
| Revenir en haut de page |
|
|
MAIDEN
Habitué(e)
Inscrit le: 31 Juil 2004
Messages: 577
Localisation: Si je t'écrit, d'aprés toi je suis devant mon grille pain ?
|
|
| Revenir en haut de page |
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
Vous ne pouvez pas joindre des fichiers
Vous pouvez télécharger des fichiers
|
[ Association 2037.org,
infrastructure & serveur model-fx ] ::
[ phpBB © 2001, 2002 phpBB Group ]
[ Guntar Ze Smiley © ZeCorp. Created by Christophe Soudron ]
|
