Rechercher : dans
Par :

Design HTML/CSS

Dernière réponse le 27 mar 2008 à 15:12:59 Black_Winged_Angel, le 23 mar 2008 à 20:41:35 
 Signaler ce message aux modérateurs

Bonsoir tout le monde, je vais faire simple:
Suite à ma défaite lors des olympiades des métiers ( 3 ème en régional, à LENS ), je m'entraine en vue des prochaines olympiades de 2009
Je cherche des tutos sur internet pour faire ce que j'ai en tête, mais sans trouver, en fait ce que je veux faire:

1) Créer un site qui sera sous la forme Header ( 1280x150 ) -Menu ( 200x650 ) -Mainframe ( 1080x650 ), mais sans utiliser les frames, uniquement en css

2) Dans le menu css, avoir les menus classé en catégories, et quand on clique sur celles-ci, les éléments du menu"bougent" pour faire apparaitre les sous catégories.

3) Les éléments des catégories et sous catégories doivent être créées sur un fond d'image qui change lorsque la souris passe dessus.

4) Les éléments du menu doivent être tous enregistrés dans le css pour faciliter la gestion du site ( cad avoir un menu.css que j'attacherais à chaque nouvelle page pour directement avoir la mise en page de faite et n'éditer que le contenu )

5) Je voudrais que le header contienne une animation flash continuellement en mouvement et adapté au design du site, réalisé en flash, qui possède le nom du site en animé( kekkai-no-angel )

6) Pourquoi pas avoir du javasript qui ferait comme les rémanences d'eau lorsque la souris est en mouvement
Le site doit se comporter comme réalisé avec des frames, mais sans leurs défauts...

Merci de m'aider, à l'aide de tutos ou de votre expérience svp

Configuration: Dreamweaver, flash, photoshop RC2

