28173 sujets

CSS et mise en forme, CSS3

Problème de mise en page

Salut à tous,

j'ai un petit problème pour la mise en page de mon design (surtout en ce qui concerne le centre du design). Pour le centre du design, j'ai fait un grand block et à l'intérieur j'ai mis un block menu et un block contenu. Il se trouve que je n'arrive pas à mettre ces deux block sur le même ligne. Je vous ai fait un petit screen pour vous expliquer :

http://host-images.surf-remunere.com/uploads/2379d504df.jpg

J'ai mis un contour noir de 1px pour mieux se rendre compte.
Vous allez me dire, il suffit de mettre un float left pour le menu par exemple. Mais voyez ce que j'ai :

http://host-images.surf-remunere.com/uploads/d85361782a.jpg


Voici les propriétés des deux block : 


#menu {
	width : 210px; 
	margin-left : 15px;
	margin-top : 20px;
	display: block;
	border : 1px solid black;
}

#contenu {
	display: block;
	width : 73%;
	height : 100%;
	border : 1px solid black;
	margin-left : 260px;
	padding-top : 20px;
	padding-bottom : 20px;
	vertical-align : super;
}


Merci pour votre aide !
Oui c'est vrai.
J'ai simplifié le menu histoire de rendre le code moins long Smiley cligne
J'ai également enlevé l'header et le footer Smiley cligne 

<div id="design_bas">
	<div id="centre">
		
		<div id="barre_header">
			
			<div id="head_barre_img"><div id="barre_texte">Bienvenue invité</div></div>
			<div class="connexion">
				<form method="post" action="./contact_envoy.php">
				<b>Pseudo : </b>
				<input type="text" name="nom" size="20" />
				<b>Mot de passe : </b>
				<input type="password" name="nom" size="20" />
				<input type="submit" value="Connexion" id="bouton" />
				</form>
			</div>
		</div>
		
		<div id="menu">
			<div class="menu_element">
				<div class="element_haut">
					<div class="menu_newsletter">
						<div class="menu_texte_haut">Newsletter</div>
					</div>
				</div>
				<div class="newsletter">
					<form method="post" action="./contact_envoy.php">
					Email : <input type="text" value="Votre adresse" name="newsletter" size="26" />
					<input align="center" type="submit" value="Inscription" id="bouton" />
					</form>
				</div>
				<div class="element_bas"></div>
			</div><br />
		</div>
		<div id="contenu">test</div>
	</div>
</div>


Voici également le CSS qui va avec : 

#design_bas {
	width : 100%;
}

#centre {
	width : 92%;
	margin : auto;
	background-color: #FFFFFF;
}

#barre_header {
	width : 100%;
	height : 30px; 
	border : 0px;
	margin : auto;
	text-align: right;
	color : #FFFFFF;
	background:url('./images/head_barre_fond.gif') repeat-x;
}

#head_barre_img {
	width : 30%;
	height : 30px; 
	float : left; 
	background:url('./images/head_barre_img.gif') no-repeat;
	background-position : right;
}

#barre_texte {
	margin : 4px;
	padding-left : 10px;
	text-align : left;
	float : left;
}

.connexion {
	width : 60%;
	height : 30px;
	text-align: center;
	color : #FFFFFF;
	margin-top : 3px;
	margin-right : 20px;
	padding : 1px;
	float : right;
}

.connexion input {
	margin-top : 0px;
	border: 1px solid #888888;
	color : #5D5D5D;
	font-size : 11px;
	font-family: 'Trebuchet MS', Verdana, Helvetica, Tahoma;
	padding : 1px;
	margin-bottom :0px;
	margin-right : 5%;
	padding-left : 2px;
}

#bouton {
	cursor:pointer;
	width : 76px;
	height : 19px;
	font-size : 11px;
	font-family : Arial, Verdana, Helvetica, Tahoma;
	color: #449DBF;
	font-weight : bold;
	border : 0px ;
	padding : 0px;
	background: url('./images/input.gif') 0 0 repeat-x;
}


/* .............................
Menu de gauche
...................................*/

#menu {
	width : 210px; 
	margin-left : 15px;
	margin-top : 20px;
	border : 1px solid black;
}
essaie ceci peut etre

<div id="design_bas">

	<div id="barre_header">

			<div id="head_barre_img"><div id="barre_texte">Bienvenue invité</div></div>

			<div class="connexion">

				<form method="post" action="./contact_envoy.php">
				<b>Pseudo : </b>

				<input type="text" name="nom" size="20" />

				<b>Mot de passe : </b>

				<input type="password" name="nom" size="20" />

				<input type="submit" value="Connexion" id="bouton" />

				</form>

			</div>

		
<div id="centre">
		<div id="menu">

			<div class="menu_element">

				<div class="element_haut">

					<div class="menu_newsletter">

						<div class="menu_texte_haut">Newsletter</div>

					</div>

				</div>

				<div class="newsletter">

					<form method="post" action="./contact_envoy.php">

					Email : <input type="text" value="Votre adresse" name="newsletter" size="26" />

					<input align="center" type="submit" value="Inscription" id="bouton" />

					</form>

				</div>

				<div class="element_bas"></div>

			</div><br />

		</div>

		<div id="contenu">test</div>

	</div>
	</div>
</div>


J'ai juste changer l'emplacement de ton <div id=centre></div> pour qu'il sépare ton header de ton contenu.

NB. Tu risques de te faire taper sur les doigts ici avec ton utilisation des <div> essaie de les utiliser seulement quand c'est nécessaire, et sinon de remplacer par exemple 

<div id="head_barre_img"><div id="barre_texte">Bienvenue invité</div></div>

par
<h1 class="barre_img_texte">Bienvenue Invité</h1>

Modifié par Sirob V (08 Mar 2007 - 16:31)
Non sans succès non plus, Ce n'est pas la barre header qui me bloque en fait. C'est le footer, il faut qu'il puisse s'adapter en (c'est a dire que sa place change) en fonction de la hauteur des block menu et contenu. C'est pour cela que si je met un float sur l'un des deux sa ne va pas car il faut qu'en quelques sorte, l'un des deux bloques puisse pousser le footer pour qu'il descende.
Sujet clos
Aller à