Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1852 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] position et display pour aligner 2 blocs

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] position et display pour aligner 2 blocs

n°825373
ACut
Posté le 17-08-2004 à 19:02:44  profilanswer
 

Bonjour,
 
Débutant en CSS, je n'arrive pas à résoudre un problème qui vous semblera probablement trivial.
 
Soient deux conteneurs #conteneur1{position:relative;display:block;width:100%;} et #conteneur2 (idem) qui se suivent verticalement.
 
J'ai besoin d'inscrire dans #conteneur1 deux contenus alignés (#bloc1 et #bloc2) tels que:
- #bloc1 possède une largeur absolue (width:150px) et une hauteur automatique;
- #bloc2 dispose de la largeur restant (100%-150px) et possède une hauteur automatique;
- #conteneur1 reçoive la hauteur maxi(#bloc1,#bloc2) -- de telle sorte que #conteneur2 s'empile derrière.
 
C'est donc une structure bateau du genre:
 

Code :
  1. +----------------+
  2. |+----++--------+|
  3. ||    ||        ||
  4. ||    ||        ||
  5. ||    ||        ||
  6. |+----++--------+|
  7. +----------------+
  8. +----------------+
  9. |                |
  10. +----------------+


 
Mon problème est que je n'arrive pas à spécifier les paramètres position et display de #bloc1 et #bloc2. En effet:
 
- avec {display:inline}, j'obtiens l'enchaînement horizontal mais la propriété {width:150px} n'est pas opérationnelle pour #bloc1 : sa largeur est automatique (intrinsèquement calculée). Je pourrais peut-être repositionner #bloc2 {position:relative?/absolute?;left:150px;} mais je perdrais de toute façon la surface et le background réel de #bloc1 ;
 
- avec {display:block}, je peux affecter un width aux blocs et tricher avec {position:absolute;} pour les placer à la suite -- #bloc1{left:0;top:0} et #bloc2{left:150px;top:0} --, mais alors la hauteur "finale" de #conteneur1 devient nulle car la spécificiation {position:absolute;} a retiré #bloc1 et #bloc2 du "flux normal". Du coup, #conteneur2 ne suit plus #conteneur1 mais le chevauche salement.
 
Je suppose qu'il y a une meilleure alternative (et j'aimerais éviter de tricher avec margin de #bloc2). Connaissez-vous une solution en pur positionnement de blocs?
 
Merci d'aider un newbie.


---------------
NOUVEAU! Le guide de l'édition en version ebook : http://marcautret.free.fr/autret/150q-ebook/
mood
Publicité
Posté le 17-08-2004 à 19:02:44  profilanswer
 

n°825405
MrFredG
Posté le 17-08-2004 à 20:03:15  profilanswer
 

Je pense que tu peux utiliser un div contenant 2 spans pour resoudre ton problème
tu peux specifier pour chaque span leurs dimensions
 
dans les grandes lignes:
 
div.container span.bloc1 {
 float: left;
 width: 150px;
}
 
div.container span.bloc2 {
float: right;
width: 200px;
}
dans le CSS
 
et  
<div class="container">
<span class="bloc1">contenu1</span>
<span class="bloc2">contenu2</span>
</div>
 
en HTML
 

n°825508
ACut
Posté le 17-08-2004 à 22:06:14  profilanswer
 

Merci MrFredG pour ta suggestion.
 
Ca ne semble pas fonctionner chez moi. Si je remplis bloc1 et bloc2 avec du contenu multiligne, bloc2 n'est plus en face de bloc1 mais repoussé vers le bas (tout en restant aligné à droite).
 
Par ailleurs, la solution des flottants n'est pas très praticable puisque la taille de bloc2 (qui devrait être l'espace restant à droite de bloc1) devient incalculable, sauf à faire des contorsions.
 
Je vais continuer à gamberger. Je suis très étonné que ce problème tout bête n'ait pas de solution simple...
 
Merci quand même.

n°825529
MrFredG
Posté le 17-08-2004 à 22:28:57  profilanswer
 

comme au thread voisin je ne peux que te conseiller de lire ces articles , tu y trouveras certainement la lumière :
http://www.openweb.eu.org/articles/initiation_float/

n°825601
ACut
Posté le 18-08-2004 à 02:51:25  profilanswer
 

MrFredG a écrit :

comme au thread voisin je ne peux que te conseiller de lire ces articles , tu y trouveras certainement la lumière :
http://www.openweb.eu.org/articles/initiation_float/


 
Certes, les flottants permettent de ruser un peu:
 
