[CSS] Ligne de boutons autoajustable(largeur d'un tableau)

28 sept. 2005, 18:04

Imaginon que j'ai 3 boites aligné dans un espace de 400pixel
que je souhaite que ces boite ajuste leur taille à cette espace
selon le texte que contient chacune de ses trois boites sans
justifier le texte mais la largeur de la boite?

par quoi puis-je remplacer: width: 150px;

?

28 sept. 2005, 18:30

lareine, nouveau sujet, nouveau post: et réduis un peu la taille de ta signature s'il te plait.

Je divise le sujet pour mettre cette question à part.

Et pour la réponse: si tu ne mets rien du tout, la boite se mettra aux dimensions de la fenêtre. En fait, tu ne peux pas vraiment faire ce que j,ai compris que tu veux faire.

28 sept. 2005, 19:35

Ce que j'obtenais avec un javascript: http://ippai.free.fr/index.html

[HTML/JS]
<td align="center"
background="bgbtyr.jpg" bgcolor="#FAEA92"
style="border-style: outset"
onmousedown="this.style.borderStyle='inset'"
onmouseup="this.style.borderStyle='outset'"
onchange="background='bgbtyr.jpg'">
<a href="index.php">Accueil</a>
</td>
[/HTML/JS]

Ce que j'obtient avec mon css actuel: http://ippai.free.fr/index_css.php

[/color]
a.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; display:inline; }
a.bouton:hover { border:4px inset; }
[color=orange]

[/color]

[/color]
<p align="center">
	<a href="index.php" class="bouton">Accueil</a>
...
[color=orange]

[/color]

En fait, tu ne peux pas vraiment faire ce que j,ai compris que tu veux faire.

Comment-ca pas vraiment

?

Et comment puis-je m'arranger pour que l'enssemble des boutons s'ajustent
automatiquement à la largeur du tableau qui les contiens même si je change
le texte des boutons

?

Avoir 1pixel entre chaque bouton et éviter qu'ils se chevauchent en hauteur

?

Merci d'avance

!

28 sept. 2005, 20:49

Bon, je suis parti de tes sources en ligne, alors il y a pas de PHP, mais tu verras comment ajuster les éléments HTML. J'ai procédé à quelques ajustements dans ton menu et des modification au niveau de la feuille de style CSS.
Le html :

<!-- ... -->
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td><img src="ippailogo.jpg" width="600" height="100" alt="">
      <h5>Dernière mise à jour le 08/09/2005</h5>
      <h1><u>EDITO</u></h1>
      <p><b>" Ip-Paï <sup>©</sup>* " (pionnier des fanzines manga dans le Finistère), a toujours pour but la publication des Articles, Bandes Dessiné et Illustrations que vous seriez amené à nous confier.<br>
      <br>
      Enfin en ligne le tout nouveau <a href="forum">forum d'Ip-Paï</a>. Celui-ci vas désormait être très fortement intégré à l'interface du site lui offrant une meilleur interactivité. N'hésitez pas à vous y inscrire "<a href="forum/profile.php?mode=register"><img src="forumenreg.gif" border=0></a>" pour participer activement au dévelopement rédactionel du site.<br>
      <br>
      En exclusivité sur ce site, nous vous proposons un <a href="cddmng.html">"Tutorial d'apprentissage du dessins de Manga"</a> ainssi que la rubrique <a href="http://www.chez.com/ippai/friandivx.html">"Les FrianDivX d'Ip-Paï "</a> vous offrant des minis clips vidéos (3,9 Mo max) au format DivX ;-) .<br>
      <br>
      La rubrique <a href="boutiques.php">"Boutiques Specialisées"</a>
      vous proposes quelques bonnes adresses. Et enfin nous vous proposons l' <a href="affichefm.php">"affiche du programme d'Ip-Paï l'émission de radio sur Fréquence Mutine".</a><br><br>
      Sur ce, nous espérons que vous passerez un excellent moment en notre compagnie ^-^ !<br></b>
      <hr size="3" color="#FF00FF"> 
      <p class="menu"><a href="index.php" class="bouton">Accueil</a><a href="sakoi.php" class="bouton">Sakoi veut dire Ip-Paï ?</a><a href="dedans.php" class="bouton">Y'a quoi dedans ?</a><a href="publi.php" class="bouton">Être Publié ?</a><a href="message.php" class="bouton">Contact</a></p>
      <p class="menu"><a href="news.php" class="bouton">News</a><a href="mangasmanwas.php" class="bouton">Mangas / Manwas</a><a href="animes.php" class="bouton">Animes</a><a href="films.php" class="bouton">Films</a><a href="asianmusicvisual.php" class="bouton">Asian Music & Visual</a></p>
      <p class="menu"><a href="forum/" class="bouton">Forum</a><a href="affichefm.php" class="bouton">Émission sur 103.8FM Brest</a><a href="fanzine.php" class="bouton">Fanzine</a><a href="reunions.php" class="bouton">Réunions sur Brest</a><a href="liens.php" class="bouton">Liens</a></p>
      <hr size="3" color="#FF00FF">
      <h2>
      En partenariat avec : <a target="_blank" href="http://www.mangakana.com">
      <img src="mangakana.gif" alt="Site Web de Manga Kana"border="0" align="middle"
      width="60" height="47"></a><a target="_blank" href="http://www.pika.fr">
      <img src="pika.gif" alt="Site Web de PiKa Edition"border="0" align="middle"
      width="60" height="47"></a> & <a target="_blank" href="http://www.kogaru.net">
      <img src="logo_kogaru.gif" alt="Site Web de KOGARU Magazine" border="0" align="middle"
      width="150" height="47"></a></h2>
      <hr size="3" color="#FF00FF">
      <br>
      <h6>Site Optimisé pour<br>Internet Explorer & Maxthon en 640x480<br> 
      <img src="micintexp.gif" alt="Optimisé pour Microsoft Internet Explorer"border="0" align="middle" width="88" height="31">
      <a target="_blank" href="http://www.ldfa.net/~maxthon/fr/index.htm"><img src="maxthon.gif" alt="Optimisé pour Maxthon Browser"border="0" align="middle" width="88" height="31"></a>
      <img src="opt640x480.gif" alt="Optimié pour une résolution de 640x480 mini" border="0" align="middle"
      width="88" height="31"></h6>
      <h6>Site Web: http://ippai.free.fr (*Ip-Paï © Virginie DESFORGES, 2000/2005)</h6>
    </td>
  </tr>
