Divers problemes html/css Résolu/Fermé

Question

Bonjour, Je suis en train de finaliser mon site web, et je me heurte à plusieurs problèmes. Les voici : - J'ai fait un menu déroulant, et je viens de m'apercevoir qu'il était tout décaler sur un écran de petite résolution. Il est constitué d'images, et j'aurais voulu que les deux images se situent côte à côte. Dur à expliquer, alors voici le lien : http://mack.olympe-network.com/index.htm Je parle des images "les photos" et "le photographe". J'espère être clair... J'ai essayé "width="58%" height="20%", mais ça ne fonctionne pas. - Je veux mettre une petite ligne en bas de chaque page (comme la plupart des sites), et toujours sur cette écran, et sur cette page : http://mack.olympe-network.com/aproposdemoi.htm , cette ligne (© Tous droits réservés - 2009 - Maxime Gobet - Contact - Myspace) ne se situe pas en bas. Elle est chevauchée avec du texte, en bas de l'écran quand le site vient de se charger, et non en dessous du dernier paragraphe. - Enfin, cette fameuse ligne ne se situe pas en bas de l'écran, mais juste en dessous du texte, lorsque l'on rempli le formulaire de contact : http://mack.olympe-network.com/contact.php (ça c'est moins important...) Pour cette fameuse ligne, j'ai fait un fichier css avec : #footer { position: absolute; bottom: 0; padding: 0px; width: 95%; color:#fff; } #foot_interne { width: 100%; margin-left: auto; margin-right: auto; text-align:center; } Et j'ai placé dans les fichiers .htm :

monkey_monk · Answer

Bonjour Mack58, tout d'abord, plusieurs remarques : - tu n'as pas de doctype... dés lors, ni nous ni le browser ne savons dans quel language tu codes. - tu sembles coder en HTML 4 mais tu as des balises en minuscules (même parfois ouverte en minuscule et fermée en majuscule... ???) - trop de
inutiles... utilise ton css pour ta mise en forme (marge etc...) je te conseil ces liens : http://blog.html4seo.com/ -- pour HTML 4 https://www.zonecss.fr/ https://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html -- article sur les doctype http://www.la-grange.net/w3c/html4.01/ --- recommandation W3C en français https://www.la-grange.net/w3c/xhtml1/ --- recommandation W3C en français http://www.aliasdmc.fr/index.php Survole tout ça et fais nous un joli site aussi bien dans l'apparence que dans son code ! :D Une bonne structure t'évitera plein de désagréments ! Bon travail !

Mack58 · Answer

Hum.. C'est vrai que je n'avais pas fait vraiment attention à ça, parce que je ne savais pas trop ce que c'était et je voulais le rajouter à la fin...
En fait, le problème est que j'ai pioché 2/3 codes "tout fait" sur internet, sur différents sites. J'ai commencé à coder ce site à l'aide d'un livre, où les balises sont écrites en majuscule, alors que les codes sur internet sont en minuscules.


Merci pour tous ces liens. Je pense mettre ça  : HTML4.01 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">


(principalement pour ça : les balises peuvent être écrites en majuscules ou en minuscules... :) )


Piouffff je sais pas trop comment m'en sortir.... Peut-être tout recoder plus proprement ? C'est vrai que pour quelqu'un qui connait un peu tout ça, ça doit paraitre terriblement confus.. :)

Mack58 · Answer

Bon, j'ai mis toutes les balises en minuscule, j'ai au début de toutes mes feuilles l'inscription et j'ai mis text="ffffff" dans la balise body, plutôt que de le récrire à chaque fois dans la balise Dans tes remarques, il ne me reste plus qu'à voir pour la mise en forme à l'aide du css... Mais là ça devient plus compliqué... :)

monkey_monk · Answer

Je vois que tu es motivé ! C'est agréable à voir ! Pour ce qui est de la mise en forme... au début c'est un peu galère mais il ne devrait y avoir aucun problème pour ce que tu cherches à faire ! J'ai l'air de me contre-dire ? Que neni, c'est galère quand on connait pas et qu'on cherche le pourquoi et le comment ; et il n'y aura pas de problème parce que ce que tu cherches à faire ne présente aucuns signes de "j'vais m'arracher les cheveux pour faire fonctionner ce truc" :D Donc, coooll ! Utilise des id pour des éléments unique (ex:

Mack58 · Answer

Bonjour ! Et merci beaucoup de prendre du temps pour m'aider... :) Pour les balises de type div id, j'ai trouvé un super site qui explique bien : https://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

Je vais donc essayer de changer un peu ce que j'ai codé... Par contre, dans les exemples, il parle en pixel.. Comment faire pour avoir plutôt une certaine partie de l'écran ? C'est-à-dire que par exemple une partie de mon menu prenne 50% de l'écran.. ? Où alors, que le texte soit présent sur les 10% de l'écran inférieur ?

