28173 sujets

CSS et mise en forme, CSS3

Bonjour

Si je fait appel a vous c'est qu'évidement j'ai un petit problème que je n'arrive pas a résoudre vu que je debute en CSS Smiley sweatdrop .

Petite mise en situation :
J'aimerais afficher des blocs <div> ce décalants a chaque fois sur la droite.
Chaque bloc contiendrais deux blocs.
Un petit schema Smiley smile :
upload/9676-ex.jpg
En vert le bloc conteneur, en rouge et en bleu, les bloc à l'interrieur du conteneur.

Sachant que les blocs ce repetent grace à une fonction php ansi qu'une requete MySQL.

Mon code php etant correct ( je pense Smiley sweatdrop ) vu que la répétition s'effectue bien, le probleme réside dans l'affichage Smiley confus ( lié au CSS ).

Place aux codes :

Le code CSS :
html, body {
height: 100%;
width: 100%;
}

body{ 
background-color:#F00000;
}


.bloc1_head{
height: 150px;
width: 600px;
background-color:#CCCC99;
}

.bloc1_cont{
height: 650px;
width: 600px;
background-color:#FFCC00;
}

.bloc1 {
background-color: blue;
height: 800px;
width: 600px;
float: left;
}


.bloc2_head{
height: 150px;
width: 500px;
background-color:#FF00FF;
}

.bloc2_cont{
height: 650px;
width: 500px;
background-color:#9999FF;
}

.bloc2 {
background-color: green;
height: 800px;
width: 500px;
float: left;
position:relative;
}


Le code PHP :

<div class="bloc1">

	<div class="bloc1_head">
		<form method="post" action="#?">
		Connect<br /><input type="text" name="nom" size="20"><br>
		<input type="text" name="prenom" size="20"><br />
		<input type="submit" value="OK">
		</form>
	</div>
	
	<div class="bloc1_cont">
			<img src="img/fond.jpg" />
	</div>
	
</div>
<? while ($result = mysql_fetch_assoc($requete)) { ?>
	<? $requete2=mysql_query("SELECT * FROM membres WHERE id=".$result['idlogin'].";"); ?>
	
<div class="bloc2">
		 
	<div class="bloc2_head">		
		<?
						   echo "Auteur : ".mysql_result($requete2,0,login)."<br>";
						   echo "Site : <a href=\"".$result['site']."\">".$result['site']."</a><br>";
						   echo "Commentaire : ".substr($result['commentaire'],1,50)."...<br>";
						   echo "<a href=\"commentaire.php?id=".$result['id']."\">Voir et commenter !</a><br><br>";
						   echo "<a href=\"vote.php?id=".$result['id']."\">Voter pour cette partie</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nombre de vote : ".$result['note']; } ?>
						   </div>
	
<? $requete=mysql_query("SELECT * FROM images WHERE valid='2';");
	   	while ($result = mysql_fetch_assoc($requete)) { ?>
		
	<div class="bloc2_cont">		
	<? echo "<img src=\"img/".$result['fichier']."\"/>"; ?>
	</div>
	

</div>
	<? 
	} ?>


Je suis désolé je n'es pas margé mon code, mais je pense que ca reste lisible.
Voila je pense avoir tout dis, j'espere que vous allez pouvoir m'aider, en attendant je continue a chercher et j'y retourne Smiley bawling .
Merci à bientot Smiley smile .
Modifié par hself (26 Nov 2006 - 23:02)
Bonjour,

Ou je n'ai pas bien compris, ou tu veux aligner des blocs de 600px de large, si c'est le cas quel magnifique scroll horizontal il te faudra ...

