28220 sujets

CSS et mise en forme, CSS3

Passage du tableau au div...je crac...

Pages :
Bonjour,

j'essaye de transformer ce bout de code avec les div pour reduire ce bout de code...

cependant je n'y arrive pas du tout

voici le code html



<table width="572" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td background="images/infobox/top_1_h.gif" height="29"></td>
  </tr>
  <tr>
    <td background="images/infobox/nesw_centre3.gif"><table width="520" align="center"><tr><td><table cellpadding="1" class="infoBox">
  <tr>
    <td>
		<table border="0" width="100%" cellspacing="0" cellpadding="4" >
 			 <tr>
   				 <td align="center" width="33%" valign="top">
					<table width="100%" border="0" cellspacing="3" cellpadding="0">
  						<tr> 
    						<td width="110" rowspan="5"> 
              					<div align="center"><a href="#"><img src="test.gif" border="0" width="95" height="110"></a></div>
    						</td>
    						<td width="100%" bgcolor="#E8ECC3"><center>
							<a href="#">NON PRODUIT</a>
						  </center></td>
  						</tr>
						<tr> 
    						<td width="100%" height="5"></td>
  						</tr>
  						<tr> 
    						<td width="100%" bgcolor="#FBFDE8"> 
							  <table width="95%" height="60" align="center">
								<tr> 
								  <td width="90%">[TEXTE]</td>
								  <td width="10%">[IMAGE]</td>
								</tr>
							  </table>
							</td>
  						</tr>
  						<tr> 
    						<td width="100%" height="5"></td>
  						</tr>
						  <tr> 
							<td>
							  <table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="45%"><div align="center"><font color="#FF0000">[TEXTE COURT]</font></div></td>
						
									<td width="15%"><div align="center">[IMAGE]</div></td>
									<td width="40%"><div align="right">[TEXTE COURT]</div><td>
								</tr>
							  </table>
    						</td>
  						</tr>
  						<tr> 
    						<td bgcolor="#E8ECC3" colspan="2"><div align="left">[TEXT LONG SUR UNE OU DEUX LIGNES]</div></td>
						</tr>
					</table>
					</td>
  				</tr>
				</table>
				</td>
  			</tr>
		</table>
  		</td>
		</tr>
	</table>
  </td>
  </tr>
  <tr>
	<td background="images/infobox/news_bas.gif" height="9" ></td>
  </tr>
  <tr> 
    <td height="5"></td>
  </tr>
</table>


Si je peux je vous donne un exemple en ligne...

sinon voici ce que je souhaite faire...

^^^^^^^^^^^ [ NON CENTRER-------------------------------]
<---------------> [ Espace--------------------------------------]
<--IMAGE-------> [ Texte -------------------------------][ image ]
<---------------> [ Espace--------------------------------------]
<<<<<<<<>>>>>>[ Texte ]---------- Smiley texte ---------------[ texte ]
[Espace --------------------------------------------------------]
[Texte ---------------------------------------------------------]


voila en gros la mise en page voulu....

une image a gauche qui prend tout la hauteur.

je ne veux pas completement supprimer les tables, en gros je creer un tableau pour faire mes deux colonnes et ensuite j'organise a l'interieur sans tableau.

J'ai essayé des trucs mais j'arrive jamais a faire ce que je veux... alors si quelqu'un a une idée... j'en serais ravis

Merci d'avance

++
fab
Modifié par fab27 (20 Mar 2005 - 21:15)
j'ai essaye de faire des choses et finalement c'est deja plutot pas mal....

des que j'aurais une version a peu pres potable, je vous la montrerez afin d'avoir un avis ou deux...

pour savoir si mon code est correct et optimisé..

Encore merci

++
fab
Bon malgres toutes mes tentatives j'arrive pas a mes fins. Smiley decu

donc pour que vous voyez ce que je souhaite faire, je vous ai fait une petite image.

j'aurais besoin d'un coup de main, ou que l'on me mette sur la voie pour enfin y arriver.

Ce type de tableau est utilisé sur ne nombreuses pages de mon site c'est pourquoi il faut absolument que j'arrive a trouvé un moyen de le transformer pour alleger le code. qui est vraiment trop lourds avec des <td>