Également, en voyant tout ça, une question me revient à l'esprit... Peut-on charger 2 feuilles css sur une page html ?


En tout cas merci beaucoup !

monkey_monk · Answer

Bonjour,

on peut effectivement charger plusieurs feuilles de style sur une page unique... mais s'il y a des déclarations "redondantes" les propriétés s'écraseront l'une l'autre.
C-à-d, s'il existe plusieurs déclaration identique (ex: plusieurs a { text-decoration: ??? ; }) la dernière valeur déclarée sera utilisée, s'il y a ajout (ex: une feuille avec un a { color:red; } et une autre avec a {text-decoration:underline; }) toutes les propriétés sont appliquées !

Pour ce qui est des tailles en %... personnellement je déconseille fortement... sauf s'il s'agit d'une structure simple. Auquel cas il suffit d'être dans une "marge" d'erreur ! ^^

Si tu veux utiliser des pourcentage, arrange toi pour avoir une position de div "inchangeante" et de penser à leurs proportions comme un étalement. Mais méfiance parce que si tu cherches à agrandir proportionnellement... sache que tu devras passer sur tous tes éléments (textes, bordures, tailles, liens, etc...) sinon tu risques de te retrouver avec de gros "blancs" dans ta compo ! ;)

Ca peut se faire, mais c'est un peu galère ! :D

Amuse-toi bien et bon courage !

PS: voici ma "page" delicious si tu veux une série de site sur le wedesign et les standards web... 
(delicious est un "recueil de favoris personnel" online... utile quand on passe d'un ordi à un autre régulièrement ! ) >> https://chrome.google.com/webstore/detail/dmail/ebmgnpkbhncfpnoeihkmkhmccbgagghc/monkey_monk/

Mack58 · Answer

Bonjour ! J'ai pas mal avancé depuis la dernjère fois... :)

J'ai tout ré-éditer le menu, en éditant le fichier css. Il me reste encore deux derniers soucis, invisible sous firefox.

- Le texte "le photographe" n'est pas joli du tout, il n'apparait pas vraiment "lisse", on dirait qu'il est formé avec des gros pixels... (si je n'arrive pas à résoudre ça je changerai de police, mais elle est belle sous firefox alors j'aimerais bien la garder...)

- Ensuite, le texte tout en bas de la page (avec mon nom, quelques liens, la licence creative commons...) apparaît très à droit, au point qu'il soit invisible sur des petits écran, alors qu'il apparait centré sous firefox.... ?


Merci d'avance ! Le reste (pour l'instant... :) ) ça va...

monkey_monk · Answer

Bonjour,

je pense que ton problème de typo est dû au fait que tu utilise la Courrier... qui est plutôt basique alors que ton autre liens est en Times... vérifie bien ton code. 

Ceci étant, ce n'est pas une bonne idée d'utiliser la balise "font" il vaut mieux structurer ton document de manière "sémantique" sans se soucier du rendu visuel et ensuite passer au rendu visuel grace aux css !
Mais bon, ce n'est pas très grave et je suppose que tu veux juste que ça "marche" ! :D

Pour ton problème de footer, je vois que tu as utilisé un h4 pour le faire... pas très utile quand on sait que Google ne va pas plus loin que h3 (si je me souviens bien) mais surtout parce qu'il ne s'agit pas d'un balise de "placement" ou "groupement" ...il vaut mieux utiliser un div et dedans placer tes h4... et pour le centrer (ça devrais marcher aussi pour ton h4) il suffit de mettre margin:0 auto;

Chez moi ça fonctionne bien de cette manière... j'espère t'avoir aidé ! ;)

Désolé pour la mise en forme mais je suis pressé. :D

Mack58 · Answer

Eh eh merci de prendre le temps de me répondre !


Alors, ça avance... (oui oui ! :) )

Pour la police, je l'ai changé et comme ça on en parle plus.. :p


Ensuite, pour le footer, j'ai édité le fichier css et j'ai mis 

#footer {
	position: absolute;
	bottom: 0;
	padding: 0px;
	width: 90%;
	color:#fff;
	text-align:center;
	margin:0 auto; 
	font-size: .6em;
}


Sur les autres pages cela fonctionne, et il n'y a que sur la page d'accueil où j'ai un soucis... En fait, je suis quasiment sûr que ça vient du fait qu'il y ai cette ligne dans le fichier css du menu :



#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */



Je ne sais pas trop comment faire, parce que si j'enlève la dernière ligne mon menu ne fonctionne plus...
Le footer est bien centré avec toute la page, parce qu'il y a un truc invisible loin à droite... Mais comme c'est invisible j'aimerais bien que ça ne gène pas, et que le footer soit centré avec l'écran... :)


