28112 sujets

CSS et mise en forme, CSS3

Diviser une page en css

upload/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)
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.
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)
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)
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

upload/1-code.gif
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)
upload/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)
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?
Sujet clos
Aller à