voici un lien qui mene sur une image de ce que je souhaite faire.

Encore merci pour tout ! je n'arreterais jamais de le dire c'est grace a vous que j'arrive a me débrouiller en css maintenant. Esperant un jour pouvoir a mon tour porter conseil. Smiley cligne

Le lien => http://www.premiumwanadoo.com/jlutin/cadre.gif

++
fab
Pour une fiche produit j'aurais tendance à dire qu'un tableau n'est pas forcément inadapté à l'organisation des données (je vais me faire huer là), il faudrait en savoir plus sur le contenu des cellules pour t'aiguiller.

Par contre les tableaux imbriqués c'est vraiment le type de conception à éviter absolument. Lourd, inaccessible, difficile à modifer...

Dans ton cas il serait interessant, donc, d'en savoir plus sur le type contenu exact de chaque cellule.

Personnelement je le ferais en 1 div (global) + 1 image (dans le div, aligné à gauche) + 1 tableau (dans le div aligné à droite).

Ou peut être même juste 1 tableau.
Modifié par jb_gfx (23 Mar 2005 - 23:42)
Pour limiter la casse, au niveau sémantique je pensais qu'un tableau bien organisé serait le moins pire.

Car au pour cette présentation : centrer verticallement un texte de hauteur variable, en CSS sur IE c'est impossible. Dans le cadre d'un site dynamique cela devient un vrai cauchemard.
Modifié par jb_gfx (24 Mar 2005 - 01:07)
Administrateur
jb_gfx a écrit :
Car au pour cette présentation : centrer verticallement un texte de hauteur variable, en CSS c'est impossible. Dans le cadre d'un site dynamique cela devient un vrai cauchemard.


Rectification : "centrer verticalement un texte de hauteur variable, en CSS [b]sur IE c'est impossible simplement[/i]. Smiley biggol
Modifié par Raphael (24 Mar 2005 - 01:01)
Bien entendu =)
[ troll]
De toute façon quand on parle de problèmes CSS on parle bien de IE, non?
[/troll]

D'ailleur j'ai corrigé pour éviter les risques d'amalgames. Smiley cligne
Modifié par jb_gfx (24 Mar 2005 - 01:09)
Bonjour,

Voici ce que contient le contenu de chaque cellule.

image => une image a hauteur fixe et largeur fixe (comme sur l'exemple).
nom du produit => du texte (un nom de produit Smiley lol )
dans le texte centrale => que du texte d'une longeur de 250 caractére max
ensuite dans les trois cellules.
la plus a gauche=> texte (environ 20 caractéres) => point fidélité
la centrale => une image apparaissant suivant les produits (taille fixe)
la plus a droite => prix de l'article

ensuite dans la cellule du bas => l'arbre de catégories du produits (texte et lien).

Voila pour le contenu des cellules.

sinon j'ai essayé de faire quelques choses en pur CSS mais impossible de le faire fonctionner sur les principaux navigateurs. et dans la plupart des cas je coince...

Encore merci

++
fab
J'ai bidouillé un truc tu regardes si ca te va et tu me dis
c'est ici

Comme dit plus haut pas de cenrage verticale possible sur ie.
Modifié par gilles6975 (24 Mar 2005 - 10:12)
Vous etes vraiment trop fort Smiley eek

moi ca fait des jours que je boss dessus sans succés et la en l'espace de quelques heures vous me faite un truc qui correspont quasiment a ce que j'ai besoin Smiley biggrin

vous etes trop fort !!

sinon gilles6975 ton exemple est vraiment pas mal. maintenant j'aimerais savoir si avec ton code c'est possible que le bloc (nom produit / description / et point prix image) soit d'une hauteur égal a l'image de gauche ?

et qu'il n'y est aucun espace avec le bloc le plus bas (du texte aligné à gauche qui prend la largeur du tout !)

si c'est possible ton code me va a merveille Smiley biggrin

Merci pour tout

++
fab

PS : j'ai hate de voir le code
fab27 a écrit :
sinon gilles6975 ton exemple est vraiment pas mal. maintenant j'aimerais savoir si avec ton code c'est possible que le bloc (nom produit / description / et point prix image) soit d'une hauteur égal a l'image de gauche ?

et qu'il n'y est aucun espace avec le bloc le plus bas (du texte aligné à gauche qui prend la largeur du tout !)

ça c'est la question un peu bête mais bon Smiley lol
suffit juste de jouer sur la propriété height et les marges.
j'ai recupére ton code css et ca me vas au poil...

cependant j'ai un petit probleme, mais rien d'insurmontable je pense.

ton exemple est dans une autre div qui permet l'affichage d'une boite encadrant le tout avec des images de fonds. et j'utilise la balise <p> pour la afficher en fond l'image du footer de cette boite.

et comme dans ton script tu utilise une balise <p> mon fond se repete également a certain endroit indésiré.

j'ai donc regarder les options d'héritage et j'ai fait cela

mon div a un id newproduct j'ai donc fait ceci dans le stylesheet pour affecter uniquement le niveau de cette id mais rien a faire.




<div id="newproduct">
<h2></h2>
[ici la div de cette exemple]
<p></p>
</div>




p#newproduct {
background: url(images/newprod_b.gif) no-repeat;
height: 9px;
}


