Aide - Recherche - Membres - Calendrier
Version complète : Coder Un Design Autrement Qu'e Tableaux
La Communauté TitaXium > Service Communication > Espace Developpement
Black-Materia
Salut.

Je sais un peu coder en xhtml/css et très très très très peu en php, et je voudrais savoir comment coder son design autrement qu'en tableau, et commment le découper. Utiliser les avantages du xhtml quoi. Est ce que vous pourriez m'expliquer ? (Si découper son design consiste à utiliser la tranche dans toshop/imgready ou ds fireworks je sais faire.)

Merci la team Titax. :woot:
Xtouch
Salut,
encore heureux que le découpage ne consiste pas à "utiliser la tranche dans toshop/imgready ou ds fireworks".

On servirait à quoi nous alors !

Tu as deux possibilité : tu découpes à la main les images avec paint ou autre, et tu fais quelque chose de valide en xhtml 1.1 au bloc note.

Tu fais un positionnement de tes éléments par css.

Regarde le site Alsacreation par exemple ils en parlent bien.
Black-Materia
D'accord. Mais on utilise quoi comme attribut pour placer ses image ? (attribut = padding etc... je savais pas comment on dis lol). Parce que sur alsacreation j'ai pas vraiment trouvé où ils s'en parlent. :rolleyes:
Xtouch
Prenons un exemple simple, vous souhaitez placer une image de taille 20*20 à 200 pixel du haut de la page, et à 150 pixel de la gauche de la page.

La feuille de style ressemblerais à :
Code
#image {
position: absolute;
top: 200px;
left: 150px;
width: 20px;
height: 20px;
background: url("images/monimage.jpg");
}



Le code à mettre sur la page serait :
Code
<div id="#image"></div>


Avec cela vous aurrez une image placé correctement.
Ceci n'est qu'un bref exemple.
tyx
<div id="image"> serait mieux ^^
tout comme de spécifier background-image : url('images/monimage.jpg') si tu n'indique que l'image smile.gif
Nicoteo31
Citation (ToXyKoPaTh @ mardi 09 novembre 2004 à 12h20)
tout comme de spécifier background-image : url('images/monimage.jpg') si tu n'indique que l'image smile.gif
*


Slaut smile.gif,
c'est mieux
Code
background:url(images/monimage.jpg);
.

Enjoy smartass.gif
Xtouch
Citation (ToXyKoPaTh @ mardi 09 novembre 2004 à 13h20)
<div id="image"> serait mieux ^^
tout comme de spécifier background-image : url('images/monimage.jpg') si tu n'indique que l'image smile.gif
*


Oups, erreur de fatigue, oui c'est
Citation
<div id="image">
bien sur et non
Code
<div id="#image">


Pour ce qui est du background, comme Nicoteo l'a dit il vaut mieux ce que j'ai donnée comme solution background:url(images/monimage.jpg);
Mandos
L'avantage de background:url(images.jpg) est de pouvoir spécifier d'autres précisions avec. On peut par exmple utiliser
Code
background:url(image.jpg) #000 fixed

Alors qu'un background-image ne permet que d'afficher une image.
Black-Materia
Salut. Je voulais pas poster un nouveau topic donc je l'ai mis ici : j'ai essayer de coder mon design avec des div etc... mais j'ai quelque problèmes. Je vous montre le code et je vous explique après:
xhtml :
Citation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="style.css"/>
</head>

<body>

<div class="conteneur">
<div class="header"><a href=""><img src="découpe/header.png"/></a></div>
<div class"accueil"><a href=""><img src="découpe/accueil.png"/></a></div>
<div class="travaux"><a href=""><img src="découpe/travaux.png"/></a></div>
<div class="tutos"><a href=""><img src="découpe/tutoriaux.png"/></a></div>
<div class="liens"><a href=""><img src="découpe/liens.png"/></a></div>
<div class="livredor"><a href=""><img src="découpe/livredor.png"/></a></div>
<div class="contact"><a href=""><img src="découpe/contact.png"/></a></div>
<div class="textemiddle">
  <p>Blabla</p>
</div>
</div>

</body>
</html>


Et le CSS :
Citation
img
{
border:none;
}

.conteneur
{
background-image:url(découpe/fonddes.png);
position:absolute;
left:0px;
top:0px;
width:800px;
}

.header
{
position:absolute;
left:39px;
top:0px;
width:799px;
}

.accueil
{
position:absolute;
left:123px;
top:132px;
width:104px;
}

.travaux
{
position:absolute;
left:230px;
top:132px;
width:104px;
}

.tutos
{
position:absolute;
left:337px;
top:132px;
width:104px;
}

.liens
{
position:absolute;
left:444px;
top:132px;
width:104px;
}

.livredor
{
position:absolute;
left:551px;
top:132px;
width:104px;
}

.contact
{
position:absolute;
left:658px;
top:132px;
width:104px;
}

.textemiddle
{
background-color:8B8B8B;
position:absolute;
left:44px;
top:175px;
width:787px;
height:625px;
}


Bon alors j'explique :
le "background:image" de ".conteneur" ne s'affiche pas (je sais pas pourquoi)
et le ".accueil" ne se place pas là ou je lui ait demander (left:... top:...).
Je comprends pas pourquoi. Sinon vous pourvez me dire si j'ai fait des erreurs dans mon code ?

smartass.gif Merci. Blk-Mat.
Black-Materia
C'est bon j'ai trouvé c'etais un truc tout bête (comme moi ^^). Dites moi ca que vous en pensez. :-D Mon folio.
Mais j'ai encore un petit problème c'est que sa marche parfaitement sur firefox mais pas du tout sur IE. sad.gif Je sais que c'est une question souvent posée mais je sais pas comment la regler...

smartass.gif Merci.
tyx
Heureusement que SX est là quand même :/
Mandos
Black-Materia, essaye de renommer ton dossier découpe en decoupe (et bien sûr de le renommer aussi dans ton code). C'est l'accent qui doit faire planter.
Black-Materia
Ok merci Mandos cool.gif

Sa marche mieux, les images s'affiches, mais les trucs sont décalés... blink.gif

smartass.gif
Nicoteo31
Salut smile.gif,
essaie de mettre - dans ta feuille de style - l'attribut :

Code
img {
float:left;
}


ou :

Code
img {
display:block;
}


smartass.gif
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.