28172 sujets

CSS et mise en forme, CSS3

Salut
Je suis plutôt novice en positionnement css et un coup de main serait le bienvenue.
Je suis confronté au problème suivant : lorsque je redimensionne ma fenêtre, mes contenus finissent par tous se superposer : exemplehttp://collectif7.free.fr/V2/Creations%20-%20parfois.html# C'est vraiment flagrant avec le menu en haut à droite.

Mon CSS:

body {
	color: black;
	background: black;
	font: normal 80% "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	padding: 15px 100px;
}

/*-----------#global----------------------------*/
#global {
	background: #292525; 
	padding-bottom:5px;	
}

/*-----------#header-inside----------------------*/
#header-inside {
  position: relative;  
  margin: 0 auto;
  height:65px;
}

/*-----------#contenu----------------------------*/
#contenu {
	color: white;
	background: #F07B14; 
	margin-left: 160px; 
	margin-right:5px;	
	padding: 0px 20px;
	text-align:justify;
	border:1px solid black;	
	height: 400px;/*hauteur mini pour IE*/
}
html>body div#contenu
{
height: auto;
min-height: 400px; /*hauteur mini pour les autres*/
} 

/*-----------#titre-creation--------------------*/
#titre-creation{
	font-size: 1.7em;
	color:white;
	font-weight:bold;
	text-align: right;
	margin-right:5px;
}

/*-----------#menu------------------------------*/
ul#menu {
  position: absolute;
  top: 0;
  right: 0;
  list-style: none;
}

ul#menu li {
  text-align: center;
  width: 90px;
  float: left;  
}

ul#menu li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
  font-variant: small-caps;
}

/*-----------#sous-menu------------------------*/
#sous-menu {
  text-align:left;
  margin:5px;
  border-bottom:thin solid #F07B14;
  border-top:thin solid #F07B14;
}

#sous-menu ul {
  list-style: none;
}

#sous-menu ul li {
  margin-right: 15px;
  display: inline;
}

#sous-menu li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-variant: small-caps;
}

/*-----------#navigation------------------------*/
#navigation {
	height:200px;	
	margin-left:5px;
	width: 155px;
	float: left;
}

/*-----------#menu-creation---------------------*/
ul#menu-creation {
position:relative;
	margin-left:20px;
}

ul#menu-creation li {  
  width: 100px;
  float: left;
  color:#F07B14;  
}

ul#menu-creation li a {
  text-decoration: none;
  color:#F07B14;
}

#sous-menu h1 {
  color:white;
  font-size: 1.7em;
  letter-spacing:-1px;
  font-weight:bold;
  text-align: right;
  margin-left:5px;
}


Pour le HTML, je vous laisse regarder le source Smiley cligne

Ce que je voudrais, c'est que lorsqu'il n'y a plus de place pour déplacer les éléments dans leur conteneur, on ne puisse plus réduire la fenêtre mais qu'une scrollbar apparaisse. Vous voyez ce que je veux dire?

ps: je pars bientôt en WE, donc ne le prenez pas mal si je ne réponds pas tout de suite à vos suggestions.

Merci beaucoup!