Mise en page générale avec des DIV
Résolu
pcsystemd
Messages postés
734
Statut
Membre
-
briiiiix Messages postés 624 Statut Membre -
briiiiix Messages postés 624 Statut Membre -
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.
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:
- Mise en page générale avec des DIV
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
3 réponses
Voila cela et le code de ma page ou dois apparaitre les vignettes.
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 :
L'accès au savoir est la première liberté que chaque homme devrait avoir.
<?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 . '&r_b='. $b["u"] . '&p='. $b["p"];
} else {
$l = '/t_l/de.php?' . GSID . '&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"]?>&r_b=<?php echo $b["r_"]?>&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.