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:
Version complète : Coder Un Design Autrement Qu'e Tableaux
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.
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.
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:
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 à :
Le code à mettre sur la page serait :
Avec cela vous aurrez une image placé correctement.
Ceci n'est qu'un bref exemple.
La feuille de style ressemblerais à :
Code
#image {
position: absolute;
top: 200px;
left: 150px;
width: 20px;
height: 20px;
background: url("images/monimage.jpg");
}
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.
<div id="image"> serait mieux ^^
tout comme de spécifier background-image : url('images/monimage.jpg') si tu n'indique que l'image
tout comme de spécifier background-image : url('images/monimage.jpg') si tu n'indique que l'image
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
Slaut
,c'est mieux
Code
background:url(images/monimage.jpg);
.Enjoy
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
tout comme de spécifier background-image : url('images/monimage.jpg') si tu n'indique que l'image
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);
L'avantage de background:url(images.jpg) est de pouvoir spécifier d'autres précisions avec. On peut par exmple utiliser
Alors qu'un background-image ne permet que d'afficher une image.
Code
background:url(image.jpg) #000 fixed
Alors qu'un background-image ne permet que d'afficher une image.
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 :
Et le CSS :
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 ?
Merci. Blk-Mat.
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>
<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;
}
{
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 ?
Merci. Blk-Mat.
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.
Je sais que c'est une question souvent posée mais je sais pas comment la regler...
Merci.
Mais j'ai encore un petit problème c'est que sa marche parfaitement sur firefox mais pas du tout sur IE.
Je sais que c'est une question souvent posée mais je sais pas comment la regler... Merci.
Heureusement que SX est là quand même :/
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.
Ok merci Mandos 
Sa marche mieux, les images s'affiches, mais les trucs sont décalés...
Sa marche mieux, les images s'affiches, mais les trucs sont décalés...
Salut ,
essaie de mettre - dans ta feuille de style - l'attribut :
ou :
,essaie de mettre - dans ta feuille de style - l'attribut :
Code
img {
float:left;
}
float:left;
}
ou :
Code
img {
display:block;
}
display:block;
}
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.