et la rien a faire mon image de fond ne s'affiche pas. alors que si je fais cela


#newproduct p{
background: url(images/newprod_b.gif) no-repeat;
height: 9px;
}


mon image s'affiche bien dans mon div newproduct mais également dans la div de contenu pour les balises p (ici fonctionement normal)

donc comment puis je faire pour que mon fond apparaissent uniquement sur la balise <p> de ma div newproduct.

Si je ne trouve pas j'aurais plus qu'a créer une classe sur le p (mais ce serait dommage).

Encore merci

++
fab
Modifié par fab27 (24 Mar 2005 - 12:34)
fab27> je crois qu'il te serait préférable de revoir les bases du CSS...

"p#trucmuche" correspond en HTML au <p id="trucmuche">

"#trucmuche p" correspond à <div id="trucmuche"><p>...</p></div>
Oui je suis d'accord avec ca...

mais alors existe il un moyen de faire en sorte (sans rajouter de classe) autre que l'id global du conteneur. de faire en sorte que uniquement le <p> contenu dans une div soit affecter.

en gros j'ai 


<div id="bidule">
<h1></h1>
<div id="truc"><p></p></div>
<p></p>
</div>


en gros faire en sorte qu'uniquement le p contenu dans bidule soit affecter et non les deux balises p

si y a une astuce je suis preneur Smiley lol

encore merci

++
fab

Ps : sinon tout fonctionne au poil, merci beaucoup..
Modifié par fab27 (24 Mar 2005 - 13:22)
Tu es vraiment trop confus dans tes explications; essais d'être un peu plus précis et de poster un exemple de code plus complet.

Cette propriété :


#newproduct p {
 background: url(images/newprod_b.gif) no-repeat;
 height: 9px;
}


N'affectera effectivement que les p contenu dans newproducts. Si le résultat est différent c'est que tu t'y prend mal.

Je suis assez géné par la façon dont a évolué ce sujet, les forums Alsacréations ne sont pas là pour servir d'intermediaire entre des personnes cherchant des morceaux de codes tout prets et des intégrateurs. Le but ici est d'apprendre et de faire passer un savoir, dans le cas présent cette mission n'est pas rempli puisque tu te retrouve avec un bout de code tout fait que tu ne comprend pas, et maintenant tu n'arrive pas à l'adapter a tes besoins. D'autres doivent donc, encore, te venir en aide pour des modifications trés simples.
Est-ce que cela va se passer comme ça pour tout le reste du site?
Maintenant que ton code est fait va tu passer autant de temps à essayer de le comprendre que si personne ne l'avait posté? Apparement pas.


PS: @ gilles6975 : Il y a une petite erreur dans ton code, la balise dl ne peut contenir directement que des dt et dd. Hors là il y a un h1 juste sous le dl. En résumé toute déclaration de liste ne peut contenir directement que des éléments de liste.
a écrit :

Le but ici est d'apprendre et de faire passer un savoir, dans le cas présent cette mission n'est pas rempli puisque tu te retrouve avec un bout de code tout fait que tu ne comprend pas, et maintenant tu n'arrive pas à l'adapter a tes besoins.


