Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Problème pour aligner deux blocs

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème pour aligner deux blocs

Message par Eddard le Jeu 24 Avr 2014 - 2:25

Salut à tous !

Je sais qu'il est tard et je ne pense pas recevoir de réponse avant demain matin, mais justement, je prend de l'avance ^^

Je suis actuellement en train de créer le design de mon forum. Il est presque fini et j'en suis à la PA. Seulement, j'ai un gros problème, et cela n'est pas la première fois que ça m'arrive : je n'arrive pas à aligner deux blocs, comme vous pouvez le voir sur ce screen : https://i.imgur.com/KDZBHGU.png

Comme vous le voyez, le bloc devrait se trouver à l'endroit pointé par les flèches mais décale bêtement vers le bas, sous les forums. J'ai essayé plusieurs techniques pour en venir à bout, comme les margin (j'ai aussi essayé de faire, par exemple, margin-left: -1px au lieu de margin-right: 1px;), position:absolute (ne marche pas car ça décale selon l'écran et le navigateur), display: block, inline, inline-block... Rien.

Pouvez-vous m'aider ? J'aimerais vraiment pouvoir en finir et ouvrir mon forum pour de bon !

Merci beaucoup !

P.S: Au cas où, voici les codes HTML et CSS de la PA :

HTML :

Code:
<div style="width: 95%; height: 346px; border-top: 3px solid #279798; border-bottom: 3px solid #279798; border-left: 1px solid #279798; border-right: 1px solid #279798; background: url(http://i.imgur.com/CgLJidx.png) no-repeat, #FFFFFF;">
   
   <div class="colonne1">Texte
   </div>
   
   <div class="colonne2">
       Texte
   </div>
</div>

CSS :

Code:
/*CSS de la PA*/

.colonne1 {
  display: inline-block;
  width: 230px;
  height: 315px;
  border-top: 3px solid #279798;
  border-bottom: 3px solid #279798;
  border-left: 1px solid #279798;
  border-right: 1px solid #279798;
  background: #FFFFFF;
  padding: 5px;
  margin-top: 7px;
  margin-right: 550px;
  text-align: left;
}

.colonne2 {
  display: inline-block;
  width: 230px;
  height: 315px;
  border-top: 3px solid #279798;
  border-bottom: 3px solid #279798;
  border-left: 1px solid #279798;
  border-right: 1px solid #279798;
  background: #FFFFFF;
  padding: 5px;
  margin-top: 7px;
  text-align: left;
}
Eddard

Eddard
**

Masculin
Messages : 75
Inscrit(e) le : 09/07/2012

http://dorion.jdrforum.com
Eddard a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour aligner deux blocs

Message par MasDan le Jeu 24 Avr 2014 - 4:36

Bonjour,

Il faut utiliser «float» pour attacher vos «div» à la bordure..

Remplacer vos codes par ceci

HTML
Code:
 <div class="divSup">
    <div class="colGau">
  Texte du bloc de gauche
    </div>
    <div class="colDr">
      Texte du bloc de droite
    </div>
  </div>

CSS
Code:
.divSup {
 width: 95%;
 height: 336px;
 border-top: 3px solid #279798;
 border-bottom: 3px solid #279798;
 border-left: 1px solid #279798;
 border-right: 1px solid #279798;
 background: url(http://i.imgur.com/CgLJidx.png) no-repeat, #FFFFFF;
   padding: 5px;
 margin: auto;
 }

.colGau {
  float: left;
 }
 
.colDr {
  float: right;
}

.colGau, .colDr {
  width: 230px;
  height: 315px;
  border-top: 3px solid #279798;
  border-bottom: 3px solid #279798;
  border-left: 1px solid #279798;
  border-right: 1px solid #279798;
  background: #FFFFFF;
  text-align: left;
}
MasDan

MasDan
Aidactif
Aidactif

Masculin
Messages : 1358
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour aligner deux blocs

Message par Eddard le Jeu 24 Avr 2014 - 12:25

Merci beaucoup ! J'avais complètement oublié float ! Smile
Eddard

Eddard
**

Masculin
Messages : 75
Inscrit(e) le : 09/07/2012

http://dorion.jdrforum.com
Eddard a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum