Création
d'entreprise
Posez votre question Signaler

Div l'un a coté [Résolu]

peter - Dernière réponse le 31 mai 2007 à 19:35
Bonsoir , j'aimerais savoir comment faire pour mettre 2 div l'un a coté de l'autre svp , car ils se mettent par défaut l'un en dessous de l'autre , merci .
Lire la suite 

Div l'un a coté »

17 réponses
Réponse
+11
moins plus
Il faut absolument que tu lises attentivement les choses qu'on te propose.
Elles contiennent des infos qui te sont utiles.

Par exemple, l'exemple donné en <1> ne réponds pas seulement à ta question initiale. Il mets les différents élément dans un contexte. Il montre comment placer des blocs côte-à-côte avec “float” puis comment revenir à un flux normal après des “float”.
Adapté à ton cas, le #menu est en float:left; et le .windows1 aussi.
C'est le float qui permet de les placer les uns à côté des autres.
Ici, le “position : relative;” n'est pas vraiment important.
http://cjoint.com/data/fEre3JwIXM.htm

Il serait aussi plus logique que tu fasses :
<div id="menu">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>
que tu mettes l'<ul> dans une <div> à laquelle tu appliqueras le float.

De plus, quelle est l'utilité d'avoir une “class windows1” ? Tu comptes l'utiliser plusieurs fois ?
Ajouter un commentaire
Réponse
+5
moins plus
Grace à la propriété float et la position relative.

exemple ici : http://pompage.net/IMG/html/page_modele10.html
Ajouter un commentaire
Réponse
+1
moins plus
Si tu regardes bien les exemples que nous t'avons proposés, tu remarqueras que le mélange “position: absolute;” et “float: …;” n'a pas été utilisé.
C'est soit l'un, soit l'autre.

Et que des dimensions ont été systématiquement appliquées :
    position: relative; 
    width: 25%; 
et
    position: absolute; 
    width: 230px:
Pour ma part, en général, j'ai un faible pour le “float”.

+ Pour que le “absolute” fonctionne sans trop de surprises, il est nécessaire de préciser une “position: relative;” au bloc qui le contient. Sinon, c'est le 1er bloc avec cette précision qui est pris en compte.
Ajouter un commentaire
Réponse
+1
moins plus
J'utilise le <br> plutôt dans les <p> pour aller à la ligne.
Et si tous tes <p> ont la même mise en forme, tu risques de te limiter.

Le <p> que tu cites possède un “clear : left;”. On suppose donc qu'il sert à “annuler” les “float : left;” précédents.
Tous tes <p> suivront des float ?
Non. Alors définis un style particulier pour ce <p> particulier.

Ou alors précise les <br>
    #saut {
      line-height : 52px;
      }
et
    <br id="saut">
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour,

De manière plus rigide, on peut aussi le faire en “position : absolute” :
http://pompage.net/IMG/html/page_modele09.html

Tu peux aussi les transformer en “display:inline;”
Mais, bof…

+ http://edu.ca.edu/selfhtml/navigation/css.htm#positionnement
Ajouter un commentaire
Réponse
+0
moins plus
ca ne marche pas , voici mon code html et css :

<ul id="menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

<div class="windows1">
</div>

<p>...</p>


#menu {
border: 1px solid black;
width: 150px;
padding: 0px;
position: relative; 
float: left;
}

.windows1 {
width: 400px;
height: 123px;
border: 1px solid black;
position: absolute;
float: left;
margin-left: 5px;
}


les paragraphes sont en plein dans mon div windows1...
Ajouter un commentaire
Réponse
+0
moins plus
peter, cedric sont la même personne ?
Ajouter un commentaire
Réponse
+0
moins plus
oui dsl c'est moi cedric me suis planté de pseudo .
Gihef- 30 mai 2007 à 14:57
“me suis planté de pseudo”
Inscris-toi.
Ça t'évitera ça.
Et ça ne fait pas mal.
Et même, c'est gratuit.
(-;
Ajouter un commentaire
Réponse
+0
moins plus
quelqu'un aurait il une idée svp ?

merci
Ajouter un commentaire
Réponse
+0
moins plus
ma foie je ne vois vraiment pas , a la base j'ai ca :

<ul id="menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

<div class="windows1">
</div>

<p>...</p>


quand je mets le menu en float left ou en position relative ou les 2 , il se retrouve en plein dans les <p> et je cherche a mettre le div windows1 a coté du div menu mais jvois pas du tt comment faire j'ai essayé comme dans vos exemples et ca marche pas . voici le code css du menu :

#menu {
border: 1px solid black;
width: 150px;
padding: 0px;
}
Ajouter un commentaire
Réponse
+0
moins plus
j'ai reussi a faire ce que je voulais jte remercie , par contre 1 autre petit soucis apparait :

j'ai mis un br sous les 2 div , mais ca passe pas de ligne par rapport aux paragraphes :

<div id="menu">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>

<div id="windows1"></div>

<br>

<p>...</p>


#menu {
border: 1px solid black;
width: 151px;
height: 164px
background: url("menu.gif");
padding: 0px;
float: left;
}

#menu li a {
margin-bottom: 1px ;
height: 41px;
display: block;
}

#windows1 {
float: left;
width: 439px;
height: 164px;
border: 1px solid black;
margin-left: 5px;
}

p {border:1px #000000; background:#ffffff; text-align:center; color:#000000; font-family: Tahoma; font-size:13px; clear: left;}

Ajouter un commentaire
Réponse
+0
moins plus
Remplace par :
  <p>&nbsp;</p>
Et propose une solution de remplacement aux systèmes qui n'ont pas Tahoma :
  font-family: Tahoma, sans-serif;
Ajouter un commentaire
Réponse
+0
moins plus
sur le fond ca marche mais dans mon cas ca ne fait pas d'espace , ca me fait un paragraphe sur fond de couleu bleu , car tous mes paragraphes sont en fond de couleur bleu , ya donc pas moyen de passer une ligne ? :)
Ajouter un commentaire
Réponse
+0
moins plus
j'ai essayé avec ta seconde solution et ca ne change rien de particulier , c'est quand meme fou que pour passer une simple ligne je dois faire un truc sophistiqué alors qu'avant avec br ca marchait tt seul !!!

je sais plus quoi faire , mes 2 div que j'ai réussi a faire sont collés par le bas à mes paragraphes suivants :-/
Ajouter un commentaire
Réponse
+0
moins plus
Et jouer avec les margin plutot que de faire des sauts de ligne ?
#menu {
border: 1px solid black;
width: 151px;
height: 164px;
margin: 0 0 20px ;
background: url("menu.gif");
padding: 0px;
float: left;
}
Ajouter un commentaire
Réponse
+0
moins plus
nikel ca marche , un grand merci a gihef pour toute son aide precieuse et a toi aussi pour cette reponse utile .
Ajouter un commentaire
Ce document intitulé « div l'un a coté » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?