#bloc1{float:left;width:150px;}
#bloc2{float:left;}
 
est la seule solution *vaguement* satisfaisante.
 
Je note que laisser #bloc2 en flux normal le ferait courir sous #bloc1 quand height2>height1, ce qui n'est pas du tout l'objectif.
 
Toutes les tentatives de positionnement de #bloc2 (relatif, absolu) sont visiblement aberrantes avec #bloc1 flottant.
 
Reste que la solution *vaguement* satisfaisante ne permet pas de fixer correctement width de #bloc2 pour qu'il remplisse "de force" la largeur restante (un background montre bien que c'est la largeur intrinsèque du contenu qui est retenue).
D'autre part, les hauteurs des 2 blocs sont hétérogènes (idem, ça se voit avec le background), ce qui là encore ne satisfait pas le "cahier des charges".
 
Bref, après avoir cogité toute la journée, pas de solution pour ce problème "trivial" ! Il n'y a plus qu'à se rabattre sur une table HTML, je crois...
 
Merci encore pour ton aide, MrFredG.


---------------
NOUVEAU! Le guide de l'édition en version ebook : http://marcautret.free.fr/autret/150q-ebook/
n°825747
comar91
Posté le 18-08-2004 à 12:18:51  profilanswer
 

Bonjour,
As-tu éssayé  
#bloc1 {
position: absolute;
left:0;
width: 150px;
}
#bloc2 {
margin-left: 150px;
}
Bon courage

n°825797
ACut
Posté le 18-08-2004 à 13:28:17  profilanswer
 

comar91 a écrit :

Bonjour,
As-tu éssayé  
#bloc1 {
position: absolute;
left:0;
width: 150px;
}
#bloc2 {
margin-left: 150px;
}


 
Oui, c'est la technique que je voulais éviter -- avec margin. J'ai cru comprendre que le modèle de boîtes de Microsoft créait des merdes en permanence dans les calculs de width avec margin/border/padding. Et puis je préfère tenir pour indépendante la question des marges et espacements internes de #bloc1 et #bloc2, qui à mon sens ne devrait pas se mélanger avec le positionnement.
 
POUR INFO :
 
Le problème initial est décidément un problème de "table". Je peux encore éviter de baliser cette table en HTML (puisque la philosophie CSS tend à proscrire cet acte sacrilège) en utilisant la formule miracle suivante:
 
#conteneur{display:table; /*etc.*/}
#bloc1{display:table-cell; /*etc.*/}
#bloc2{display:table-cell; /*etc.*/}
 
Mais voilà, IE ne reconnaît pas cette attribution. Alors je pensais à une sorte de "hack" (très humblement) dans lequel les navigs connaissant display:table se comportent en "hauteurs homogènes" (table) tandis qu'IE, c'est un moindre mal, verrait encore des blocs selon la solution suggérée par MrFredG (les flottants).
 
Au final, ça ferait un truc du genre:

Code :
  1. #conteneur{display:bloc; /*etc*/}
  2. #conteneur{display:table;} /* IE ne pigera pas */
  3. #bloc1{float:left;width:150px;/*etc*/}
  4. #bloc1{display:table-cell;} /* IE ne pigera pas */
  5. #bloc2{float:left; /*etc*/}
  6. #bloc2{display:table-cell;} /* IE ne pigera pas */


 
...mais je ne sais pas du tout si ça marche avec tous les navigateurs.


---------------
NOUVEAU! Le guide de l'édition en version ebook : http://marcautret.free.fr/autret/150q-ebook/
n°826194
MrFredG
Posté le 18-08-2004 à 23:00:57  profilanswer
 

Sinon rien ne t empeche de charger un CSS specifique a IE et un autre pour les autres navigateurs.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] position et display pour aligner 2 blocs

 

Sujets relatifs
envoi automatique d'un formulaire / menu JS vs CSS[Résolu] 2 styles css différents pour les liens
Aide pour le csscss mozilla / ie (suite)
afficher CSS rapidement?[CSS] Probleme multi ligne dans une DIV
CSS/DIV Firefox/IE6 j'en peux plus...CSS - pbm avec le bouton d un input file
limite des CSS pour faire un cadre[CSS] firefox laisse un espace sous ma div de hauteur fixe...
Plus de sujets relatifs à : [CSS] position et display pour aligner 2 blocs


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR