5568 sujets

Sémantique web et HTML

Taille automatique d'une image

Bonjour à tous,

Voilà je vous explique mon souci je suis en train de passer de HTML 4.01 Transitional en Strict.

Le souci c'est que j'ai des boxes sur le coté délimiter par une image, qui s'allonge ou se raccourci en fonction du contenu et de la hauteur de la boxes.
Le souci c'est que l'image du coup est définit par height="100%" width="10"
le tableau est définit par:<td class="infoBoxHeading" height="100%">
la hauteur s'adapte

en transitional j'avais:
<table class="infoBoxContents" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td class="infoBoxHeading" height="100%"><img src="images/boxmod/ll.gif" alt=" " height="100%" width="10"></td>
    <td class="boxText" height="10" width="100%" align="center">test</td>
    <td class="infoBoxHeading" height="100%"><img src="images/boxmod/lr.gif" alt=" " height="100%" width="10"></td>
  </tr>
</tbody></table>



Après avoir modifier pas mal mon code pour être valide, l'image définit sa taille en fonction de sa largeur.
largeur=10 ==> width =10 hors il devrais faire 100.

du coup je sais pas trop comment faire.

Merci à vous
Bonjour,

Comment se présente l'image ? Si elle est répétable et uniquement décorative (c-a-d qu'elle ne porte pas de contenu), il serait préférable de la placer en fond de l'élément et de la répéter sur l'axe y.

<div id="warp">
<div id="warp2">texte</div>
</div>
Comme tu as une image de chaque côté mais une largeur relative, il est plus simple d'imbriquer 2 div pour le fond. Si tu avais une largeur de bloc fixe, une seule image suffirait.
#warp{
  width:100%;
  background:url(...) repeat-y top right;
  padding-right:10px;
}

#warp2{
  width:100%;
  background:url(...) repeat-y;
  padding-left:10px;
}


Quitte à passer au HTML strict, autant te débarasser des tableaux de rpésentation.
L'image est un carré des 10px sur 10px noir, avec un barre blanche sue le premier px et sur tout le hauteur

ainsi répéter de bas en haut ou allonger ca fonctionne.
gotcha5832 a écrit :
Bon j'ai trouver bizarrement le souci viens du faite que j'annonce ou non dans le doctype:
"http://www.w3.org/TR/html4/strict.dtd"
C'est en partie ce qui fait la différence entre une page valide ou non.

Si le doctype n'est pas conforme IE ne réagis pas correctement.

ps. : tu as essayé ma solution ? L'utilisation d'un tableau n'est vraiment pas nécessaire pour ce que tu souhaites faire.
Bah voilà ce que j'ai fais:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html dir="LTR" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test h1</title>
<style>
#warp{ 
  width:100; 
  background:#000000  url(http://127.0.0.1/images/boxmod/lr.gif) repeat-y top right; 
 
  padding-right:10px; 
color: #ffffff;
} 
 
#warp2{ 
  width:100; 
  padding-left:10px; 
color: #ffffff;
}

</style>
</head>
<body bgcolor="#000000">
<div id="warp"> 
<div id="warp2">texte<br>
qsdsqd<br>
qsd<br>
qsd<br>
qs<br>
dqs<br>
dsq<br>
</div> </div>
</body>
</html>


Dans l'absolue effectivement ca marche, le souci c'est:
1- je gère un site en PHP avec 2000 page de code, et virer tout les table représente un travaille énorme.
2- je connais pas assez les div pour gérer toute la mises en pages à 9 cellules en div.

N'y aurais t il pas une possiblité avec les table?

Merci pour ton aide
Victor BRITO a écrit :

Si, il l'est. Smiley cligne


On n'argumente pas avec une dame sur un sujet aussi vulgaire, même quand elle se trompe. C'est inconvenant.
Modifié par Laurent Denis (29 Jan 2010 - 14:57)
Sujet clos
Aller à