Sinon, un conteneur de heu... 6500px (pour 10 blocs ou 600x $nombre_resultat + 10%(pour les bordures) en php ) de large avec tes blocs en float left contenant un bloc haut et un bloc bas le tout dans une boucle php.
Merci, pour ta réponse rapide, oui tu a bien compris le but est d'aligner des blocs de 600px de large (pour le scroll horizontal, ce n'est pas grave).
J'ai testé la solution que tu m'a proposé mais ca ne fonctionne pas Smiley sweatdrop .
Je continue a chercher, merci.
Modifié par hself (26 Nov 2006 - 19:54)
Re

Il n'y a pas de raison !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
		
		<title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css">

html, body {

height: 100%;

width: 100%;

}



body{ 

background-color:#dddce2;

}





#conteneur{
height: 800px;
width: 6100px;
background-color:#fdff41;

}



.bloc_total{
height: 800px;
width: 600px;
background-color:#ff1c03;
float: left;
border: 1px dashed #fe9902;
margin: 0 2px 0 2px; 
}



.bloc_haut {

background-color: #0cf600;
height: 150px;
width: 600px;

}





.bloc_bas{

height: 650px;
width: 600px;
background-color:#5123ff;

}



		</style></head>

	<body>
<div id="conteneur">

	<div class="bloc_total">
		<div class="bloc_haut">
		</div>
		<div class="bloc_bas">	 
		</div>
	</div> 
	
	<div class="bloc_total">
		<div class="bloc_haut">
		</div>
		<div class="bloc_bas">	 
		</div>
	</div>
	
	<div class="bloc_total">
		<div class="bloc_haut">
		</div>
		<div class="bloc_bas">	 
		</div>
	</div>
	
	<div class="bloc_total">
		<div class="bloc_haut">
		</div>
		<div class="bloc_bas">	 
		</div>
	</div> 
	
	<div class="bloc_total">
		<div class="bloc_haut">
		</div>
		<div class="bloc_bas">	 
		</div>
	</div>

	<div class="bloc_total">
		<div class="bloc_haut">
		</div>
		<div class="bloc_bas">	 
		</div>
	</div>
	
</div>

	</body></html>




Pas de php, j'ai juste aditionné les blocs
Salut ghost,

Merci pour ta réponse, mais comme tu le vois ( c'est pour ca que j'utilise une fonction php )je ne connais pas le nombre de blocs total qu'il vas y avoir. Ta methode fonctionn seulement si on connais le nombre de blocs total.
Modifié par hself (26 Nov 2006 - 20:39)
hself a écrit :
Merci pour ta réponse, mais comme tu le vois ( c'est pour ca que j'utilise une fonction php )je ne connais pas le nombre de blocs total qu'il vas y avoir. Ta methode fonctionn seulement si on connais le nombre de blocs total.

Les navigateurs rejettent les éléments flottants ou en-ligne à la ligne suivante s'il n'y a plus de place pour les caser. Le seul moyen à ma connaissance d'empêcher ça, c'est de créer un conteneur de la largeur totale voulue (6000px...), et de caser tous les éléments flottants dedans.

Si tu ne connais pas à l'avance le nombre de bloc ET que tu n'as pas moyen de modifier la largeur du conteneur en fonction de ce nombre de blocs, tu es bloqué.

Mais, à priori, tu devrais pouvoir indiquer une largeur dans la feuille de style interne au decument (entre les balises <style>), voire directement dans l'attribut style du bloc conteneur.

<div id="conteneurlarge" style="6000px">
...
</div>

Il suffira de calculer la largeur nécessaire (et donc le nombre de blocs à afficher) avant de créer en PHP le bloc conteneur et ses attributs.
Re,

Si tu travailles avec une boucle, tu connais ce nombre et donc éventuellement styler dans le code le width de ton conteneur ? (quitte à faire un premier passage pour le connaitre.)
Justement, c'est grâce à php que tu peux faire cela, car en css pur un div extensible en largeur ... Warf connais pas !!


Il ne reste plus après qu'à ...
HA !! merci pour vos réponses, j'ai réussit a calculer la taille total, tout marche nikel. Merci pour votre aide !
Modifié par hself (26 Nov 2006 - 22:59)