5568 sujets

Sémantique web et HTML

Bonsoir,

voila, j'essaye de faire un site internet Smiley biggol
J'ai commencer a faire mon design puisque c'est un point que je trouve primordial.

site composé de 3 colonnes.
mes compétences: nulles, j'apprend en m'amusant. je commence en html et en css. c'est trés rigolo pour le moment.

j'aurais aimé donner un effet a mes colonnes centres (gauche et centre)
leur donner une forme en haut arrondies. En clair, mes colonnes sont collées, au dessus d'elle, j'aurais aimer rajouter 3 images (je suppose)
un coin gauche, un coin droit, et une image repétée x fois entre les 2 Smiley lol

j'ai creer un bout de code

html
[#black]
<table>
            <tr>
<td class="fgauche" align="left" valign="top"><img src="url/fenetregauche.png" height="29"></td>
              <td class="fenetre">&nbsp;</td>
<td class="fdroite" align="left" valign="top"><img src="url/fenetredroite.png" height="29"></td>
  			</tr>
</table>



CSS

.fenetre { padding: 5px 192px 0px 22px; background-image: url(centrefenetre.png); background-repeat: repeat-x;}
.fgauche {padding: 5px 0px 0px 22px; }
.fdroite {padding: 5px 192px 0px 0px; }



oups, j'allais oublier de poser ma question Smiley biggol

en fait, cela fonctionne plutot pas mal, mais, le centre, entre mes 2 images s'affiche a quelques pixel de l'image de gauche et idem de celle de droite, de plus, le padding haut de 5pixel n'est pas pris en compte Smiley sweatdrop ouai en fait ca marche pas terrible Smiley lol

pourriez vous m'aider? merci apr avance. Smiley lol
Modifié par Trax (21 Mar 2006 - 21:29)
Pourquoi ne pas avoir utilisé les images des coins comme images de fond ? Il suffit alors de les positionner bien comme il faut en CSS (background-position).

Sinon, je trouve ça un peu dommage de créer un tableau à plusieurs cellules dont la plupart seront vides de tout contenu.

Il y a plusieurs trucs pour réaliser ce genre d'arondis sans passer par des tableaux, c'est moins "facile", mais c'est plus propre. Il me semble qu'il y a un petit tuto Alsacréations sur le sujet. Sinon, pour ma part, j'ai aussi fait ça :

http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
Et la version fluide :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

J'utilises d'ailleurs les bases de ce deuxième exemple pour mon site personnel.
merci beaucoup Smiley biggrin

je vais essayer ce tuto pour voir...

en fait je commence et je n'ais pas encore toutes les bases Smiley lol , je fais un peu du mac gyver dirons nous... j'ai commencé a bien feuilleter ce site hier soir, et j'ai trouvé plusieurs choses interressantes...

merci encore pour le lien Smiley lol c'est super sympa de m'avoir répondu, et surtout aussi rapidement Smiley smile

par contre, placer les images de coins n'est pas un probleme, elle le sont en fait Smiley lol
c'est l'image de centre.... enfin je reviendrais en parler quand j'aurais lu les tuto Smiley lol
Modifié par Trax (22 Mar 2006 - 12:50)
salut, don c en fait, je viens de finir de lire ton tuto,

mais cela ne correspond pas du tout a ce que je veux faire. En effet si j'avais voulu faire un haut uniforme j'aurais en effet de moi meme utilisé cette "technique". Mais ce n'est aps le cas, j'ai 2 coin complettement différent, de forme et de taille.

mettre mes coin en image de fond ne change pas plus le probleme.
En effet, ces 2 images sont deja bien placer. certes mon code est salle, et beaucoup moins classieux que celui que tu propose mais son objectif est tout autre. Smiley murf

alors tu me diras pourquoi j'utilise un centre repetté et pas une image fixe comme tu le propose? ben simplement parce que ma page est en 1280*1024, mais doit etre adaptable a des resolutions plus petites, comme celle utiliser dans ton tuto 800*600 Smiley cligne

bon donc toujours aucune idée? Smiley biggrin
Ce qui est très gênant pour te répondre c'est

1. que tu pars d'un tableau Smiley ohwell

2. il n'y a aucun code/contenu correspondant à un document html réel (reconsidère la page mise en lien par mpop de ce point de vue. C'est très différent et les css c'est toujours ainsi que ça devrait se travailler, sur du code html concret).

3. il est très difficile de se représenter ce que tu veux obtenir graphiquement parlant.

Voilà quoi Smiley cligne
Trax a écrit :
alors tu me diras pourquoi j'utilise un centre repetté et pas une image fixe comme tu le propose? ben simplement parce que ma page est en 1280*1024, mais doit etre adaptable a des resolutions plus petites, comme celle utiliser dans ton tuto 800*600 Smiley cligne

bon donc toujours aucune idée? Smiley biggrin


Pourtant il me semble bien que le deuxième lien que je proposais donnait quelque chose de sympa en fluide :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

Bon, c'est un peu limité : vu la taille des images utilisées, on ne peut pas trop dépasser les 1400px de large pour la taille de la fenêtre (ce qui peut s'avérer problématique si on ne limite pas la largeur du conteneur principal), et on ne peut pas trop descendre en dessous de 300px de largeur de fenêtre.
Remarque, je trouve que niveau fluidité c'est déjà pas trop trop mal.

Au passage, je l'ai adapté sur mon blog, par ici :
http://www.covertprestige.info