Se connecter avec
S'enregistrer | Connectez-vous

HTML, PHP, CSS

Dernière réponse : dans Programmation

Bonjour.
J'ai un problème c'est que je voudrai que mes images ce touche pour faire un menu coller au titre mais il y a une marge entre. Le code est :
  1. <img src="bouton2.gif" alt="bouton">
  2. <img src="bouton4.gif" alt="bouton">
  3. <img src="bouton4.gif" alt="bouton">
  4. <img src="bouton4.gif" alt="bouton">
  5. <img src="bouton4.gif" alt="bouton">
  6. <img src="bouton3.gif" alt="bouton">
  7. <br/>
  8. <img src="titre.png" alt="Titre">

J'ai aussi essayé avec des :
  1. <img src="bouton2.gif" border="0">
  2. <img src="bouton4.gif" border="0">
  3. <img src="bouton4.gif" border="0">
  4. <img src="bouton4.gif" border="0">
  5. <img src="bouton4.gif" border="0">
  6. <img src="bouton3.gif" border="0">
  7. <br/>
  8. <img src="titre.png" alt="Titre" border="0">

et en les mettant dans un div de css :
  1. #bouton
  2. {
  3.    padding: 0px;
  4.    margin: 0px;
  5.    border: 0px;
  6. }

Et pourtant rien n'y fait. Quelqu'un aurait-il une explication et/ou une solution?
Php parce que je veux le mettre dans une fonction php include, mais que ca ne marche pas non plus directement dans le code de la page
Merci.

Autres pages sur : html php css

Lassé par la pub ? Créez un compte

lv3895 a dit :
Bonjour.
J'ai un problème c'est que je voudrai que mes images ce touche pour faire un menu coller au titre mais il y a une marge entre. Le code est :
  1. <img src="bouton2.gif" alt="bouton">
  2. <img src="bouton4.gif" alt="bouton">
  3. <img src="bouton4.gif" alt="bouton">
  4. <img src="bouton4.gif" alt="bouton">
  5. <img src="bouton4.gif" alt="bouton">
  6. <img src="bouton3.gif" alt="bouton">
  7. <br/>
  8. <img src="titre.png" alt="Titre">

J'ai aussi essayé avec des :
  1. <img src="bouton2.gif" border="0">
  2. <img src="bouton4.gif" border="0">
  3. <img src="bouton4.gif" border="0">
  4. <img src="bouton4.gif" border="0">
  5. <img src="bouton4.gif" border="0">
  6. <img src="bouton3.gif" border="0">
  7. <br/>
  8. <img src="titre.png" alt="Titre" border="0">

et en les mettant dans un div de css :
  1. #bouton
  2. {
  3.    padding: 0px;
  4.    margin: 0px;
  5.    border: 0px;
  6. }

Et pourtant rien n'y fait. Quelqu'un aurait-il une explication et/ou une solution?
Php parce que je veux le mettre dans une fonction php include, mais que ca ne marche pas non plus directement dans le code de la page
Merci.

Et si tu fermais tes balises img ?? :heink: 
Spoiler
<img src="blabla.gif" /> ;) 

Met tes declarations d'image dans des cellules de tableaux.

  1. <TABLE border=0 cellspacing=0 cellspading=0>
  2.   <TR>
  3.     <TD><IMG ...bla bla bla1 /></TD
  4.     <TD><IMG ...bla bla bla2 /></TD
  5.     <TD><IMG ...bla bla bla3 /></TD
  6.     <TD><IMG ...bla bla bla4 /></TD
  7.   </TR>
  8. </TABLE>

dartyduck a dit :
wai tente toujours, mais moi je suis pas chaud pour utiliser les tables pour faire de la mise en page. c'est pas fait pour ça :/ 

mouais, m'enfin d'un autre coté en html tu ne peux vraiment pas faire autrement, à part avec les span et div (attention, j'ai dit html, pas xhtml ou autre).
Et la question est d'ordre générale, il n'est pas precisé html, xhtml, aec ou sans css etc.

Citation :
Mais quelle horeur en effet :) 

(d'autant qu'il faut mettre les balises en minuscules ... que les border, cellspacing et cellpading ne sont pas du XHTML ... etc ...)

les balises en minuscule, ca dépend des regles de codage. Il n'y a pas de norme qui l'oblige que je sache (mais je peux me tromper, si c'est le cas, merci de me pardonner mon erreur).
De plus, comme dit au dessus, il n'est nul part precisé xhtml ou autre et les membres cellspading et cellspacing existe bien pour un tableau

EDIT:
En relisant mon message, je me suis rendu compte qu'il pouvait paraitre agressif. Je complete donc.
Je suis d'accord avec les deux message ci-dessus. Les table ne sont pas fait (ou en tout cas, plus fait) pour la mise en page. Il vaut mieux utiliser les div, span et des css.
Pour les balises, mon premier chef de projet dans mon premier boulot (10 ans deja :)  ) nous demandais de les mettre en majuscule pour des raison de lisibilité du code et l'habitude m'est resté, peut être à tord.
Pour les cellspadding et spacing, si on part sur une mise en page à l'ancienne, autant en profiter :) 

zeb a dit :
Tiens Eriel, un peu de lecture, avant de dire plus de bêtises : http://www.w3.org/


merci :) 

Ceci dit, excuses moi de persister.
1) en html, les balises sont insensible à la casse. La norme du html autorise indifferament les majuscules et les minuscules
2) en xhtml, les balises doivent être en minuscule car le xhtml (en fait le xml) est "case-sensitive" ou en français, sensible à la casse
3) il n'est pas precisé dans le message de depart si le code etait en html "à l'ancienne" ou en xhtml.

Apres, tout depend du language utilisé (html, xhtml).

Maintenant, pour des raisons de perennité du code, il vaut mieux en effet utiliser les minuscule avec le html et c'est obligatoire avec le xhtml.

Oui, le <br/> c'est pour que ça fasse
bouton1 collé au bouton 2 collé au bouton3...
Avec a la ligne collé l'image de titre. Et c'est vrai que pour les tableaux je suis pas très chaud. En plus, j'essaye de faire un site correct w3c et le float, je ne sais pas, je ne comprends toujours pas pourquoi il ne passerai pas à gauche du reste de la page?

fais des div pour bien partitionner ta mise en page. et dans ces div tu mets tes boutons, ton image de titre...
genre :
  1. <div id="boutons">
  2. <img src="bouton1.gif" class="bouton" />
  3. <img src="bouton2.gif" class="bouton" />
  4. <img src="bouton3.gif" class="bouton" />
  5. </div>
  6. <div id="titre">
  7. <img src="titre.jpg" />
  8. </div>

ensuite tu arranges la mise en page avec le css en ajustant les div et les class "bouton" ;) 

Merci, j'essaye. Je sais pas pourquoi, mais quand on ne saute pas de ligne, (<img src="bouton1.gif" class="bouton" /><img src="bouton2.gif" class="bouton" /><img src="bouton3.gif" class="bouton" />) Il ne fait pas d'espace horizontalement...
EDIT : non, ça marche pas les 2 div...

bon alors, comme ton histoire me laissait perplexe, j'ai fait quelques petits tests et voilà ce que ça donne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="boutons">
<div class="bouton"><a href="#">Bouton 1</a></div>
<div class="bouton"><a href="#">Bouton 2</a></div>
<div class="bouton"><a href="#">Bouton 3</a></div>
</div>
<div id="titre">
<p>TITRE DE LA PAGE OU IMAGE DE TITRE</p>
</div>

</body>
</html>

et
a, a:active, a:visited {
color: #FFF;
text-decoration: none;
display: block;
}

a:hover {
color: #00F;
}

