Float left sans retour à la ligne

Question

Sylla

8 Oct 2005 à 01:25

Bonjour,

j'essaye de simuler un tableau à 1 seule ligne et X colonnes avec des div. Je voudrais obtenir un ascenseur HORIZONTAL pour faire défiler le "tableau" de droite à gauche.

J'ai donc essayé de générer une div par case (donc par colonne puisque tableau sur une seule ligne) avec un float left pour que chaque div se cale à droite de la précédente.
Mais arrivé aux bord du conteneur, les divs sont renvoyées à la ligne, au lieu de créer un ascenseur !

J'ai cherché sur le forum des problèmes similaires, j'ai juste trouvé un cas où on utilisait un clear left après le float left : ça marche à peu près, sauf que ça fait LE CONTRAIRE de ce que je cherche puisque du coup, les divs se mettent sur une seule colonne et plusieurs lignes Smiley bawling

Voici la page sur laquelle je fais mes test (parce que je ne sais pas si je suis très claire Smiley rolleyes

) :
page test

Merci beaucoup de votre aide Smiley lol

jp949

8 Oct 2005 à 07:07

Bonjour.
j'ai regardé ta page et ton code htm et css et je n'ai pas trouvé de float:left.
Peut-etre as-tu fais des modifs depuis hier?

Sylla

8 Oct 2005 à 07:28

C'est que la feuille de style est externe sans doute Smiley fache

La voici : (je mets en gras le style appliqué aux divs en question)

A {
color:#006600;
text-decoration:none;
}
A:hover {
color:#006600;
text-decoration:underline;
}
.texteP, .puces, .titreChamp, #description {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #006600;
	text-decoration: none;
	cursor: default;
}
.texteGras {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #006600;
	text-decoration: none;
	cursor: default;
}
.liens {
	cursor: hand;
	text-decoration: underline;

}
.puces{
	margin-top:0;
	margin-bottom:0;
	padding-top:0;
	padding-bottom:0;
}

.presse {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: 006600;
	text-decoration: none;
	list-style-type: square;
	border-bottom-width: thin;
	border-bottom-style: dashed;
	border-bottom-color: 006600;
	list-style-position: inside;
}
.texteSouligne {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #006600;
	cursor: default;
	border: 1px #006633;
	text-decoration: underline;
}
.champ {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #006600;
	cursor: default;
	background-color: c2ce99;
	text-align: left;
	vertical-align: middle;
	background-image: none;
	border: 0px none;
	padding-left:5px;
}
.titreChamp{
	text-align: right;
	padding-right:5px;
	margin-top:0;
	margin-bottom:0;
}
.titreChamp:after{
	content:" :";
}
.grosPHP, .grosCentre{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #006600;
	text-decoration: underline;
	cursor: default;
	margin-top:0;
	margin-bottom:0;
	padding-top:0;
	padding-bottom:0;
	list-style-type:none;
}
.grosCentre{
	text-align:center;	
}
.textePHP, .pucesPHP{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-align:justify;
	text-transform: none;
	color: #006600;
	text-decoration: none;
	cursor: default;
	margin-top:0;
	margin-bottom:0;
	padding-top:0;
	padding-bottom:0;
	list-style-type:none;
}
.tableau{
	border:1px solid white;
	height:200px;
	width:10000px;
}
.colonne{
	border:1px solid #006600;
	text-align:left;
	width:200px;
	height:200px;
}
[b].case{
	float:left;
	min-height:200px;
	width:200px;
	border:1px solid #006600;
	margin:5px;
}[/b]
.detail{
	
}	
.pucesTableau{
	list-style-position:inside;
	padding:5px;
	vertical-align:text-top;
	text-indent:5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-align:left;
	color: #006600;
}
.rupture1, .rupture2, .important{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-align:justify;
	text-transform: none;
	color: #006600;
	text-decoration: none;
	cursor: default;
	margin-top:0;
	margin-bottom:10px;
	padding-top:0;
	padding-bottom:0;
}
.rupture1{
	font-weight:bold;
}

Merci

jp949

8 Oct 2005 à 08:01

Il me semble qu'il y a des mauvaises imbrications de balises "<div id='contenu id="defilHoriz"> </div>" "</ul> sans <ul>" et d'une maniere generale trop de <div> on s'y retrouve difficilement ,essaie d'utiliser les <h> les<p> pour eclaicir un peu

Sylla

8 Oct 2005 à 08:11

C'est le bin's, surement...
Voici le code complet de la page. Une partie du code HTML est génére en PHP (liason base de donnée) - voilà pourquoi c'est pas très facile de vérifier l'imbrication des balises Smiley rolleyes

