Div l'un a coté
Résolu/Fermé
A voir également:
- Div l'un a coté
- Div c++ - Télécharger - Langages
- Comment débloquer code mtn money cote d'ivoire ✓ - Forum compta / gestion
- Réinitialiser le mot de passe de mon mtn money ✓ - Forum compta / gestion
- Logitech g pro x son que d'un coté ✓ - Forum Casque et écouteurs
- Croix a cote du nom snap ✓ - Forum Snapchat
16 réponses
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 mai 2007 à 16:52
30 mai 2007 à 16:52
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 ?
gryzzly
Messages postés
4608
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
24 octobre 2020
1 329
29 mai 2007 à 22:39
29 mai 2007 à 22:39
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
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 mai 2007 à 15:05
30 mai 2007 à 15:05
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.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 mai 2007 à 21:03
30 mai 2007 à 21:03
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
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
29 mai 2007 à 23:36
29 mai 2007 à 23:36
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...
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 mai 2007 à 00:46
30 mai 2007 à 00:46
peter, cedric sont la même personne ?
oui dsl c'est moi cedric me suis planté de pseudo .
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 mai 2007 à 14:57
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.
(-;
Inscris-toi.
Ça t'évitera ça.
Et ça ne fait pas mal.
Et même, c'est gratuit.
(-;
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;}
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 mai 2007 à 19:55
30 mai 2007 à 19:55
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 :-/
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;
}
#menu {
border: 1px solid black;
width: 151px;
height: 164px;
margin: 0 0 20px ;
background: url("menu.gif");
padding: 0px;
float: left;
}