Sujet Précédent Sujet Suivant

CSS / Problème de float & div

Fermé
SchtroumpfProgrammeur - 28 août 2008 à 12:07
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 28 août 2008 à 13:55
Bonjour à tous,

Je débute avec CSS et je me retrouve avec un problème. Plutôt que de mettre une floppée de code sans explications je vais plutôt détailler ce que je cherche à faire et ce que j'ai déjà fait.

Je dispose d'une première division (on va l'appeller DIV1) ainsi que d'une seconde division (DIV2) placée en float dans la première (DIV1). DIV2 a une hauteur plus petite que DIV1 de sorte qu'elle ne rempli qu'une petite partie de DIV1. Jusqu'ici pas de problèmes (normal)! Mon soucis c'est que j'aimerais rajouter une troisième division (DIV3) avec une bordure et une marge à gauche et à droite de 25px dans la première division (DIV1).

Le soucis c'est qu'en utilisant width: auto ou width: 100% la division prends toute la place disponible de DIV1 et empiète carrément au dessus de DIV2. Sous IE7 j'ai pu régler le problème en mettant DIV3 en display: inline-block et width: auto. Le problème c'est que cette solution ne fonctionne pas sous FireFox 2 & 3 et n'est (d'après quelques recherches rapides) d'ailleurs pas conforme au W3C. Bien entendu il est exclu de faire une marge égale à la largeur de DIV2 puisque DIV3 doit pouvoir s'adapter automatiquement en fonction de la présence ou non de DIV2 (pour rappel: DIV2 ne prends qu'une infîme partie de la hauteur de DIV1).

Quelqu'un aurait-il connaissance d'une façon de résoudre ce problème qui fonctionne dans la norme W3C ? Merci à tous ceux qui répondront mais aussi à ceux qui auront pris le temps de réfléchir pour m'aider :-)
A voir également:

5 réponses

Réponse 1 / 5
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 754
28 août 2008 à 13:16
Autant pour moi, je n'avais pas tout lu...
Une solution, ne sachant pas pourquoi tu veux faire ça consiste à :
1- inverser div2 et div3 effectivement,
2- div2 au lieu de float : right; mettre : margin-left: 320px (400 - 75 - bordures)
3- div3 ajouter : float:left;
ça rends à peu près ce que tu veux.
2
Réponse 2 / 5
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
28 août 2008 à 12:13
Pourquoi ne pas mettre un truc du genre: 
<div style="border-left: solid 1px #000000; border-right: solid 1px #000000; width: 800px">

sous IE les bordures ne sont pas comptés avec la taille de la largeur du DIV.
Sous firefox, la largeur des bordures est comprise dans la largeur de div, donc y mettre un width de 2 pixels de moins (798)
1
Réponse 3 / 5
SchtroumpfProgrammeur
28 août 2008 à 12:30
En fait ce n'est pas exactement ce que je cherche à faire. De plus j'utilise le modèle des boites "correcte" donc jen'ai pas de soucis de largeur. Je te mets le code HTML pour que tu puisses essayer sous IE7 (attention ça ne marche pas sous FireFox) : 

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>
<div id="DIV1" style="border: 1px solid #000000; width: 400px; height: 300px;">
  <div id="DIV2" style="width: 75px; height: 250px; float: right; border: 1px dotted #000000;"></div>

  <div id="DIV3" style="margin: 25px; width: auto; height: 50; border: 1px dashed #000000; display: inline-block;">display: inline-block</div>
</div>
</body>
</html>


NB: Tu remarqueras que même comme ça il y a toujours un problème, car DIV3 est collée contre DIV2 sans marge...
0
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
28 août 2008 à 12:57
Salut,

pour du inline-block, chez mozilla il s'écrit -moz-inline-block, donc pour les deux: 
display: inline-block, -moz-inline-block;


par la suite je n'ai pas réussi, à part les flotter à gauche et à droite.
J'espère que quelqu'un de plus compétent que moi saurait t'aider :(
0
Réponse 4 / 5
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 754
28 août 2008 à 12:54
Salut,
Inverse div2 et div3 dans ton code html :
<div id="DIV1" style="border: 1px solid #000000; width: 400px; height: 300px;">
<div id="DIV3" style="margin: 25px; width: auto; height: 50; border: 1px dashed #000000; display: inline-block;">display: inline-block</div>
<div id="DIV2" style="width: 75px; height: 250px; float: right; border: 1px dotted #000000;"></div>
</div>
et dis nous ce que tu en penses...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
SchtroumpfProgrammeur
28 août 2008 à 13:46
Merci à vous tous pour vos message. Malheuresement ça ne marche toujours pas :-(

Je ne peux malheureusement pas inverse DIV2 et DIV3 comme tu le proposes Pijaku car dans le site sur lequel je travaille (je n'ai posté qu'un exemple) la largeur de DIV1 est exprimée en pourcentage avec des max-min et il est donc difficile de spécifier une marge de largeur connue ou de positionner DIV2 en absolut ou autre...

Je ne vous cache pas en revanche que celà fait longtemps que je butte contre ce problème et que je si je suis venu ici c'est parce que j'étais à court d'idées :-/
0
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
28 août 2008 à 13:55
peut-être les placer séparément, les divs?
peut-être utiliser z-index ?
0

Discussions similaires

comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

Bonjour,

Je réalise un tableau dans lequel certaine cellule comporte des #div/0! Par une cellule vide.

Y a t il une possibilité ?

Merci à vous

Configuration: iPad / Safari 7.0

3 réponses
trait horizontal avec du css
tipi75 -
alainpre -

Bonjour,

Je n'arrive pas à faire un trait horizontal avec du css.

Merci pour votre aide

9 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

Bonjour,

Comment peut on faire pour mettres les indices (en bas de lettre petite taille) et les exposants (en haut de lettre petite taille) ?
Balise xhtml ou style css ?

Je n'aime pas la balise parce qu'elle me décale mes interlignes d'un demi point. créant une interligne de 1 et demi.
Y a t'il d'autres balises html ?

Et en css, quelle classe peut on créer ? Si ça existe....

Namasté
Yv

19 réponses
TypeError: can't multiply sequence by non-int of type 'str'
Barou_0442 -
yg_be -

Bonjour,

Je viens juste de commencer l'apprentissage de Python.

Je ne parviens pas à exécuter mon premier programme

#coding: utf8 l=input ("Entrez la largeur: ") h=input ("Entrez la hauteur: ") p=input ("Entrez la profondeur: ") print ("Volume du parallélépipède = ", +str(l*h*p)) Entrez la largeur: 7 Entrez la hauteur: 4 Entrez la profondeur: 8

TypeError Traceback (most recent call last)
in
2 h=input ("Entrez la hauteur: ")
3 p=input ("Entrez la profondeur: ")
----> 4 print ("Volume du parallélépipède = ", +str(l*h*p))

TypeError: can't mult...

7 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

Document initial créé par Jean-François Pillou

Par défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none :
Grâce au CSS Grâce au CSS via une classe Grâce au CSS en ligne Notre vidéo

Grâce au CSS Pour ce faire, il suffit de définir le code CSS suivant dans votre code HTML :

a:link
{
text-decoration:none;
}


Notez que la pseudo-classe :link permet de ne cibler que les liens hypertextes () et non les ancres (). Vous pouvez toutefois vous en passer si vo...

0 réponse