Le CSS et les tableaux

Pikooz · 4 Juin 2006

Bonjour à tous !

Comme je l'ai dit dernierement, je refont mon site en CSS.

Avant :

-www.photoshop-creation.com

Apres :

-www.photoshop-creation.info (c'est mon url de test

quand tout sera OK je le redirigerais sur mon .com)

Mais voila mon probleme, j'arrive a tout mettre en CSS, sauf les tableaux.

Je vous invite a lire le source de ma page si vous vous sentez d'attaque pour m'expliquer comment faire...

Je ne sais pas comment organiser mon css pour les tableaux sans écrire trop de chose inutile en faite ^^

D'avance merci à ceux qui se donnerons la peine de m'aider

Bon dimanche !

Zim' · 4 Juin 2006

tout dépend de ce que tu souhaite faire.

si il s'agit du menu comme celui de gauche, alors la oui en CSS c'est mieux

si il s'agit de tableau, de vrai tableau avec des colonnes et des lignes, alors la je ne vois pas l'utilité du css, bien au contraire.

tout a été prévu pour son utilisation, donc chaque choses a leurs place

mowmow · 4 Juin 2006

Tu devrais mettre des alt ou title pour les images de ton menu

remy498 · 4 Juin 2006

Tu peux toujours t'aider de tutorial comme celui-ci :
-http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

C'est pas bien dur il suffit de se mettre dedans.

Edit : essaye de revoir l'ensemble de ton code source car sur le site en .info on trouve ce genre de chose :

Code:

/tr>

</table>
<!-- End ImageReady Slices -->
</body>
</html>            </div></td>
            <th width="790" valign="top">

ou encore

Code:

</head>

<body>
<center>
	<div id="header">
		<html>

<head>
<title>header_5.0</title>

Pikooz · 4 Juin 2006

Merci pour ces liens !

Quel est l'intéret des alt ?

