Besoin d'aide pour le font de mon site
youg
-
p@stelle Messages postés 99 Date d'inscription Statut Membre Dernière intervention -
p@stelle Messages postés 99 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis étudiant en infographie, j'ai donc déja due créé un site web, seulement il s'agissait d'un site assez basique. C'était surtout pour apprendre les bases et découvrir le logiciel.
Aujourd'hui j'aimerai en refaire un, mais je suis déja bloqué au tout début, ca promet... :D
En effet, mon premier site devait respecter certaines restrictions, comme une résolution de 800x600. Or dans celui-ci, j'aimerai que le fond de mon site prenne tout l'écran, peut importe la résolution de mon visiteur.
Je voudrai donc un fond "extensible" (assez basique, composé de deux dégradés linéaires) sur lequel viennent se plaquer les deux parties principales de mon site (l'entête et le corps), qui elles seront de taille fixe.
Je voudrai savoir comment procéder pour mettre en place cette idée de fond "extensible" . Dois-je créer une première balise div avec une hauteur bien définie, en choisissant comme fond une image de 1px de large que je répète x fois sur l'axe des x. Ensuite à ca je recrée deux balise div (une pour l'entête et l'autre pour le corps) que je dispose au centre ?
Bref je ne sais pas trop comment m'y prendre.
J'en profite aussi pour vous demander, est-il plus avantageux de procéder avec des balises div ou à l'aide de tableau.
D'avance un grand merci a ceux qui auront pris la peine de me lire :-)
PS : Si qqn connait un bon tuto sur le net (vidéo ou écrit, peut importe) expliquant justement comment remédier a mon problème, je suis preneur ! :D
je suis étudiant en infographie, j'ai donc déja due créé un site web, seulement il s'agissait d'un site assez basique. C'était surtout pour apprendre les bases et découvrir le logiciel.
Aujourd'hui j'aimerai en refaire un, mais je suis déja bloqué au tout début, ca promet... :D
En effet, mon premier site devait respecter certaines restrictions, comme une résolution de 800x600. Or dans celui-ci, j'aimerai que le fond de mon site prenne tout l'écran, peut importe la résolution de mon visiteur.
Je voudrai donc un fond "extensible" (assez basique, composé de deux dégradés linéaires) sur lequel viennent se plaquer les deux parties principales de mon site (l'entête et le corps), qui elles seront de taille fixe.
Je voudrai savoir comment procéder pour mettre en place cette idée de fond "extensible" . Dois-je créer une première balise div avec une hauteur bien définie, en choisissant comme fond une image de 1px de large que je répète x fois sur l'axe des x. Ensuite à ca je recrée deux balise div (une pour l'entête et l'autre pour le corps) que je dispose au centre ?
Bref je ne sais pas trop comment m'y prendre.
J'en profite aussi pour vous demander, est-il plus avantageux de procéder avec des balises div ou à l'aide de tableau.
D'avance un grand merci a ceux qui auront pris la peine de me lire :-)
PS : Si qqn connait un bon tuto sur le net (vidéo ou écrit, peut importe) expliquant justement comment remédier a mon problème, je suis preneur ! :D
A voir également:
- Besoin d'aide pour le font de mon site
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
- Site pour partager des photos - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
19 réponses
Bonjour,
Il faut que tu utilise une div id="globale", qui contiendra tout ton contenu.
Les width et height doivent être exprimés en pourcentage. C'est à dire 90% ou 100% de la résolution du visiteur.
Ajoute également un max-width et min-width pour les très petites et très grandes résolutions.
Pour t'aider à commencer voici un lien qui te propose plusieurs gabarits types.
Choisis de préférence le gabarit qui présente une "largeur fluide intelligente" qui s'adaptera à toutes les résolutions. Tout est expliqué ici:
http://www.alsacreations.com/static/gabarits/
Et surtout évite les tableaux...
Il faut que tu utilise une div id="globale", qui contiendra tout ton contenu.
Les width et height doivent être exprimés en pourcentage. C'est à dire 90% ou 100% de la résolution du visiteur.
Ajoute également un max-width et min-width pour les très petites et très grandes résolutions.
Pour t'aider à commencer voici un lien qui te propose plusieurs gabarits types.
Choisis de préférence le gabarit qui présente une "largeur fluide intelligente" qui s'adaptera à toutes les résolutions. Tout est expliqué ici:
http://www.alsacreations.com/static/gabarits/
Et surtout évite les tableaux...
Merci de ta réponse.
des que je rentre, je jète un coup d'oeil à ton lien qui à l'air très intéressant à première vu;-)
des que je rentre, je jète un coup d'oeil à ton lien qui à l'air très intéressant à première vu;-)
petite question, si je procède comme tu dis, avec la largeur et hauteur exprimée en pourcentage, il n y a pas de risque que mon site perde ses proportions ?
Autre petites question, j'ai telechargé certains templates pour voir un peu leur maniere de procéder et dans toux ceux que j'ai qui n'ont pas un fond de couleur unis il procède en sélectionnant un fragmant de 1px de large sur toute la hauteur du site qu'il répète x fois sur l'axe des x.
Dois je procéder ainsi aussi ?
Donc si j'ai bien compris, avec ta maniere de procéder, je fais le design de mon site dans photoshop (par exemple 1024 / 1300 px)
Ensuite je définie mes différentes parties (header, body, footer)
Je vais dans dreamweaver, je crée une balise container qui va contenir tout mon site. A cette balise, au propriétés "width" et "height" je met 100%.
Dans cette balise je crée 3 nouvelles balise (header, body, footer) et la je dois entrer des données fixes ou aussi en % ?
Pour finir je n'ai plus qu'a mettre le contenu dans les balises.
C'est bien ca ?
Merci ;-)
Autre petites question, j'ai telechargé certains templates pour voir un peu leur maniere de procéder et dans toux ceux que j'ai qui n'ont pas un fond de couleur unis il procède en sélectionnant un fragmant de 1px de large sur toute la hauteur du site qu'il répète x fois sur l'axe des x.
Dois je procéder ainsi aussi ?
Donc si j'ai bien compris, avec ta maniere de procéder, je fais le design de mon site dans photoshop (par exemple 1024 / 1300 px)
Ensuite je définie mes différentes parties (header, body, footer)
Je vais dans dreamweaver, je crée une balise container qui va contenir tout mon site. A cette balise, au propriétés "width" et "height" je met 100%.
Dans cette balise je crée 3 nouvelles balise (header, body, footer) et la je dois entrer des données fixes ou aussi en % ?
Pour finir je n'ai plus qu'a mettre le contenu dans les balises.
C'est bien ca ?
Merci ;-)
Bonjour,
- Pour le fond tu peux mettre ton "background" sur la balise <body> ainsi quelque soit la taille de ton contenu ton fond sera visible sur toute la fenêtre de ton navigateur.
- Pour fixer une taille à ton site il suffit de définir une balise <div> qui sera la première balise de ta page et qui contiendra toutes les autres. Exemple ci-dessous :
<style>
#container{
width:960px;
margin:0 auto;
}
</style>
<body>
<div id="container">
<div id="header"></div>
<div id="section"></div>
<div id="footer"></div>
</div>
</body>
- Pour le fond tu peux mettre ton "background" sur la balise <body> ainsi quelque soit la taille de ton contenu ton fond sera visible sur toute la fenêtre de ton navigateur.
- Pour fixer une taille à ton site il suffit de définir une balise <div> qui sera la première balise de ta page et qui contiendra toutes les autres. Exemple ci-dessous :
<style>
#container{
width:960px;
margin:0 auto;
}
</style>
<body>
<div id="container">
<div id="header"></div>
<div id="section"></div>
<div id="footer"></div>
</div>
</body>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
1)
Non, ton site ne perdra pas ses proportions. Tu appliques une valeur en pourcentage à ta div globale.
Tu peux mettre la taille des balises "internes" en em ou px. Tu vas te rendre compte que c'est presque impossible à gérer de mettre toutes les tailles de div en %.
2)
Tu as plusieurs manières de procéder pour ton background:
Soit c'est un motif et tu crées une image de 1px que tu répètes en x et y, comme expliqué dans tes templates.
Soit c'est une seule couleur unie et tu mets un background-color sur ton body (en sachant que tu pourras appliquer d'autres couleurs à tes blocs "menus" "centre" "pied de page" etc...)
Soit c'est une image et tu fais un background-image sur ton body.
3)
Tu peux te servir de photoshop et dreamweaver si ça t'aide.
Tu fais ce que tu as dit et tu mets les tailles de tes 3blocs head/section/footer en pixels ou em.
Pour faire plus simple voici un plan type:
Et le css
1. Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
pour éviter un bug de redimensionnement du texte dans Internet Explorer.
2. Par défaut, les navigateurs ont un padding (ou, pour certains, un
margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
ne soit complètement collé aux bords de la zone de visualisation du
navigateur lorsqu'on affiche une page «brute», sans mise en forme.
Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
Ce code est fait évidemment pour un menu flottant à gauche et un corps central.
Et surtout n'oublie pas d'afficher ton site sur IE et Firefox, car tu peux être très surpris des différences (de couleur, de taille, de marges...)
En espérant t'avoir aidé...
;)
Non, ton site ne perdra pas ses proportions. Tu appliques une valeur en pourcentage à ta div globale.
Tu peux mettre la taille des balises "internes" en em ou px. Tu vas te rendre compte que c'est presque impossible à gérer de mettre toutes les tailles de div en %.
2)
Tu as plusieurs manières de procéder pour ton background:
Soit c'est un motif et tu crées une image de 1px que tu répètes en x et y, comme expliqué dans tes templates.
Soit c'est une seule couleur unie et tu mets un background-color sur ton body (en sachant que tu pourras appliquer d'autres couleurs à tes blocs "menus" "centre" "pied de page" etc...)
Soit c'est une image et tu fais un background-image sur ton body.
3)
Tu peux te servir de photoshop et dreamweaver si ça t'aide.
Tu fais ce que tu as dit et tu mets les tailles de tes 3blocs head/section/footer en pixels ou em.
Pour faire plus simple voici un plan type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="styles/tonfichier.css" media="all" />
</head>
<body>
<div id="global">
<div id="banniere"></div>
<div id="centre">
<div id="menu"></div> <!-- si ton menu est vertical -->
<div id="principal"></div>
</div>
<div id="pied"></div>
</div>
</div>
</body>
</html>
Et le css
html {
font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
body {
margin: 0;
padding: 10px 20px; /* Note -> 2 */
font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
font-size: .8em;
line-height: 1.25;
color: black;
background: white; /* tu changes la couleur ou tu mets un background-image */
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 20px 5px;
}
#global {
width: 90%;
max-width: 90em;
min-width: 850px;
margin-left: auto;
margin-right: auto;
}
/* Bloc central CORPS */
#centre{
width: 100%;
overflow: hidden;
}
/* Menu - GAUCHE */
#menu {
float: left;
width: 180px;
}
/* Contenu principal CENTRE*/
#principal {
margin-left: 200px; /* a toi d'adapter les tailles en fonction de ce que tu veux*/
margin-right: 260px; /* a toi d'adapter les tailles en fonction de ce que tu veux*/
padding: 10px 20px;
}
/* Pied de page */
#pied {
margin: 0;
padding: 15px 260px 10px 200px;
font-size: .85em;
text-align: center;
}
1. Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
pour éviter un bug de redimensionnement du texte dans Internet Explorer.
2. Par défaut, les navigateurs ont un padding (ou, pour certains, un
margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
ne soit complètement collé aux bords de la zone de visualisation du
navigateur lorsqu'on affiche une page «brute», sans mise en forme.
Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
Ce code est fait évidemment pour un menu flottant à gauche et un corps central.
Et surtout n'oublie pas d'afficher ton site sur IE et Firefox, car tu peux être très surpris des différences (de couleur, de taille, de marges...)
En espérant t'avoir aidé...
;)
Et pour commencer fait ce tuto (qui t'apprends les bases indispensables):
https://openclassrooms.com/fr/courses
Et ça aussi:
https://openclassrooms.com/fr/courses
https://openclassrooms.com/fr/courses
Et ça aussi:
https://openclassrooms.com/fr/courses
Merci c'est vraiment sympa de votre part. Surtout toi p@stelle ! ... réponse très complète :-).
Concernant tes deux liens, je suis tombé dessus en cherchant sur le net l'autre jour. Tres bon tuto qui reprend tout depuis le début !
Malheureusement ces temps-ci c'est assez difficile, je n'ai pas trop le temps mais ce week end je me presserai d'essayer tous vos conseils.
Encore merci !
Concernant tes deux liens, je suis tombé dessus en cherchant sur le net l'autre jour. Tres bon tuto qui reprend tout depuis le début !
Malheureusement ces temps-ci c'est assez difficile, je n'ai pas trop le temps mais ce week end je me presserai d'essayer tous vos conseils.
Encore merci !
Voilà je viens de tester différentes possibilités.
Tout d'abord voici un apercu de mon site dans photoshop :
https://www.casimages.com/i/100309120935237810.jpg.html
Ensuite voici le plan de mon stie
Enfin le code css
Alors en procédant ainsi, c'est a dire en appliquant mon image de fond au "body" du site, voici ce que j'obtiens :
https://www.casimages.com/i/100309121823879420.jpg.html
On remarque qu'il répète l'image sur l'axe des X. seul inconvénient c'est que les deux extrémités de mon fond ne sont pas identiques. Du coup on remarque comme un sale décalage dans le rectangle rouge.
J'ai alors essayé avec une image de 1px de large que j'ai répété sur l'axe des X et la pas de problème (logique)
Je voudrai savoir, ce que je dois modifier pour pourvoir mettre une image en fond pouvant s'adapter a toutes résolution, sans avoir recours à la répétition. (car j'aimerai mettre un pattern de barre oblique sur le fond de mon site.)
Et enfin, quoi que je fasse, le bas de mon site n'apparait pas entièrement.
Voilà ce que j'obtiens...
https://www.casimages.com/i/100309122610321822.jpg.html
Comparez avec mon apercu dans photoshop que j'ai envoyais au tout début. On remarque bien que l'espace entre mon pied de site et la fin du site est bcp plus petit que sur l'apercu de photoshop.
Dois-je appliquer une hauteur bien définie ? Mais du coup l'image ne saura plus s'adapter a toute les résolution ?!
Désolé de vous ennuyer autant mais c'est pas toujours facile d'apprendre par soi-même.
Merci d'avance ;-)
Tout d'abord voici un apercu de mon site dans photoshop :
https://www.casimages.com/i/100309120935237810.jpg.html
Ensuite voici le plan de mon stie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Neurophonik</title>
<link href="css/globale.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/decoupage/background.jpg);
}
-->
</style></head>
<body>
<div id="globale">
<div id="Header"></div>
<div id="menu"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</body>
</html>
Enfin le code css
@charset "utf-8";
#globale {
width: 90%;
min-width: 1004px;
margin-left: auto;
margin-right: auto;
max-width: 90em;
}
#Header {
background-image: url(../images/decoupage/header.jpg);
height: 320px;
width: 785px;
margin: auto;
margin-top: 40px;
}
#menu {
background-image: url(../images/decoupage/menu.jpg);
height: 31px;
width: 785px;
margin: auto;
}
#body {
background-image: url(../images/decoupage/body.jpg);
height: 314px;
width: 785px;
margin: auto;
}
#footer {
background-image: url(../images/decoupage/footer.jpg);
height: 67px;
width: 785px;
margin: auto;
}
Alors en procédant ainsi, c'est a dire en appliquant mon image de fond au "body" du site, voici ce que j'obtiens :
https://www.casimages.com/i/100309121823879420.jpg.html
On remarque qu'il répète l'image sur l'axe des X. seul inconvénient c'est que les deux extrémités de mon fond ne sont pas identiques. Du coup on remarque comme un sale décalage dans le rectangle rouge.
J'ai alors essayé avec une image de 1px de large que j'ai répété sur l'axe des X et la pas de problème (logique)
Je voudrai savoir, ce que je dois modifier pour pourvoir mettre une image en fond pouvant s'adapter a toutes résolution, sans avoir recours à la répétition. (car j'aimerai mettre un pattern de barre oblique sur le fond de mon site.)
Et enfin, quoi que je fasse, le bas de mon site n'apparait pas entièrement.
Voilà ce que j'obtiens...
https://www.casimages.com/i/100309122610321822.jpg.html
Comparez avec mon apercu dans photoshop que j'ai envoyais au tout début. On remarque bien que l'espace entre mon pied de site et la fin du site est bcp plus petit que sur l'apercu de photoshop.
Dois-je appliquer une hauteur bien définie ? Mais du coup l'image ne saura plus s'adapter a toute les résolution ?!
Désolé de vous ennuyer autant mais c'est pas toujours facile d'apprendre par soi-même.
Merci d'avance ;-)
Bonjour,
Pour ton image de fond: tu peux la créer sur toshop avec une longueur de 2000px par ex pour qu'elle prenne bien toutes les largeurs et empêcher de recourir au repeat x.
Essai de l'appliquer à ta div globale en position fixe avec un width auto et une hauteur définie.
C'est une suggestion. Il faut faire des tests...
C'est cette image que tu veux remplacer par des motifs rayés?
Je n'ai pas très bien compris, le fait de recourir à la répétition de ton image n'empêche pas ton site de s'adapter à toutes les résolutions. De plus si tu veux mettre un motif rayé (d'après ce que j'ai compris) en fond, tu vas être obligé de faire un repeat x et y mais encore une fois cela ne compromet en rien l'affichage sur l'écran du visiteur.
Pour ton footer tu rajoute un margin-bottom du nombre de pixel que tu veux pour ajouter une marge entre ton footer et le bas de la page.
Pour ton image de fond: tu peux la créer sur toshop avec une longueur de 2000px par ex pour qu'elle prenne bien toutes les largeurs et empêcher de recourir au repeat x.
Essai de l'appliquer à ta div globale en position fixe avec un width auto et une hauteur définie.
C'est une suggestion. Il faut faire des tests...
C'est cette image que tu veux remplacer par des motifs rayés?
Je n'ai pas très bien compris, le fait de recourir à la répétition de ton image n'empêche pas ton site de s'adapter à toutes les résolutions. De plus si tu veux mettre un motif rayé (d'après ce que j'ai compris) en fond, tu vas être obligé de faire un repeat x et y mais encore une fois cela ne compromet en rien l'affichage sur l'écran du visiteur.
Pour ton footer tu rajoute un margin-bottom du nombre de pixel que tu veux pour ajouter une marge entre ton footer et le bas de la page.
Ok je vais essayer ça dès que possible ;-)
Concernant le motif rayé, les rayures sont en oblique donc la je ne peux pas recourir à la répétition sur l'axe des X. Dans ce cas là je suis obligé de faire comme tu as dit au début du message ;-)
Enfin bon pour l'instant je vais me contenter du fond sans les motifs pour enfin pouvoir le mettre en ligne et ensuite j essayerai tout ca. ;-)
encore merci ;-)
Concernant le motif rayé, les rayures sont en oblique donc la je ne peux pas recourir à la répétition sur l'axe des X. Dans ce cas là je suis obligé de faire comme tu as dit au début du message ;-)
Enfin bon pour l'instant je vais me contenter du fond sans les motifs pour enfin pouvoir le mettre en ligne et ensuite j essayerai tout ca. ;-)
encore merci ;-)
Je viens de faire 2 pages sur 5 et jusqu'ici tout marche à merveille.
concernant le fond j'ai utilisé un fond aux extrémités identiques ainsi je peux utiliser la répétition sur l'axe des X sans trop me casser la tête.
Par contre j'ai une autre question.
Est-il possible d'avoir deux styles différents concernant les liens ?
Je m'explique. Comme vous avez pu le voir, le nom de mes menus sont sur un fond fort sombre. J'ai donc utilisé des couleurs très claires pour le lien en temps normal, lors du passage de la souris et lorsque l'on clic dessus.
Seulement dans la partie dédié au texte, là le fond est fort claire. Du coup si je veux mettre un lien je me retrouve avec des liens eux aussi claires ... donc pas très visible.
Merci ;-)
concernant le fond j'ai utilisé un fond aux extrémités identiques ainsi je peux utiliser la répétition sur l'axe des X sans trop me casser la tête.
Par contre j'ai une autre question.
Est-il possible d'avoir deux styles différents concernant les liens ?
Je m'explique. Comme vous avez pu le voir, le nom de mes menus sont sur un fond fort sombre. J'ai donc utilisé des couleurs très claires pour le lien en temps normal, lors du passage de la souris et lorsque l'on clic dessus.
Seulement dans la partie dédié au texte, là le fond est fort claire. Du coup si je veux mettre un lien je me retrouve avec des liens eux aussi claires ... donc pas très visible.
Merci ;-)
hééé mer** !
je viens de remarquer qqc ne se passe pas comme prévu :(
Contrairement à ce que j'avais fait au tout début (le premier code de ma page que je vous ai envoyé) j'ai procédé d'une autre manière. C'est à dire :
Lorsque je fais un apercu dans Internet Explorer, tout va bien (la preuve : [URL=https://www.casimages.com/][img]http://nsa14.casimages.com/img/2010/03/09/100309114856885053.jpg[/img][/URL]) Par contre dans Firefox il y a un problème :s Mon "footer" a disparu ! (apercu : [URL=https://www.casimages.com/][img]http://nsa14.casimages.com/img/2010/03/09/100309113725352277.jpg[/img][/URL])
Le problème vient du fait que j'ai utilisée la propriété "flottante" car dans mon code, ma balise DIV "footer" est soulignée en vert. Lorsque que je mets ma souris dessus, voici le message que je reçois.
"Si un conteneur (y compris la fenêtre du navigateur proprement dite) n'est pas assez large pour contenir à la fois un élément flottant d'une largeur spécifiée et du contenu de largeur spécifiée qui le suit, le contenu suivant l'élément flottant tombera sous celui-ci au lieu de l'entourer.
Influe sur : Internet Explorer 6.0, 7.0
Probabilité : Vraisemblable"
Je vous cache pas que je l'ai bien lu 5 fois et je comprend toujours pas :s
Voici le code de ma page
Et le contenue du fichier CSS
Si qqn sait d'où vient le problème ca m'arrangerai bien :D
Merci d'avance ;-)
je viens de remarquer qqc ne se passe pas comme prévu :(
Contrairement à ce que j'avais fait au tout début (le premier code de ma page que je vous ai envoyé) j'ai procédé d'une autre manière. C'est à dire :
- 1 Balise DIV "container" qui reprend tout le site
- 1 Balise DIV "header"
- 1 Balise DIV "Central" composée de : - 1 Balise DIV "left" flottante à gauche
- 1 Balise DIV "middle" flottante à gauche
- 1 Balise DIV "right" flottante à droite
- 1 Balise DIV "footer"
Lorsque je fais un apercu dans Internet Explorer, tout va bien (la preuve : [URL=https://www.casimages.com/][img]http://nsa14.casimages.com/img/2010/03/09/100309114856885053.jpg[/img][/URL]) Par contre dans Firefox il y a un problème :s Mon "footer" a disparu ! (apercu : [URL=https://www.casimages.com/][img]http://nsa14.casimages.com/img/2010/03/09/100309113725352277.jpg[/img][/URL])
Le problème vient du fait que j'ai utilisée la propriété "flottante" car dans mon code, ma balise DIV "footer" est soulignée en vert. Lorsque que je mets ma souris dessus, voici le message que je reçois.
"Si un conteneur (y compris la fenêtre du navigateur proprement dite) n'est pas assez large pour contenir à la fois un élément flottant d'une largeur spécifiée et du contenu de largeur spécifiée qui le suit, le contenu suivant l'élément flottant tombera sous celui-ci au lieu de l'entourer.
Influe sur : Internet Explorer 6.0, 7.0
Probabilité : Vraisemblable"
Je vous cache pas que je l'ai bien lu 5 fois et je comprend toujours pas :s
Voici le code de ma page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Neurophonik</title>
<link href="css/container.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/decoupage/background.jpg);
}
.Style1 {
color: #CFCFCF;
font-weight: bold;
}
a:link {
text-decoration: none;
color: #CFCFCF;
}
a:visited {
text-decoration: none;
color: #CFCFCF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.Style2 {font-size: small}
.Style3 {
font-size: 14px;
color: #554d2f;
}
.Style6 {font-size: large; font-weight: bold; color: #42532e; }
.Style7 {color: #554d2f}
.Style8 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: larger;
}
-->
</style></head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"><table width="785" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160" height="29"><div align="center" class="Style1"><a href="index.html">Accueil</a></div></td>
<td width="156"><div align="center" class="Style1"><a href="sets.html">Dj Sets</a></div></td>
<td width="155"><div align="center" class="Style1"><a href="galleries.html">Galleries</a></div></td>
<td width="157"><div align="center" class="Style1"><a href="evenement.html">Evènements</a></div></td>
<td width="157"><div align="center" class="Style1"><a href="contact.html">Contact</a></div></td>
</tr>
</table>
</div>
<div id="section">
<div id="left"></div>
<div id="middle"></div>
<div id="right"> </div>
<div id="footer"></div>
</div>
</body>
</html>
Et le contenue du fichier CSS
@charset "utf-8";
#container {
width: 90%;
max-width: 90em;
min-width: 1004px;
margin-left: auto;
margin-right: auto;
}
#header {
background-image: url(../images/decoupage/header.jpg);
height: 320px;
width: 785px;
margin: auto;
margin-top: 25px;
}
#menu {
background-image: url(../images/decoupage/menu.jpg);
height: 31px;
width: 785px;
margin: auto;
}
#section {
height: 314px;
width: 785px;
margin: auto;
}
#left {
background-image: url(../images/decoupage/left.jpg);
float: left;
height: 314px;
width: 286px;
}
#middle {
background-image: url(../images/decoupage/middle.jpg);
float: left;
height: 314px;
width: 229px;
}
#right {
background-image: url(../images/decoupage/right.jpg);
float: right;
height: 314px;
width: 270px;
}
#footer {
background-image: url(../images/decoupage/footer.jpg);
height: 67px;
width: 785px;
margin: auto;
margin-bottom: 25px;
}
#texte1 {
height: 274px;
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
#texte3 {
height: 40px;
width: 240px;
margin-left: 15px;
margin-top: 260px;
}
#texte2 {
height: 289px;
width: 199px;
margin-left: 15px;
margin-top: 15px;
}
Si qqn sait d'où vient le problème ca m'arrangerai bien :D
Merci d'avance ;-)
J'ai cherché pas loin d'une heure, pas de solution du coup je poste mon problème et voilà que par hasard je réussi a résoudre le problème !
En faite je dois mettre ma balise DIV "footer" AUSSI flottante à gauche. Et ca va nikel sur firefox et sur Internet Explorer.
Par contre ma première question concernant les liens et les styles, toujours pas résolu.
En faite je dois mettre ma balise DIV "footer" AUSSI flottante à gauche. Et ca va nikel sur firefox et sur Internet Explorer.
Par contre ma première question concernant les liens et les styles, toujours pas résolu.
Bonjour Youg,
Pour ton problème de liens tu appliques simplement une class="lien" à ceux que tu veux changer et tu y appliques les propriétés css que tu veux:
<a class="lien" href="ton lien">
Pour ton problème de liens tu appliques simplement une class="lien" à ceux que tu veux changer et tu y appliques les propriétés css que tu veux:
<a class="lien" href="ton lien">
ce que j'ai essayé de faire c'est de créer plusieurs styles.
Pour l'instant j ai ceci :
Style1 => Menu
Style2 => Gros Titre
Style3 => Texte
Style4=> Autre texte
J'ai alors essayé de créer un nouveau style (style5)avec les propriétés "link", "visited", "hover" et "active" avec d'autre paramètres. Seulement mes liens changent et adoptent les couleurs de ce nouveau style, malgré qu'ils appartiennent toujours au premier style !! Bizarre.
Lorsque je vais voir dans les propriétés de la page, dans l'onglet"lien" il a mémorisé mes derniers choix de couleur (donc celles du style5). On dirait qu'on ne peut choisir qu'une seule donnée par page concernant les propriétés "link", "visited", "hover" et "active"
Pcq ce que tu me dis, c'est juste pour assigner un lien à un élément. Pour faire ce que je veux, Je suis obligé de passer par la création d'un style non ?
Pour l'instant j ai ceci :
.Style1 {
color: #CFCFCF;
font-weight: bold;
}
a:link {
text-decoration: none;
color: #CFCFCF;
}
a:visited {
text-decoration: none;
color: #CFCFCF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.Style2 {font-size: large; font-weight: bold; color: #42532e; }
.Style3 {
font-size: 14px;
color: #554d2f;
}
.Style4 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: larger;
}
Style1 => Menu
Style2 => Gros Titre
Style3 => Texte
Style4=> Autre texte
J'ai alors essayé de créer un nouveau style (style5)avec les propriétés "link", "visited", "hover" et "active" avec d'autre paramètres. Seulement mes liens changent et adoptent les couleurs de ce nouveau style, malgré qu'ils appartiennent toujours au premier style !! Bizarre.
Lorsque je vais voir dans les propriétés de la page, dans l'onglet"lien" il a mémorisé mes derniers choix de couleur (donc celles du style5). On dirait qu'on ne peut choisir qu'une seule donnée par page concernant les propriétés "link", "visited", "hover" et "active"
Pcq ce que tu me dis, c'est juste pour assigner un lien à un élément. Pour faire ce que je veux, Je suis obligé de passer par la création d'un style non ?
Non, ce que je te dis c'est d'assigner un style à un élément (ou plusieurs).
Sur tous les liens que tu veux changer tu crée une class. Les autres tu les laisses tels quels.
Dans ton code html:
<a href="ton lien" class="lien" > ton lien </a>
<a href="ton lien2" class="lien" > ton lien2 </a>
Et dans ton code CSS:
.lien:link {}
.lien:visited {}
.lien:hover {}
PS:
Petite remarque pour que ton site soit codé proprement (cela participe à un bon référencement).
Il vaut mieux que tu n'appliques pas de class à tes "gros titres"(style2).
Un codage propre serait que tu appliques directement un style à tes balises de bases:
body{} /* pour tous les éléments textes de ton site */
h1 /*pour tous les gros titres */
{}
h2
{}
etc...
J'espère avoir répondu à ta question
Sur tous les liens que tu veux changer tu crée une class. Les autres tu les laisses tels quels.
Dans ton code html:
<a href="ton lien" class="lien" > ton lien </a>
<a href="ton lien2" class="lien" > ton lien2 </a>
Et dans ton code CSS:
.lien:link {}
.lien:visited {}
.lien:hover {}
PS:
Petite remarque pour que ton site soit codé proprement (cela participe à un bon référencement).
Il vaut mieux que tu n'appliques pas de class à tes "gros titres"(style2).
Un codage propre serait que tu appliques directement un style à tes balises de bases:
body{} /* pour tous les éléments textes de ton site */
h1 /*pour tous les gros titres */
{}
h2
{}
etc...
J'espère avoir répondu à ta question
Oui parfait ! encore et toujours un grand merci :-)
désolé d'autant t'ennuyer mais c'est le premier site que je fais sérieusement.
En cours j'avais vraiment appris le stricte minimum (que 6h par semaines pdt 3 moins)
Enfin bon ici j'ai découvert pas mal de truc grâce à toi et à toute une série de vidéos et tuto que j'ai regardé sur le net ;-)
Ne t'inquiète pas, j arrive presque au bout :-) il ne me reste que deux pages à programmer mais à mon avis le plus dur est fait.
désolé d'autant t'ennuyer mais c'est le premier site que je fais sérieusement.
En cours j'avais vraiment appris le stricte minimum (que 6h par semaines pdt 3 moins)
Enfin bon ici j'ai découvert pas mal de truc grâce à toi et à toute une série de vidéos et tuto que j'ai regardé sur le net ;-)
Ne t'inquiète pas, j arrive presque au bout :-) il ne me reste que deux pages à programmer mais à mon avis le plus dur est fait.
Courage j attaque l avant dernière page :p
Je suis en train de faire ma page contact seulement je n y connais strictement rien en PHP. Et comme en cours on était trop a la bour le prof nous a juste passé un fichier tout fait qu'on avait qu à caller dans notre page. Seulement son truc ne fonctionnait pas bien donc j ai eu envie de tout reprendre depuis le début.
J'ai lu pas mal de tuto sur le sujet et j'ai réussi a créer mon formulaire composé de 4 champs qui sont :
nom
email
sujet
message
Lorsque je mets mon site en ligne et que je réponds au formulaire ca va parfaitement bien.
je recois bien le message avec le sujet, le nom et son contenu. Avec en plus une page qui me met "votre message a bien était envoyé".
seulement lorsque je ne complete rien il me met aussi cette phrase et je reçois quand meme un mail (vide)
j'ai essayé plusieurs trucs pour y remédier mais je n y arrive pas. J'ai lu dans un tuto ceci :
Il nous faut alors faire en sorte qu'aucun des champs ne reste vide au moment où l'utilisateur cliquera sur Envoyer. Pour cela, sélectionnez le bouton Envoyer, dans le panneau Inspecteur de balises, onglet comportements, cliquez sur le [+], choisissez Valider le formulaire.
J'ai bien le panneau inspecteur de balise mais impossible de trouver l'onglet "comportement".
J'aimerai donc que lorsque l'on ne complète pas un champs, le message ne soit pas envoyé et qu'il soit écrit à coté du champs en question "champs obligatoire" en rouge.
J'ai essayé de rajouter la commande suivante
<?php if(isset($_POST['email'])&&$_POST['email']=="") echo "Champ obligatoire" ?>
apres chaque champs de texte (en changeant chaque fois le nom) mais ca n a rien changé.
Voici le code que j'ai pour l'instant (on se trouve dans une balise div composant mon site)
Je suis en train de faire ma page contact seulement je n y connais strictement rien en PHP. Et comme en cours on était trop a la bour le prof nous a juste passé un fichier tout fait qu'on avait qu à caller dans notre page. Seulement son truc ne fonctionnait pas bien donc j ai eu envie de tout reprendre depuis le début.
J'ai lu pas mal de tuto sur le sujet et j'ai réussi a créer mon formulaire composé de 4 champs qui sont :
nom
sujet
message
Lorsque je mets mon site en ligne et que je réponds au formulaire ca va parfaitement bien.
je recois bien le message avec le sujet, le nom et son contenu. Avec en plus une page qui me met "votre message a bien était envoyé".
seulement lorsque je ne complete rien il me met aussi cette phrase et je reçois quand meme un mail (vide)
j'ai essayé plusieurs trucs pour y remédier mais je n y arrive pas. J'ai lu dans un tuto ceci :
Il nous faut alors faire en sorte qu'aucun des champs ne reste vide au moment où l'utilisateur cliquera sur Envoyer. Pour cela, sélectionnez le bouton Envoyer, dans le panneau Inspecteur de balises, onglet comportements, cliquez sur le [+], choisissez Valider le formulaire.
J'ai bien le panneau inspecteur de balise mais impossible de trouver l'onglet "comportement".
J'aimerai donc que lorsque l'on ne complète pas un champs, le message ne soit pas envoyé et qu'il soit écrit à coté du champs en question "champs obligatoire" en rouge.
J'ai essayé de rajouter la commande suivante
<?php if(isset($_POST['email'])&&$_POST['email']=="") echo "Champ obligatoire" ?>
apres chaque champs de texte (en changeant chaque fois le nom) mais ca n a rien changé.
Voici le code que j'ai pour l'instant (on se trouve dans une balise div composant mon site)
<div id="texte4"><span class="Style2">Contact</span><span class="Style6"><br />
<br />
</span>
<?php if ($_POST['message'] == "") { ?>
<form id="contact" name="contact" action="" method="post">
<table border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="101" class="Style3"><div align="right">Votre nom : </div></td>
<td width="379"><label>
<input type="text" name="nom" id="nom" />
</label></td>
</tr>
<tr>
<td class="Style3"><div align="right">Votre Email : </div></td>
<td><label>
<input type="text" name="email" id="email" />
</label></td>
</tr>
<tr>
<td class="Style3"><div align="right">Le sujet : </div></td>
<td><label>
<input type="text" name="sujet" id="sujet" />
</label></td>
</tr>
<tr>
<td valign="top" class="Style3"><div align="right">Votre Message : </div></td>
<td><label>
<textarea name="message" id="message" cols="43" rows="5">Bonjour, </textarea>
<br />
<input type="submit" name="button" id="button" value="Envoyer"/>
</label></td>
</tr>
</table>
</form>
<?php } else {
mail("hugodewattinne@live.be", $_POST['sujet'], $_POST['message'],"From: ".$_POST['nom']."<".$_POST['email'].">");
?>
<p>Le message a bien été envoyé, merci.</p>
<?php } ?>