18041 sujets

Questions générales et questions de débutants

Problème avec le tutoriel 3 colonnes

Bonsoir,

J'ai crée ma page html/css et j'ai appliqué le tutoriel des 3 colonnes d'alsacreations mais le problème c'est que celle du milieux est bien centré mais en dessous du menu de gauche et de droite !
Je n'arrive pas à mettre la colonne du milieu au milieu et bien entre les 2 colonnes menues !
Je vous remercie par avance.

Cdt.

Math
A+
Modérateur
Bonjour et bienvenue Mathelec, Smiley smile

Ce n'est pas ce qui se produit sur le tuto donc un exemple en ligne voire le code correspondant pourraient être utiles à la résolution de ton problème. Smiley cligne
Merci de ta réponse voici mon code :

HTML

<div id="menug">
	<h1><img src="images/ico.png" alt="" />Titre</h1>
	<div class="menug">
		<ul>
			<li><a href="#">Menu</a></li>
			<li><a href="#">Menu</a></li>
			<li><a href="#">Menu</a></li>
		</ul>
	</div>

	<div class="space"></div>

	<div id="logo" align="center">
		<img src="images/paypal.png" alt="Paypal" class="logo" />
		<img src="images/visa.png" alt="Visa - Mastercard" class="logo" />
		<img src="images/allopass.png" alt="Allopass" class="logo" />
	</div>
</div>

<div id="menud">
	<h1>Espace Clients</h1>
	<form action="?" method="get">
		<span class="formboth"><label for="compte">Compte :</label><input type="text" name="compte" id="compte" /></span>
		<br class="formspace" /><br class="formspace" />
		<span class="formboth"><label for="password">MP :</label><input type="password" name="password" id="password" /></span>
		<br class="formspace" /><br class="formspace" />
		<input type="submit" name="submit" id="submit" value="Ok" /> 
	</form>

	<h2>Titre</h2>
	<p class="serveurs">
		<b>Test :</b><br /><br />
		<span class="servergame">Test</span><br />
		Blablabla<br /><br />
	</p>
	
	<h1>Blabla</h1>
	<p>Blablabla</p>
</div>

<div id="contenu">
	<h1>Titre</h1>
	<div class="text">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
	</div>
</div>


CSS

/* MENU GAUCHE */
#menug
{
	float: left;
	width: 202px;		
	margin-right: 5px;
	padding-top: 10px;
	padding-bottom: 15px;
}
#menug h1
{
	background-image: url(images/menu_titre.png);
	background-repeat: no-repeat;
	width: 160px;
	height: 23px;
	color: #33BDEB;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.7em;
	margin-top: 10px;
	padding-left: 5px;
}
#menug h1 img
{
	float: left;
	margin-right: 3px;
}
#menug div.menug
{
	border: 1px solid #DFFFFF;
	padding: 5px;
	margin-bottom: 5px;
	width: 160px;
}
#menug ul
{
	margin-bottom: 10px;
}
#menug li
{
	display: block;
	margin-left: 20px;
}
#menug a
{
	text-decoration: none;
	color: #A5A5A5;
}
#menug a:hover
{
	text-decoration: underline;
	color: orange;
}
#menug img.logo
{
	margin: 2px 0px;
}
#menug div#logo
{
	width: 170px;
	border: 1px solid #DFFFFF;
	padding: 10px 0px;
}
/* MENU DROITE */
#menud
{
	float: right;
	width: 250px;		
	margin-left: 5px; 
	padding: 1px 20px;
}
#menud h1
{
	background-image: url(images/titre1_droite.png);
	background-repeat: no-repeat;
	width: 250px;
	height: 25px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding-left: 15px;
	line-height: 1.7em;
}
/* CONTENU */
#contenu
{
	overflow: hidden;
	width: 363px;
}
#contenu h1
{
	background-image: url(images/titre_gauche.png);
	background-repeat: no-repeat;
	width: 363px;
	height: 25px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding-left: 15px;
	line-height: 1.7em;
}
#contenu p
{
	color: #A3A3A3;
	margin: 15px 5px;
}
#contenu div.text
{
	border: 1px solid #DFFFFF;
}

Modifié par Mathelec (24 Mar 2008 - 15:23)
Bonjour,

En regardant ton code rapidement, je ne comprends pas:
- pourquoi certains blocs sont positionnés en relatif (?);
- pourquoi le bloc central a une largeur fixe alors que le principe du tutoriel que tu as suivi est de ne PAS donner de largeur fixe à ce bloc.

De plus, les questions d'usage:
- le code HTML de ta page est-il valide?
- le code CSS de ta feuille de styles est-il valide?
- le problème constaté concerne-t-il tous les navigateurs, ou seulement certains navigateurs ou certaines versions?
Modifié par Florent V. (24 Mar 2008 - 12:50)
J'ai mis certains bloc en relatif car ayant trouvé un autre tutoriel du même type j'ai rajouté quelques lignes mais en vain ça n'a rien changé.
La largeur fixe du bloc centrale c'est du au faite que le bloc possède une image comme titre d'une largeur fixe. Et mon but étant d'avoir 3 colonnes fixes en largeurs.

Tout d'abord cela concerne tout les navigateur.
Sinon oui mon code html/css est bien valide.
Mathelec a écrit :
Et mon but étant d'avoir 3 colonnes fixes en largeurs.

Ben dans ce cas tu n'as peut-être pas choisi le bon tutoriel, vu que celui que tu as suivi s'appelle «Un design fluide avec trois "colonnes", grâce au positionnement flottant».

Ceci dit il peut s'adapter facilement. Il suffit d'avoir un conteneur global de la bonne largeur, des colonnes latérales ayant une largeur donnée, et par soustraction on obtiendra automatiquement une colonne centrale de la largeur voulue. Par contre, il ne faut pas utiliser la propriété width pour cette colonne centrale.

Et si je puis me permettre, essayer de combiner deux tutoriels différents et laisser trainer dans son code CSS des propriétés qui n'ont pas l'air de résoudre un problème (en risquant de déclencher un autre problème par ailleurs), ça n'est pas très rigoureux comme approche. Smiley cligne

Enfin: une page en ligne, pour qu'on puisse voir ça directement?
Mathelec a écrit :
J'ai mon float:left dans mon menu de gauche, mon float:right dans celui de droite et mon overflow:hidden dans le bloc centrale, donc je ne comprends pas pourquoi ça ne fonctionne pas..
(J'ai viré les position:relative)

Page en ligne?
Désolé Florent du retard, j'ai réussi a corriger mes erreurs Smiley smile !
Et comme tu dis j'ai refais certaines partis pour ne pas mélanger plusieurs sources.

Voici le résultat : [EDIT]
Mais le soucis c'est quand le contenu est trop court les menu passe sur le footer : [EDIT]

Merci de m'aider.

Cdt.
Mathieu.
Modifié par Mathelec (24 Mar 2008 - 17:30)
Je crois avoir réglé le problème avec un float:left au footer et un clear:both après le menu droite avant la fin du cadre
Sujet clos
Aller à