28173 sujets

CSS et mise en forme, CSS3

Menu / Contenu dans un bloc

Hello,

J'avais reussi avec l'aide du forum à résoudre un problème similaire récemment, mais la je cale.

Je souhaite simplement faire une mise en page avec menu / contenu, le tout dans un bloc, qui s'allonge avec la taille du menu.

J'ai réussi avec les tutoriels en plaçant le menu avant le contenu dans la code HTML, mais je souhaite le placer après, et la je n'arrive pas à faire décaler les blocs.

Le test est ici: http://apassant.net/tmp/menu

Je souhaite donc que le bloc bleu soit complètement calé dans le jaune, et encore mieux, que le rouge s'étende selon la taille du jaune.

Merci pour tout conseil qui me permettrait d'y arriver en touchant juste à ma CSS.
Modifié par terraces (21 Jul 2006 - 15:47)
Voila, c'est à peu près ca.

Le truc cest que je souhaite "inverser" mon affichage par rapport au code HTML, et que j'utilise absolute pour positionner mon menu, et n'arrive pas a réutiliser les infos des tutoriels.

Peut-etre que c'est le absolute qui bloque ?
Bonjour,

Bah moi j'ai testé un truc tout bête, j'ai enlevé ton position absolute, ton top:0, le float:left (qui sert à rien puisque ton absolute prend la main) et j'ai tout bêtement mis un float:right à ton contenu.

Sur FF ca marche en tout cas.

Tiens moi au courant Smiley cligne
Salut,

Merci pour l'astuce, mais sous IE, le menu s'affiche après le bloc de contenu.
Autre pb sous FF, meme avec un vertical-align: top, le contenu du menu commence après que le bloc de contenu soit terminé.

Je sèche ...
Bonjour,

Donc au plus simple, j'ai fixé la largeur de ton conteneur dokuwiki (800+200 = 1000 px), mis un float:right à ton contenu, passé toutes les valeur en padding et margin 0, et également ajouté une div vide avec clear:both juste apres la div menu.

* {
  margin: 0;
  padding: 0;
}

div.dokuwiki {
	background:#ddd; /* pour test*/
	width:1000px;

}

div.menu {
	width: 200px; /* pour test*/
	background:#aaa;
}

div.content {
	width: 800px;
	margin-left: 200px;
	background:#666; /* pour test*/
	float: right;
}


et dans le html


 <div class="menu">
	…
 </div>
 <div style="clear:both"></div>

Modifié par zzzazzz (24 Jul 2006 - 11:33)
... meme resultat. En fait j'arrive a avoir soit l'un qui repousse le bas, soit l'autre, mais pas les 2 (en fonction de la longueur du plus grand).

Merci quand meme Smiley cligne
Bonjour, et bien en supprimant le margin-left:200 et en mettant un float:left au menu, ca marche impek sur FF et IE (cette fois j'ai testé sur IE pc)




* {
  margin: 0;
  padding: 0;
}

div.dokuwiki {
	background:#ddd; /* pour test*/
	width:1000px;

}

div.menu {
	width: 200px; /* pour test*/
	background:#aaa;
	float:left;
}

div.content {
	width: 800px;
	background:#666; /* pour test*/
	float: right;
}
Et voici le résultat : l'exercice en ligne
zzzazzz a écrit :
Bonjour, et bien en supprimant le margin-left:200 et en mettant un float:left au menu, ca marche impek sur FF et IE (cette fois j'ai testé sur IE pc)




* {
  margin: 0;
  padding: 0;
}

div.dokuwiki {
	background:#ddd; /* pour test*/
	width:1000px;

}

div.menu {
	width: 200px; /* pour test*/
	background:#aaa;
	float:left;
}

div.content {
	width: 800px;
	background:#666; /* pour test*/
	float: right;
}
Et voici le résultat : l'exercice en ligne


Bonjour zzzazzz,
Tu me paraît super Callée, peut être voudras tu m'aider stp .
- Soit un m'indiquant un squelette, un guide, tuto,...
- Soit en m'expliquant;
Voila le désir que j'aimerai accomplir :
Je désire des sites conforme w3c, xhtml css, pas de tableaux mais Contener = div = bloc, visibles sur tous les Navigateurs.
(je bosse sur Mac osX Tiger et NVU)
Il s'agit de sites simples statiques, une quinzaine de pages, un seule menu horizontal en haut = le même sur toutes page, un titre sur chaque page, une image de fond avec texte dessus (paragraphe), un pieds de page de 2 lignes et des galeries.
Mon problème : c'est que je ne sais pas commment utiliser les blocs dans les blocs (contener + div) dans nvu et je n'ai pas trouvé de tuto ni squelette.
que peux tu me proposer S.T.P. ?
Admiration et merci d'avance
Smiley eek
Bonjour,

Essaye peut être un code approchant celui ci



 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		
<head> 
<style>
body
{
      background-color:#C7B29A;
      font-family:Tahoma;
      font-size:12px;
      line-height:20px;
      margin: 0;
      padding: 0;

}

#conteneur
{
      width:750px;
      margin: 0; padding: 0;
      margin: auto; 
      color:#000;
      border: 1px solid #000;
      background-color:#f60f00;
}


#gauche 
{  	
     float:left;
     overflow: visible;/* pour EI*/
     height: 1%;/* pour EI*/
     width:150px;
     border:1px solid #262a6d;
     margin: 0; padding: 0;
     background-color:#f1ede1;
}

html>body #gauche {/* pour les autres*/
     overflow: hidden
} 

#droite 
{  
    float: left;	
    width: 526px;
    overflow: visible;/* pour EI*/
    height: 1%;/* pour EI*/
    border: 1px solid #e91e00;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 25px;
    padding-right: 25px;
    color: #ae846c;
    background-color:#d7dddf;
}
html>body #droite {/* pour les autres*/
    overflow: hidden
}

#footer
{  
   clear: both;
   height: 1%;
   margin-top: 0px; 
   text-align: center;

} 

#item1
{  
   margin: auto;
   width : 150px;
   overflow: visible;/* pour EI*/
   height: 1%;/* pour EI*/
   background-color: #1bff26;

}

html>body #item1 { /* pour les autres*/
    overflow: hidden
} 

#item2
{  
   margin: auto;
   width : 150px;
   overflow: visible;/* pour EI*/
   height: 1%;/* pour EI*/
   background-color: #684fff;

}

html>body #item2 { /* pour les autres*/
   overflow: hidden
}

</style>
</head>

<body>
<div id="conteneur">
 <div id="gauche">
  <div id="item1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
  </div>
  <div id="item2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
  </div>
</div>
<div id="droite"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.
</p>
 </div>
<div id="footer"></div>
</body>
</html>


Peut être ça te conviendra, pour plus d'info voir les tutos concernant la mise en page sur 2 colonnes.
Sujet clos
Aller à