Recherche :

A propos du Site et du Forum : babasse et 54 utilisateurs inconnus

Mot : Pseudo : Filtrer
Page : 1 2 3 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Création d'un Portfolio

coker

T : y = f'(a)(x-a) + f(a)
Profil : Top Penguin

Reprise du message précédent :
petite organisations possible :

racine/css/style.css
racine/index.html
racine/images/back.jpg

dans ton code ton code tu mets ainsi :

Code :

<link href="./css/style.css" type="text/css" media="screen"/>

et dans ton css

Code :

body{
background: url(../images/back.jpg);
}

"../" signifie le dossier parent donc de css/ tu reviens à racine/ et tu vas dans images/

---------------

http://img684.imageshack.us/img684/6536/signwk.png

GoogleAds	Posté le 26-08-2009 à 12:50:11

dstcs Mister ? Profil : Penguin	Posté le 26-08-2009 à 13:16:42 Pour mon image 1600 x 1200. Je vais essayer avec la mise en forme dossier comme tu m'as dit.

dstcs Mister ? Profil : Penguin	Posté le 26-08-2009 à 13:19:30 J'ai tout effectuer mais hélas le même résultat.

coker

T : y = f'(a)(x-a) + f(a)
Profil : Top Penguin

pourrais tu poster ton image?

EDIT : essaye de mettre cette ligne pour appeler ton CSS

Code :

<link rel="stylesheet" media="screen" type="text/css" title="Style" href="./css/style.css" />

Message édité par coker le 26-08-2009 à 13:32:30

---------------

Tenkan http://www.tenkan05.fr Profil : Top Penguin	Posté le 26-08-2009 à 13:31:08 Vérifie l'extension de ton image, pour voir si c'est pas JPG au lieu de jpg (ou même png d'ailleurs). Message édité par Tenkan le 26-08-2009 à 13:31:25 --------------- http://www.tenkan05.fr

dstcs Mister ? Profil : Penguin	Posté le 26-08-2009 à 13:47:15 L'entension c'est jpg (en minuscule) et pas JPG (en majuscule) je sais pas si ça change quelque chose. Message édité par dstcs le 26-08-2009 à 13:52:22

dstcs Mister ? Profil : Penguin	Posté le 26-08-2009 à 13:49:46 sa y est sa marche merci @coker Quel est la commande pour monter l'image en hauteur ? Message édité par dstcs le 26-08-2009 à 13:50:49

Tenkan

http://www.tenkan05.fr
Profil : Top Penguin

Dans ton css tu met :

Code :

background-position:0px -300px;

Le 0px c'est horizontalement, et le -300px c'est verticalement.

Message édité par Tenkan le 26-08-2009 à 14:02:12

---------------
http://www.tenkan05.fr

dstcs

Mister ?
Profil : Penguin

j'ai un bug d'organisation http://www.noelshack.com/up/aaa/PO [...] 974953.JPG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Navid Design</title>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="./css/style.css" />
</head>
<body>
<div id="top">

<div id="menu">
<ul>
<li><a class="orange" href="index.html">Accueil</a></li>
<li><a class="bleu" href="#">Travaux</a></li>
<li><a class="vert" href="#">À popos</a></li>
<li><a class="rouge" href="#">Contact</a></li>
</ul>
</div>

<div id="bas">Copyright © 2009 <a href="#">Navid Design</a> & <a href="navid-design.com">Navid Design</a></div>
</body>

</html>

***************

/*
Fichier CSS fait par Navid Design

*/

body{
background: url(../images/back.jpg) no-repeat top center #312932;
background-position:-50px -0px;
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
}
/*/////////////////////////////////////
Le Header
/////////////////////////////////////*/
#top{
background:url(../images/top1.png) no-repeat center;
margin:50px 0 40px 0;
height:260px;
font-size:24px;
line-height:55px;
color:#FFF;
text-align:center;
}

/*/////////////////////////////////////
Le conteneur
/////////////////////////////////////*/
#conteneur{
width:538px;
margin:0 auto;
}

/*/////////////////////////////////////
Le menu
/////////////////////////////////////*/
#menu {
background:url(theme/contenu_h.png) no-repeat bottom left;
height:55px;
}

#menu ul li{
float:left;
padding:0;
list-style:none;
}

#menu ul li a{
height:43px;
width:107px;
font-size:14px;
line-height:53px;
display:block;
text-decoration:none;
text-align:center;
color:#FFF;
background-repeat:no-repeat;
background-position:top left;
}
#menu ul li a:hover{
height:43px;
width:107px;
line-height:43px;
text-decoration:none;
text-align:center;
color:#FFF;
background-repeat:no-repeat;
background-position:bottom left;
}
/* Les différentes couleurs des menu */
#menu ul li a.orange{
background-image:url(images/btn_orange.png);
}
#menu ul li a.bleu{
background-image:url(images/btn_bleu.png);
}
#menu ul li a.vert{
background-image:url(images/btn_vert.png);
}
#menu ul li a.rouge{
background-image:url(images/btn_rouge.png);
}

/*/////////////////////////////////////
Le contenu
/////////////////////////////////////*/
#contenu{
background:url(theme/contenu.png) repeat-y left;
padding:0 20px;
}

Tenkan http://www.tenkan05.fr Profil : Top Penguin	Posté le 26-08-2009 à 15:13:05 Aïe ! J'avoue ne pas avoir le courage de m'y pencher. Par contre, pourquoi tout les noirs de l'images sont passé en gris/rose/bleu ? J'ai déjà vu ça sur d'autres images de toi. Message édité par Tenkan le 26-08-2009 à 15:14:51 --------------- http://www.tenkan05.fr

Darcia

Profil : New Penguin

ton div "top" n'est pas fermé

rajoute dans ton css :
dans le div top :
margin: auto;
margin-top: 50px;
width: 538px; /* enfin la taille de l'image de ton header */

dans le div menu :
padding-top: 205px;

je ne pense pas que ce soit la meilleure solution mais ça devrait correspondre à ce que tu cherches.

au passage remplace le "c" du copyright par ©

ps : plutôt que d'utiliser background-position avec des valeurs négatives, que se passe-t'il si tu ajoutes ce code au début de ton css :
* { padding: 0; margin: 0; border: 0;}

Message édité par Darcia le 26-08-2009 à 15:41:38

Tenkan

http://www.tenkan05.fr
Profil : Top Penguin

Je savais pas l'utilisation qu'il voulais en faire, mais si c'est juste pour la coller au bord, c'est sur qu'il vaudrais mieux mettre ça. :mdr:

Et puis si c'est pour la décaler, au lieu de mettre des valeur négatives, je serait tenté de dire que découper l'image serait mieux.

Message édité par Tenkan le 26-08-2009 à 15:25:22

---------------
http://www.tenkan05.fr

Darcia

Profil : New Penguin

pour tout te dire dans ce cas là je ne comprends pas l'intérêt du background-position étant donné qu'avec :
background: url(../images/back.jpg) no-repeat top center;
l'image est directement centrée et collée au haut de la page.

pour ce qui est du découpage de l'image, cela dépend s'il veut pouvoir avoir une grande image qui s'affiche entièrement sous une grande résolution ou non (perso je trouve que ça alourdit une page comme pas possible mais pourquoi pas... après tout c'est pas mon site ^^)

Tenkan http://www.tenkan05.fr Profil : Top Penguin	Posté le 26-08-2009 à 15:44:14 Oui, je suis d'accord. A mon avis ça part très mal, surtout au niveau des couleurs, mais c'est pas mon site non plus (et heureusement). Message édité par Tenkan le 26-08-2009 à 15:44:28 --------------- http://www.tenkan05.fr

dstcs Mister ? Profil : Penguin	Posté le 26-08-2009 à 16:40:57 Alors au faite je vais changer d'image car ça ne fait pas très bien mais au faite l'histoire c'est que je voulais que l'image soit en tant qu'arrière plan et que le copyright soit en bas et que travaux a propos soit des boutons juste en dessous du cadre où il y a mon logo.

dstcs

Mister ?
Profil : Penguin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navid Design</title>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="./css/style.css" />
</head>
<body>
<div id="top">margin: auto; margin-top: 50px; width: 538px;
<div id="menu">padding-top: 205px;
<ul>
<li><a class="orange" href="./images/btn_orange"index.html"">Accueil</a></li>
<li><a class="bleu" href="./images/btn_orange">Travaux</a></li>
<li><a class="vert" href="./images/btn_orange">À popos</a></li>
<li><a class="rouge" href="./images/btn_orange">Contact</a></li>
</ul>
</div>
<div id="bas">©opyright © 2009 <a href="#">Navid Design</a> & <a href="navid-design.com">Navid Design</a></div>
</div>
</body>
</html>

--*****--

/*
Fichier CSS fait par Navid Design

*/

body{
background: url(../images/back.jpg) no-repeat top center #312932;
margin:0;
padding:0;
border: 0;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
}
/*/////////////////////////////////////
Le Header
/////////////////////////////////////*/
#top{
background:url(../images/top1.png) no-repeat center;
margin:50px 0 40px 0;
height:260px;
font-size:24px;
line-height:55px;
color:#FFF;
text-align:center;
}

/*/////////////////////////////////////
Le conteneur
/////////////////////////////////////*/
#conteneur{
width:538px;
margin:0 auto;
}

/*/////////////////////////////////////
Le menu
/////////////////////////////////////*/
#menu {
background:url(images/contenu_h.png) no-repeat bottom left;
height:55px;
}

#menu ul li{
float:left;
padding:0;
list-style:none;
}

#menu ul li a{
height:43px;
width:107px;
font-size:14px;
line-height:53px;
display:block;
text-decoration:none;
text-align:center;
color:#FFF;
background-repeat:no-repeat;
background-position:top left;
}
#menu ul li a:hover{
height:43px;
width:107px;
line-height:43px;
text-decoration:none;
text-align:center;
color:#FFF;
background-repeat:no-repeat;
background-position:bottom left;
}
/* Les différentes couleurs des menu */
#menu ul li a.orange{
background-image:url(images/btn_orange.png);
}
#menu ul li a.bleu{
background-image:url(images/btn_bleu.png);
}
#menu ul li a.vert{
background-image:url(images/btn_vert.png);
}
#menu ul li a.rouge{
background-image:url(images/btn_rouge.png);
}

/*/////////////////////////////////////
Le contenu
/////////////////////////////////////*/
#contenu{
background:url(images/contenu.png) repeat-y left;
padding:0 20px;
}

/*/////////////////////////////////////
Le footer
/////////////////////////////////////*/
#bas{
margin:0 auto;
padding:0 0 16px 40px ;
background:url(images/bas.png) no-repeat;
width:517px;
height:25px;
color:#FFF;
line-height:25px;
}
#bas a{
font-weight:bold;
color:#CCC;
}
#bas a:hover{
font-weight:bold;
color:#FFF;
}

C MIEUX LA ?

Message édité par dstcs le 26-08-2009 à 16:52:32

Darcia

Profil : New Penguin

ok donc j'avais plus ou moins compris ce que tu souhaites faire.

les modifications que je t'ai proposé sont à mettre dans ton fichier css (dans les définitions correspondantes) et non dans ton fichier html.

concernant la modification du &copy, voici ce que je voulais dire :
<div id="bas">Copyright © 2009 <a href="#">Navid Design</a> & <a href="navid-design.com">Navid Design</a></div>

dans ton index.html, la dernière balise </div> n'est pas au bon endroit. il faut que tu là mettes directement à la suite de la balise </div> qui termine ton menu.

à l'avenir si tu pouvais éviter les doubles postes et le langage en majuscules ce serait pas mal. :wink:

Message édité par Darcia le 26-08-2009 à 17:10:12

dstcs

Mister ?
Profil : Penguin

Merci et désolé pour les majuscules et le langage ^^

Mais regarde le résultat : http://navid-design.tk/

Le header prenne quasiment toute la largeur

L'arrière plan prenne toute la page (pour qu'il n'y est pas de couleur gris de base quand on dézoom)

Un cadre au milieu en grand pour insérer par la suite le truc JS QUERY.

Les boutons menus au dessus de ce cadre.

Un barre en bas de la page avec écrit le copyright ...

Message édité par dstcs le 26-08-2009 à 17:38:16

Darcia

Profil : New Penguin

concernant le header, dans ton fichier css tu as ça :
/*/////////////////////////////////////
Le Header
/////////////////////////////////////*/
#top{
background:url(../images/top1.png) no-repeat center;
height:260px;
font-size:24px;
line-height:55px;
color:#FFF;
text-align:center;
margin: auto;
margin-top: 50px;
width: 538px;
}

il faut que tu remplaces width: 538px; par width: largeur_de_ton_image px;

pour ce qui est de l'arrière plan, je crois qu'il existe une propriété css qui fixe l'image mais ça reste à creuser. (en même temps on ne s'amuse pas tous à dézoomer les sites...)

pour le cadre du milieu je suppose que c'est ce que tu appelles "conteneur" dans ta feuille css. il ne te reste qu'à le définir totalement (image de fond, espacements, organisation de son contenu? etc.). à toi de voir comment tu veux que ce soit organisé.

les boutons menus et le copyright ben... ouais normal.

par contre je pense qu'il serait bien plus simple d'avoir une vision claire de ce que tu souhaites obtenir en faisant un schéma. pour ça, utilises paint ou même simplement un papier et un crayon et reviens le poster ici.

de même je pense qu'il y a un moyen plus simple permettant de gérer le header et l'image de fond afin que ça prenne la place voulue et ne craignant pas le dézoom. je n'ai pas le temps de l'expliquer clairement ce soir mais en gros le header et l'image de fond seront réunis en une seule image avec un effet de dégradé vers une couleur de fond unie.

Message édité par Darcia le 26-08-2009 à 20:15:00

