site d'architecture

Marsh Posté le 21-01-2010 à 01:09:54

Bonjour,
Je suis étudiant en architecture, et je voudrais améliorer mon site.
Je voudrais donc réaliser un menu déroulant
J'ai déja commencer e dessiner les boutons, et le fond du site, mais je ne connais pas grand chose en script.

Je voudrais donc que lorsque je passe dur les bouton, s"affiche un menu déroulant avec les sous catégories.

Pour le moment, j'utilise dreamweaver, mais je n'écris pas directement le code.
Alors je ne sais pas si c'est possible de réaliser ce que je souhaite sans apprendre le CSS ou le javascript? Parce que cela fait deux jours que je cherche, mais je ne trouve que des explication de code CSS. Et je n'y comprends rien dutout.
J'ai essayer de le faire par le code mais bon, je n'y arrive pas du tout.

- est-ce donc possible de faire un menu déroulant sur dreamweaver par exemple, sans utiliser les codes?
- Si c'est impossible, avez vous un lien qui explique vraiment en détail, ce que je souhaite faire, parce que je ne m'en sors pas

Merci d'avance à tous
Nico

Message cité 1 fois
Message édité par nico2302 le 27-04-2010 à 21:42:51

Reply

Marsh Posté le 21-01-2010 à 01:09:54

Reply

Marsh Posté le 21-01-2010 à 10:16:29

up

Reply

Marsh Posté le 21-01-2010 à 14:17:00

nico2302 a écrit :

Bonjour,
Alors je ne sais pas si c'est possible de réaliser ce que je souhaite sans apprendre le CSS ou le javascript?

- est-ce donc possible de faire un menu déroulant sur dreamweaver par exemple, sans utiliser les codes?
- Si c'est impossible, avez vous un lien qui explique vraiment en détail, ce que je souhaite faire, parce que je ne m'en sors pas

Merci d'avance à tous
Nico

Bonjour Nico,

Ce que tu demandes relève du CSS ainsi qu'au JS si tu veux que ça "peps" encore plus...
Ce n'est donc pas possible de le faire dans l'interface graphique de Dreamweaver...

Dans tous les cas, tu devra plonger dans le codes, mais ça ne doit pas te faire peur pour autant !!!
Tu peux apprendre le HTML et le CSS avec le siteduzero.com, c'est un très bon tuto qui reprend aux bases de la bases !
L'unique contrainte est le temps à y consacrer... Si t'en a pas de toute façon, on ne peut rien pour toi !

Sinon, il ne s'agit pas de graphisme/webdesign, ton sujet n'est donc pas à sa place...
La sienne est dans Programmation => HTML/CSS/JS

Bonne chance.

Message édité par abais le 24-01-2010 à 00:06:25

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 23-01-2010 à 23:51:39

UN ENORME MERCI
J'ai apris toute la nuit le xhtml et le css, et j'ai réussis a faire mon menu déroulant

merci merci merci

Message édité par nico2302 le 23-01-2010 à 23:52:59

Reply

Marsh Posté le 25-01-2010 à 17:12:24

voila, j'ai continué mon menu, maintenant que le code est fait, je m'attaque au design :

http://www.hotosting.com/portfolioarchi/index.html

Est-ce que vous n'auriez pas des lien de beau site, ou de tuto pour réaliser de belle barre de menu?
En fait j'aurais bien voulu arriver à un menu comme celui-ci

http://www.pckult.net/tutoriaux

mais bon celui la je pense que c'est du javascript donc...

Sinon, si vous avez des liens pour des idées de barres de menu assez sobre, je suis preneur

Reply

Marsh Posté le 25-01-2010 à 17:46:20

C'est du JS en effet... Je t'invite donc à te tourner vers un framework prévu pour, comme JQuery...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 27-01-2010 à 23:35:39

merci pour ton lien David Boring, mais j'ai depuis un autre problème (je ferai peut-etre mon menu en javascript plus tard car je voudrais avancer un peu dans mon site), avec firefox et pas avec IE. bizare non?

En effet, la div logo ne s'affiche pas dans firefox (celle au dessus du menu) alors que dans IE si.

Comment cela se fait-il?

http://www.hotosting.com/portfolioarchi/index.html

