Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
BiBloOo
#
13 Posts
previews/14570-1.JPG
Je dois séparé mon menu et ma page d'accueil comme sur l'impression d'ecran
Mais a vrai dire je ne sais pas trop quoi mettre dans mon css et dans mes deux pages (menu et accueil)

.menu {
float: left;
}

Voila ce que j'ai mis ... Mais j'ai beau chercher sur le net, je ne trouve pas une explication simple ... C'est toujours avec plein de menu, du coup ca devient vite incomprehensible... :s
Modifié par BiBloOo (29 Oct 2007 - 22:56)

^
Benjamin D.C.
#
Modérateur
2980 Posts
Bah là comme ça, à part te pondre le code tout fait (ce qui n'est pas vraiment dans les habitudes de ce forum), je ne vois pas trop comment t'être utile… Une page en ligne ou ne fut-ce que ton code html ne serait pas de refus.
Par ailleurs, il existe une section "Gabarits" sur ce site qui te propose plusieurs modèles de mises en pages pertinents, dont certains se rapprochent de ce que tu recherches.

Bonne continuation!



… by the way, un petit "Bonjour" n'est pas nécessairement interdit.

This is the way, step inside.

^
BiBloOo
#
13 Posts
Ah oki, dsl ...
Code de l'accueil ==>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> accueil </TITLE>
	<link rel="stylesheet" type="text/css" href="CSS.css"/>
</HEAD>

<BODY>
<br><br>
<div class="titre">"Dites-le avec Lafleur"</div>

<div id="contenu"><img src="Images/ACCUEIL.JPG" title="ACCUEIL" /></div><br><br>

<div class="texte">Appelez notre service commercial au 03.22.84.65.74 pour recevoir un bon de commande</div>

</BODY>
</HTML>



Code du menu ==>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> menu </TITLE>
	<link rel="stylesheet" type="text/css" href="CSS.css"/>
</HEAD>

<BODY>
<div class="menu">
<div class="societe">Société Lafleur</div>
	<a href="accueil.html" target="droite">Accueil</a>
<br><br>
<hr />
<div class="produits">Nos produits</div>
	<a href="bulbes.html" target="droite">Bulbes</a>
	<br><br>
	<a href="rosiers.html" target="droite">Rosiers</a>
	<br><br>
	<a href="massif.html" target="droite">Plantes à massif</a>
</div>
</BODY>
</HTML>


Je vais aller voir ton lien voir si ca m'aide
Modifié par BiBloOo (29 Oct 2007 - 23:11)

^
BiBloOo
#
13 Posts
Euh pourquoi .menugauche / .menugauche li / #gauche ?!
(http://css.alsacreations.com/modeles/modele3.htm)
Comment savoir a quoi ca correspond? ... Smiley confused
Modifié par BiBloOo (29 Oct 2007 - 23:09)

^
Mikachu
#
C'est quand les vacances ?
Modérateur
5137 Posts
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

previews/1-code.gif

Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !

^
BiBloOo
#
13 Posts
C'est fait!! Et en plus, c'est plus clair ^^

Je me sens bête a demander ca, car autant je sais le faire en HTML mais en CSS je débute vraiment et ca reste confus ...
Modifié par BiBloOo (29 Oct 2007 - 23:15)

^
ghost
#
1745 Posts
Salut,

Un petit tour , c'est convivial et très bien pour débuter

En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.

^
Thomas D.
#
Roi sous la montagne
Modérateur
3188 Posts
Salut,

ghost a écrit :
Un petit tour là , c'est convivial et très bien pour débuter
Il y a aussi quelques liens intéressants dans les ressources du forum ...

^
BiBloOo
#
13 Posts
previews/14570-lafleur.JPG

J'ai reussi a faire ca (comme vous le voyez sur l'image)
Le problème est que j'avais bien mes deux menu avant d'ajouter le CSS du corps... A present je n'ai plus le premier ... :s
Et a vrai dire je ne comprend pas pourquoi ... :s
Par contre sur le site de zero, je n'ai pas vu comment faire pour, lorsqu'on clique sur un lien du menu, ca s'affiche dans le corps, si quelqu'un pouvait m'aider?!
En tout cas pour le moment je suis bien contente du résultat !! J'ai peut etre un peu compliqué la chose mais bon ...

Voici mon code CSS ==>


body
{
    width: 960px;
    margin: auto; /* Pour centrer la page */
    margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
    margin-bottom: 20px;
    background-color: #FFCCFF
    margin-left: 140px;
}



table {
    border-style:groove;
    border-width:5px;
    border-color:white;
    width:50%;
    border-collapse:collapse;
    text-align: center;
}

td {
    border-style:solid;
    border-width:1px;
    border-color:white;
    width:50%;
    text-align: center;
    white-space: nowrap;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3%;
    padding-top: 3%;
    vertical-align: text-top;
}

#contenu {
    left: 50%;
    top: 50%;
    margin-top: 90px;
    margin-left: 240px;
}

.titre {
    text-align: center;
    font-size:300%;
    font-weight: bold;

}

.texte {
    text-align: center;
    font-size: 120%;
}

.societe {
    text-align: center;
    font-size: 220%;
    font-weight: bold;
    font-style: italic;
}

.produits {
    text-align: center;
    font-size: 160%;
    font-weight: bold;
}


a:visited {
 url("images/puce.gif");
 text-decoration: none;
 }

#menu {
   float: left; /* Le menu flottera à gauche */
   width: 235px; /* Donne la taille au menu */
}

#corps {
   margin-left: 240px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */

   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   background-color: #FFCCFF; /* Une couleur de fond pour le corps */
   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   background-image: url("images/motif.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
  padding-bottom: 160px;
}

}

.element_menu1 {
   background-color: #FF99CC;
   border: 2px solid black;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
   padding: 0px;
}

.element_menu2 {
   background-color: #FF99CC;
   border: 2px solid black;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
   height: 540px;
}



Et mon code HTML ==>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> accueil </TITLE>
	<link rel="stylesheet" type="text/css" href="CSS.css"/>
</HEAD>

<BODY>
<div id="menu">
    <div class="element_menu1">
        <div class="societe">Société Lafleur</div><br>
            <ul>
	            <a href="accueil.html" target="droite">Accueil</a>
            </ul>
            <br>
    </div>
    <div class="element_menu2">
        <br>
        <div class="produits">Nos produits</div>
            <br>
            <ul>
	            <a href="bulbes.html" target="droite">Bulbes</a>
	            <br><br>
	            <a href="rosiers.html" target="droite">Rosiers</a>
	            <br><br>
	            <a href="massif.html" target="droite">Plantes à massif</a>
            </ul>
    </div>
</div>


<br><br>

<div id="corps">
    <div class="titre">"Dites-le avec Lafleur"</div>

    <div id="contenu"><img src="Images/ACCUEIL.JPG" title="ACCUEIL" /></div><br><br><br><br>

    <div class="texte">Appelez notre service commercial au 03.22.84.65.74 pour recevoir un bon de commande</div>
</div>

</BODY>
</HTML>

Modifié par BiBloOo (31 Oct 2007 - 12:20)

^
BiBloOo
#
13 Posts
Si en code html, j'ai ca ==>

<frameset cols="30%,*">
	<frame src="menu.html" noresize>
	<frame src="accueil.html" name="droite">
</frameset>


Les liens que je clique dans 'menu' s'affiche directement dans 'accueil'!!
Mais comment faire ca en CSS?

^