Positionner deux blocs div côte à côte
Fermé
vounce
Messages postés
6
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
14 juillet 2015
-
9 févr. 2014 à 19:51
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 févr. 2014 à 03:54
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 févr. 2014 à 03:54
A voir également:
- Mettre deux div cote à cote
- Croix a cote du nom snap - Forum Snapchat
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
- Comment débloquer code mtn money cote d'ivoire ✓ - Forum Gmail
- Pointage antenne canal plus cote d'ivoire - Forum TNT / Satellite / Réception
- Comment débloquer mon compte MTN mobile money ✓ - Forum compta / gestion
1 réponse
Salut,
Vous devez fermer votre premier div(s'agit il d'un oubli de copier coller?).
Après pour positionner 2 éléments il existe de nombreuses méthodes. Il suffit d'en utiliser une seule et là vous essayez d'en mettre plusieurs à la fois, forcément c'est un peu contradictoire.
Virez déjà vos position relative (sur le premier div? c'est relatif à quoi?) et le deuxième vous le mettez en absolute donc forcément il ne tient pas compte de l'autre div qui le précéde.
Or de nombreuses méthodes de positionnement se basent sur positionner un élément par rapport à un autre(par exemple avec float) dans l'ordre de leur apparition, donc on positionne le second par rapport au premier(tandis que là vous essayez de faire l'inverse). Si vous mettez absolute le positionnement se fait par rapport à .. je vous laisse relire votre cours.
Sinon vous avez cela aussi ça:
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
Vous devez fermer votre premier div(s'agit il d'un oubli de copier coller?).
Après pour positionner 2 éléments il existe de nombreuses méthodes. Il suffit d'en utiliser une seule et là vous essayez d'en mettre plusieurs à la fois, forcément c'est un peu contradictoire.
Virez déjà vos position relative (sur le premier div? c'est relatif à quoi?) et le deuxième vous le mettez en absolute donc forcément il ne tient pas compte de l'autre div qui le précéde.
Or de nombreuses méthodes de positionnement se basent sur positionner un élément par rapport à un autre(par exemple avec float) dans l'ordre de leur apparition, donc on positionne le second par rapport au premier(tandis que là vous essayez de faire l'inverse). Si vous mettez absolute le positionnement se fait par rapport à .. je vous laisse relire votre cours.
Sinon vous avez cela aussi ça:
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
Modifié par Rajo le 10/02/2014 à 02:45
.bloc_gauche.div{
float:left; <!----- POSITIONNEMENT FLOTTANT A GAUCHE(par rapport à l'élement suivant)-->
}
.bloc_droite.div{
float:right;<!----- POSITIONNEMENT FLOTTANT A DROITE(par rapport à l'élement précédent)-->
}
N'oubliez pas que float est à utiliser avec parcimonie, le 'flottement' des balises indiquent qu'elles sortent du flux, il est parfois nécessaire de rétablir le flux(ordre naturel des éléments) en indiquant avec un élément qui va suivre la propriété css clear:both; comme une balise de saut de ligne:
<br style='clear:both;' />
*notez aussi que bloc_gauche et bloc_droite sont déjà plus parlant que bloc-1 bloc-2, imaginez vous en avez 50 comment allez vous reconnaître à quoi correspond bloc_37 ? Impossible tandis qu'en écrivant à quoi correspond quoi de façon explicite ça aidera.
*j'ai utilisé une class plutôt qu'une id car si vous voulez réutiliser vos classes vous pouvez(contrairement à l'id qui est unique comme vous le savez).
le .div de bloc_gauche.div n'est pas obligatoire, il oblige par contre(en le mettant) à utiliser la classe pour un div uniquement(en général ce sont les div(de divide) qui sont utilisés pour ça, span étant l'équivalent mais pour un élément de texte uniquement(donc dans une balise de texte).
Modifié par animostab le 10/02/2014 à 03:55
au lieu d'utiliser 2 div avec des id différentes utiliser 2 div avec la meme class
<div class="div1></div>
<div class="div1></div>
le css
.div1 {
width:200px;
height:200px;
display:inline-block;
border: 5px solid black;
background-color: green;
text-align:center;
}
seul truc inline-block crée un espace entre les 2 div appelé white-space mais une petite recherche te donnera quelques astuces pour résoudre le problème du white space.
tu peux faire aussi le width en pourcentage pour avoir du responsive