Code :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
<style type="text/css">
<!--
.police {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<body>
<div id="logo_logo">
</div>
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a class="fleche" href="#">B<span class="bac1">AC</span> 1</a>
<ul class="niveau2">
<li class="autremenu"><a href="#">Cours</a></li>
<li class="sousmenu"><a href="#">Projets</a>
<ul class="niveau3">
<li class="autremenu"><a href="#">Allemagne</a></li>
<li class="autremenu"><a href="#">Luminaire</a></li>
<li class="autremenu"><a href="#">Analyse maison</a></li>
<li class="autremenu"><a href="#">Ecluse</a></li>
<li class="autremenu"><a href="#">Maison canal</a></li>
</ul>
</li>
<li class="autremenu"><a href="#">Travaux</a></li>
</ul>
</li>
<li class="sousmenu"><a class="fleche" href="#">B<span class="bac2">AC</span> 2</a>
<ul class="niveau2">
<li class="autremenu"><a href="#">Cours</a></li>
<li class="sousmenu"><a href="#">Projets</a>
<ul class="niveau3">
<li class="autremenu"><a href="#">Kot-story</a></li>
<li class="autremenu"><a href="#">Central parc</a></li>
<li class="autremenu"><a href="#">Projet 3</a></li>
<li class="autremenu"><a href="#">Projet 4</a></li>
</ul>
</li>
<li class="autremenu"><a href="#">Travaux</a></li>
</ul>
</li>
<li class="sousmenu"><a class="fleche" href="#">B<span class="bac3">AC</span> 3</a>
<ul class="niveau2">
<li class="autremenu"><a href="#">Cours</a></li>
<li class="sousmenu"><a href="#">Projets</a>
<ul class="niveau3">
<li class="autremenu"><a href="#">Projet 1</a></li>
<li class="autremenu"><a href="#">Projet 2</a></li>
<li class="autremenu"><a href="#">Projet 3</a></li>
<li class="autremenu"><a href="#">Projet 4</a></li>
</ul>
</li>
<li class="autremenu"><a href="#">Travaux</a></li>
</ul>
</li>
<li class="sousmenu"><a class="fleche" href="#">M<span class="ma1">A</span> 1</a>
<ul class="niveau2">
<li class="autremenu"><a href="#">Cours</a></li>
<li class="sousmenu"><a href="#">Projets</a>
<ul class="niveau3">
<li class="autremenu"><a href="#">Projet 1</a></li>
<li class="autremenu"><a href="#">Projet 2</a></li>
<li class="autremenu"><a href="#">Projet 3</a></li>
<li class="autremenu"><a href="#">Projet 4</a></li>
</ul>
</li>
<li class="autremenu"><a href="#">Travaux</a></li>
</ul>
</li>
<li class="sousmenu"><a class="fleche" href="#">M<span class="ma2">A</span> 2</a>
<ul class="niveau2">
<li class="autremenu"><a href="#">Cours</a></li>
<li class="sousmenu"><a href="#">Projets</a>
<ul class="niveau3">
<li class="autremenu"><a href="#">Projet 1</a></li>
<li class="autremenu"><a href="#">Projet 2</a></li>
<li class="autremenu"><a href="#">Projet 3</a></li>
<li class="autremenu"><a href="#">Projet 4</a></li>
</ul>
</li>
<li class="autremenu"><a href="#">Travaux</a></li>
</ul>
</li>
<li class="autremenu"><a class="contact_accueil" href="#">C<span class="contact">ONTACT</span></a></li>
<li class="autremenu"><a class="contact_accueil" href="#">A<span class="accueil">CCUEIL</span></a></li>
</ul>
</div>
<div id="bac2_1">
<img src="image/bac2_1.png"/>
</div>
<div id="bac2_2">
<img src="image/bac2_1.png"/>
</div>
</body>
</html>

Code :

body {background: url(image/fond.jpg) top center fixed no-repeat;
background-color:#CCC;}
#logo_logo {
width:910px;
height:50px;
background:url(image/logo.png) no-repeat;
margin:0px auto 10px auto;}
div#menu {
font: 14px Arial, sans-serif;
background-repeat: no-repeat;
width: 910px; height: 40px;
color:#CCC;
margin:auto; padding:0px;border:0;
}
/* div#menu a {color:#000000} ----------------------------INUTILE */
div#menu ul {
margin: 0px;
padding: 0px;
/*width: 980px;*/
border:0;
}
/*On positionne les elements du menu */
div#menu ul li {
position:relative;
list-style: none; /*on enleve les icones de liste */
float:left;border:0;
}
.niveau1{ border:0;padding:0;border:o; }
.niveau1 li { border:O;padding:O;border:O;}
#menu li.sousmenu /* MENU AVEC UN DEROULEMENT */
{
padding:0px;margin-top:2px;margin-bottom:2px;border:0;
height: 36px;
}
#menu li.autremenu /* MENU SANS DEROULEMENT */
{ border:0;padding:0;margin-top:2px;margin-bottom:2px;border:0;
height: 36px;
}
div#menu ul ul {
position: absolute;
display: none;
width: 130px;
border:0;padding:0;margin:0;
}
div#menu li a {
text-decoration: none; /* plus de soulignement pour les liens */
padding: 0px 5px 0px 10px;
display: block;
width: 115px; /* taille du bloc = padding + margin + width */
color:white;
text-align:left;
text-indent: 0px;
line-height: 39px;
/* border-top:1px solid black; */
}
/*choix du fond des menu*/
.contact_accueil { background: url(image/menu.png) repeat-x}
.fleche {background:url(image/fond_fleche_1.png);}
div#menu ul.niveau2 li , div#menu ul.niveau3 li { background: url(image/menu.png);}
/* changement de fond des fleche lorsque la souris est sur BAC1, BAC2, BAC3, MA1 ou MA2 */
.fleche:hover {background:url(image/fond_fleche_2.png)}
/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3, .fleche {display:block;}
/*Lors du passage de la souris: choix du fond des menu*/
div#menu ul.niveau1 li a:hover {color:#000}
div#menu ul.niveau1 li.sousmenu a:hover {}
div#menu ul.niveau1 li.autremenu a:hover {}
div#menu ul.niveau2 li.sousmenu a:hover; {}
/* Decalage du niveau 3 avec le niveau 2 */
div#menu ul.niveau3 {
top:-2px; left: 130px; }
/* Taille des span menu */
.bac1 {font: 10px Arial}
.bac2 {font: 10px Arial}
.bac3 {font: 10px Arial}
.ma1 {font: 10px Arial}
.ma2 {font: 10px Arial}
.contact {font: 10px Arial}
.accueil {font: 10px Arial}
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#bac2_1 {
width:920px;
height:238px;
margin: 20px auto 0 auto;
padding: 0px 0 0 10px;}
#bac2_2 {
width:920px;
height:300px;
margin: 20px auto 0 auto;
padding: 0px 0 0 10px;}

