28220 sujets

CSS et mise en forme, CSS3

Mise en page en css[Résolu]

Pages :
bonjour à tous,
je dois réaliser un site, j'ai entendu parler du css et j'ai alors decider de l'utiliser pour la mise en page
j'ai trouvé de bons exemples sur ce site mais je ne sais comment rediriger mes pages.
par exemple quand on clique sur un lien, je voudrais que le contenu de la page s'affiche dans la partie du milieu, ce qui veut dire je veux que les menus de haut, droit, gauche restent fixes
merci d'avance de votre aide
Modifié par elodie (16 Mar 2005 - 10:22)
Il est impossible de ne recharger qu'une partie de la page... Tu peux toujours fixer certains éléments, et faire apparaître une barre de défilement dans l'élément du milieu Smiley smile
Administrateur
Salut et bienvenue Smiley cligne

Pour cela tu as plusieurs méthodes, dont l'emploi des include PHP
Ou l'utilisation de la balise Object

a écrit :
Il est impossible de ne recharger qu'une partie de la page...

Si, c'est possible en javascript à grand coup de innerHTML, mais ce n'est pas la méthode la plus conseillée.
Modifié par Raphael (04 Mar 2005 - 10:33)
en fait tout au début j'ai essayé de faire des essais mais en utilisant des frames comme ceci par exemple

<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">
<frame src="page1.htm" name="gauche" scrolling="NO" noresize>
<frame src="page2.htm" name="principal">
</frameset>
et quand je voulais alors rediriger un lien, j'utilisais alors target="gauche ou principal" est ce que alors les frames me permettent de faire ceci ou pas, sinon alors dans quel cas le css remplace les tableaux
en espérant que mes questions de débutantes ne sont pas trop agacant Smiley cligne merci infiniment
Laisse tomber les frames ou l'idée de ne recharger qu'une partie de la page Smiley cligne Comme l'a dit Raphaël, le seul moyen serait d'utiliser du JavaScript, mais alors l'accessibilité en prendrait un coup Smiley decu
merci pour les conseils FlorentG mais alors si je laisse tomber les frames, j'utilise alors css ou quoi a la place?
aussi je veux bien utiliser javascript je m'y connais un peu mais comment alors pour tu me donner un exmple stp
merci encore
je voulais vraiment que les choses soient claires avant de me lancer
Non, il vaut mieux que tu utilises du CSS à 100%. Le JavaScript sera assez compliqué, et il faudra de toute manière faire attention à ce que le site soit accessible sans JS, donc autant tout faire en CSS dans un premier temps Smiley smile
je ne saurais comment te remercier à tous ses conseils mais s'il est impossible de rediriger comme je l'ai dit dans le 1er message posté en utilisant que du css, comment faire alors?
je donne un exemple au hasard sur ce site par exemple http://www.destrucsaweb.com/ les menus de haut, droit, gauche sont toujours fixes il n ya que le mileu qui se recharge en cliquant sur "perl" par exemple
merci encore de me répondre rapidement aussi et aussi aux autres
Sur le site que tu viens de linker, la page se recharge entièrement Smiley cligne . Sinon en CSS il n'es pas possible de ne recharger qu'une partie...

Tiens une question, pourquoi tiens-tu à ne recharger qu'une partie de la page ? Smiley smile
en realite FrorentG je ne tien pas à recharger qu'une seule page , dis moi donc se site a été réalisé en css?
et alors comment recharger toute la page?
et comment alors afficher le contenu de la page perl? en utilidant javascript et si oui comment?
à vrai dire ce qui m'intéresse vraiment c'est d'avoir toujours les menus hayt droit gauche pour faciliter la navigation
tu ne peux pas imaginer toutes les choses que je suis en trai de découvrir sur ce bon forum
merci encore
je suis désolée avec toutes ces questions? mais bon je ne comprends pas
voici maintenant le bout du code que j'ai copié coller, en indiqaunt la page qui doit s'afficher
1. toute la page ne se recharge pas
2 .je n'ai pas l'affichage du contenu de la page1.htm au milieu
<div id="gauche"><p>menu gauche</p>
<p>largeur fixe : 150px</p>

<ul class="menugauche">
<li><a href="page1.htm">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>
En fait si, toute la page se recharge. Mais la page est légère, et que les images sont dans le cache du navigateur, leur chargement est très rapide, ce qui donne cet impression de non-rechargement Smiley smile
Administrateur
Bonjour Elodie,

Pourrais-tu, comme les Règles t'y invitent, utiliser les boutons CODE pour marquer ton exemple ? (merci d'éditer ton post et de corriger) Smiley cligne
désolée, j'y penserai la prochaine fois Smiley cligne
j'ai une question comment faire pour rendre plus large le menu du haut, j'ai rajouté height;valeur mais ça n'a rien changé
et aussi je voudrai omment faire pour que ce menu prend toute la longueur
merci Smiley ravi
pour le menu plus large, je pense qu'il serait préférable de changer la valeur de width et non de height, et si tu veux qu'il fasse toute la longueur (en fait tu voulais dire largeur je pense), tu mets à 100% (il prendra alors la largeur du div père)
rebonjour, apres ce long silence, je sollicite à nouveau de l'aide à tous.
pour que vous puissiez mieux comprendre je vous mets mon code source html et css
copiez collez vous verrez que la mise en page ne prend pas toute la page

/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;

}
#header {
height: 70px;
background-color: #99CCCC;
}
#haut {
height: 40px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#CCCCFF
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}

#gauche {
position: absolute;
left:0;
width: 150px;
heigth: 400px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
.menuhaut li {
display: inline;
}
.menuhaut a {/*concerne les leins du menu haut*/
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;
}
p {margin: 0 0 10px 0;}


fichier html
<head>
<title>Largeur fixe 750, header/menu haut/menu gauche/menu droite/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("style6.css");
</style>
</head>

<body>
<div id="conteneur"> 
  <div id="header">header de largeur fixe : 750px <a href="http://www.alsacreations.com/articles/modeles"> 
    (voir tous les modèles)</a> - <a href="http://www.alsacreations.com/articles/modeles/g_d_haut_fixe.css">(voir 
    la feuille de style CSS)</a> </div>
  <div id="haut"> 
    <ul class="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>
      <li><a href="acrylreso_carac.htm">menus</a></li>
    </ul>
  </div>
  <div id="gauche">
    <p>menu gauche</p>
    <p>largeur fixe : 150px</p>
    <ul class="menugauche">
      <li><a href="acrylreso_carac.htm">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</p>
    <ul class="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"> partie centrale qui &quot;pousse&quot; les colones vers le 
    bas.<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
  </div>
  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
</body>
</html>
Administrateur
Je n'ai pas compris.
Que veux-tu obtenir ? Que la page occupe toute la hauteur ? Toute la largeur ?
Pages :
Sujet clos
Aller à