En faite je veux le faire pour le menu de gauche, mais aussi et surtout pour les cadres (bienvenu, systeme d'exploitation etc..)

Pensez vous que cela soit nécessaire ?

remy498 · 4 Juin 2006

Le alt est nécessaire si tu veux respecter les normes, mais également pour une question d'accessibilité de ton site et surtout pour le référencement.

Pour savoir s'il est nécessaire de passer ton site tout en css au lieu des tableaux tu peux lire ceci :
-http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Tableaux-ou-Div-petite-comparaison-concrete

Pikooz · 4 Juin 2006

J'ai de la lecture pour cet apres midi c'est cool

Je vous tiendrais au courant de l'avancé de mon site

Merci beaucoup !

Pikooz · 4 Juin 2006

remy498 a dit:
Tu peux toujours t'aider de tutorial comme celui-ci :
-http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

C'est pas bien dur il suffit de se mettre dedans.

Edit : essaye de revoir l'ensemble de ton code source car sur le site en .info on trouve ce genre de chose :

Code:

/tr> </table>  </body> </html> </div></td> <th width="790" valign="top">

ou encore

Code:

</head> <body> <center> <div id="header"> <html> <head> <title>header_5.0</title>

En faite je reprend le site car il a été fait via un editeur et j'aime pas trop ca.

Quand tu me cites ce code, que n'aime tu pas ?

Pandore · 4 Juin 2006

Dans une page web, il n'y a qu'une seule balise "html", "head", et "body".

Quand on regarde ton code source, c'est un collage "maladroit" de différentes sources ... Ces balises sont présentes plusieurs fois sur la page.

Sinon, très joli le design !

:wink:

Pikooz · 4 Juin 2006

Si quelqu'un vieux bien me contacter sur mon msn : ngcpowa-arobase-hotmail.com ca serait vraiment super, je comprend rapidement

mais j'aimerais bien une petite explication en direct lol

J'attends qu'on me contacte en attendant je regarde Roland Garros

Merci bien !

Pikooz · 4 Juin 2006

Alors voici la fenetre que je veux traduire en div et css :

J'ai tracé vulgairement les découpes des images.

J'ai donc créé mon fichier html suivant :

Code:

		<div id="fenetre"> 
			<div id="fenetre_haut_gauche"></div>
			
			<div id="fenetre_titre"></div>
			
			<div id="fenetre_haut_droite"></div>
			
			<div id="fenetre_gauche"></div>
			
			<div id="fenetre_contenu"></div>
			
			<div id="fenetre_droite"></div>
			
			<div id="fenetre_bas_gauche"></div>
			
			<div id="fenetre_bas"></div>
			
			<div id="fenetre_bas_droite"></div>
		</div>

Je pense que ceci est plutot correct, par contre, le css c'est autre chose :

Code:

#fenetre             
{ width: 760px; }

#fenetre_haut_gauche 
{ width: 12px; height: 29px; top:0pxpx;left:0px;position:absolute; background-image: url("images_fenetre/informations_01.jpg"); background-repeat: no-repeat; }

#fenetre_titre       
{ width: auto; height: 29px; top:0px; position:absolute; background-image: url("images_fenetre/informations_02.jpg"); background-repeat: no-repeat; }

#fenetre_haut_droite 
{ width: 13px; height: 29px; top:0px;rigth:0px;position:absolute; background-image: url("images_fenetre/informations_03.jpg"); background-repeat: no-repeat; }

#fenetre_gauche      
{ width: 12px; height: 157px;left:0px; position:absolute; background-image: url(images_fenetre/informations_04.jpg); background-repeat: no-repeat; }

#fenetre_contenu     
{ width: auto; height: 157px; position:absolute; }

#fenetre_droite      
{ width:auto; height:auto; rigth:0px;position:absolute; background-image: url("images_fenetre/informations_06.jpg"); background-repeat: no-repeat; }

#fenetre_bas_gauche  
{ width: 12px; height: 22px; bottom:0px;position:absolute; background-image: url("images_fenetre/informations_07.jpg"); background-repeat: no-repeat; }

#fenetre_bas         
{ width: 760px; height: 22px; bottom:0px;position:absolute; background-image: url("images_fenetre/informations_09.jpg"); background-repeat: no-repeat; }

#fenetre_bas_droite  
{ width: 13px; height: 22px; bottom:0px;rigth:0px;position:absolute; background-image: url("images_fenetre/informations_08.jpg"); background-repeat: no-repeat;}

Et là, rien ne marche

meme les images ne s'affichent pas lol

Alors les experts ?

Aye-Aye · 4 Juin 2006

Si tu ne veux pas avoir de pbs d'affichage avec tes div, indique systématiquement une dtd dans tes docuuments html et n'hésite pas à mettre les propriétés principales de tes boîtes à 0 plutot que de ne pas en mettre...

Pikooz · 4 Juin 2006

D'accord, mais c'est quoi dtd ? lol

Quand tu parles des propriétés c'est à dire ? Largeur, hauteur ?

Merci pour cette réponse

Aye-Aye · 4 Juin 2006

IE a son propre modèle d'affichage des div si aucune dtd n'est indiquée dans le document html. Dans ce cas, la valeur de width, la largeur du contenu, inclut l'espacement interne.
pour les dtd : http://openweb.eu.org/articles/differentes_dtd/
Mais note bien que les dernières versions d'ie contiennent quelques bogues d'affichage pour les div... Ainsi, il faut parfois quelques contorsions dans la déclaration des règles CSS...

Propriétés majeures : width, height, margin, padding, border

Pikooz · 4 Juin 2006

D'accord ! mais comprend tu ce qui bloque dans mon css pour l'affichage ?

Mon index + CSS + images si quelqu'un veut bien regarder

Edit : Je marche avec des id, je tente peut etre avec des class ?

Aye-Aye · 4 Juin 2006

Pour l'instant, je n'ai guère le temps d'étudier cela... désolé. :|

Pikooz · 5 Juin 2006

Voici donc maintenant mon index :

Code:

	<div class="fenetre">
			<div class="fenetre_haut">
				<div class="fenetre_titre">.: Syst&egrave;me   d'exploitation (OS):.</div>
	           	<div class="fenetre_sous_titre">Windows,logiciel, s&eacute;curit&eacute;, linux....</div>
			</div>
	         
			<div class="fenetre_milieu">
			    <p>Bonjour mesdames et messieurs</p>
			</div>
         
	       	<div class="fenetre_bas"></div>
	</div>

Et le CSS

Code:

/* #################### AFFICHAGE DES BOITES #################### */
	.fenetre 
	{	width: 780px;
		height: 50px;}
	
	.fenetre_haut
	{ 	width: 780px;
		height: 28px;
		position:absolute;
		background-image: url("../images/haut.png");
		background-repeat: no-repeat;}

	.fenetre_milieu	
	{ 	padding-left : 15px;
		padding-right : 15px;
		padding-top : 10px;
		width: 750px;
		background-image: url("../images/milieu.png");}

	.fenetre_bas
	{ 	width: 780px;
		height: 22px;
		background-image: url("../images/bas.png");
		background-repeat: no-repeat;}

	.fenetre_titre
	{	width: 290px;
		height: 13px;
		float:left;
		font-style: italic;
		font-weight: bold;
		color:133e73;
		margin-left:15px;
		font-size: 13px;
		margin-top:10;}

	.fenetre_sous_titre
	{	width:450px;
		height:13px;
		overflow: auto;
		margin-top:10px;
		color:maroon;
		font-style: italic;
		font-weight: bold;
		font-size: 13px;
		margin-left:15px;}
		
/* #################### FIN AFFICHAGE DES BOITES #################### */

Le rendu est le suivant (just pour la boite du milieu je précise) :

- http://photoshop-creation.info/aaa/

Quelqu'un peut m'aider ?

Zim' · 6 Juin 2006

Pikooz a dit:
Alors voici la fenetre que je veux traduire en div et css :

J'ai tracé vulgairement les découpes des images.

A ta place je ferais trois découpes:

le haut de la boite dans laquel tu mettra un padding left pour le texte...

le bas de la boite

le milieu de la boite, d'un pixel de hauteur, ou tu appliquera un repeat sur la hauteur

ce serais beaucoup plus simple et beaucoup plus light quand meme

Pikooz · 6 Juin 2006

C'est ce que j'ai fait par la suite justement

Lis mon dernier post, mainteannt j'ai bien le haut, le milieu et le bas, et dans le haut je veux 2 case pour saisir mon titre et un sous titre sur la meme ligne (de style différent)

Donc peux tu relire mon dernier post stp et me dire ce que tu en pense

merci

remy498 · 6 Juin 2006

A mon avis, reprend ton design de 0 (au niveau programmation) car là tu essaies de modifier tout en laissant des choses comme ça :

Code:

</div>
</body>
</html>

L'intérêt étant que ton design soit entièrement en css et qu'il n'y ait plus aucun tableau (notamment au niveau des menus).

Aussi attention au rendu qui n'est pas le même si tu utilises Mozilla et IE.

Pikooz · 6 Juin 2006

Ca c'est parce que tu as regardé la source du site, et pas celle que j'ai citée

Parce que le site charge mon header, qui lui est très "sale" niveau code.

Pour le source de l'index je veux partir comme ceci (juste pour une fenetre)

Code:

   <div class="fenetre">
         <div class="fenetre_haut">
            <div class="fenetre_titre">.: Syst&egrave;me   d'exploitation (OS):.</div>
                 <div class="fenetre_sous_titre">Windows,logiciel, s&eacute;curit&eacute;, linux....</div>
         </div>
            
         <div class="fenetre_milieu">
             <p>Bonjour mesdames et messieurs</p>
         </div>
         
             <div class="fenetre_bas"></div>
   </div>