Aide - Recherche - Membres - Calendrier
Version complète : Aide Découpe!
La Communauté TitaXium > Service Communication > Espace Developpement
Tux
Salut à tous j'ai appris comment faire des découpe et appliquer une iframe mais pour un design extensible jai toujours pas compris comment faire cela me parraît tellement difficile. Quelqu'un peut-il m'aider ou me conseiller??

Tux
Xtouch
Salut,

Il est nécessaire pour cela d'avoir un motif qui se répète, et qui puisse se mettre en fond d'un bloc (une div, une cellule de tableau, etc...)
Ainsi, pour une extensibilité verticale, il faut que les cellules qui vont s'agrandir lorsque le texte sera long, contiennent une image de fond qui se répète.
Pareil pour l'extensibilité horizontale.
Enfin je parle d'image, ça peut bien sûr être juste une couleur, dans ce cas aucun problème.

Mais dis nous un peu ou tu coinces, et si c'est pour une extensibilité en hauteur, largeur, ou les deux.
Antoine_935
peut etre que tu pourrais donner une image du design ou un lien où il y a la page ?
elf
C'est pas une commande ça a ce que je vois mais une demende de conseil non?
Xtouch
En effet SeoxyS, bonne remarque.

Je déplace.
Omsalam
Citation
mais pour un design extensible jai toujours pas compris comment faire cela me parraît tellement difficile


Il faut preciser qu'un design est, de base extensible.
Mais c'est souvent nous même qui ne le rendont non extensible. smile.gif

