28220 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde ! Smiley youpi
Alors voîla, étant débutant utilisant firefox, quand je vois une beau site web bien fait je regarde le code source ( Smiley love firefox !!), et je m'apercois que la plupart des sites sont fait grâce à la balise <table> (et le reste avec <td>, <th> etc.. dont je n'ai pas trés bien compris les différences a part la taille de la police Smiley confus ) ..
je décide donc de changer mon site web fait en jeu de cadre en jeu de tableaux (même si cela est déconseillé .. je ne connais pour l'instant aucune autre alternative !! Smiley confused elles sont les bienvenues !!)

la Mise en Page de mon site : Smiley cligne

<table align="center" width="800px" bgcolor="#000080" cellpadding="0px" cellspacing="0px" cols="1" > ( TABLE principale )

<tr> ( LIGNE pour le header )
	<th valign="top"> ( TH pour le header )
	
<img src="img/header.jpg" border="0" height="256" width="800">
	
	</th>
</tr>

<table align="center" width="800px" cellpadding="0px" cellspacing="0px" > ( seconde TABLE pour le menu-contenu )

	<th align="left" width="320px" > ( TH pour le menu -aligné gauche, 320px de large- )
	
Contenu du Menu
	
	</th>

	<th align="center" valign="top" width="480px" background="img/css_back.gif" style="background-repeat:repeat-y" > ( TH pour le contenu -aligné milieu mais a côté du menu, 480px de large, Valigné en haut pour que le texte soit en haut- )


Contenu du site


	</th>
	
</table> ( troisieme TABLE pour l'image du bas et pour pouvoir marquer ttoinou )

<tr>
	<th valign="bottom" width="800px">
<img src="img/bottom.jpg" border="0" height="64" width="800">
	</th>
</tr>

</table>


Toute ma vision est fondée sur quelques pages web que j'ai visitées comme
par exemple http://www.msncreative.net/ fait avec joomla ..
Probleme :

1° Firefox comprend toute la page web du début à la fin
mais dans l'apercu Dreamweaver je ne vois pas du tout la table 2 pour le menu et contenu
2° très gros problème qui requiert quelqu'un qui a déja construit un site autour des table :
Je ne vais pas, dans chaque html de mon site, mettr des tableaux !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

(peut-on changer avec le CSS les propriétés de la police utilisée quand je met <td> ou <th> ?? par ex : je veux que la police aie 16px de hauteur quand jutilise la balise <td> etc.. je vais essayer de trouver sa sur
http://www.tuteurs.ens.fr/internet/web/html/css.html
Smiley cligne )
Merci ! Smiley ravi
Modifié par titoinou (04 Oct 2006 - 14:04)
petit probleme de dreamweaver qui voit rien résolu mais ..
alors je dois utiliser du CSS pour déclarer mon jeu de table ?
salut !

a écrit :
mon site web fait en jeu de cadre en jeu de tableaux (même si cela est déconseillé .. je ne connais pour l'instant aucune autre alternative !! confused elles sont les bienvenues !!)


l'alternative ce sont les elements de type <div> tout simplement :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/

ensuite :
a écrit :
(peut-on changer avec le CSS les propriétés de la police utilisée quand je met <td> ou <th> ?? par ex : je veux que la police aie 16px de hauteur quand jutilise la balise <td> etc..


tout ce qui est du domaine de la mise en page est possible en css, ainsi ca donne :

table th { font-size:18px; font-weight:bold; text-align:center; }
table td { font-size:16px; text-align:left; }


enfin :
a écrit :
1° Firefox comprend toute la page web du début à la fin
mais dans l'apercu Dreamweaver je ne vois pas du tout la table 2 pour le menu et contenu


euh ... le mode création de DreamWeaver utilise je crois un vieux moteur de navigation donc pour tester ton code je te conseille d'ouvrir ta page avec Internet Explorer et Firefox
Modifié par mpop (04 Oct 2006 - 14:18)
merci pour tes conseil Smiley cligne Smiley cligne !!
Je pense que si on ne veux pas utiliser de table on utilisera des div ..
Fodrai que je me mette au CSS, moa ..
bref déja si je réussi une mise en page pour l'instan c'est pas mal !
Je vais mettr résolu à ce sujet et en créér un nouveau

encore merci!
putch a écrit :
l'alternative ce sont les elements de type <div> tout simplement

NON, les div ne sont pas une alternative aux tableaux. On peut très bien faire une mise en page relativement complexe sans jamais utiliser un seul élément div ni un seul tableau de mise en forme.

Si on commence à penser « div remplace table » ou « div remplace td », on n'est pas sorti de l'auberge.

Cf. [Coup de gueule] Arrêtons de confondre XHTML et CSS ! et [Coup de gueule 2] Arrêtons de remplacer systématiquement les tableaux par des div !

Le lien proposé par putch est très bien, mais il vaut mieux le lire sans idées préconçues et erronées. Smiley cligne
titoinou a écrit :
Alors voîla, étant débutant utilisant firefox, quand je vois une beau site web bien fait je regarde le code source ( Smiley love firefox !!), et je m'apercois que la plupart des sites sont fait grâce à la balise <table> (et le reste avec <td>, <th> etc..

Ah ? Tiens, moi j'ai souvent tendance à les trouver trop rigides, manquant d'espaces pour la lisibilité du texte, etc. Ça n'a d'ailleurs rien à voir avec la technologie employée (ou du moins pas grand chose à voir, mais plus avec les habitudes de conception « à l'ancienne ».

Pour le plaisir des yeux, et pour voir des mises en page sans tableaux intéressantes :
http://www.csszengarden.com/
http://www.csszengarden.com/?cssfile=/193/193.css
http://www.csszengarden.com/?cssfile=/191/191.css
http://www.csszengarden.com/?cssfile=/190/190.css

Il s'agit à chaque fois de la même page, avec exactement le même code HTML. Seules la feuille de style et les images de fond (appelées via la feuille de style) changent.
oui oui ..
Evidemmen tous les site n'utilisent pas de tableaux !
Encore faut-il savoir le faire .. Smiley smile
merci pour vos réponse !!
je lis vos liens

PS: aarg c vraiment trop beaux zengarden Smiley cligne (c'est fait avec les balise div)
Modifié par titoinou (04 Oct 2006 - 16:38)