troyenne troyennestudio.free.fr Profil : Penguin Pro	Posté le 27-08-2009 à 22:55:25 Petite remarque, c'est toujours bien de "remettre son css à zéro", remarque 27: http://net.tutsplus.com/tutorials/ [...] beginners/ D'ailleurs l'article est pas mal en lui même, je te conseille de le lire ---------------

dstcs Mister ? Profil : Penguin	Posté le 28-08-2009 à 12:04:38 D'accord mais je n'ai pas compris la plupart des trucs dû au langage ENGLISH ^^ Message édité par dstcs le 28-08-2009 à 12:07:23

dstcs Mister ? Profil : Penguin	Posté le 30-08-2009 à 14:58:35 CSS Tools: Reset CSS je ne comprend pas la manœuvre à faire ? Message édité par dstcs le 30-08-2009 à 14:58:44

Darcia Profil : New Penguin	Posté le 30-08-2009 à 15:39:57 il te suffit de copier/coller le code de la remarque 27 au début de ta feuille de styles.

dstcs Mister ? Profil : Penguin	Posté le 01-09-2009 à 12:06:01 Ca y est je l'ai mis avant le code <body> de mon style.css Après cela que dois-je faire ?

Darcia

Profil : New Penguin

Citation :

Ca y est je l'ai mis avant le code <body> de mon style.css

Je ne vois pas ce que tu veux dire par là mais si le code est placé au bon endroit alors tu n'as plus rien à faire concernant cette remarque 27.

Maintenant il ne te reste plus qu'à coder le reste de ton portfolio en t'aidant des liens qui t'ont été indiqué dans les messages précédents.

Message édité par Darcia le 01-09-2009 à 17:28:12

dstcs

Mister ?
Profil : Penguin

Me revoilà j'ai créer mon site mais le codage css et mal fait, pouvez vous me mettre ça bien en place "centré" et que je puisse mettre un script flash pour les photos sur dans le cadre gauche.

http://emore.team.free.fr/

style.css :

/*
Fichier CSS fait par Navid Design

*/

body{
background: url(../images/back.gif) no-repeat top center #312932;
margin:0;
padding:0;
border: 0;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
width: 2200px;
height:900px;
}
/*/////////////////////////////////////
Le Header
/////////////////////////////////////*/
#top{
background:url(../images/.png) no-repeat center;
height:260px;
font-size:24px;
line-height:55px;
color:#FFF;
text-align:center;
margin: autov;
margin-top: -30px;
width: 960px;
}

/*/////////////////////////////////////
Le conteneur
/////////////////////////////////////*/
#conteneur{
width:538px;
margin:0 auto;
}

/*/////////////////////////////////////
Le menu
/////////////////////////////////////*/
#menu {
background:url(images/contenu_h.png) no-repeat bottom left;
height:900px;
padding-top: 205px;
}

#menu ul li{
float:left;
padding:0;
list-style:none;
}

#menu ul li a{
height:174px;
width:200px;
font-size:14px;
line-height:53px;
display:block;
text-decoration:none;
text-align:center;
color:#FFF;
background-repeat:no-repeat;
background-position:top left;
}
#menu ul li a:hover{
height:174px;
width:200px;
line-height:43px;
text-decoration:none;
text-align:center;
color:#FFF;
background-repeat:no-repeat;
background-position:bottom left;
}
/* Les différentes couleurs des menu */
#menu ul li a.orange{
background-image:url(../images/btn_orange.png);
}
#menu ul li a.bleu{
background-image:url(../images/btn_bleu.png);
}
#menu ul li a.vert{
background-image:url(../images/btn_vert.png);
}
#menu ul li a.rouge{
background-image:url(../images/btn_rouge.png);
}

/*/////////////////////////////////////
Le contenu
/////////////////////////////////////*/
#contenu{
background:url(../images/contenu.png) repeat-y left;
padding:0 20px;
}

/*/////////////////////////////////////
Le footer
/////////////////////////////////////*/
#bas{
margin:auto;
padding:0 0 25px 40px ;
background:url(../images/bas.png) no-repeat;
width:517px;
height:25px;
color:#FFF;
line-height:25px;
}
#bas a{
font-weight:bold;
color:#CCC;
}
#bas a:hover{
font-weight:bold;
color:#FFF;
}

HTML :

Message édité par dstcs le 08-09-2009 à 20:26:47

Page : 1 2 3

Page Suivante

Page Précédente

Haut de page

CrystalXP.net

CrystalXP.net

Liste des forums

FORUM CrystalXP.net Français

Programmation & Création web

Création d'un Portfolio

Création d'un Portfolio

CrystalXP.net

Liste des forums

FORUM CrystalXP.net Français

Programmation & Création web

Création d'un Portfolio