Sujet Précédent Sujet Suivant

Alignement blocs CSS

Résolu/Fermé
Hurobaki Messages postés 53 Date d'inscription dimanche 23 mars 2014 Statut Membre Dernière intervention 10 mars 2017 - 28 mars 2014 à 00:05
Hurobaki Messages postés 53 Date d'inscription dimanche 23 mars 2014 Statut Membre Dernière intervention 10 mars 2017 - 28 mars 2014 à 07:49
Bonjour à tous ! J'ai des soucis avec le positionnement des blocs avec mon CSS 
div#bandeau {
	width:20%;
	height:150px;
	background-color:red;
	display:block;
	}
div#test {
	height: 500px;
	background-color: blue;
	margin-left: 500px;
	margin-bottom: 1500px;
	display:inline;
	width: 500px;
	}


Bon je sais que ce code est très court, le but que je voudrai atteindre est de mettre des blocs sur la gauche de la page en horizontal les uns sur les autres mais aussi de pouvoir en placer sur la droite. Je me suis renseigner avec les display, dans mon code j'ai un display block et un autre inline pour pouvoir aligner.
Or dans mon CSS les paramètres que je modife sur le div#test ne font rien du tout ...

J'espère que des gens indulgents vont pouvoir m'expliquer comment faire ^^

http://www.hostingpics.net/viewer.php?id=476136schema.png Voici ce que je voudrai obtenir ( un chef d'oeuvre ! :p)

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 28/03/2014 à 03:42
Salut

voila la solution

le html 

<div id="contener">
  <div id="haut">
     <div id="hautgauche"></div>     
     <div id="hautdroit"></div>
     <div id="hautcentre"></div>
  </div>
  <div id="content">
      <div id="gauche">
            <div id="hautcontent"></div>
            <div id="bascontent"></div>
      </div>
      <div id="contentdroite"></div>
  </div>
</div>

le css 



body {
margin:0;
padding:0;
}

#contener {
margin:5px;
}

/*******haut********/
#haut {
width:100%;
height:100px;
border-bottom:3px solid black;
}

#hautgauche {
width:150px;
height:100px;
float:left;
border-right:3px solid black;
}

#hautdroit {
width:150px;
float:right;
height:100px;
border-left:3px solid black;
}

#hautcentre {
margin:0 153px;
height:100px;
}

/*******content**********/

#content {
width:100%;
height:auto;
}

/**gauche**/

#gauche {
width:150px;
float:left;
border-right:3px solid black;
}

#hautcontent {
width:100%;
height:500px;
border-bottom:3px solid black;
}

#bascontent {
width:100%;
height:100px;
}

/**droite**/

#contentdroite {
margin: 0 0 0 150px;
}


Voila j'espère que ca te vas

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
Hurobaki Messages postés 53 Date d'inscription dimanche 23 mars 2014 Statut Membre Dernière intervention 10 mars 2017
28 mars 2014 à 07:49
Bonjour Animostab,

Ta solution marche parfaitement ! Je te remercie pour cette réponse claire et précise qui vient d'égayer ma journée !

Donc un énorme merci à toi !

Bonne journée
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
supprimer la page d'alignement
FrancoisDelpla -
Laurent -

5 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses