High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

[css] display inline

Dernière réponse le 27 nov 2007 à 14:39:29 kij_82, le 27 nov 2007 à 11:43:43 
 Signaler ce message aux modérateurs

Bonjour,

Je cherche à aligner en ligne deyx DIV qui se suivent. Seulement je dois mal m'y prendre (pas très doué en css je dois le dire) et au lieu que ces deux DIV soit alignées, elle se retrouve l'une en dessous de l'autre.
Voici mon code pour le moment : 

<div style="display:block;" id="display1">
   <table border="0" bordercolor="deeppink" cellpadding="2" cellspacing="0">
       <!-- Plusieurs éléments sont affichés dans une table -->
   </table>
</div>
<div style="display:inline;" id="display2">
   <table border="0" bordercolor="deeppink" cellpadding="2" cellspacing="0">
       <!-- Plusieurs éléments sont affichés dans une table -->
   </table>
</div>


Je voulais savoir si quelqun pouvait éventuellement me montrer comme s'y prendre pour mener à bien cette mise en page ?

Merci pour votre aide.


PS: Ma page doit être compatible IE.

~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~
Configuration: Windows XP
Firefox 2.0.0.10

Meilleures réponses pour « [css] display inline » dans :
CSS / Problème de float & div Voir
Différence entre display:none et visibility:hidden Voir Les deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible....
[CSS] display: {block|none}; TABLE sous IE??? Voir
[CSS] Créer facilement des CSS VoirUn outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle. La version Lite est gratuite. http://www.topstyle4.com/
Les inlines en C++ VoirSignification Exemple 1 Inline et headers Exemple 2 Signification Le mot-clé inline est utilisé en C++ et s'applique à une fonction. Il indique au compilateur que chaque appel à la fonction inline devra être remplacé par le corps de cette...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Posez votre question Répondre

1

pashmina, le 27 nov 2007 à 11:51:41

T'as essayé avec float et clear?
Qui vole un boeuf est vachement costaud

   
Répondre à pashmina

2

kij_82, le 27 nov 2007 à 11:55:52

EDIT:

J'ai essay de changé avec les valeurs suivantes :

DIV 1 : DIV 2 :
block inline
block clear
clear clear
block float
float float

Mais rien ne semble fontionner :s

Je ne connais pas les valeur 'clear' et 'float', par contre j'ai tenté le 'inline-block' mais ca ne fonctionne pas plus.

~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~

   
Répondre à kij_82

3

pashmina, le 27 nov 2007 à 12:05:10
  • +3

Tu as 2 possibilités

1. tu crée un tableau avec une ligne et deux colonnes, tu positionne tes div dans les deux cellules.

2. tu donne une position à tes div avec des CSS :
html :

<body>
<div id="texte1">texte 1</div>
<div id="texte2">texte 2</div>
</body>


CSS :

div#texte1{
width:50%;
background-color:#F3C;
float:left;

}
div#texte2{
width:50%;
background-color:#9F0;
float:left;
text-align: right;
}

Qui vole un boeuf est vachement costaud

   
Répondre à pashmina

4

kij_82, le 27 nov 2007 à 12:10:08

Mega merci à toi pashmina, j'ai opté pour la solution 2 et ca fonctionne très très bien :)
Je vois également mieux comment on utilise float maintenant :)

~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~

   
Répondre à kij_82

7

pashmina, le 27 nov 2007 à 13:44:41

Ravie d'avoir pu t'aider! ;)
Qui vole un boeuf est vachement costaud

   
Répondre à pashmina

5

warlix, le 27 nov 2007 à 12:28:50
  • +1

Salut


je ne travail pas avec des table , ton code me laisse perplexe avec un

<div style="display:block;" id="display1">
pourquoi ne pas faire 

<body>
<div id="content">

<div class="bloc1">celui de gauche</div>
<div class="bloc2">celui de droite</div>


</div>
</body>

et un css de  :

#content {
margin: auto;
text-align: center;
width: 900px;
}

.bloc1 {
background-color: blue;
height: 100px;
width: 400px;
float: left;
}
.bloc2 {
background-color: yellow;
height: 100px;
width: 400px;
float: left;
margin-left: 20px;
}



enfin dans le style
la tristesse c est de ne pas savoir que l on est heureux !

   
Répondre à warlix

6

kij_82, le 27 nov 2007 à 13:08:11

Tu remarquera que ta réponse est exactement la même que celle de pashmina ;) Merci à toi aussi.

~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~

   
Répondre à kij_82

8

 warlix, le 27 nov 2007 à 14:39:29

Re ^^
posté presque en même temps , moi le temps de regarder sur dream ce que ça donnait , mais pas vraiment les mêmes non plus :)
la tristesse c est de ne pas savoir que l on est heureux !

   
Répondre à warlix
Posez votre question Répondre
Ils ont besoin de votre aide