Page 1 sur 2
Gimp et Nvu
Publié : 16 mai 2007, 14:16
par kubo
Bonjours
Alors voila j'ai réalisé une de mes première maquette mais je suis totalement perdu pour l'associé a un code html
j'ai eu beau chercher sur internet je ne trouve rien
voila en gros l'index :
http://img392.imageshack.us/my.php?image=accueilcw2.png
je n'ai pas de problème pour faire la découpe avec gimp par contre je n'arrive pas du tout a restituer avec nvu et je ne sais pas comment faire les liens surtout que la barre de navigation change quand on clic dessus
voila des exemples
je n'ai pas tout mis je pense que vous avez compri
faut-il faire une iframe ?
je pense qu'il en faudra une pour que le text s'affiche dans le cadre mais pour les boutons je ne sais pas
merci a tous et surtout merci a la maison mozilla et au autre d'etre libre et gartuit
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 16 mai 2007, 14:34
par chinon37
Nvu ou mieux, Kompozer, ne permet pas la découpe d'une image. Tu dois faire la découpe dans The Gimp et ensuite mettre les images découpées dans les conteneurs génériques (<div>) adéquats.
Déjà un petit tour sur cette page:
http://css.alsacreations.com/Modeles-de ... age-en-CSS
devrait permettre de dégrossir ce que tu souhaites.
Publié : 16 mai 2007, 14:56
par kubo
merci
Alors au début aucun problème (j'utilise l'éditeur css de nvu)
j'arrive meme a faire un corps extenssible ^^
le seul problème c'est le menu, pour mettre les "boutons" du menu les uns a coté des autre et faire des liens
je n'arrive pas je n'arrive a mettre que des morceaux l'est uns en dessous des autres
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 16 mai 2007, 15:54
par chinon37
pour le menu, une simple liste avec le css suivant:
Code : Tout sélectionner
ul {
list-style-type: none;
}
li {
display: inline;
padding-left: 10px;
}
tu le complètes pour <li> avec ton image en fond et des dimensions pour que les boutons soient tous de même taille
Publié : 16 mai 2007, 20:58
par kubo
je refait appelle a vous ca je suis perdu je n'avance pas je recule même
j'ai découpé ma maquette mais je n'arrive vraiment pas a la reconstitué
je n'ai aucune base en XHTML/CSS
je n'utilise que le graphique de nvu
aidez moi svp
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 16 mai 2007, 22:10
par chinon37
là, il se fait tard!
Il faudrait au minimum attendre demain,... mais en plus c'est férié!
Publié : 16 mai 2007, 22:15
par Invité
en fait c'est bon il me reste juste un problèmes
comment je fait pour que mon graphique est toujours le meme aspect en fontion de la resolution et surtout sans barre de défilement
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 20 mai 2007, 00:32
par kubo
En fait non c'est pas bon j'arrive pas avec le menu a faire des lien
est-il possible de faire un lien avec un bloc div ?
sinon pour la resolution c'est bon
merci
Message envoyé avec : Opera/9.20 (X11; Linux i686; U; en)
Publié : 20 mai 2007, 07:56
par Ymai
On peut avoir une idée de l'état actuel du chantier?
De péférence une adresse où se trouverait déjà le site web en construction; à défaut, le code HTML déjà écrit.
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Publié : 22 mai 2007, 22:50
par kubo
voila j'ai résolu le problème
mais il m'en reste un les compatibilités avec IE
il y a de gros problème de décalage
mais pas de probleme avec les autres navigateurs
voila les codes
html :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>index</title>
<link title="defaut" media="all" rel="stylesheet"
href="style.css" type="text/css">
</head>
<body
style="background-color: rgb(65, 74, 86); color: rgb(0, 0, 0); height: 43px;"
alink="#000088" link="#0000ff" vlink="#ff0000">
<div class="entete"></div>
<div class="menu"></div>
<div class="menu1"><img
style="width: 84px; height: 27px;" alt=""
src="image/boutons/anaInact.png"><br>
</div>
<div class="menu2"></div>
<div class="menu3"><img
style="width: 80px; height: 27px;" alt=""
src="image/boutons/accueilAct.png"><br>
</div>
<div class="menu4"></div>
<div class="menu5"><img
style="width: 167px; height: 27px;" alt=""
src="image/boutons/telechargementInact.png"><br>
</div>
<div class="menu6"></div>
<div class="menu7"><img
style="width: 116px; height: 27px;" alt=""
src="image/boutons/multimediaInact.png"><br>
</div>
<div class="menu8"></div>
<div class="menu9"><img
style="width: 216px; height: 27px;" alt="contact"
src="image/boutons/conatactInact.png"><br>
</div>
<div class="menu10"></div>
<div class="entredeux1"></div>
<div style="font-family: Rehan;" class="corpsg"><br
style="font-family: Samanata;">
</div>
<div class="corpsc"><span
style="color: rgb(255, 255, 255); font-family: Samanata;"> <br>
</span><span
style="color: rgb(255, 255, 255); font-family: Samanata;"></span><span
style="color: rgb(255, 255, 255); font-family: Samanata;"></span><span
style="color: rgb(255, 255, 255); font-family: Samanata;"></span></div>
<div class="corpsd"><br>
</div>
<div class="fcorps"><br>
<br>
<span style="color: rgb(255, 255, 255); font-family: Samanata;"><br>
</span></div>
<div class="entredeux2"></div>
<div
style="color: rgb(255, 255, 255); font-family: AR PL ShanHeiSun Uni;"
class="footerg"><br>
</div>
<div class="footerc"><small><span
style="color: rgb(255, 255, 255); font-family: AR PL ShanHeiSun Uni;"><br>
</span></small>
</div>
<div class="footerd"><br>
</div>
<div class="bas"></div>
</body>
</html>
et le css
Code : Tout sélectionner
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
body { margin: auto;
width: 770px;
}
.entete { background-repeat: no-repeat;
background-image: url("image/accueil/accueil-0-0.png");
height: 12px;
}
.menu { background-image: url("image/accueil/accueil-0-1-00-00.png");
float: left;
width: 42px;
height: 27px;
}
.menu1 { background-image: url("image/accueil/accueil-0-1-01-00.png");
float: left;
width: 84px;
height: 27px;
}
.menu2 { background-image: url("image/accueil/accueil-0-1-02-00.png");
float: left;
width: 4px;
height: 27px;
}
.menu3 { background-image: url("image/accueil/accueil-0-1-03-00.png");
width: 80px;
float: left;
height: 27px;
}
.menu4 { background-image: url("image/accueil/accueil-0-1-04-00.png");
float: left;
width: 4px;
height: 27px;
}
.menu5 { background-image: url("image/accueil/accueil-0-1-05-00.png");
float: left;
width: 167px;
height: 27px;
}
.menu6 { background-image: url("image/accueil/accueil-0-1-06-00.png");
float: left;
width: 3px;
height: 27px;
}
.menu7 { background-image: url("image/accueil/accueil-0-1-07-00.png");
float: left;
width: 116px;
height: 27px;
}
.menu8 { background-image: url("image/accueil/accueil-0-1-08-00.png");
float: left;
height: 27px;
width: 1px;
}
.menu9 { background-image: url("image/accueil/accueil-0-1-09-00.png");
float: left;
height: 27px;
width: 217px;
}
.menu10 { background-image: url("image/accueil/accueil-0-1-10-00.png");
float: left;
height: 27px;
width: 52px;
}
.entredeux1 { background-repeat: no-repeat;
background-image: url("image/accueil/accueil-0-2.png");
height: 16px;
margin-top: 27px;
}
.corpsg { background-image: url("image/accueil/accueil-0-3-0-0.png");
width: 24px;
float: left;
background-repeat: repeat-y;
}
.corpsc { background-image: url("image/accueil/accueil-0-3-1-0.png");
width: 724px;
float: left;
background-repeat: repeat-y;
}
.corpsd { background-image: url("image/accueil/accueil-0-3-2-0.png");
width: 22px;
background-repeat: repeat-y;
margin-left: 748px;
}
.fcorps { background-image: url("image/accueil/accueil-0-4-0-0.png");
background-repeat: no-repeat;
background-position: left top;
height: 81px;
}
.entredeux2 { background-image: url("image/accueil/accueil-0-4-0-1.png");
background-repeat: no-repeat;
background-position: left top;
height: 79px;
}
.footerg { background-image: url("image/accueil/accueil-0-5-0-0.png");
width: 24px;
background-repeat: repeat-y;
float: left;
}
.footerc { background-image: url("image/accueil/accueil-0-5-1-0.png");
width: 724px;
background-repeat: repeat-y;
float: left;
height: 19px;
}
.footerd { background-image: url("image/accueil/accueil-0-5-2-0.png");
width: 22px;
background-repeat: repeat-y;
margin-left: 748px;
}
.bas { background-image: url("image/accueil/accueil-0-6.png");
background-repeat: no-repeat;
height: 29px;
}
vous devriez trouver le site a l'adresse
http://syllams.ath.cx
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 23 mai 2007, 19:57
par Invité
up
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 25 mai 2007, 20:55
par kubo
up
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
[modo]Rapport avec NVU/KompoZer ténu. Déplacé vers "Développement web"[/modo]
Publié : 27 mai 2007, 10:36
par calimo
kubo a écrit :mais il m'en reste un les compatibilités avec IE
http://dean.edwards.name/IE7/
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.3) Gecko/20061201 Firefox Firefox/2.0.0.3 (Ubuntu-feisty)
Publié : 27 mai 2007, 21:58
par kubo
merci mais j'ai beau chercher je crois qu'il me faudrai des explications
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
Publié : 28 mai 2007, 09:57
par calimo
En gros si tu installes les scripts IE7 sur tes pages, tu as de fortes chances que les comportements bizarres d'IE6 disparaissent (pas tous évidemment, mais IE6 respectera beaucoup mieux les standards, sur certaines choses même mieux que Firefox !)
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.3) Gecko/20061201 Firerenard Firefox/2.0.0.3 (Ubuntu-feisty)
