Discussion :

[cedrus]

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.




Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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'); ?>

[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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[M4itreG]

Par exemple dans ta ligne 17 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[cedrus]

La balise relative est juste composée en css de

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.relative { position:relative; }

. Le reste je l'ajoute avec la balise style. J'améliorerai le css par la suite pour ces nouveaux blocs

[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

[Bovino]

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

EDIT
Arf... grillé

[Bovino]

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...

[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 !