#boutons {
margin: 0;
padding: 0;
width: 400px;
position: relative;
}

.bouton {
margin: 0 12px 0 12px;
padding: 2px 0 0 0;
width: 100px;
height: 20px;
background: red;
position: relative;
float: left;
text-align: center;
color: #FFF;
font-weight: bold;
}

#titre {
margin: 0;
padding: 0;
width: 400px;
height: 100px;
background: yellow;
position: relative;
text-align: center;
}

ça correspond à ce que tu cherches ? parce qu'avec ça j'ai aucun espace horizontal entre le menu et ton image de titre :o 

bon j'ai fait ça vite fait, juste histoire de te montrer que c'est possible sans bidouille aucune. Cependant, ceci est valable sous ie6, n'ayant rien d'autre comme navigateur au boulot. à toi de fignoler pour la compatibilité avec les autres navigateurs :o 

Mais, j'arrive à mettre une image pour le titre mais pas pour les boutons.
Ce que j'ai modifié :
<div id="boutons">
<div class="bouton"><a href="#"><img src="bouton2.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton3.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton3.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton3.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton4.gif" alt="bouton"/></a></div>
</div>
<div id="titre">
<p><img src="titre.png" alt="Titre"/></p>
</div>

(Je ne le met pas en code car on ne peut le copier coller sans les chiffres des lignes... gênant).
Merci de l'aide.

MODO: Que je ne te surprenne plus ni à faire ce genre de remarque, ni à publier sans te soumettre au règlement

regarde si tu n'as pas un conflit entre les dimensions de tes class="bouton" et tes images de boutons.
ou sinon à la place de
<div class="bouton"><a href="#"><img src="bouton2.gif" alt="bouton"/></a></div>

essaye de mettre ça :
<a href="#"><img src="bouton1.gif" alt="bouton" class="bouton" /></a>

;) 

bon envoie moi tes codes par mail que je vois ce que tu as fait. sans rien voir je peux rien te dire :/ 
tu ajoute @hotmail.com à mon speudo :o 



MODO: Oups, je n'avais pas vu ça. Depuis quand on résout en privé les problèmes présentés en public ?

lv3895 a dit :
Mais, j'arrive à mettre une image pour le titre mais pas pour les boutons.
Ce que j'ai modifié :
<div id="boutons">
<div class="bouton"><a href="#"><img src="bouton2.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton3.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton3.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton3.gif" alt="bouton"/></a></div>
<div class="bouton"><a href="#"><img src="bouton4.gif" alt="bouton"/></a></div>
</div>
<div id="titre">
<p><img src="titre.png" alt="Titre"/></p>
</div>

(Je ne le met pas en code car on ne peut le copier coller sans les chiffres des lignes... gênant).
Merci de l'aide.

MODO: Que je ne te surprenne plus ni à faire ce genre de remarque, ni à publier sans te soumettre au règlement

Et si tu mettais plutôt une classe directement à tes images ?
  1. <div id="boutons">
  2. <img class="bouton" src="bouton2.gif" alt="bouton"/>
  3. <img class="bouton" src="bouton3.gif" alt="bouton"/>
  4. </div>

Et ensuite tu définis ton CSS comme il faut avec un #boutons et un .bouton ?
Enfin, je ne suis pas certain, mais il me semble que le retour chariot dans ton code est traduit par les navigateurs comme un espace.
Donc au final, je mettrais plutôt ça : 
  1. <div id="boutons">
  2. <img class="bouton" src="bouton2.gif" alt="bouton"/><img class="bouton" src="bouton3.gif" alt="bouton"/>
  3. </div>

ZEB : j'ai proposé ça car il avait apparemment du mal à coller son code ici, sinon tu penses bien que j'aurais laissé faire la magie du forum ;) 

Donc mea culpa, sté pas dans une mauvaise intention :o 
Je te demande de bien vouloir m'en excuser, j'ai pas fais gaffe. :/ 
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet