Div l'un a coté
Résolu
peter
-
cedric -
cedric -
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 .
Configuration: Windows XP Firefox 2.0.0.3
16 réponses
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 :
De plus, quelle est l'utilité d'avoir une “class windows1” ? Tu comptes l'utiliser plusieurs fois ?
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 ?
Grace à la propriété float et la position relative.
exemple ici : http://pompage.net/IMG/html/page_modele10.html
exemple ici : http://pompage.net/IMG/html/page_modele10.html
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 :
+ 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.
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.
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>
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">
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
ca ne marche pas , voici mon code html et css :
les paragraphes sont en plein dans mon div windows1...
<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...
ma foie je ne vois vraiment pas , a la base j'ai ca :
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 :
<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;
}
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 :
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;}
Remplace par :
<p> </p>Et propose une solution de remplacement aux systèmes qui n'ont pas Tahoma :
font-family: Tahoma, sans-serif;
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 ? :)
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 :-/
je sais plus quoi faire , mes 2 div que j'ai réussi a faire sont collés par le bas à mes paragraphes suivants :-/