Je peux bien modifier la valeur de margin dans le fichier css, mais après ça ne sera plus centré sur firefox... :s

monkey_monk · Answer

Bon, c'est difficile de répondre sans être "dedans"... mais tu pourrais aussi essayer de placer ton footer en position:absolute, top:820px (par exemple...). Si il disparait derrière un autre élément utilise la propriété z-index.  ;)

Si ça ne marche pas, donne moi le code structurel de ta page (les balises html).

Bon courage ! :D

Mack58 · Answer

Je ne comprends pas... même en mettant tout à 0, pour firefox j'ai bien la ligne qui s'écrit tout à gauche, mais avec IE elle est encore centrée... :s Alors voici le code html (tu vas encore dire que j'ai mis trop de balise br... :D Maxime Gobet - Photographe Le css pour la ligne du bas : #footer { position: absolute; bottom: 0px; text-indent:0px; width: 90%; color:#fff; margin:0 auto; font-size: .6em; } et le css pour le menu : #menu, #menu ul /* Liste */ { padding : 0px; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 50px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ } #menu /* Ensemble du menu */ { } #menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0px; /* aucune marge intérieure */ background : #000; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 500px; /* largeur */ } #menu li /* Elements des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li { border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ } #menu li ul /* Sous-listes */ { position: absolute; /* Position absolue */ width: 144px; /* Largeur des sous-listes */ left: -999em; /* Hop, on envoie loin du champ de vision */ } #menu li ul li /* Éléments de sous-listes */ { /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li ul li { border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ } #menu li ul ul { margin :-80px 0 0 350px; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */ } /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */ html>body #menu li ul ul { border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ } #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ { left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */ } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ { left: auto; /* Repositionnement normal */ min-height: 0; /* Corrige un bug sous IE */ } merci d'avance !

Mack58 · Answer

Je vais devenir COMPLÈTEMENT FOU !!! J'étais en train de faire quelques modifs dans ma galerie ( http://mack.olympe-network.com/HSR130609/index.html ), et au fur et à mesure j'envoyais ça sur le serveur.... jusqu'à l'instant où je me suis rendu compte que le site ne changeait pas.... J'ai TOUT supprimé sur le serveur, j'ai mis uniquement les fichiers et les dossiers utiles dans un nouveau dossier, et quand j'ouvre "index.htm", (qui est à la soucre) à partir du fichier de mon ordinateur, dans firefox, tout fonctionne comme je l'ai programmé. J'envoie les fichiers sur le serveur, et j'ai ce que j'avais programmé AVANT les modifs.... Alors que j'ai actualité après avoir tout supprimé et c'était effectivement tout supprimé.... Je n'en peux plus je crois que je vais tout abandonner.... :( ça me fait ça uniquement dans les galeries.... Alors qu'il y a quelques jours cela se passait comme sur des roulettes, en faisant la même chose..... :( Vous allez me prendre pour un nul, mais c'est vrai..... Dans le dossier des galeries, il y a -un dossier images -un dossier thumbnails -un fichier galery.xml -un fichier index.html -un fichier readme.html -un fichier swfobject.js -un fichier viewer.swf Quand je modifie le fichier "index.html", c'est visible sur le serveur. Mais quand je modifie le fichier galery.xml, c'est pas visible.... Je peux même le supprimer du serveur et ça fonctionne toujours, alors qu'il est normalement indispensable... :s Je viens de tout refaire de A à Z, et une fois que j'ai envoyé le fichier sur le serveur, je ne peux plus rien faire, je ne peux pas le modifier... Même si j'efface tout et je recommence... Tant pis, je ferais ça à chaque fois, ça me prendra du temps mais je vais réussir... Tout ça pour dire qu'il me reste encore le problème de cette fameuse ligne (je crois que je vais carrément l'enlever) et puis un dernier problème (je pense...) Dans ma galerie, je veux mettre un lien "retour", et lorsque je clique dessus, ma page d'accueil s'ouvre dans un nouvel onglet... j'ai essayé ça : , puis cliquez-ici (en m'inspirant de ce site : https://xhtml.developpez.com/faq/?page=liens#LIEN_target Mais rien ne fonctionne... Voici ma balise : Le groupe
Retour vers le menu]]> Pardon pour tout ça, je suis vraiment un méga noob.... :(

Mack58 · Answer

Piouffff c'est bon, après beaucoup de temps passé derrière l'écran, j'ai enfin fini mon site... :D


http://www.maximegobet.fr

Merci beaucoup monkey_monk !!

Divers problemes html/css

13 réponses

Discussions similaires