Bien entendu, je comprend que cela peut un peu rebuter au debut, mais avec un peu de pratique tu n'aura plus aucun problèmes.
Tux
Voilà j'ai essayer quelque chose grâce à un script que j'ai trouver sur le net, j'ai des erreurs dans mon code mais voici tout de même ce que sa a donner! C'est peut-être du charabia (un code plein d'erreurs) mais j'ai essayer de faire mon possible. Je sais que ce n'est pas le top mais j'édite mes sites web avec Dreamweaver MX 2004 et voilà ce que sa me donne le code sur Dreamweaver MX :

-----------------------------------------------------------------
Image du design pris online :


Code html :
Citation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#666666" text="#FFFFFF" link="#999999" vlink="#999999" alink="#999999">
<div align="center"></div>
</body>
</html>
<!-- ImageReady Slices (dysfunction design2.png) -->
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<table id="Table_01" width="756" height="402" border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
  <td>
  <img src="images/index_01.png" width="756" height="118" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_02.png" width="756" height="98" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_03.png" width="756" height="101" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_04.png" width="756" height="44" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_05.png" width="756" height="16" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_06.png" width="756" height="25" alt=""></td>
</tr>
<td><img src="images/down.PNG" width="756" height="23"></td>
</tr>
<tr>
<td bgcolor="#000000"><table width="756" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Salut à tous voici notre nouveau site web j'espère qu'il vous plaira</font></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/down.PNG" width="756" height="23"></td>
</tr>
</table></td>
</tr>
</table>
  <!-- End ImageReady Slices -->


Comme vous pouvez le constater je suis perdu dans tout sa, j'aurais besoin d'aide, de conseil !!!!!!

Tux , qui ne sais plus ou donner de la tête blink.gif
Darkthrone
Un conseil ? Lol tu t'es emmerdé pour rien, voilà le conseil.

Avec 3 div, t'avais ton design...

XHTML:
HTML
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xml:lang="fr">
<head>
<title>Nom du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="shortcut icon" type="images/gif" href="images/images/icone.png" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
</head>
<body>
<div id="header"></div>
<div id="menu">
<a id="HOME" href="" title=""></a>
<a id="GROUPE" href="" title=""></a>
<!--etc-->

</div> <!-- La pour les liens c'est toi qui voit, zones réactives, listes,...Chacun son choix! ;) Ici c'est des zones réactives-->
<div id="content"><p>Voila une découpe assez jolie</p></div>
</body>
</html>


CSS
Code
body
{
width:760px;
margin: auto;
background-color:#666666;
}

#header
{
width:756px;
height:402px;
background-image:url(chemin de ton image);
}

#menu
{
/* Tout dépend si tu as pris Liste ou zones réactives. Si c'est liste, c'est un peu plus compliqué que ça */
width:756px;
height:98px;
background-image:url(chemin de l'image);
}

#content
{
width:756px;
height:100%;
background-color:#000;
}

p
{
margin-top:0;
margin-bottom:0;
margin-left: 25px;
margin-right:25px;
text-align:justify;
color:#999;
font-family:"Verdana", Arial, Helvetica, sans-serif;
font-size:x-small;
}

/* Zones réactives*/
#home
{
width: largeur zone réactive
height: hauteur zone réactive
margin ( top , left,... ): pour placer la zone réactive. L'origine pour la premiere zone est le coin en haut à gauche du design.
float:left; /* On a plusieurs liens sur la même ligne faut faire flotter */
}

#groupe
{
/* de même que pour l'autre, mais attention , L'ORIGINE DE LA SECONDE ZONE REACTIVE EST LA FIN DE LA PREMIERE !. En gros, tu ne démarres plus du coin gauche pour placer ta zone réactive, mais de la droite de la zone réactive précédente.
Si tu as bien compris, la margin-left, sera petite par rapport à celle de la premiere zone réactive. A noter que la margin-top, le float:left, doivent être les mêmes suivants les zones réactives ( Hé oui, elles son sur la même ligne, donc la marge du haut reste la même pour tous ! :) */
}



Voilà un truc qui devrait donner pas mal smile.gif. Sauf erreur de ma part bien sur. C'est quand même beaucoup plus clair non ?
Tux
MMm daccord si jai bien compris je me créer une feuille de style et entre le deuxième code , et le premier code c'Est dans la premiere page ???

Merci beaucoup Dark t'es gentil ^_^ :wub: hahaha

Amicalement,Tux
Tux
Petite question mon contenu est afficer à gauche mais moi je le veut au centre comment je fait ?? Arff je veux que mon header apparaisse mais rien de fonctionne sad.gif et je ne sais pas comment faire pour que mes lien change de couleur je ne sais pas ou mettr le code puisque l'header n'apparait pas ohmy.gif
Tux
Oubliez tous sa je crois avoir réussi, donc voilà mon code
Citation
<html xml:lang="fr">
<head>
<title>Nom du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="shortcut icon" type="images/gif" href="images/index_01.png" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<link href="file:///C|/Documents%20and%20Settings/Frank/Bureau/Dysfunction%20v0.2/code.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000"><body bgcolor="#666666" text="#FFFFFF" link="#999999" vlink="#999999" alink="#999999">
<div align="center"></div>
</body>
</html>
<!-- ImageReady Slices (dysfunction design2.png) -->
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<table id="Table_01" width="756" height="402" border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
  <td>
  <img src="images/index_01.png" width="756" height="118" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_02.png" width="756" height="98" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_03.png" width="756" height="101" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_04.png" width="756" height="44" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_05.png" width="756" height="16" alt=""></td>
</tr>
<tr>
  <td>
  <img src="images/index_06.png" width="756" height="25" alt=""></td>
</tr>
<td><img src="../down.PNG" width="756" height="23"></td>
</tr>
<tr>
<td bgcolor="#000000"><table width="756" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p><img src="file:///C|/Documents%20and%20Settings/Frank/Bureau/home_01.PNG" width="86" height="46">
</p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Salut tout le
  monde! Le show de pagliaro a &eacute;t&eacute; terrible! &agrave; peu pr&egrave;s
  3000 personnes, de la bi&egrave;re, et un DVD de nous ki sen vient, des nouvelles
  photos sen vienne dont une coupe avec STEVE HILL(<a href="http://steve-hill.net" target="_blank">www.steve-hill.net</a>).
  Autre nouvelle, Agony va jouer au d&eacute;but d'un film de Cool Gaetes total.
  La premi&egrave;re et le 7 octobre &agrave; st georges. Finalement, on joue
  au XMG Music International au Hard Rock Cafe &agrave; Montr&eacute;al &agrave;
  9 heure 30. De grosses compagnies de disque seront pr&eacute;sente dont sony
  records, atlantic records, etc.... de plus on jou a joliette le 17 septembre
  au salon bleu en haut du sterling pub. </span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Rock on!<br>
  DysfunctioN</span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt"><font color="#414141">le
  14 juillet 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Salut tout le
  monde!! premi&egrave;rement, Comme vous avez surement entendu parler, Styvn
  a eu une accident d'auto. Mais il est sorti de l'h&ocirc;pital Enfant-J&eacute;sus
  et va super bien!!!!! Il est aussi d&eacute;bile qu'avant! Un vrai Dieu! tongue.gif.
  Il est pr&eacute;sentement au centre Fran&ccedil;ois Charon en r&eacute;adaptation.
  Il a un pied de cass&eacute; et quelque cicatrices mais rien de tr&egrave;s
  grave. Ne vous en faite pas pour Styvn un dieu reste un dieu!!!! Deuxi&egrave;mement,
  nous avons gagn&eacute; le concour organiser par mix 99.7 (Radio-Beauce) et
  avons ramasser le prix groupe compositeur Beauce appalaches. Et nous faisons
  la premi&egrave;re partie de Michel Pagliaro le 26 ao&ucirc;t dans le cadre
  du festival de St-Georges en blues. Sa va &ecirc;tre un show de grosse envergure
  Soyez-y! Troisi&egrave;mement, on joue &agrave; la rel&egrave;ve de Thetford
  Mines encore une fois(hell' Yeah!) vendredi le 19 ao&ucirc;t sur la scene rock.
  L'heure reste &agrave; d&eacute;terminer. Des nouvelles photos sur le site seront
  bient&ocirc;t disponible! en attendant voici une photo de notre cher <a href="http://www.geocities.com/tuxpunk2000/Styvn.JPG" target="_blank">Styvn
  en action</a> .</span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt"><font color="#414141">le
  14 juillet 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Encore un show
  d&eacute;bile!!! Nous tenons a dire un GROS merci A SOME KIND OF MONSTERS(www.somekindofmonsters.biz)
  qui nous avait invit&eacute; et qui sont des gars EXTREMEMENT sympathique avec
  qui on esp&egrave;re refaire des shows en masse!!!!!. On a des photos du show
  dans la section Media et les chanceux qui sont venu voir le show on pu entendre
  apres presque 1 ans de &quot;pas de compo&quot; Tears of blood une nouvelle
  compo qui part la serie de 4 tune que nous some en train de travailler! Rock
  on !!!!<br>
  <br>
  DysfunctioN</span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt"><font color="#414141">le
  12 juin 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Salut vous autres!!!,
  le show &agrave; St-George au pub &eacute;tais bel et bien d&eacute;bile, 200
  personnes qui boivent de la bi&egrave;re pis qui trippe en &eacute;coutant du
  bon vieux metal sa rentrait au poste! Merci &egrave; Lethal Judgement qui on
  fait notre premi&egrave;re partie (www.lethaljudgement.com) On vous attend en
  grand nombre le 11 juin &agrave; East Broughton au terrain de golf, beau temp
  mauvais temp (il y a une gigantesque tente<font color="#FFFFFF">... On fait
  la premi&egrave;re partie du Radio-X band encore une fois!!! Rock on!!!</font></span></font></p>
<p><font color="#FFFFFF" face="Arial"><span style="font-size: 8pt">Dysfunction!!!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  ---&gt; Nom de domain maintenant fonctionnel <a href="http://dysfunctiononline.com">http://dysfunctiononline.com/
  </a></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt"><font color="#414141">le
  1 juin 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Salut tout le
  monde, on vous attends en grand nombre au Pub de St-Georges le 22 mai. Il va
  y avoir lethal judgement aussi ki vont nous jouer du beat ki &quot;Varge&quot;
  fack si sa vous tente de venir&quot;Varger&quot; avec nous autres ben vous etes
  les bienvenue! <br>
  DysfunctioN</span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt"><font color="#414141">le
  18 mai 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Ouverture du
  site web!!<br>
  <font color="#414141">le 11 mai 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">&Eacute;lo tou
  l&eacute; monde !! Simplement pour clarifier qu'il va y avoir 3 bands le 30
  avril &agrave; St-Pierre de Broughton. Les voici : Lethal Judgement, Dysfunction
  et Some Kind Of Monsters (un hommage &agrave; MetallicA). Rectifications faites...
  maintenant, parlons du show le 22 mai au Pub de St-Geoges.... bon c'est fait...<br>
  On esp&egrave;re vous voir en grand nom et vous toucher les parties...... :-)<br>
  Bah si possible........<br>
  <font color="#414141">le 29 avril 2005</font><br>
  </span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Venez en grand
  nombre au bar le Kaval &agrave; St-Pierre de Brougthon pour &eacute;couter de
  la musique qui &quot;varge&quot;. C'est suppos&eacute; &ecirc;tre un concours
  de barmans qui se passe-l&agrave; donc les shows commencent vers 14h00. Hommage
  &agrave; Metallica et Dysfunction seront l&agrave;. L'entr&eacute;e est gratuite....
  malheureusement pas la bi&egrave;re... :'(<br>
  Venez en grand nombre !!<br>
  <font color="#414141">le 19 avril 2005</font><br>
  </span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Les cds sont
  finalement en vente !!! Pour la maudique somme de 8$ (Dans les shows) vous pouvez
  entendre toutes les compos Dysfunction. Vous pourrez les trouver &agrave; diff&eacute;rents
  endroits dans la ville de Thetford Mines : Musigo (carrafour frontenac), Style
  musique, etc. Pour les autres qui n'habitent pas pr&egrave;s de Thetford, vous
  pouvez venir &agrave; nos shows, on en a des tonnes de copies !!!<br>
  <font color="#414141">le 7 mars 2005</font><br>
  </span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Prochain Show
  au BAR L'&Eacute;VASION de Victoriaville le 26 F&Eacute;VRIER 2005 avec Lowfat,
  Born Addicted et Still Behind.En deuxi&egrave;me instance: Nous sommes (Dysfunction
  et Frank - Webmaster) en train de regarder, soit A) Pour reprendre notre site
  &agrave; Dysfunction.ca, ou cool.gif regarder pour nous trouver un autre domaine puisque
  Dysfunction.ca semble avoir &eacute;t&eacute; enregistr&eacute; &agrave; un
  autre nom et ce, sans que nous ayions re&ccedil;u de renouvellement. Nous devons
  probablement ceci au grand d&eacute;sir de satisfaction et d&eacute;vouement
  &agrave; leurs clients de Domaine-Internet. (Phrase sarcastique pour ceux qui
  trouvent cette derni&egrave;re ambig&uuml;e!) Donc, d&egrave;s que l'on trouve
  un site et que nous sommes enregistr&eacute;s, vous serez inform&eacute;s avant
  m&ecirc;me que le site ne fonctionne correctement. Tercio: Le Cd master a &eacute;t&eacute;
  envoy&eacute; chez Analogue Media Technologies Inc. (Amtech) &agrave; Montr&eacute;al
  et est en processus de duplication. Notre grande esp&eacute;rence est de les
  avoir pour le show du 26 f&eacute;vrier. Au pire, on d&eacute;foncera des culs
  et on l'aura pareille !! So, let's fucking rock....<br>
  <font color="#414141">le 2 f&eacute;vrier 2005</font></span></font></p>
<p><font face="Arial" color="white"><span style="font-size: 8pt">Petite note pour
  dire ke la tune du mois a chang&eacute;e!<br>
  <font color="#414141">16 octobre 2004</font><br>
  <br>
  NE MANQUEZ PAS NOTRE PROCHAIN SHOW!! LE 30 OCTOBRE &Agrave; L'HOTEL POULIN &Agrave;
  EAST-BROUGHTON! D&Eacute;GUISEZ VOUS SA VA &Ecirc;TRE L'HALLOWEEN!! et nous
  sommes d&eacute;sol&eacute;s pour les petits probl&egrave;mes du site sa ne
  devrait pas durer longtemp.<br>
  <font color="#414141">16 octobre 2004</font><br>
  <br>
  Nouvelles tunes sur le CD! A CHAPTER OF OUR LIFE ET LA TUNE TH&Egrave;ME DE
  LA TUW .L'album devrais s'en venir dans pas longtemps. Nous sommes toujours
  en n&eacute;gociations! Merci de votre patience!<br>
  <font color="#414141">01 octobre 2004</font><br>
  <br>
  Pour le moment DysfunctioN sont en n&eacute;gociations avec la compagnie qui
  va fabriquer leurs CD's. Sa ne devrait plus &ecirc;tre bien bien long!!! Keep
  on Rock!!!<br>
  <font color="#414141">17 Septembre 2004</font><br>
  <br>
  DysfunctioN sont en studio pr&eacute;sentement voici quelques photos! <br>
  <font color="#414141">10 Juillet 2004</font><br>
  <br>
  Dysfunction se pr&eacute;pare &agrave; botter le ***mot vulgaire*** &agrave; encore plus de
  monde! Le groupe fait maintenant partie de L'encyclop&eacute;die M&eacute;tal
  et de Download.com ! C'est d'ailleurs l&agrave; que vous pourrez maintenant
  t&eacute;l&eacute;charger la toune du mois.<br>
  <font color="#414141">29 Juin 2004</font><br>
  <br>
  </span></font> </p></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="../down.PNG" width="756" height="23"></td>
</tr>
</table></td>
</tr>
</table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>


Mon résultat :
TaZz_
Oula, que c'est long ! ohmy.gif
Essaye d'abandonner les tableaux html pour les balises xHTML (div, span, p, etc...)
Mais bon, du moment que le resultat y est!
Après c'est simplement question de gout, d'organisation, et d'accessibilité.
Voila, à plus smile.gif
Tux
Peux-tu me donner une exemple de ce qui est court!!! TaZz ^_^
TaZz_
Je te renvoie simplement là:
http://www.titaxium.com/forum/index.php?sh...ndpost&p=156149
Comme tu peux le voir, simplement 3 balises <div> te permette de mettre en page ton design!
A noter que la partie CSS est quand même bourée de commentaire, d'où sa longueur ^_^
Darkthrone
Et en optimisant le code à fond, ça rentrait en 2 div smile.gif.

Y'en a qui diront que c'est pas très "sémantique" mon idée, mais je pensais à faire le headeret le menu sur la même image, et à zone réactiver tout ça smile.gif.

Enfin bon bref, j'aurais également pu utiliser un <img src="" /> pour le header, ce qui aurait permi d'économiser un div.


Enfin bon, on voit quand même que les possibilités sont grandes ! smile.gif
elf
Quoi que tu as oublié le footer dark...
Darkthrone
Y'a un footer sur ce design ? :x
elf
Euh comme c'est le même que celui qu'il m'avais découpé et que celui qu'il ma fait découper avais un footer il en a un...
Darkthrone
Ah bah désolé smile.gif

Mais bon sur ses screens, on voit aucun footer ;x
Tux
Ah que j'ai de la difficultée avec tous sa sad.gif il va bien falloir que je recommence du début à aprendre tous sa car j'avais commencer à faire des sites web à mes tous premier début avec frontpage ceci étant dit mes sites étais plutôt inconcluant, donc j'ai traverser du coter de macromedia : Dreamweaver MX 2004 mais celui-ci créer des erreurs dans le code donc je ne peux continuer à faire des sites de cette manière!!! :pinch:

Tux

Merci à ceux qui m'on répondu !

Fermer ce sujet ! Merci
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2010 Invision Power Services, Inc.