18041 sujets
Questions générales et questions de débutants
Bonsoir,
te faire> probablement non (edit: je parle du #16)
t'indiquer ou t'aider> on est là pour ça
As-tu jeté un coup d'oeil aux tutoriels? Il y a des gabarits de mise en page tout prêt (à droite, dans la Trousse à outils). Sinon quel est celui qui se rapproche le plus de ce que tu recherches et en quoi il ne te convient pas (différence ou manque ou en trop) ?
Modifié par Felipe (14 Feb 2008 - 21:29)
te faire> probablement non (edit: je parle du #16)
t'indiquer ou t'aider> on est là pour ça
As-tu jeté un coup d'oeil aux tutoriels? Il y a des gabarits de mise en page tout prêt (à droite, dans la Trousse à outils). Sinon quel est celui qui se rapproche le plus de ce que tu recherches et en quoi il ne te convient pas (différence ou manque ou en trop) ?
Modifié par Felipe (14 Feb 2008 - 21:29)
jdemande juste de generer une structure, j'ai vu qu'il y avait sur ce site un générateur de squelette il devrait faire la même chose pour les structure car dans la boite à outils aucunes ne me convient. D'autre part sa fait une semaine que je suis dessus et franchement sa me fait chiait de bloqué la dessus. A bonne entendeur;
il n'y a rien de scandaleux, juste que je demande de réalisé une structure, non pas le site entier, c'est pas compliqué, je n'y arrive pas. Maintenant vous allez me dire de choisir un autre style de structure mais non je ne suis pas d'accord. 
faut pas croire que j'ai pas essayer avant DE POSTER .
faut pas croire que j'ai pas essayer avant DE POSTER .
<!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=iso-8859-1" />
<title>
Largeur fluide, header/menu haut/menu gauche flottant/menu
droite flottant/contenu/footer.
</title>
<style type="text/css">
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
/*]]>*/
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
header <a
href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
(voir tous les modèles)</a>
</div>
<div id="haut">
<ul id="menuhaut">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
</ul>
</div>
<div id="gauche">
<p>
menu gauche
</p>
<p>
largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code>
</p>
<ul id="menugauche">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
</ul>
</div>
<div id="droite">
<p>
menu droit
</p>
<p>
largeur fixe : 150px avec utilisation de la propriété <code>float:right;</code>
</p>
<ul id="menudroit">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
</ul>
</div>
<div id="centre">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
</div>
<div id="pied">
pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>)
</div>
</div>
</body>
</html>Bonsoir,
Il fallait commencer par là.
«est-ce que quelqu'un pourrait me faire une structure svp.» --> fast-food.
«J'ai tenté de faire la structure suivante: <descriptif de la structure visée>, mais je bloque. Voilà ce que j'ai tenté. <page en ligne ou code>. Je pense que le problème vient de <le truc qui à mon avis bloque> mais je ne vois pas comment faire. Voyez-vous une solution?» --> pas fast-food.
La nuance n'est pas si subtile que ça.
ruca a écrit :
faut pas croire que j'ai pas essayer avant DE POSTER .
Il fallait commencer par là.
«est-ce que quelqu'un pourrait me faire une structure svp.» --> fast-food.
«J'ai tenté de faire la structure suivante: <descriptif de la structure visée>, mais je bloque. Voilà ce que j'ai tenté. <page en ligne ou code>. Je pense que le problème vient de <le truc qui à mon avis bloque> mais je ne vois pas comment faire. Voyez-vous une solution?» --> pas fast-food.
La nuance n'est pas si subtile que ça.
Et puisque nous en sommes aux problèmes de méthode, je ne comprends pas ton descriptif. Je cite:
Quand tu dis «position fixe», tu penses bien à position: fixed? Et «à gauche», ça signifie quoi exactement (sur le bord gauche de la zone de visualisation du navigateur, le bord gauche du «site» en largeur fixe, ou autre...)? Et qu'est-ce que le «plein milieu»?
De plus, si la position fixe désigne bien position: fixed, ça me semble très casse-gueule de positionner ainsi trois éléments de l'interface à la fois. Mais ça, c'est à voir en fonction du design à réaliser -- dont nous n'avons pas eu d'aperçu, hum...
PS: si on veut utiliser le positionnement fixe, il me semble qu'il serait utile de tester position: fixed dans le code de ta page de test. Je n'en vois pas trace. Bien sûr, il se peut que tu ne l'aies pas fait parce que tu ignores le fonctionnement de position: fixed ou du positionnement CSS en général. Dans ce cas, ce qu'il faut faire ce n'est pas demander à ce qu'on te propose une structure avec tes principaux blocs positionnés, mais apprendre le positionnement CSS.
Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe
Modifié par Florent V. (15 Feb 2008 - 00:01)
ruca a écrit :
En-tete en position fixe,
contenu à gauche en position fixe,
contenu à droite en position fixe,
le corp en plein milieu puis le pied.
Quand tu dis «position fixe», tu penses bien à position: fixed? Et «à gauche», ça signifie quoi exactement (sur le bord gauche de la zone de visualisation du navigateur, le bord gauche du «site» en largeur fixe, ou autre...)? Et qu'est-ce que le «plein milieu»?
De plus, si la position fixe désigne bien position: fixed, ça me semble très casse-gueule de positionner ainsi trois éléments de l'interface à la fois. Mais ça, c'est à voir en fonction du design à réaliser -- dont nous n'avons pas eu d'aperçu, hum...
PS: si on veut utiliser le positionnement fixe, il me semble qu'il serait utile de tester position: fixed dans le code de ta page de test. Je n'en vois pas trace. Bien sûr, il se peut que tu ne l'aies pas fait parce que tu ignores le fonctionnement de position: fixed ou du positionnement CSS en général. Dans ce cas, ce qu'il faut faire ce n'est pas demander à ce qu'on te propose une structure avec tes principaux blocs positionnés, mais apprendre le positionnement CSS.
Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe
Modifié par Florent V. (15 Feb 2008 - 00:01)
Bonjour à tous, voici mon travail:
je ne vous montre même pas une capture d'écran car sous IE7, Firefox et Opéra sa ne donne pas la même chose...
Je vous demande donc de me corriger. Merci!
<!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 titre</title>
<link href="Accueil/accueil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="en_tete"><img src="Accueil/images/general/banniere.png" alt="banniere" width="100%" height="100" /></div>
<div id="menu_haut"> <!-- /* début du menu en haut */ -->
<ul id="nav">
<li><a href="#" title="aller à la section 1">item1</a></li>
<li><a href="#" title="aller à la section 2">item2</a></li>
<li><a href="#" title="aller à la section 3">item3</a></li>
<li><a href="#" title="aller à la section 4">item4</a></li>
<li><a href="#" title="aller à la section 5">item5</a></li>
<li><a href="#" title="aller à la section 6">item6</a></li>
<li><a href="#" title="aller à la section 7">item7</a></li>
<li><a href="#" title="aller à la section 8">item8</a></li>
</ul>
</div> <!-- /* fin du menu en haut */ -->
<div id="menu_gauche"> <!-- /* début du menu à gauche */ -->
<ul>
<li><a href="">lien1</a></li>
<li><a href="">lien2</a></li>
<li><a href="">lien3</a></li>
</ul>
</div> <!-- /* fin du menu à gauche */ -->
<div id="menu_droite"> <!-- /* début du menu à droite */ -->
<ul>
<li><a href="">lien1</a></li>
<li><a href="">lien2</a></li>
<li><a href="">lien3</a></li>
</ul>
</div> <!-- /* fin du menu à droite */ -->
<div id="corps"> <!-- /* début du corps */ -->
<div id="colG">colone de gauche <!-- /* début colone de gauche */ -->
<h2>Titre1</h2>
<p>texte bla bla bla</p>
</div> <!-- /* fin colone de gauche */ -->
<div id="colD">clone de droite <!-- /* début colone de droite */ -->
<h2>Titre2</h2>
<p>texte bla bla bla</p>
</div> <!-- /* fin colone de droite */ -->
</div> <!-- /* fin du corps */ -->
<div id="pied_de_page">pied de page</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
width:100%;
margin:0;
padding::0;
}
#en_tete {
position:fixed;
height:100px;
top:0;
border:2px solid red;
}
#menu_haut {
position:fixed;
top:100px;
}
#nav {
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}
#nav li {
float:left;
width:100px;
border:1px solid #600;
margin-right:1px;
color:#fff;
background:#c00;
}
#nav li a {
display:block;
background:#c00;
color:#fff;
font:1em "Trebuchet MS",Arial,sans-serif;
line-height:1em;
padding:4px 0;
text-align:center;
text-decoration:none;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#900;
text-decoration:underline;
}
#menu_gauche {
position:fixed;
background-color:#FFCC00;
float:left;
width:15%;
text-align:left;
font:1em "Trebuchet MS",Arial,sans-serif;
top:150px;
border:2px solid red;
}
#menu_droite {
position: fixed;
background-color:#FFCC00;
float:right;
width: 15%;
text-align:left;
font:1em "Trebuchet MS",Arial,sans-serif;
top:150px;
border:2px solid red;
}
#corps {
border:2px solid red;
margin-left:17%;
margin-right:17%;
}
#colG {
float:left;
width:50%;
}
#colD {
float:right;
width:50%;
}
#pied_de_page {
position: fixed;
background-color:#33FF00;
width:100%;
height:50px;
text-align:center;
font:1em "Trebuchet MS",Arial,sans-serif;
bottom:0;
border:2px solid red;
clear:both;
}
je ne vous montre même pas une capture d'écran car sous IE7, Firefox et Opéra sa ne donne pas la même chose...
Je vous demande donc de me corriger. Merci!
bonsoir, sa marche !! j'ai réussi enfin presque... J'ai un bug graphic avec IE7, si quelqu'un pourrait m'aider. Merci.
<!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 href="test2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banniere"><img src="../../../wamp/www/Rouca75/Accueil/images/general/banniere.png" width="100%" height="80" /></div>
<div class="menu_haut">navigations</div>
<div class="corps">
<div class="colG">colG</div>
<div class="colD">colD</div>
</div>
<div class="menuG">
<ul>
<li>lien_1</li>
<li>lien_2</li>
<li>lien_3</li>
</ul>
</div>
<div class="menuD">
<ul>
<li>lien_1</li>
<li>lien_2</li>
<li>lien_3</li>
</ul>
</div>
<div class="pied_de_page">pied de page</div>
</body>
</html>@charset "utf-8";
/* CSS Document */
body {
width:100%;
margin:auto;
}
.banniere {
position: absolute;
top: 0;
left: 1%;
width: 98%;
z-index: 2;
text-align: center;
background-color: #ffecce;
border: 1px solid #666666;
line-height: 80px;
margin: 0;
}
html>body .banniere {
position: fixed
}
.menu_haut {
position: absolute;
top: 80px;
left: 1%;
width: 98%;
z-index: 2;
text-align: center;
background-color: #ffecce;
border: 1px solid #666666;
line-height: 1.3em;
margin: 0;
}
html>body .menu_haut {
position: fixed
}
.corps {
z-index: 1;
background-color: #f5f8fc;
border: 3px solid #000000;
margin-top:7em;
margin-left:15.5%;
margin-right:15.5%;
height:1000px;
width:68.5%;
}
.colG {
float:left;
width:48%;
height:200px;
border-bottom:3px solid #000000;
border-right:3px solid #000000;
}
.colD {
float:right;
width:48%;
height:200px;
border-bottom:3px solid #000000;
border-left:3px solid #000000;
}
.menuG {
position: absolute;
top: 7em;
right: 0.5%;
background-color: #ffecce;
border: 1px solid #666666;
padding: 1em;
width: 10%;
overflow:hidden;
}
html>body .menuG {
position: fixed;
}
.menuD {
position: absolute;
top: 7em;
left: 0.5%;
background-color: #ffecce;
border: 1px solid #666666;
padding: 1em;
width: 10%;
overflow:hidden;
}
html>body .menuD {
position: fixed;
}
.pied_de_page {
position: absolute;
bottom: 0;
left: 1%;
width: 98%;
z-index: 2;
text-align: center;
background-color: #ffecce;
border: 1px solid #666666;
line-height: 1.1em;
margin: 0;
}
html>body .pied_de_page {
position: fixed
}