</table>
</div>
<p>&nbsp;</p>
<embed src="gnpshrt.mp3" loop="0" hidden="true">
</body>
</html>

La feuille de style remaniée :

Code : Tout sélectionner

body {
	color:#000000; 
	background:#FAEA92 url(rose.jpg) repeat: repeat; 
	font-size:12pt; 
	font-family:Arial, Helvetica, sans-serif;
}
h1, h2. h3, h4, h5, h6 {
	font-weight:bold; 
}
h1, h2, h3, h6, td {
	text-align:center;
}
h1 {
	font-style:italic; 
	font-size:20pt; 

	font-family:Verdana, Arial, Helvetica, sans-serif;  
}
h2 {
	font-size:16pt; 
	margin-left:10px; 
	margin-right:10px; 
}
h3 {
	font-size:12pt; 
	margin-left:10px; 
	margin-right:10px; 
}
h4 {
	font-size:12pt; 
	text-align:left; 
	margin-left:10px; 
	margin-right:10px; 
}
h5 {
	font-size:12pt; 
	text-align:right; 
	margin-left:10px; 
	margin-right:10px; 
}
h6 {
	font-size:9pt;
}
p,ul,li {
	text-align:justify; 
	margin-left:10px; 
	margin-right:10px;
}
a {
	text-decoration:none;
	font-weight:bold;
}
a:link { 
	color:#800000; 
}
a:hover { 
	color:#FF0000; 
}
a:visited { 
	color:#800080; 
}

a.bouton { 
	background:#FAEA92 url(bgbtyr.jpg); 
	border:4px outset; 
	display: inline; 
	position:relative;
  margin: 0.1em;
  padding: 0;
  margin: 0.05em
}
  
a.bouton:hover { 
	border:4px inset;
}
p.menu {
  text-align: center;
  line-height: 0.75em;
}

Essaye et vois si c'est le résultat souhaité. Si tu as besoin d'explications, il suffira de demander.

28 sept. 2005, 21:36

Merci pour ta réponse

.

Mais ça ne change pas grand chose sous ie,
les espaces entre les boutons son devenue
trop grande et un des boutons de la première
ligne débordes..

J'ai comme qui dirait l'impression qu'il faudrait
que j'intégre le style à une cellule de tableau
comme dans mon exemple en javascript...

Mais puis-je faire cela avec un css

?

28 sept. 2005, 21:38

À mon avis, tu pourrais réduire la taille de la police d'un point sans que ça n'affecte la facilité de lecture et ça règlerait le problème.

28 sept. 2005, 21:41

Nan ça revient au même qu'avant en diminuant la police

comment faire pour intégrer class="bouton" dans la balise de la cellule <td> ? ou son équivalent php

?

28 sept. 2005, 22:00

Je crois qu'au niveau CSS, tu aurais grand intérêt à parcourir les tutos de alsacreations pour y découvrir des méthodes de mise en page fort instructives.

29 sept. 2005, 10:26

Pourquoi ne pas mettre une valeur en pourcentage ?

29 sept. 2005, 11:40

Visiblement ça ne change rien

....
Il faudrait pouvoir autoajuster horizontal les boites
et apparement çà n'est pas possible en css

!
On ne peut que faire un text-align en css
le align:100%; ne fonctionne/n'existe donc pas

!

29 sept. 2005, 11:52

30% 30 % et 30% pour la width et align = auto...

29 sept. 2005, 12:22

Nan, ça ne change rien chez moi mais encore merci

!

30 sept. 2005, 13:41

Ta feuille de style fait référence à a.bouton et non à td.bouton
donc ton attribut class="bouton" doit se trouver dans les balises
<a> et non dans les <td>

Bingo avec le css et td.bouton !
Tellement évident au final que j'ai presque honte
de ne pas y avoir penser avant

Par contre hover ne semble pas fonctionner sur
la cellule. Je vais essayer de le remplacer par un
Onclik $\:D/$ !
Zut ça change rien !

La pseudo classe :hover n'est pas interprétée par Internet Explorer
sur autre chose qu'une balise <a>

](*,)

et il y'aurai t'il un équivalent de onMouseover ou onmousedown en CSS

?

Apparement je ne suis pas la seul à me poser cette question

...
http://www.experts-exchange.com/Web/Web ... 23238.html

30 sept. 2005, 13:46

La pseudo-classe :hover, c'est du CSS : par contre les évènements onmouseover et onmousedown fonctionneront sur des cellules de tableau.

30 sept. 2005, 13:48

onmouseover et onmousedown fonctionneront dans un css

?

[CSS] Ligne de boutons autoajustable(largeur d'un tableau)

Qui est en ligne