18041 sujets

Questions générales et questions de débutants

Contenu de droite qui glisse en dessous du gauche

Bonjour, je n'arrive pas à trouver comment faire pour que mon contenu de droite glisse sous mon contenu de gauche lorsque j'utilise le responsive. Au lieu de cela, mon contenu de gauche, qui est une image, rétrécie..

L'image est par défaut :
img {
    max-width: 100%;
}


Si je défini une taille height et widht en px, l'image reste fixe mais le texte vient se coller par dessus.
Du coup je ne sais pas si je doit faire les modifications sur l'image ou le texte.

L'affichage se fait comme ceci dans la page :

<div class="feeds_main">
<div class="feeds_img">
<a target="_blank" href="lien"><img src="images/.jpg" alt=""></a></div>
<div class="feeds_text">
<span><h3>Titre</h3> Blabalbal</span></div>
<div class="clear"></div>
</div>


Le css:
.feeds_main{
	padding: 10px;
	border-bottom: 1px solid rgb(228, 228, 228);
}
.feeds_img{
	float: left;
	width: 20.333333%;
}
.feeds_text{
	float: left;
	width: 74.333333%;
	margin-left: 5.33333%;
}
.feeds_text span{
	font-size: 0.8725em;
	color: #9CA4B1;
	vertical-align: baseline;
}
.feeds_text span a{
	color: #455670;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


J'ai fait de nombreuse recherche sur le net et je suis étonnée de ne pas trouver. Je doit pas être la seul à vouloir faire ca Smiley bawling comprend pas..
Merci pour votre aide Smiley cligne
Si tu définis les tailles de tes blocs en pourcentages, c'est normal qu'ils s'adaptent au redimensionnement de la page.

Ton interface est fluide, ça ne veut pas dire qu'elle est responsive, si tu veux qu'il y ait une réadaptation de tes éléments selon la taille de ta fenêtre de navigateur/ton écran, il faut utiliser les Média queries.
Bonne lecture Smiley biggrin

Du coup si tu veux que l'image passe en dessous il sera plus simple de la mettre après le texte, en float left. Puis d'enlever les float lorsque la résolution d'écran devient trop petite.
Merci Freez..c'est du chinois pour moi.. j'ai par exemple ajouté dans style.css :
@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}


puis dans mon head:
<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />


Mais il n'y a rien qui change.
Est ce qu'il y a de grosse modification à faire en fin de compte pour en arriver au résultat que je souhaite ? Si c'est trop compliqué pour un novice, je préfère savoir Smiley cligne
Je veux ben comprendre que tu sois débutant et que ce soit un peu compliqué à assimiler comme concepts mais la quand même ce serait de la magie que ça marche en copie-collant les exemples sans rien modifier Smiley sweatdrop .

Vire l'inclusion que tu as mis dans ton <head>, elle ne sert à rien. 

@media screen and (max-width: 640px) {
    /* Ce que tu écrit ici ne sera appliqué que quand l'écran est petit */
}


Maintenant tu bidouilles si tu veux mais je vais pas l'écrire à ta place Smiley cligne
Merci d'avoir essayé de m'aider Smiley cligne
Oui, je bidouillerai c'est sur Smiley lol quand je tomberai sur une explication simple à comprendre pour moi Smiley cligne
Sujet clos
Aller à