Meilleures réponses pour « Design HTML/CSS » dans :
Enlever le soulignement sous les liens en HTML/CSS Voir Par défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Javascript - Centrer verticalement une page web VoirPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
DHTML - La notion de couche VoirQu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des...
La table des couleurs VoirLe codage des couleurs Les couleurs en HTML sont définies par 3 nombres hexadécimaux représentant les tons de Rouge, de Vert et de Bleu (selon le codage RGB (Red Green Blue, en français : RVB) de la couleur choisie. Ainsi la syntaxe de codage...

1

Slay, le 23 mar 2008 à 20:49:28

Pour le 2° j'ai trouvé un sujet similaire http://www.commentcamarche.net/forum/affich 1307316 comment faire un menu deroulant en html
ça pourras peut être t'aider.

Pour le 3°, je sais que c'est pas très précis, mais cherche du côté d'un mouseover.
[je te dis ça parce qu'il faut que je fasse la même chose pour mon site mais que je ne l'ai pas encore fait ^^]

Par contre je n'ai pas bien compris le 4°

Répondre à Slay

2

Black_Winged_Angel, le 23 mar 2008 à 21:12:27

Bin en gros a chaque fois que je créé une nouvelle page, je dois juste lier la feuille de style pour que la mise en page soit faite, comme sa j'ai que le contenu à éditer... ( le css et moi on se comprends assez mal )

Répondre à Black_Winged_Angel

3

freeghost, le 23 mar 2008 à 21:12:44

Salut,
Moi je peux p-e t'aider... Je programme le HTML et le CSS depuis 1 an et demi. Je commence à le connaître un peu ;)
Tu peux me contacter via mon site (http://www.xeo-design.be/) ou directement via admin@xeo-design.be.
Tu peux demander mon adresse e-mail en laissant la tienne et nous verrons ça ensemble...

A bientôt

Répondre à freeghost

4

Black_Winged_Angel, le 23 mar 2008 à 21:29:06

C'est bon freeghost, je t'ai envoyé mon mail, et j'ai fait un petit tour sur ton site, je le trouve vraiment bien fait... Sa te dérange si je te demande des cours perso? Si tu veux je pourrais bosser pour ton site quand j'aurais un niveau un peu plus élevé

Répondre à Black_Winged_Angel

5

freeghost, le 23 mar 2008 à 21:38:10

Pour les cours perso ça peut se faire même si tu apprendra bien plus sur des sites de tuto ;)
Mais l'équipe xeo-design a assez de codeurs :P Je suis seul mais je suffit :D

Je t'ai ajouté sur msn mais tu n'affiche pas chez moi... Tu es connecté?

Répondre à freeghost

6

Black_Winged_Angel, le 23 mar 2008 à 21:45:36

Le problème c'est que sur les sites, je trouve toutes les infos hyper confuses et pas très explicatives, je n'arrive jamais à trouver exactement ce que je veux, donc c'est pas génial...

Le plus dur je trouve c'est de commencer dans le css, moi j'ai toujours codé en html avec un système de frames, en plus uniquement avec des instruments gratuits enfin bref jme suis planté façon bigbang pendant le concours...

Répondre à Black_Winged_Angel

7

freeghost, le 23 mar 2008 à 21:51:34

Et pourtant le CSS est sûrement le langage le plus facile en webmastering :P

Ce qui est sur c'est qu'utiliser des instruments gratuits n'est pas vraiment la bonne méthode non plus :P
Rien ne vaut le merveilleux et magnifique Notepad++ :D

Répondre à freeghost

8

Black_Winged_Angel, le 26 mar 2008 à 09:53:49

Pour l'instan j'ai réussi uniquement à créer les frames, j'espère que vous pourrez m'éclairer pour le reste...

Répondre à Black_Winged_Angel

9

Dalida, le 26 mar 2008 à 10:01:32

Salut,

commence par les bases.
des liens autour de CSS et XHTML.

il n'y a pas grand chose mais ce sont d'excellents sites.

commence par valider ton HTML, puis mets en page avec CSS.
regarde entre autre chez Alsacréations.
[ Mathieu ]
Si dieu etait sur terre, ca serait pas une nana. Ca se saurait.

Répondre à Dalida

10

Black_Winged_Angel, le 27 mar 2008 à 10:15:48

( je ne voulais pas de liens mais de l'aide.... ) :) pas grave je continue de chercher, mais un peu d'aide ne serait pas de refus....

Au fait j'ai un bug sur mes frames CSS,

J'ai trois balises div d'identifications, header, navig, centre dans mon html

Dans mon CSS j'ai

#header
top:0
left:0
width: 100px
height: 100%
overflow: disabled
background image: ../Images/header.jpg
background attachment: fixed
Background repeat: no-repeat
position: absolute

#navig
top:100
left:0
width:700px
height:200px
overflow: disabled
background image: ../Images/Menu.jpg
Background attachment: fixed
Background repeat: no-repeat
position: absolute

#centre
top:100
left: 200
width: 700
height: 1080
background image: ../Images/Mainframe.jpg
Background attachment: fixed
Background repeat: no-repeat
position: absolute

( j'ai noté ça de mémoire, si vous copiez collez ça ne fonctionnera pas )
Donc je disait j'ai un petit problème: c'est que ma page s'affiche, les frames sont présentes, mais il n'y a que les background de navig et du centre qui s'affichent, celui du header n'apparaît pas... Quelqu'un a une idée?

Répondre à Black_Winged_Angel

11

Dalida, le 27 mar 2008 à 10:30:10

Salut,

( je ne voulais pas de liens mais de l'aide.... )
lol, il faut commencer par te former un minimum sinon l'aide ne te sera d'aucun secours.

si je te dis d'augmenter le poids du '#header' en ajoutant son ascendance au sélecteur, ça va t'aider ?
non, pourtant ça peut être une piste.
si tu veux y arriver il faut te former.
le temps que tu y consacreras maintenant sera économisé plus tard (et même bien plus).

ton code est l'exemple précis de ce qu'il ne faut pas faire ou alors il faut le faire en sachant ce qu'on risque.
tout mettre en {position:absolute;} c'est se compliquer la vie et tu n'as pas encore ajouter le reste, ça se compliquera d'autant plus.
mieux vaut au maximum laisser faire le flux de positionnement "naturel" mais là encore il vaut mieux comprendre d'abord comment ça marche.

mais avant ça il faudrait déjà être sûr que ton code soit correct.
colle nous la vraie feuille de style en mettant le code source en forme (le bouton "Conserver la mise en forme") ou mieux donne nous une url si tu as une version en ligne.

à plus
[ Mathieu ]
Si dieu etait sur terre, ca serait pas une nana. Ca se saurait.

Répondre à Dalida

12

 Black_Winged_Angel, le 27 mar 2008 à 15:12:59

Alala jte crois pour la formation, mais j'aime bien commencer par des choses "assez compliquées pour mon niveau", et les tutos, y'en a des milliers, mais aucun n'est bien expliqué à mon goût...

Le position "absolute" que j'ai mis sert à ne pas avoir de décalage avec mon découpage, si je ne mets pas d'absolute, rien ne s'affiche, ou sinon les fonds apparaissent mais ne se suivent pas comme prévu ( décalage de pixels selon la résolution, donc autant dire un design sans avenir )

Sinon je poste mes codes dès que possible, là je suis en cours ( héhé! ) et je les ai pas sur moi

Répondre à Black_Winged_Angel