Reply

Marsh Posté le 28-01-2010 à 00:11:24

apparemment, d'après la coloration syntaxique, ta <div> est en commentaire...
Je ne vois pas trop pourquoi d'ailleurs, tu as bien refermé le commentaire du dessus ainsi que celui d'en dessous...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 28-01-2010 à 00:16:23

bon bah j'ai retirer les commentaire su dessus et du dessous et sa marche
merci beaucoup abais

Je vous tiens au courant de l'avancée du site

Reply

Marsh Posté le 29-01-2010 à 14:09:18

http://horta.ulb.ac.be/studentpriv [...] index.html

Bon le site avance petit à petit.
Je voudrais créer un formulaire de contact simple avec nom, prénom email et message. J'ai déja fait des recherche, mais je tombe sur 10 000 façon de faire, et je ne sais pas trop comment tester pour voir si cela fonctionne.

Sais tu comment je peux réaliser un formulaire de contact simple? j'ai déja été sur des site qui génère le code du formulaire, mais je suis pas parvenu a avoir un formulaire de contact simple et efficace.

Message édité par nico2302 le 29-01-2010 à 14:53:36

Reply

Marsh Posté le 29-01-2010 à 14:09:18

Reply

Marsh Posté le 29-01-2010 à 21:21:20

va sur le site du zero, tu as tous ce qui faut pour créer le formulaire (en html) et le traitement (php)...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 27-04-2010 à 21:43:03

me revoila, j'ai pas mal avancé sur mon site, je voudrais savoir ce que vous en pensiez. il n'est pas encore très rempli mais sa viendra.

Si vous avez des idées pour l'améliorer, je suis preneur

http://horta.ulb.ac.be/studentpubl [...] index.html

Message édité par nico2302 le 28-04-2010 à 00:20:44

Reply

Marsh Posté le 27-04-2010 à 23:51:30

Moi je trouve ca fort sombre... Mais c'est un parti pris

Reply

Marsh Posté le 28-04-2010 à 00:14:59

je sais pas si c'est le premier mais c'est réussi

chapeau :jap:

---------------
collectionneur de pâtes thermiques

Reply

Marsh Posté le 01-05-2010 à 11:13:16

graphiquement, mais HTMLement parlant :'( :'( :'( :'( :'(

---------------
Blablaté par Harko

Reply

Marsh Posté le 02-05-2010 à 09:51:24

j'ai jamais eu vraiment de vraix cours, donc je me suis démerdé comme j'ai peu.
Théoriquement, j'étais censé le faire avec dreamweaver, mais bon je me suis dis que j'allais le coder moi même et apprendre le html et css..

Je suppose que ce qui ne va pas, ce sont les tableaux d'images fractionnées? Sinon, a part sa il y a d'autre erreurs?

Reply

Marsh Posté le 02-05-2010 à 12:01:59

Visuellment oui, le survol des éléments de menu, pas assez contrasté.
(j'ai pas regardé le code)

Reply

site d'architecture

Sujets relatifs:

Leave a Replay