Div l'un a coté
Résolu
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
-
ContributeurIl 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 ?
-
ContributeurGrace à la propriété float et la position relative.
exemple ici : http://pompage.net/IMG/html/page_modele10.html -
ContributeurSi 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%;etposition: 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.
-
ContributeurJ'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">
-
ContributeurBonjour,
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 :
<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... -
Contributeurpeter, cedric sont la même personne ?
-
oui dsl c'est moi cedric me suis planté de pseudo .
-
quelqu'un aurait il une idée svp ?
merci -
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; } -
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;} -
ContributeurRemplace 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 :-/ -
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;
} -
nikel ca marche , un grand merci a gihef pour toute son aide precieuse et a toi aussi pour cette reponse utile .
