High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Divers problemes html/css

Dernière réponse le 17 nov 2009 à 20:12:04 Mack58, le 20 aoû 2009 à 14:04:27 
 Signaler ce message aux modérateurs

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 :

<div id="footer">
<div id="foot_interne">
<font size=1><h6> © Tous droits réservés - 2009 - Maxime Gobet - <a href="contact.php">Contact</a> - <a href="http://myspace.com/urlpaspris">Myspace</a> </h6></font>
</div>


Pour le reste de ma programmation, je pense que tout le monde peut y accéder à l'aide du clique droit.




Merci d'avance, et ne faites pas attention au reste du site, qui n'est pas encore optimisé et fini, mais c'est pour bientôt... Et puis je vais remplacer le copyright par une license Créative Commons, mais cela ne change rien à mon problème.


Merci ! :)

Configuration: Linux
Firefox 3.0.13

Meilleures réponses pour « Divers problemes html/css » dans :
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beau, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Posez votre question Répondre

1

monkey_monk, le 20 aoû 2009 à 14:39:04

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 <br> inutiles... utilise ton css pour ta mise en forme (marge etc...)

je te conseil ces liens :
http://blog.html4seo.com/ -- pour HTML 4
http://www.zonecss.fr/
http://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
http://www.la-grange.net/w3c/xhtml1/ --- recommandation W3C en français
http://www.aliasdmc.fr/

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 ! [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

2

Mack58, le 20 aoû 2009 à 14:54:48

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.. :)

   
Répondre à Mack58

3

Mack58, le 20 aoû 2009 à 15:31:29

Bon, j'ai mis toutes les balises en minuscule, j'ai au début de toutes mes feuilles l'inscription

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

et j'ai mis text="ffffff" dans la balise body, plutôt que de le récrire à chaque fois dans la balise <font>

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é... :)

   
Répondre à Mack58

4

monkey_monk, le 20 aoû 2009 à 16:20:05

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: <div id="menu">) et des classes pour des éléments qui peuvent se répéter (ex: <h2 class="titre_rouge">)
.
Utilise aussi les redéfinitions...
ex: tu définis la balise <p> de manière général et ensuite tu redéfinis ce que tu as besoin en fonction de son emplacement
ex: p { color:red; } et #contenu p { color:blue; } // même balise mais comportement différent en fonction de son emplacement.

Courage !
[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

5

Mack58, le 21 aoû 2009 à 20:08:15

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 : http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-pa­ge-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 !

   
Répondre à Mack58

6

monkey_monk, le 24 aoû 2009 à 16:35:00

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 ! ) >> http://delicious.com/monkey_monk/
[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

7

Mack58, le 1 sep 2009 à 12:46:09

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...

   
Répondre à Mack58

8

monkey_monk, le 1 sep 2009 à 15:27:58

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

[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

9

Mack58, le 1 sep 2009 à 19:16:12

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

   
Répondre à Mack58

10

monkey_monk, le 3 sep 2009 à 11:46:00

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 [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

11

Mack58, le 4 sep 2009 à 17:00:15

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





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<title>Maxime Gobet - Photographe</title>
<link rel="stylesheet" media="screen" type="text/css" title="menuderoulant" href="menuderoulant.css" />
<link rel=stylesheet media="screen" href="copyright2.css" />
<script type="text/javascript" src="menuderoulant.js"></script>
</head>
<body bgcolor="#000000" link="#DDDDDD" vlink="#C0C0C0" text="#ffffff">


<ul id="menu">





<li>
<a href="#"><font size="10" face="Times"><br>Les photos<br><br>  </font></a>

<ul>


<li>
<a href="#"><font size="7" face="verdana">Live<br>  </font></a>
<ul>

<li><a href="HSR130609/index.html"><b>Hate Six Remains </b>- 13.06.09</a></li>
<li><a href="LedC07-090509/index.html"><b>Les echos du CHARBON </b>- 07.09-05.09</a></li>
<li><a href="HSR050409/index.html"><b>Hate Six Remains </b>- 05.04.09</a></li>
<li><a href="VX270309/index.html"><b>Vitamin X </b>- 27.03.09</a></li>
<li><a href="TTC240109/index.html"><b>Two Tone Club </b>- 24.01.09</a></li>
<li><a href="HSR191008/index.html"><b>Hate Six Remains </b>- 19.10.08</a></li>


</ul>
</li>


</ul>

</li>







<li>


<a href="#"><font size="8" face="times"><tt><br>Le photographe</tt><br><br>  </font></a>
<ul>
<li><a href="aboutme.htm"><font size="6" face="verdana">A propos de moi/Newsletter<br>  </font></a></li>



<li><a href="contact.php"><font size="7" face="verdana">Contact</font></a></li>
</ul>

</li>


</ul>


<div id="footer">

<h3>Maxime Gobet - <a href="contact.php">Contact</a> - <a href="http://myspace.com/urlpaspris">Myspace</a> - Site sous license <a href="aboutme.htm">Créative Commons</a> </h3>
</div>




</body>
</html>







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 !

   
Répondre à Mack58

12

Mack58, le 4 sep 2009 à 22:07:11

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 : <a href="page.html" target="_self">, puis <a href="la_page.html" onclick="window.parent.location.href=this.href; return false;">cliquez-ici</a> (en m'inspirant de ce site : http://xhtml.developpez.com/faq/?page=liens#LIEN_target Mais rien ne fonctionne...


Voici ma balise : <![CDATA[<a href="http://www.myspace.com/hatessixremains"><font size="30" face="Times"><u>Le groupe</u></font></a>
<br> <a href="../index.htm" onclick="window.self.location.href=this.href; return false;"><font size="20" face="Times">Retour vers le menu</font></a>]]>




Pardon pour tout ça, je suis vraiment un méga noob.... :(

   
Répondre à Mack58

13

 Mack58, le 17 nov 2009 à 20:12:04

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 !!

   
Répondre à Mack58
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net