Premierement le code je l'ai parfaitement compris et modifier en fonction de mes besoins. ET comme je l'exprimais au debut de mon post je demandais que l'on me mette sur la voie... ET c'est grace a ce bout de code que j'ai compris comment fonctionne le positionement des divs dans un seul conteneur. Donc ne sois pas aussi cru dans tes propos.

Sur mon site il y a environ 80 modules j'en ai fait deja plus de 50 et j'ai demander de l'aide pour seulement deux d'entre eux.


Est-ce que cela va se passer comme ça pour tout le reste du site?


La reponse est non ! c'est juste que pour le moment je suis 24h / 24 sur le developpement de mon site et que j'avance tres vite. (vite mais surement).

Aujourd'hui j'ai fini encore 4 modules. Et le module presentant les nouveautés sur mon site me posé du fil a retordre car c'était le seule ou il y avait des elements séparé sur une seule ligne. (Maintenant j'ai compris) Alors ne soit pas si negatif ! Smiley fache

Pour reprendre ma question qui n'était pas mal posé puisque certain l'on tres bien compris.

c'était savoir comment faire pour designer uniquement une balise contenu dans une div (en tant qu'enfant a un niveau).

comme ceci 


<style>
#test p{
font-weight: bold;
}

</style>

<div id="test">
	<p>un essai pour vous montrez</p>
	<div id="test2">
		<p>Et voila !</p>
	</div>
</div>


sur ce test les deux balises <p> sont affectés par l'effet de style (texte en gras).

moi ce que je cherche a faire c'est qu'uniquement les enfant a un niveau soit affecté par l'effet de style. en gros dans mon exemple uniquement (un essai pour vous montrez) en gras et (Et voila !) normal sans effet de style.

Effectivement je pourrais rajouter une classe, mais j'aimerais savoir s'il n'y a pas une solution sans rajouter une classe supplémentaire.

a écrit :

N'affectera effectivement que les p contenu dans newproducts. Si le résultat est différent c'est que tu t'y prend mal.


Oui il affecte que le p contenu dans newproducts mais également dans les autres div contenu dans newproducts ! Et je n'ai jamais dit le contraire (apparament tu n'avais pas compris ce que je disais).

Et merci anthony pour ta reponse.... c'est effectivement cela si je remplace le style de mon exemple par ca, cela fonctionne.


#test > p{
font-weight: bold;
}


avec ce bout de code il n'y a plus de notion d'heritage sur de multiple niveau. mais uniquement de parent-enfant direct.

Encore merci pour tout

++
fab
Modifié par fab27 (24 Mar 2005 - 14:25)
Ouhla détend toi, faut pas se mettre dans des états pareils. Smiley smile

Apparement il faut que je continue d'apprendre à faire passer certaines idées au travers d'un forum Internet, chacun sa croix à porter hein (c'est de l'humour - je vais tout préciser à partir de maintenant).

Tu sais quand je passe du temps sur ce forum je le fais simplement dans le but d'aider ceux qui en ont besoins et qui en font la demande (ce qui est ton cas). Le truc c'est que l'optique de ce forum est plus d'apporter un savoir de fond qui permettent de se dépatouiller de toutes les situations. En gros donner des bases solides.

Donc dans le cas présent je suis déçu de la façon dont ça s'est passé et je le dit. Même si je te l'accorde cette phrase est particulièrement mal tournée et mal venue (et je m'en excuse) :

a écrit :

Est-ce que cela va se passer comme ça pour tout le reste du site?


Pour ta question sur l'héritage des propriétés, je cherchait juste à mettre l'accent sur le fait que tu as des difficultés avec les sélecteurs CSS. Le but etait de t'aiguiller pour te faire avancé, apparement je m'y suis trés mal pris avec toi et maintenant que tu as une réponse toute faite qui corrige ton problème actuel tu n'y passera plus le temps necessaire pour réellement comprendre le fond (en tout cas pas aujourd'hui), donc là encore le but du forum est raté.

Voilà, je tacherai de faire mieux la prochaine fois, jespère juste qu'on sera 2 dans ce cas.
Pages :
Sujet clos
Aller à