Syntaxe de div dans une autre div

Version imprimable

Bonjour
Je me retrouve avec un petit soucis puisque comme vous pouvez le voir sur l image le bloc des 3 colonnes d'actualités se retrouve au dessus du bloc du titre "ACTUALITE" et du footer qu'on voit derrière le bloc au lieu d'être en bas du bloc. Je ne sais pas comment corriger. Le bloc des 3 colonnes doit être à l'intérieur du bloc gris clair qu'on voit.

http://guitaretv.com/partage/div-news.jpg

Voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php // ACTUALITES ?>
<div class="relative">
	<div class="relative" style="height:45px;background:#4499d9">
		<div class="absolute nowrap size30 bold" style="left:20px;font-family:TitilliumWeb-Semibold;">
			<a class="lien_no white" href="<?php echo link_cat_actu(1); ?>" title="Toute l'actualité du site">
				ACTUALITES
			</a>
		</div>
	</div>
<div class="container" style="border-top:0px;"> //.......TOUT LE CODE DES 3 COLONNES......JUSQU A 
 ==>
<?php // FIN AFF ACTUALITES 1?>
<div class="relative" style="height:6px;"></div>
<div class="relative w_total" style="height:15px;">
	<div class="absolute" style="bottom:3px;right:6px;">
		<a class="lien_no" href="<?php echo link_cat_actu(1); ?>" title="Toute l'actualité de GuitareTV">
			<img src="<?php echo $CONF_URL_IMAGE; ?>global/plus.png" alt="<?php echo get_mot(); ?>" />
		</a>
	</div>
</div>
</div>
</div>
<?php // FIN ACTUALITES ?>
</div>
<?php // FIN PARTIE GAUCHE ?>
<div class="relative" style="height:7px;"></div>
<?php include($CONF_URL_LOCAL.'_config/include/menu_footer.php'); ?>

28/01/2014, 12h35
M4itreG
Bonjour,

Je suis bien loin d'être expert en la matière, mais je tente quand même.
Je trouve tes nom de classes assez étranges.
Citation:
Envoyé par cedrus

Code:

1 2 Bonjour <div class="absolute nowrap size30 bold" style="left:20px;font-family:TitilliumWeb-Semibold;">
As tu un fichier .css avec ça ?

Je pense que la méthode de positionnement n'est pas la bonne utilisée ou néanmoins pas la plus lisible.

J'espère que d'autres t'aiderons pour appuyer ou dés-appuyer mes pensées.

Cordialement.

M4itreG
28/01/2014, 13h07
cedrus

en fait les 3 colonnes doivent être à l'intérieur de la ligne grise qu'on voit en dessous du bloc bleu du titre ACTUALITE.
28/01/2014, 13h34
M4itreG

Par exemple dans ta ligne 17 :

Code:

<div class="relative" style="height:6px;"></div>

Est ce que que l'on retrouve une classe nommée "relative", dans une feuille de style (.css) ? ou utilise tu simplement la balise style pour la mise en forme ?

Cordialement

M4itreG
28/01/2014, 13h47
cedrus

La balise relative est juste composée en css de

Code:

.relative { position:relative; }

. Le reste je l'ajoute avec la balise style. J'améliorerai le css par la suite pour ces nouveaux blocs
28/01/2014, 14h16
M4itreG

Tout d'abord pour une meilleur lisibilité, pour toi comme pour tout le monde, je pense que passer par une feuille de style (.css) est quand la meilleur solution. (Avec un code propre c'est toujours mieux).

Pour placer des div il ne suffit pas de leur dire "relative" ou "absolute". Il faut leur dire, de combien de la droite ou de la gauche ou du haut ou du bas.

Je pense qu'avec une bonne compréhension des différents méthodes de position tu trouvera mieux la solution :

Je te propose donc de lire cette FAQ :

http://css.developpez.com/faq/?page=positionnement

Ainsi que ce tuto, très bien fait :

http://pbnaigeon.developpez.com/tuto...tions-de-base/

Après ceci, je pense qu'il te sera plus facile de savoir comment mettre tes positions et lesquelles utiliser.

Cordialement

M4itreG
28/01/2014, 14h18
Bovino

Et donc, on peut imaginer que class="absolute" correspond à un positionnement absolu... :whistle:

EDIT
Arf... grillé :aie:

J ai créé un nouveau bloc en absolute (ligne 14) qui contient les 3 colonnes. Donc cette fois les 3 colonnes des news sont bien intégrées dans le bloc gris clair. Cependant j ai toujours le footer qui se place derrière au lieu d'être en bas du bloc...

Voici le nouveau code complet, y voyez vous une erreur de ma part ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php // ACTUALITES ?>
<div class="relative">
	<div class="relative" style="height:45px;background:#4499d9">
		<div class="absolute nowrap size30 bold" style="left:20px;font-family:TitilliumWeb-Semibold;">
			<a class="lien_no white" href="<?php echo link_cat_actu(1); ?>" title="Toute l'actualité du site">
				ACTUALITES
			</a>
		</div>
	</div>
<div class="absolute" style="height:auto;width:990px;background:#eeeeee;"> 
<?php
        // AFF ACTUALITES : GROSSES ACTU
        //.......TOUT LE CODE DES 3 COLONNES......JUSQU A 
 ==>
 
<?php
                } // fin foreach
?>
		</div>
<?php
        } // fin for
?>
<?php // FIN AFF ACTUALITES 1?>
 
 
 
 
						<div class="relative" style="height:6px;"></div>
 
						<div class="relative w_total" style="height:15px;">
							<div class="absolute" style="bottom:3px;right:6px;">
								<a class="lien_no" href="<?php echo link_cat_actu(1); ?>" title="Toute l'actualité dsu site">
									<img src="<?php echo $CONF_URL_IMAGE; ?>global/plus.png" alt="<?php echo get_mot(); ?>" />
								</a>
							</div>
						</div>
 
 
</div>
				</div>
				<?php // FIN ACTUALITES ?>
 
			</div>
			<?php // FIN PARTIE GAUCHE ?>
 
 
			<div class="relative" style="height:7px;"></div>
 
<?php include($CONF_URL_LOCAL.'_config/include/menu_footer.php'); ?>

28/01/2014, 14h59
Bovino

Merci de lire Important : Les règles incontournables d'utilisation de ce forum et de poster le code HTML généré, le code PHP n'ayant aucune utilité concernant le traitement côté client !
28/01/2014, 15h01
Bovino

Citation:

Cependant j ai toujours le footer qui se place derrière au lieu d'être en bas du bloc...

Les mêmes causes produisant souvent les mêmes effets, tant que tu n'auras pas lu et intégré les liens déjà donnés concernant le positionnement absolu, tu ne t'en sortiras pas...
28/01/2014, 16h39
cedrus

Ca m a pris un moment mais j ai finis par comprendre que absolute était un mauvais choix. Du coup j'ai fait un float:left en définissant une largeur de bloc de 990px pour que mes 3 colonnes se développent. Et pour le bloc du dessous j ai mis un clear:both (fonction que je ne connaissais pas)

Maintenant tout est en ordre ! Merci pour vos conseils. J 'en apprends tous les jours !