<?php require_once("inclus/entete.php") ?>
			<div id="contenu">
				<?php
					$link = mysql_connect($BD_SERVEUR,$BD_USER,$BD_PASSWORD) or die("Could not connect");
					mysql_select_db($BD_BASE) or die("Could not select database");
					$query = "SELECT * from t_ateliers WHERE id=".$_GET["idAtelier"];
					//	echo ($query);
					$result_atelier = mysql_query($query) or die("Query failed");
					$line_atelier = mysql_fetch_assoc($result_atelier);
					$query = "SELECT t_seances . * , t_programmes.id idProgramme, t_programmes.programme FROM t_seances LEFT JOIN t_programmes ON t_seances.id = t_programmes.idSeance WHERE idAtelier=".$_GET["idAtelier"];
					//	echo ($query);
					$result = mysql_query($query) or die("Query failed");
					echo "<div id='titrePage'>";
					echo $line_atelier["titre"];
					echo "</div>";
					echo "<div id='description'>";
					echo nl2br($line_atelier["description"]);
					echo "</div>";
				?>
				<div id="defilHoriz">
					<?php
						
						if (mysql_num_rows($result) != 0)
						{
							echo "<div class='case'>";
							echo "<ul class='pucesTableau'>\n";
							$idSeancePrec = null;
							while ($line = mysql_fetch_assoc($result))
						{
						if($idSeancePrec != $line["id"])
						{
							echo "</ul>\n";
							echo "</div><div class='case'>";
							if (isset ($line["date_fin"])) {
								echo "\t\t<li class='grosCentre'>du ".strftime("%d %B %Y",strtotime($line["date_debut"]))." au ".strftime("%d %B %Y",strtotime($line["date_fin"]))."</li>\n";
							}
							else {
								echo "\t\t<li class='grosCentre'>".strftime("%d %B %Y",strtotime($line["date_debut"]))."</li>\n";
							}
							echo "<ul class='pucesTableau'>\n";
							$idSeancePrec = $line["id"];
						}
						if($line["programme"] == "") $line["programme"] = "<i>Programme a préciser</i>";
						echo "\t\t<li class='detail'>".$line["programme"]."</li>\n";
						}
						echo "</ul>\n";
						}
						else echo "<a href=contact.htm class=\"texteP\">Aucune séances programmées pour l'instant. Pour être tenue au courant des prochaines dates, inscrivez-vous à la liste de diffision</a>\n";
						mysql_free_result($result);
						mysql_close($link);
						echo "</div>";
						
					?>
				</div>			
				<div id="commandes">
					<a href="prestations.php" class="texteP">Retour aux autres prestations</a>
				</div>
			</div>
		</div>
<?php require_once("inclus/pied.php") ?>

C'est aussi un peu pour ça que je psychote ! C'est un copain à moi qui à fait la partie PHP. En théorie, il ne me reste plus qu'à poser mes styles CSS pour que la page s'affiche comme je veux, mais Smiley confus

jp949

8 Oct 2005 à 09:20

.case
ajouter
overflow:auto;
display:inline;.
Enlever
clear:both

Sylla

8 Oct 2005 à 09:27

Comme ça ?

.case{
	float:left;
	overflow:auto;
	display:inline;
	min-height:200px;
	width:200px;
	border:1px solid #006600;
	margin:5px;
}

Alors :
Sous Mozilla, ça ne renvoie plus les divs à la ligne OK, mais ça ne permet pas de faire défiler... On ne voit qu'une partie donc Smiley ohwell

Sous IE, ça n'empêche même pas les divs de revenir à la ligne (je hais IE Smiley fache

)

Sylla

8 Oct 2005 à 09:29

Je mets la "page test" à jour au fur et à mesure...

Sylla

8 Oct 2005 à 09:35

Rectification :
ça ne change rien, même sous Mozilla Smiley lol

jp949

8 Oct 2005 à 10:23

Dans ta feuille de style il n'y a pas de style defini pour
#defilhoriz
ca doit etre ce cadre qui doit supporter le scroll

Sylla

8 Oct 2005 à 10:39

Oui, le style "defilHoriz" est défini dans une autre feuille de style :

body, html{
	margin:0;
	width:100%;
	overflow:hidden;
	height:100%;
	position:absolue;
	background-color:#b1c07c;
}
#site{
	position:relative;
	align:center;
	width:774px;
	height:473px;
	border:2px solid #006600;
	margin:auto;
}
#entete{
	width:100%;
	height:121px;
	border:0;
	margin:0;
	padding:0;
}
#menu{
	position:absolute;
	width:185px;
	height:352px;
	margin:0;
}
#commandes{
	position: absolute;
	bottom: 10px;
	width:576px;
	border-top:1px dotted #006633;
	border-bottom:1px dotted #006633;
	margin-top:10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
}
#contenu{
	float:right;
	width:586px;
	height:352px;
	margin:0;
	padding:0;
}
[b]#defilHoriz{
	overflow:auto;
	height:280px;
	width:580px;
	margin:0;
	padding:0;
}[/b]
#titrePage{
	text-align:center;
	font-size: 18px;
	color: ffcc99;
	font-weight: bold;
	text-align: center;
	margin-bottom:0;
}
#description{
	width:576px;
	text-align:justify;
	margin-top:0;
}

Mais cette div est en overflow:auto, et elle défile comme il faut (enfin, de haut en bas au lieu de droite à gauche Smiley ohwell

, mais bon, elle défile...)

Smiley bawling

jp949

8 Oct 2005 à 11:28

sur IE j'ai le scroll horizontal mais j'ai 2 fenetres a l'interieur de ce div c'est normal ?

Sylla

8 Oct 2005 à 11:32

Je ne vois pas de scroll horizontal moi Smiley eek

! ni sous IE ni sous mozilla...

jp949

8 Oct 2005 à 11:41

j'ai modifié sur mon pc et j'ai scroll horizontal mais j'ai 2 fenetres a l'interieur du (div class=defilhoriz) est-ce que c'est l'effet voulu?

Sylla

8 Oct 2005 à 11:44

Le défilement horizontal, oui !
Les 2 fenêtres, je ne vois pas bien...

Sur cette page tu as une idée de l'effet voulu.
(sauf que ce sont des images dans un tableau en ligne)

Sylla

8 Oct 2005 à 11:46

mais en principe, il doit apparaitre au moins 4 divs comme c'est le cas actuellement sur la page :

Page test

Smiley langue

Sujet clos