Mise en page générale avec des DIV

Résolu/Fermé
pcsystemd Messages postés 691 Date d'inscription dimanche 27 novembre 2005 Statut Membre Dernière intervention 15 janvier 2024 - 24 oct. 2008 à 21:12
briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 - 24 oct. 2008 à 22:43
https://www.cjoint.com/?kyveKgsx3G

Bonjour,

je vais essayé d'être le plus clair possible. Tout d'abord, vous pouvez consulter l'image de ce que je souhaite ici :

https://www.cjoint.com/?kyveKgsx3G

Cette image represente comme j'imagine ma page quis era une page d'annonces donc avec des blocks(ici trois dans l'image) et un menu sur la droite. Le menu est lui dans un div. Aligner sur le dernier lien je souhaite inserer deux petites images(comme dans l'image 1 et 2) qui doivent etre aligner entierement a droite du dernier lien . Quand le visiteur survolera les vignettes, une image agrandie s'ouvrira comme sur l'images a gauche des vignettes et dans le meme alignement. Voila pour ce que je souhaites.

Pour le moment comme vous le voyez sur le deuxieme block voila ce que j'ai et je n'arrive pas a me depatouiller c'est pourqoui je demande votre aide.

Une précision mes pages sont en PHP et le div qui contient mon menu de droite ne peux pas être modifier.

J'ai essayé de faire un peu de CSS mais je debutes et c'est pas evident . Voila ce que j'ai fait et qui donne le resultat que vous voyez dans le second block :

[code]<link rel="stylesheet" type="text/css"/>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.smallimgd {
position: relative;
visibility: visible;
top: 0px;
right: 0px;
width: 32px;
height: 26px;
margin-left: 100px;
margin-top: 30px;
z-index: 1;

}

.smallimgg {
position: relative;
visibility: visible;
top: 0px;
right: 0px;
width: 32px;
height: 26px;
margin-left: 100px;
margin-top: 30px;
z-index: 0;
}
/*]]>*/
</style>/code

Je sais que c'est pas top mais bon, on debute. Mais avec ce code le souci c'est que je n'arrive pas a aligner correctement les vignettes comme vous le voyer dans le menu du second block. j'ai peut etre une idée . Il faudrait que je place un autre div en hidden sur celui de mon menu qui serait le conteneur et qui contiendrait les deux div pour mes vignettes en float mais bon c'est qu'une idée. Mon agrandissement des vignettes est fais par du javascript de cette maniere mais la encore je pense qu'il y a mieux mais les connaissances me manquent et même en lisant les tutos presents sur le site et d'autres c'est pas evident de tout regrouper et surtout de l'appliquer.

[code]<div class="smallimgd">
<?php

switch($img){

case 1 : echo " <img src='petite_img.jpg' onMouseOver=\"this.src='grande_img.jpg'\" onMouseOut=\"this.src='petite_img.jpg'\"/>";
break;
etc....
}
?>
</div>
<div class="smallimgg">
<?php
switch($imgg){

case 1 : echo " <img src='small_img.jpg' onMouseOver=\"this.src='big_img.jpg'\" onMouseOut=\"this.src='small_img.jpg'\"/>";
break;
etc...
}
?>
</div>
/code

Voila donc si vous pouvez ou souhaitez m'aider je vous remercie mille fois.

A voir également:

3 réponses

briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
24 oct. 2008 à 21:31
Puis nje avoir tout le code ?
-1
pcsystemd Messages postés 691 Date d'inscription dimanche 27 novembre 2005 Statut Membre Dernière intervention 15 janvier 2024 22
24 oct. 2008 à 21:59
Voila cela et le code de ma page ou dois apparaitre les vignettes.

<?php 
/*
 * 
 */
require('fichier.php');
assert(is_subclass_of($elt, "b") || get_class($elt) == "b");
require_once ($HTTPDIR . $SITPHPSDIR . "/t/l.php");
$b = $elt->getVal();
$l = url_d_b_from_r($b);
/*
if (isset($b["p"])){ 
	$l = '/t_l/d.php?' . GSID . '&amp;r_b='. $b["u"] . '&amp;p='. $b["p"];
} else {
	$l = '/t_l/de.php?' . GSID . '&amp;r_b='. $b["u"];
}
*/
	 
require_once ($HTTPDIR . $SITPHPSDIR ."/b/l.php");
require_once ($HTTPDIR . $SITPHPSDIR . '/e/t_b.php'); 
require_once ($HTTPDIR . $SITPHPSDIR .'/e/r.php');
?>
<html>
<head
<div class="b-d">	
<div class="b-d-h">
<div class="r-d-s">
<a href="<?php echo $l_d?>" <?php echo (USE_REWRITED_URLS ? 'onclick="this.href=\'' . $l_d . '?p=' . $b['p'] . '\'"':'') ?>>
<?php 
echo ($b["r_t"] == 1 ? _('A'):_('L')) . ' ' . ucfirst(_($t_b[$b["r_b"]]["n"])) . ' ' . ($b["l_r"] == 0 ? (is_c_to_v_arr($b['c_q']) ? cv_t_v_arrdt($b['c_v']) : $b["ll"]) . ' - ':'');
echo ($b["s_t"]?$b["s_t"]:$b["s_h"]);
?> m<sup>2</sup>

<?php if (isset($b["de_p"]) && $b["n_p"] > 0) echo " - " . $b["n_pi"] . " " . _("Pi(s)"); ?>
</a>
</div>

<div class="re-d-p">


<?php 
</div>
<div class="spacer"></div>
</div>
	
<div class="op">
<div class="r-d-op">
<?php
require('b/op_mi.php');

if ($b["r_a"])

?>
<a href="javascript:void(0)" onclick="popup('/tr/co.php?r_a=<?php echo $b["r_a"]?>&amp;r_b=<?php echo $b["r_"]?>&amp;url_from=l_b','<?php echo _("C_n")?>','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=0,copyhistory=0,menubar=0,width=470,height=650')"><img src="/i/ec.gif" alt="<?php echo _("Ec"); ?>" /> <?php echo _("Ec"); ?></a><br />

<?php
div class="smallimgd"> 
<?php 

switch($img){ 

case 1 : echo " <img src='petite_img.jpg' onMouseOver=\"this.src='grande_img.jpg'\" onMouseOut=\"this.src='petite_img.jpg'\"/>"; 
break; 
etc.... 
} 
?> 
</div> 
<div class="smallimgg"> 
<?php 
switch($imgg){ 

case 1 : echo " <img src='small_img.jpg' onMouseOver=\"this.src='big_img.jpg'\" onMouseOut=\"this.src='small_img.jpg'\"/>"; 
break; 
etc... 
} 
?> 
</div> 


?>
--

Le div qui contiennent mon menu:

<div class="op">
<div class="r-d-op">

et cela et le code CSS du div qui contient mon menu que je ne peux pas modifier pour rappel :

.op .r-d-op, .
{ 
  background-color: #FDF8DB;
  border: 0px;
  border-top: 0px;
  margin: 5px;
  padding: 2px;
  padding-right: 10px;
  }
div.r-d-op
{ 
  float: right;
  width: 200px;
  clear: both;
  }

L'accès au savoir est la première liberté que chaque homme devrait avoir.
-1
briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 18
24 oct. 2008 à 22:43
DSL pour toi le code est un pe tiré par les cheveux.
Je comprends pas pourkoi tout le monde a tendance a chercher des trucs complexes
Je le simplifirais un pe plus tard.

A+
-1