[réglé]mettre un texte en face de mon widgetkit, deux div côte à cote ?[réglé]

07 Jan 2016 15:11 - 18 Jan 2016 15:39 #1 par Elizabeth
Bonjour à tous,

Je rencontre un petit problème de mise en page, dans un site en responsive design,
je souhaite placer dans ma page un texte, avec en face un module widgetkit.
Si je place un tableau avec le texte dans la première cellule et le widget dans la seconde j'obtiens ce que je souhaite dans une présentation "écran d'ordinateur".
Malheureusement avec cette solution, en présentation i-phone les blocs restent côte à côte et non pas l'un sous l'autre comme je le souhaiterai.
(je vous ai fait un petit schéma de ce que je souhaite)


Avec une image à la place d'un widget il suffit d'indiquer align="left", mais ça ne fonctionne pas avec le widget.

J'ai essayé de mettre deux tableaux ainsi :
(ajouté dans custom.css) :
.tableaux{
display:inline-block;
vertical-align:top;
}
puis dans la page :
<div class="tableaux"> mon texte </div>
<div class="tableaux"> mon widget</div>

ou deux div :
(ajouté dans custom.css) :
#Global
{
width:100%;
}
#Global#gauche
{
position:relative;
width:50%;
}
#Global#droite
{
position:relative;
left:50%;
width:50%;
}
puis dans la page :
<div id="Global">
<div id="gauche">Ici le bloc de texte de gauche</div>
<div id="droite">[widgetkit id="87" name="methode"]</div>
</div>

mais le widget se place en dessous de mon texte, pas à côté.

Que me conseillez-vous ?

Avec mes remerciements,

E.
Pièces jointes :

Connexion pour participer à la conversation.

07 Jan 2016 15:32 #2 par Christian Bardin
Hello Elizabeth, tu aurait un lien ou c'est en local?

Connexion pour participer à la conversation.

07 Jan 2016 16:03 #3 par toffffe
Bonjour Elizabeth,
as tu bootstrap ou un autre framework qui tourne sur ton site ?
Si oui il faut utiliser les grilles fourni par ces outils
Sinon il faut utiliser des div id="" et faire des float: left;
et ensuite avec les media query dire qu'à partir de une largeur de 480px par exemple que ça ne float plus

Site Joomla professionnel à 590€ HT tout inclus : solution Mélijoy
Spécialiste référencement joomla , agence web mulhouse spécialiste joomla et conception de site responsive

Connexion pour participer à la conversation.

14 Jan 2016 10:33 #4 par Elizabeth
Bonjour et merci Christian, Toffe,

Le site est en ligne, je fais quelques ajustements. Je peux vous donner le lien en mp si nécessaire, je ne veux pas risquer de référencer le lien dans ce message ;o)
Dans la pj vous verrez le résultat, et l'adresse si vous souhaitez.

Toffe, je n'ai rien installé de plus que le Joomla et le template.
J'ai essayé la méthode des div :
dans le custom :
#gauche
{
    float:left;
	/*padding-left:5%;*/
    width:45%;
}
#droite
{
    float:right;
	padding-top:5%;
	padding-bottom:5%;
    width:45%;
}

et dans la page :
<div id="gauche"> texte </div>
<div id="droite">[widgetkit id="87" name="xxx"]</div>

J'obtiens le même résultat qu'avant : le texte est bien à gauche, le widget à droite, mais lorsque le site est affiché sur i-phone les div restent l'un en face de l'autre, et pas l'un sous l'autre.

pour les images, le code qui fonctionne est le suivant :
<p><img src="nom_image.jpg" style="float: right;" title="xxx" /></p>
<p style="text-align: justify;">texte.</p>
comment le transposer avec un widgetkit ?

J'ai essayé :
<p style="float: right;">[widgetkit id="87" name="methode"]</p>
<p style="text-align: justify;">texte</p>

et
<div style="float: right;">[widgetkit id="87" name="methode"]</div>
<p style="text-align: justify;">texte</p>




Avec mes remerciements...
Pièces jointes :

Connexion pour participer à la conversation.

15 Jan 2016 07:51 #5 par toffffe
Salut Elizabeth
Je viens juste de regarder ton code
Il faut maintenant que tu utilises en bas de ta feuille css les media query afin de dire qu'à partir d'une certaine largeur tu ne veux plus de float
exemple car je suis sympa :) :

@media (max-width: 768px) {
#gauche{width: 100%;}
#right{width: 100%;}
}


Site Joomla professionnel à 590€ HT tout inclus : solution Mélijoy
Spécialiste référencement joomla , agence web mulhouse spécialiste joomla et conception de site responsive
Les utilisateur(s) suivant ont remercié: Elizabeth

Connexion pour participer à la conversation.

18 Jan 2016 15:20 #6 par Elizabeth
Merci Tofffe !!!!

ça marche impec :)

Je récapitule donc, pour ceux que ça intéresse, la solution pour mettre côte à côte un texte et un diaporama widgetkit, qui passent l'un sous l'autre en affichage sur un mobile :

Dans le code source de la page :
<div id="gauche"> texte </div>
<div id="droite">[widgetkit id="87" name="xxx"]</div>

Dans le fichier custom.css :
#gauche
{
    float:left;
    width:45%;
}
#droite
{
    float:right;
    width:45%;
}
@media (max-width: 768px) {
#gauche
{width: 100%;}
#droite
{width: 100%;}
}

Merci,
Elizabeth

Connexion pour participer à la conversation.

Temps de génération de la page : 0.237 secondes

Sur ce site, nous utilisons des cookies.